Open Graph Meta Tags Generator

1. What an Open Graph meta tag generator does

An Open Graph generator creates the <meta> elements that describe a page when it is shared on social networks and messaging services. Put the generated elements inside your document’s <head>, use absolute URLs, and make sure the referenced image can be fetched without authentication.

The Open Graph Protocol defines four required properties: og:title, og:type, og:image, and og:url. Useful optional properties include og:description, og:locale, og:site_name, og:audio, and og:video. Image metadata can also include a secure URL, MIME type, dimensions, and alternative text. See the Open Graph Protocol specification for the property model and object-type rules.

2. Required and optional fields

Property	Purpose	Guidance
`og:title`	The title shown for the shared object	Use the page’s specific, readable title.
`og:type`	Identifies the object type	`website` is a common example; other types can require additional properties.
`og:url`	Canonical identity of the object	Use one permanent, absolute URL. This is the graph identifier.
`og:image`	Preview image	Use an absolute, publicly fetchable URL.
`og:image:alt`	Accessible description of the image	Add it whenever `og:image` is present.
`og:description`	Short summary	Describe the page rather than repeating the title.
`og:site_name`	Site or publication name	Keep it consistent across pages.
`og:locale`	Content locale	Use the locale format your publishing system uses consistently.
`og:image:secure_url`	HTTPS image URL	Useful when the image has both HTTP and HTTPS addresses.
`og:image:type`	Image MIME type	For example, `image/jpeg` or `image/png`.
`og:image:width` and `og:image:height`	Declared image dimensions	Keep these values accurate if you provide them.

Some object types define additional required properties. Select the type deliberately instead of assuming every page is a generic website.

3. Generate tags in your browser

This self-contained generator escapes user input and produces a copyable snippet. Save it as og-generator.html and open it locally.

An Open Graph generator turns page information into metadata elements placed in the document head.

