Open Graph Meta Tag Builder — Social Preview Tags for Web Pages

Build Open Graph and Twitter/X social preview tags. Everything runs locally in your browser.

Preview Details

Length: 0
Open Graph locale format is usually language_COUNTRY, such as en_US.
Length: 0
Width and height in pixels. 1200 by 630 is a common large-card size.
1200 by 630 1200 by 1200 1600 by 900 800 by 418

    Output & Preview

    Head tags

    Result: (nothing yet)

    Social preview (simulated)

    1200×630
    Your Title
    Your description appears here. Aim for ~140–160 characters for best results.
    https://example.com/page

    About the Open Graph Meta Tag Builder

    Open Graph tags tell social platforms what title, description, URL, type, and image to use when someone shares a page. This builder focuses on the preview tags most teams paste into the HTML head before publishing a page.

    The Open Graph protocol defines four required properties: og:title, og:type, og:image, and og:url. In practice, og:description, og:site_name, og:locale, and image width, height, and alt text make previews more consistent and accessible. Twitter/X card tags can mirror the same content for platforms that read them.

    How to use it step by step

    1. Enter the final page URL, social title, description, and social image URL.
    2. Choose the Open Graph type and add site name, locale, image size, and alt text when available.
    3. Keep the Twitter/X option on when you want a matching large card.
    4. Click Generate Tags, then copy or download the final HTML block.

    The output is plain HTML. Paste it inside the page <head>, publish the page, then use each platform's preview debugger when you need to refresh cached cards. This tool does not validate that a remote image is reachable; it checks URL shape and formats tags locally.

    Helpful assumptions: use absolute HTTPS URLs for pages and images, keep the title readable, write a clear description, and start with a 1200 by 630 image for large landscape cards. Individual platforms can crop, cache, or override previews.

    Open Graph Meta Tag Builder: FAQs

    Which Open Graph tags are required?

    The core Open Graph properties are og:title, og:type, og:image, and og:url. Description, site name, locale, image dimensions, and image alt text are useful additions.

    What image size works best for social sharing?

    Use 1200 by 630 for a landscape large card when you can. Keep important content away from edges because platforms may crop or resize the image.

    Does this tool upload my data?

    No. Everything runs client-side in your browser; nothing is uploaded or stored on a server.

    Social Preview Notes

    Absolute URLs travel better

    Use full https:// URLs for og:url and og:image so parsers outside your site can fetch them reliably.

    URL shape

    Image alt text matters

    og:image:alt and twitter:image:alt provide accessible context for the preview image when platforms support it.

    Accessibility

    Cards can be cached

    Social platforms often cache previews. Use their debugger or card validator when a recently updated image does not appear right away.

    Refresh checks

    Dimensions are hints

    Width and height tags help parsers reserve the right preview shape, but each platform still chooses its own crop and display treatment.

    Preview sizing

    Twitter cards can mirror OG

    When Twitter/X tags are present, they can mirror the same title, description, URL, and image so the card remains predictable.

    Card fallback

    Explore more tools