How to Add OG Images to Any HTML Website
Add Open Graph images to any HTML website in 2 minutes. Copy-paste meta tags for static sites, WordPress, Hugo, Jekyll, and any HTML page.
Quick Answer
To add an OG image to any HTML page, add a <meta property="og:image" content="https://your-image-url.png"> tag inside the <head> section. The image URL must be absolute (starting with https://). The recommended image size is 1200x630 pixels.
Basic HTML Meta Tags
Copy and paste these meta tags into your HTML <head> section:
<!DOCTYPE html>
<html>
<head>
<!-- Basic page info -->
<title>Your Page Title</title>
<meta name="description" content="A brief description of your page" />
<!-- Open Graph / Social Media -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A brief description" />
<meta property="og:image" content="https://ogimg.xyz/api/og?title=Your+Page+Title&template=gradient" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://yoursite.com/page" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A brief description" />
<meta name="twitter:image" content="https://ogimg.xyz/api/og?title=Your+Page+Title&template=gradient" />
</head>
<body>
<!-- Your page content -->
</body>
</html>Replace the title, description, and URL with your actual page data. The og:image URL points to ogimg.xyz, which generates the image automatically.
WordPress
For WordPress, the easiest approach is using a plugin like Yoast SEO or Rank Math and setting the OG image to your ogimg.xyz API URL.
Or add meta tags manually in your theme's header.php:
<?php // In header.php, inside <head> ?>
<meta property="og:image" content="https://ogimg.xyz/api/og?title=<?php echo urlencode(get_the_title()); ?>&template=blog" />Hugo
In your Hugo layout's baseof.html or head.html partial:
{{ $ogImage := printf "https://ogimg.xyz/api/og?title=%s&template=blog" (urlquery .Title) }}
<meta property="og:image" content="{{ $ogImage }}" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />Jekyll
In your Jekyll layout's head.html include:
{% assign og_image = "https://ogimg.xyz/api/og?title=" | append: page.title | url_encode | append: "&template=gradient" %}
<meta property="og:image" content="{{ og_image }}" />Verifying Your OG Tags
After adding the meta tags, test them:
- View page source (Ctrl+U) and search for
og:image - Facebook Debugger:
developers.facebook.com/tools/debug— paste your URL - Twitter Card Validator:
cards-dev.twitter.com/validator - LinkedIn Inspector:
linkedin.com/post-inspector
If the image doesn't appear, check that the URL is absolute (starts with https://) and the image loads when opened directly in a browser.
Frequently Asked Questions
Do I need separate tags for Twitter and Facebook?
Twitter falls back to Open Graph tags. If you set og:image, Twitter will use it too. Adding twitter:image is optional — only needed if you want a different image on Twitter.
Can I use a relative URL for og:image?
No. The og:image URL must be absolute, starting with https://. Social media crawlers cannot resolve relative paths.
Does this work with static HTML files?
Yes! Static HTML files served by any web server (Nginx, Apache, GitHub Pages, Netlify, Vercel) fully support Open Graph meta tags. No server-side language needed.
Related Guides
Compare with Alternatives
See how OG Image Generator stacks up against other tools.
Start Generating OG Images
Free API for developers. 50 images/month, 10 templates, no credit card required.