Open Graph Meta Tag Generator and Social Preview Tool

Create ready-to-paste Open Graph and Twitter/X tags with live platform previews, detailed validation, and no signup. Everything stays in your browser.

Social metadata

Paste existing HTML

Paste a page head or meta tags. The importer reads canonical, description, Open Graph, and Twitter Card tags locally—no cross-origin fetch.

Generated tag groups
Used by the browser title and, unless overridden, social cards. Platforms truncate at different points.
Length: 0
The final public HTTPS page address. Canonical identifies the preferred page; og:url identifies the shared object. This tool keeps them identical.
The publisher or site brand, not the page title. Optional.
Optional language_COUNTRY code, such as en_US.
Describes the social image for accessibility; omit only for a decorative image.
Recommended for useful previews. Roughly 100–160 characters is guidance, not a platform guarantee.
Length: 0
A public HTTPS image. 1200×630 is a common landscape starting point, but crops vary.
Enter an image URL to inspect reachability and intrinsic dimensions.
Optional publisher account. Include or omit the @; the generator normalizes it.
Declared image dimensions
Optional metadata. Match the image file’s intrinsic dimensions.
Advanced options
Large image uses a landscape card; summary uses a compact thumbnail.
Optional content creator account.
Optional; falls back to the social title.
Optional; falls back to the social description.
Optional absolute HTTPS URL; falls back to og:image.
Optional; falls back to Open Graph image alt.
Optional MIME type matching the served file.
Optional HTTPS alternative when og:image differs.

Examples replace current fields with fictional details; clear them before entering your own.

Not ready

    Output & Preview

    Head tags updates live

    Result: (nothing yet)

    Platform preview simulation

    Approximate rendering only. Platforms may crop, truncate, cache, or replace values.

    Advertisement

    Complete Open Graph example

    Place the generated block inside the page’s <head>. This finished example includes the four Open Graph core properties plus useful description, image, and Twitter/X fallbacks.

    <head>
  <title>How Urban Gardens Cool Summer Streets</title>
  <meta name="description" content="A practical field guide to cooler neighbourhoods.">
  <link rel="canonical" href="https://example.com/urban-gardens">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/urban-gardens">
  <meta property="og:title" content="How Urban Gardens Cool Summer Streets">
  <meta property="og:description" content="A practical field guide to cooler neighbourhoods.">
  <meta property="og:image" content="https://example.com/urban-gardens.jpg">
  <meta property="og:image:alt" content="A rooftop garden above a city street">
  <meta name="twitter:card" content="summary_large_image">
</head>

    Why the core tags are present

    og:title names the shared object; og:type identifies its kind; og:url gives it a stable identity; and og:image supplies the visual. Description and alt text improve context and accessibility.

    Framework notes

    Plain HTML/templates: paste tags into the server-rendered head. React: use your router or framework head API. Next.js: return Metadata from a layout or page. WordPress: configure an SEO plugin or theme head hook; avoid duplicates.

    Example result: a landscape card with the garden image, article title, short summary, and example.com domain—similar to the simulation above, with platform-specific cropping.

    Troubleshooting and publish checklist

    Missing images usually come from relative URLs, redirects, crawler blocks, incorrect MIME types, oversized files, or images that require cookies. Stale cards are commonly cached. Incorrect crops happen because each service chooses its own layout. Duplicate tags can conflict, and client-rendered metadata may arrive too late for crawlers. Localhost is not publicly reachable, so use a public preview deployment.

    1. Use one canonical and one value for each core OG property.
    2. Use public HTTPS URLs and confirm the image returns an image MIME type without authentication.
    3. Put metadata in the server-rendered head, publish, and view the page source.
    4. Test and refresh caches with the Meta Sharing Debugger, LinkedIn Post Inspector, and X Card Validator.

    A platform may ignore supplied values because of cache, safety policy, unsupported markup, inaccessible assets, or its own rendering rules.

    Sources and methodology

    Technical recommendations are based on the official Open Graph protocol, Meta sharing documentation, X Cards markup reference, and LinkedIn link preview guidance.

    Last reviewed: 12 July 2026. Preview layouts are hand-built simulations used to expose likely crops and truncation; they do not call platform APIs. Platform behavior, limits, and cache rules can change, so recommendations are practical starting points rather than universal guarantees.

    Open Graph meta tag generator FAQs

    What are Open Graph tags?

    Open Graph tags are metadata in a page head that describe the title, type, URL, image, and other details used when the page is shared.

    Do Open Graph tags affect Google rankings?

    They are not a direct Google ranking factor. Better share previews can improve how links are understood and clicked, while ordinary title, description, canonical, and page content serve separate search purposes.

    How do Open Graph tags differ from Twitter Cards?

    Open Graph is widely read across platforms. Twitter/X has its own twitter: tags and card types, but can fall back to some Open Graph values.

    Which Open Graph tags are required?

    The protocol defines og:title, og:type, og:image, and og:url as core properties. Description, site name, locale, dimensions, MIME type, and image alt text are optional but often useful.

    What social image dimensions and formats should I use?

    1200×630 is a common landscape starting point and 1200×1200 gives platforms a square option. JPEG, PNG, WebP, and GIF support varies, so check current platform documentation and keep important content away from crop edges.

    Is there a maximum social image file size?

    Limits vary and change by platform. Compress images for quick crawler downloads and check each platform’s current documentation rather than relying on one universal limit.

    Do relative URLs work?

    Do not rely on them. Use complete public HTTPS URLs for the page and image so external crawlers can resolve and fetch them reliably.

    Why does my social preview not update?

    The platform may have cached an older card. Publish the metadata, confirm the live source and image, then request a fresh scrape with the platform’s debugger.

    Can a page have multiple og:image tags?

    Yes. The protocol supports structured image arrays, but platforms often favor the first usable image. Keep each image’s structured properties adjacent and test the result.

    How can I test localhost metadata?

    Social crawlers cannot reach localhost. Deploy to a public HTTPS preview URL that permits crawler access, then use platform inspection tools.

    Where should social meta tags be placed?

    Place them inside the server-rendered HTML <head>. Avoid duplicates and do not depend on client-side JavaScript to add them after load.

    Does this tool upload my data?

    No. Generation, import, and validation run in your browser. Image inspection asks the browser to load the supplied image URL directly; nothing is sent to Starlight Tools.

    Explore more tools