OG Image Tag Generator: Create Correct Open Graph Meta Tags

An OG image tag generator creates the Open Graph <meta> elements that tell social networks how to represent a URL when someone shares it. Put the tags in the document’s initial <head>. At minimum, generate og:title, og:type, og:image, and og:url. Add a description, site name, and image metadata so crawlers have enough context to build a useful preview.

The Open Graph protocol defines these properties; it does not require one universal image pixel size. A practical default from current image-size guidance is 1200 × 630 pixels (about 1.91:1), while platform-specific behavior can differ. Treat that size as a broadly compatible starting point and verify the current requirements of each platform you target.

Copy-ready OG tags

Replace the example values with information for the page being shared. Every URL should be absolute and use HTTPS when available.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>OG Image Tag Generator | Example Article</title>
  <meta name="description" content="A concise description of the page.">

  <meta property="og:title" content="Example Article Title">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/articles/example">
  <meta property="og:image" content="https://example.com/images/example-og.jpg">
  <meta property="og:description" content="A concise description used in social previews.">
  <meta property="og:site_name" content="Example Site">

  <meta property="og:image:secure_url" content="https://example.com/images/example-og.jpg">
  <meta property="og:image:type" content="image/jpeg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Illustration representing the example article">
</head>
<body>
  ...
</body>
</html>

The four required properties are documented by the Open Graph protocol. The protocol describes Open Graph as a way for any web page to become a rich object in a social graph. In practice, a generator should make these four fields unavoidable and make optional fields easy to add.

What each Open Graph property does

Property	Purpose	Implementation guidance
og:title	The title shown in a share card.	Use the page’s human-readable title. Keep it distinct from internal IDs.
og:type	The kind of object being shared.	Use website for a general page or article for editorial content.
og:url	The permanent identifier for the object.	Use the canonical URL, including the correct scheme and path.
og:image	The image URL used in the preview.	Use a fully qualified, publicly fetchable URL.
og:description	Supporting summary text.	Write a short, page-specific explanation rather than repeating the title.
og:site_name	The publication or product name.	Keep it consistent across pages.
og:image:secure_url	HTTPS version of the image.	Provide it when the image has both HTTP and HTTPS addresses.
og:image:type	MIME type of the image.	Examples include image/jpeg, image/png, and image/webp.
og:image:width, og:image:height	Intrinsic image dimensions.	Report the actual pixel dimensions, not CSS display dimensions.
og:image:alt	Alternative text for the image.	Describe the meaningful content. The protocol documentation says that a page specifying og:image should specify og:image:alt.

Generate tags from page data

A generator is useful when it validates required fields, normalizes URLs, escapes HTML, and emits a complete block that can be pasted into a template. The following small browser-side generator handles those jobs without a framework.

<form id="og-form">
  <input id="title" placeholder="Title" required>
  <input id="type" value="website" required>
  <input id="url" type="url" placeholder="https://example.com/page" required>
  <input id="image" type="url" placeholder="https://example.com/og.jpg" required>
  <input id="description" placeholder="Description">
  <input id="site" placeholder="Site name">
  <input id="alt" placeholder="Image alt text">
  <input id="width" type="number" value="1200">
  <input id="height" type="number" value="630">
  <button>Generate</button>
