OG Image Generator
No credit card required
OG Image Generator
No credit card required
OG Image Generator is a tool that lets you dynamically create OG images from your HTML templates via an API. The tool is flexible, allowing you to use the default template or create fully custom templates.
You can access the OG Image Generator programmatically from your own JavaScript applications by using the Apify API. You can also choose the language preference from below. To use the Apify API, you’ll need an Apify account and your API token, found in Integrations settings in Apify Console.
1import { ApifyClient } from 'apify-client';
2
3// Initialize the ApifyClient with your Apify API token
4// Replace the '<YOUR_API_TOKEN>' with your token
5const client = new ApifyClient({
6 token: '<YOUR_API_TOKEN>',
7});
8
9// Prepare Actor input
10const input = {
11 "html": `<!DOCTYPE html>
12 <html lang="en">
13 <head>
14 <meta charset="UTF-8">
15 <meta name="viewport" content="width=device-width, initial-scale=1.0">
16 <script src="https://cdn.tailwindcss.com"></script>
17 </head>
18 <body class="bg-gray-100 text-gray-900 flex items-center justify-center h-screen">
19
20 <!-- OG Image Container -->
21 <div class="relative bg-white w-[1200px] h-[630px] rounded-lg shadow-xl border border-gray-200 overflow-hidden">
22
23 <!-- Background Accent -->
24 <div class="absolute inset-0 bg-gradient-to-r from-indigo-100 via-pink-100 to-yellow-100 opacity-50"></div>
25
26 <!-- Logo -->
27 <div class="absolute bottom-6 left-6">
28 <img src="{{logoUrl}}" alt="Blog Logo" class="h-10">
29 </div>
30
31 <!-- Content Wrapper -->
32 <div class="relative flex flex-col h-full p-16">
33
34 <!-- Blog Category -->
35 <div class="text-base uppercase tracking-wider text-indigo-500 font-semibold mb-6">{{category}}</div>
36
37 <!-- Blog Title -->
38 <h1 class="text-6xl font-bold leading-tight text-gray-800 mb-8">{{title}}</h1>
39
40 <!-- Author and Date -->
41 <div class="flex items-center space-x-6 text-gray-600 text-xl">
42 <div class="flex items-center space-x-3">
43 <img class="w-12 h-12 rounded-full" src="{{authorImage}}" alt="{{author}}">
44 <span>{{author}}</span>
45 </div>
46 <span>•</span>
47 <span>{{date}}</span>
48 </div>
49 </div>
50 </div>
51
52 </body>
53 </html>`,
54 "templateData": {
55 "category": "Technology",
56 "title": "How to create dynamic OG title for your web",
57 "logoUrl": "https://w7.pngwing.com/pngs/243/698/png-transparent-apify-logo-tech-companies.png",
58 "date": "January 3, 2025",
59 "author": "Daniil Poletaev",
60 "authorImage": "https://images.apifyusercontent.com/rO00zibE4A243KKKW3pwsdT-IXjgOFWuA2s4RJV_7VM/rs:fill:70:70/aHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EvQUNnOG9jSWRPZ1QxMHAxblVSbGhKZUswSlZUdXpLZzJmVWN6MkEtNGZka1hwVWRSX1NtOVFSZw"
61 }
62};
63
64// Run the Actor and wait for it to finish
65const run = await client.actor("daniil.poletaev/og-image-generator").call(input);
66
67// Fetch and print Actor results from the run's dataset (if any)
68console.log('Results from dataset');
69console.log(`💾 Check your data here: https://console.apify.com/storage/datasets/${run.defaultDatasetId}`);
70const { items } = await client.dataset(run.defaultDatasetId).listItems();
71items.forEach((item) => {
72 console.dir(item);
73});
74
75// 📚 Want to learn more 📖? Go to → https://docs.apify.com/api/client/js/docsOG Image Generator API in JavaScript
The Apify API client for JavaScriptis the official library that allows you to use OG Image Generator API in JavaScript or TypeScript, providing convenience functions and automatic retries on errors.
Install the apify-client
npm install apify-clientOther API clients include:
Daniil PoletaevActor Metrics
1 monthly user
-
1 star
>99% runs succeeded
Created in Jan 2025
Modified 2 days ago