<!doctype html>
<meta charset="utf-8">
<title>Open Graph meta tag generator</title>
<label>Title <input id="title" value="A meaningful page title"></label><br>
<label>Type <input id="type" value="website"></label><br>
<label>Canonical URL <input id="url" value="https://example.com/page"></label><br>
<label>Image URL <input id="image" value="https://example.com/share-image.jpg"></label><br>
<label>Image alt <input id="alt" value="A useful description of the image"></label><br>
<label>Description <textarea id="description">A concise description of this page.</textarea></label><br>
<label>Site name <input id="site" value="Example Site"></label><br>
<label>Locale <input id="locale" value="en_US"></label><br>
<button id="generate">Generate</button>
<pre id="output"></pre>
<script>
const fields = ["title", "type", "url", "image", "alt", "description", "site", "locale"];
const esc = value => String(value).replace(/&/g, "&amp;").replace(/"/g, "&quot;");
document.querySelector("#generate").onclick = () => {
  const value = Object.fromEntries(fields.map(id => [id, document.querySelector("#" + id).value.trim()]));
  const rows = [
    ["og:title", value.title], ["og:type", value.type], ["og:url", value.url],
    ["og:image", value.image], ["og:image:alt", value.alt], ["og:description", value.description],
    ["og:site_name", value.site], ["og:locale", value.locale]
  ].filter(([, content]) => content);
  document.querySelector("#output").textContent = rows
    .map(([property, content]) => `<meta property="${property}" content="${esc(content)}" />`)
    .join("\\n");
};
</script>

Copy the result into <head>. The generator cannot verify that your URL is canonical, that the image is reachable by crawlers, or that a platform has refreshed its cached preview.

4. Add the tags to a real application

Static HTML

<html prefix="og: https://ogp.me/ns#">
  <head>
    <meta property="og:title" content="A meaningful page title" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://example.com/page" />
    <meta property="og:image" content="https://example.com/share-image.jpg" />
    <meta property="og:image:alt" content="A useful description of the image" />
    <meta property="og:description" content="A concise description of this page." />
  </head>
</html>

Python template data

from html import escape

def open_graph_tags(page):
    values = {
        "og:title": page["title"],
        "og:type": page.get("type", "website"),
        "og:url": page["canonical_url"],
        "og:image": page["image_url"],
        "og:image:alt": page["image_alt"],
        "og:description": page.get("description", ""),
        "og:site_name": page.get("site_name", ""),
        "og:locale": page.get("locale", ""),
    }
    return "\\n".join(
        f'<meta property="{escape(name)}" content="{escape(value)}" />'
        for name, value in values.items() if value
    )

Node.js template data

function escapeHtml(value) {
  return String(value).replace(/&/g, '&amp;').replace(/"/g, '&quot;');
}
function openGraphTags(page) {
  const values = {
    'og:title': page.title,
    'og:type': page.type || 'website',
    'og:url': page.canonicalUrl,
    'og:image': page.imageUrl,
    'og:image:alt': page.imageAlt,
    'og:description': page.description,
    'og:site_name': page.siteName,
    'og:locale': page.locale
  };
  return Object.entries(values)
    .filter(([, value]) => value)
    .map(([name, value]) => `<meta property="${escapeHtml(name)}" content="${escapeHtml(value)}" />`)
    .join('\\n');
}

Dynamic-page checklist

Render the tags in the server response or initial HTML, not only after a client-side interaction.
Generate one canonical og:url for each indexable page.
Use absolute URLs for both the page and image.
Keep title, description, image, and page content aligned.
Emit og:image:alt with a useful description.
For pages with multiple images, understand the consuming platform’s selection and caching behavior before relying on ordering.

5. Validate the generated metadata

View the final page source, not just the template file.
Confirm that every URL is absolute and returns the expected resource without a login.
Check that the canonical URL and og:url identify the same page.
Inspect the image response headers and verify its MIME type matches the file.
Use the current debugger or preview tool for the platform where the link will be shared.
After changing metadata, account for platform caching; a correct page can continue showing an older preview until the crawler refreshes it.

The protocol project documents Facebook’s Object Debugger and a PHP validator/markup generator, but those references may change. Verify that a tool is currently available before making it part of an automated workflow.

6. Capture and inspect the rendered result

When you need a visual record of the page as a crawler sees it, a screenshot service can capture the rendered HTML after your metadata is deployed. ScreenshotNeo is a website screenshot API and MCP server for developers. It removes known consent banners, newsletter popups, and chat widgets before capture, and its response identifies whether the result was clean, cached, or failed.

7. Or skip the browser setup

Use the ScreenshotNeo API documentation for the full option list. The basic request is:

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

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

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/page' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

Cookie banners, popups, and chat widgets are removed before the shot. Bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents take screenshots with Claude, Cursor, or another MCP client. The Free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.

8. Troubleshooting

Symptom	Likely cause	Fix
No preview image	`og:image` is missing, relative, blocked, or unavailable.	Use an absolute public URL and fetch it without authentication.
Old title or image appears	The platform cached an earlier crawl.	Confirm the live source, then use the platform’s current refresh or debugger workflow.
Wrong page is associated	`og:url` differs between variants or is not canonical.	Emit one stable canonical URL and align redirects and page links.
Tags appear in the browser but not to crawlers	They are inserted only after client-side JavaScript runs.	Render them in server HTML or pre-render the route.
Characters are corrupted	HTML escaping or document encoding is incorrect.	Serve UTF-8, escape attribute values, and inspect the final source.
Image is cropped unexpectedly	The consuming platform applies its own preview layout.	Design a focal-safe image and inspect the actual platform preview.
Different platforms disagree	Each crawler supports different fields and cache rules.	Keep Open Graph complete, then add verified platform-specific metadata where required.
Screenshot shows a consent dialog	The page requires an interaction before its useful content is visible.	Use a browser flow that accepts consent, or ScreenshotNeo’s pre-capture cleanup.

9. Performance, reliability, and cost

Generate metadata from the same page model that produces the title and canonical URL so values do not drift.
Cache generated snippets when page data is stable; regenerate when the canonical URL or image changes.
Keep image URLs stable when possible, because changing them can trigger another crawl and a new cache entry.
Do not treat a successful HTTP response as proof that a preview is correct. Validate the rendered source and the platform-specific result.
For automated visual checks, ScreenshotNeo bills only clean shots. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and the response includes X-Page-Verdict and X-Billed headers.
ScreenshotNeo supports full-page capture with lazy images loaded, element selectors, device presets, custom viewport and retina scale, custom CSS and JavaScript, waits, request blocking, cookies and headers, caching with a chosen TTL, asynchronous jobs, bulk capture of up to 100 URLs per call, signed links, usage reporting, and PDF output.

10. FAQ

Do I need both Open Graph and a page title?

Yes. The HTML title serves browser and search contexts, while Open Graph properties describe the shared object. Keep them related but do not assume one replaces the other.

Can I use a relative image URL?

Use an absolute URL. Crawlers operate outside your page’s URL context and need a complete address.

Is `og:description` required?

No. It is optional, but it gives platforms a deliberate summary instead of leaving extraction to their own heuristics.

Why does changing the tag not immediately change a preview?

Social crawlers cache fetched metadata. Confirm the deployed source first, then use the relevant platform’s current refresh mechanism.

Should every page use `og:type=website`?

website is a common example, not a universal rule. Choose the object type that matches the page and check whether that type requires extra properties.