</form>
<pre id="output"></pre>
<script>
const form = document.querySelector('#og-form');
const output = document.querySelector('#output');
const esc = value => String(value ?? '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
form.addEventListener('submit', event => {
  event.preventDefault();
  const value = id => document.querySelector(`#${id}`).value.trim();
  const title = value('title'), type = value('type'), url = value('url'), image = value('image');
  for (const [label, input] of [['URL', url], ['image URL', image]]) {
    try { new URL(input); } catch { output.textContent = `Enter a valid ${label}.`; return; }
  }
  const lines = [
    `<meta property="og:title" content="${esc(title)}" />`,
    `<meta property="og:type" content="${esc(type)}" />`,
    `<meta property="og:url" content="${esc(url)}" />`,
    `<meta property="og:image" content="${esc(image)}" />`,
    value('description') && `<meta property="og:description" content="${esc(value('description'))}" />`,
    value('site') && `<meta property="og:site_name" content="${esc(value('site'))}" />`,
    `<meta property="og:image:secure_url" content="${esc(image)}" />`,
    `<meta property="og:image:width" content="${esc(value('width'))}" />`,
    `<meta property="og:image:height" content="${esc(value('height'))}" />`,
    value('alt') && `<meta property="og:image:alt" content="${esc(value('alt'))}" />`
  ].filter(Boolean);
  output.textContent = lines.join('\n');
});
</script>

Escape every value before inserting it into an HTML attribute. This prevents a title containing quotation marks or angle brackets from breaking the head. Validate both URL fields with the URL parser, then reject non-HTTP(S) schemes if your application accepts user input.

Image dimensions, formats, and cropping

The protocol defines width and height metadata but does not mandate a pixel size. A commonly recommended default is 1200 × 630. A 1200 × 627 image is often cited for LinkedIn, while an X large card uses a 2:1 shape and may crop a 1.91:1 image slightly. These are platform recommendations, not Open Graph requirements; check each platform’s current documentation before promising exact rendering.

• Create the source artwork at the declared dimensions.
• Keep essential text and faces away from the outer edges so modest crops do not remove them.
• Use JPEG for photographic images, PNG for transparency or sharp line art, and WebP only when the crawler and sharing destinations you need support it.
• Serve the image with the correct Content-Type and return it without authentication.
• Give the image a stable URL. If you replace the file, use a versioned path or understand that crawlers may retain an earlier preview.

Multiple images and source order

Open Graph allows multiple values for some properties. When conflicting values are present, the first tag in source order wins. Related image properties must follow the root declaration they describe. Keep one primary image unless you deliberately provide a gallery.

<meta property="og:image" content="https://example.com/first.jpg">
<meta property="og:image:alt" content="Primary illustration">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image" content="https://example.com/second.jpg">
<meta property="og:image:alt" content="Secondary illustration">

Do not emit a generic framework default before the page-specific tags. A default placed first can silently win, making every URL display the same image.

Framework and CMS integration

Server-rendered templates

Render tags in the first HTML response, inside <head>. Many crawlers do not wait for client-side JavaScript to modify metadata. Your template should receive a canonical URL, title, description, image URL, dimensions, and alt text from the page model.

React, Next.js, and other client frameworks

Prefer the framework’s server-side metadata API or document component. If tags are added only after hydration, some crawlers will see an empty or default head. Confirm the generated HTML by requesting the page with a plain HTTP client and inspecting the returned source.

WordPress and other CMSs

Use one SEO or social metadata system, not several plugins emitting duplicate tags. Inspect the final source after saving a page. If two systems output og:title, remove one or ensure the intended value appears first.

Validation checklist

1. Confirm the four required properties exist in the initial document head.
2. Check that og:url is the canonical, shareable URL.
3. Open the image URL in a private browser window and verify it returns the intended file without a login.
4. Check the declared MIME type, width, height, and alt text.
5. Look for duplicate properties and verify the desired value is first.
6. Request the raw HTML with curl to ensure server-side rendering works.
7. Use a preview/debugger for each social destination, then account for cached previews when testing updates.

curl -L https://example.com/articles/example | grep -E 'og:(title|type|url|image)'

Or skip the browser setup

If you need a reliable image of the rendered page for a preview workflow, documentation, or regression check, ScreenshotNeo captures a URL through one API request. It accepts the cookie or consent banner like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before the shot; each cleanup step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and the response identifies the result with X-Page-Verdict and X-Billed headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools to Claude, Cursor, and other MCP clients.

See the ScreenshotNeo API documentation for all options. The basic calls below save a WebP shot of the target page.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Python

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

Node.js

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const bytes = new Uint8Array(await res.arrayBuffer());
await Bun.write('shot.webp', bytes); // or write bytes with your Node fs API

ScreenshotNeo includes full-page capture with lazy images loaded, CSS-selector element capture, dark mode, device presets, arbitrary viewports, retina scale, custom CSS and JavaScript, clicks, selector waits, delays, network-idle waits, request and resource blocking, custom headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, configurable-TTL caching, signed links, asynchronous jobs with signed webhooks, bulk capture for up to 100 URLs per call, usage information, and an OpenAPI specification. Existing parameter names used by other screenshot APIs also work, which simplifies migration.

The Free plan includes 1,000 shots each month with no card. Paid plans start at $5 for 3,000 shots; higher plans are Growth ($15 for 15,000), Pro ($39 for 60,000), Scale ($99 for 250,000), and Business ($249 for 1,000,000). Yearly billing gives two months free, and every feature is available on every plan. Create a free ScreenshotNeo account to start with 1,000 screenshots a month and no card.

Troubleshooting

Symptom	Likely cause	Fix
No preview image	The image URL is relative, private, blocked, or returns an error.	Use an absolute HTTPS URL and test it without cookies or authentication.
Wrong image appears	A duplicate og:image appears earlier in source order or a cached preview is being shown.	Remove duplicates, place the intended tag first, and use the platform’s refresh/debug workflow.
Title or description is old	The crawler cached an earlier response.	Verify the raw HTML, then request a refresh where the platform supports it.
Image is cropped badly	The destination uses a different card ratio.	Keep important content centered and check the destination’s current ratio guidance.
Tags are visible on the page	They were placed in <body> or rendered as text.	Put real meta elements in the initial <head>.
Special characters break markup	Values were interpolated without escaping.	HTML-escape quotes, ampersands, and angle brackets before output.
Social crawler sees defaults	Tags are added only after client-side hydration.	Render metadata on the server or use a static document head.

Performance, reliability, and maintenance

Metadata adds negligible response size, but the referenced image affects crawler latency. Serve it from a cacheable endpoint, avoid redirect chains, and keep the file reasonably sized. Generate tags from one canonical page model so title, URL, description, and image cannot drift between templates.

When images are generated dynamically, cache by a content hash or version. If a page’s image changes at the same URL, some networks may continue showing the old file. A versioned URL makes invalidation explicit. Monitor image response errors separately from page response errors; a page can load successfully while its preview image is unavailable.

FAQ

Is 1200 × 630 required?

No. Open Graph defines metadata fields, not a universal pixel dimension. 1200 × 630 is a practical default based on current cross-platform guidance.

Do I need both og:image and og:image:secure_url?

og:image is the core property. Add og:image:secure_url when you want to state the HTTPS version explicitly.

Can I use a relative image path?

Use a fully qualified URL. A crawler needs to fetch the image independently of the page’s base URL assumptions.

Should every page use og:type="article"?

No. Use article for editorial content and website for a general site page.

Why does my browser show the right tags but a share preview does not?

The crawler may receive different server-rendered HTML, may be unable to access the image, or may be showing a cached result. Inspect the initial response and the image URL directly.

Is an OG generator a replacement for platform-specific tags?

No. Standard Open Graph tags are the foundation. Add platform-specific metadata only when the destination documents a separate requirement.