What are Open Graph meta tags?

Open Graph tags are HTML meta tags (prefixed og:) that tell social platforms and chat apps how to render a link preview — the title, description, image, and type. Without them, platforms guess from page content, which often produces a poor or empty preview.

Do I need both Open Graph and X (Twitter) Card tags?

Open Graph tags cover most platforms, and X reads them as a fallback. Adding twitter: card tags gives you explicit control over how the link looks on X, including the card type. Including both is the safest way to get a good preview everywhere.

What image size should I use for social previews?

A common, well-supported size is 1200×630 pixels for a large summary card. Use an absolute URL to the image and keep it under platform file-size limits so it loads reliably when the preview is generated.

Why doesn't my link preview update after I change the tags?

Platforms cache previews. After updating your meta tags, run the URL through the platform's debugger (such as the Facebook Sharing Debugger or X's Card Validator) to force a re-fetch and confirm the new tags are read correctly.

Where do I put the generated meta tags?

Paste them inside the of your HTML page. In a framework you'd add them to the page's metadata configuration, and in a CMS you'd use the SEO or social settings fields that map to these tags.

OpenGraph & Meta Tag Generator

Generate essential Open Graph and X Card meta tags for improved social sharing previews and SEO. Fill the form to generate copy-pasteable tags and see live previews.

Metadata Content

Fill in the details for your page.

Title

Description

Canonical URL

Image URL

Site Name

Tag Options

Open Graph Type

Twitter Card Type

Twitter Handle

Generate Twitter TagsInclude `twitter:*` specific tags.

Generated HTML Tags

Copy and paste into your `<head>` section.

<meta name="title" content="My Awesome Page Title" />
<meta name="description" content="A concise and compelling description of the page content (aim for ~150 chars)." />
<meta property="og:title" content="My Awesome Page Title" />
<meta property="og:description" content="A concise and compelling description of the page content (aim for ~150 chars)." />
<meta property="og:image" content="https://example.com/images/preview-image.png" />
<meta property="og:url" content="https://example.com/your-page" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="My Website Name" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="My Awesome Page Title" />
<meta name="twitter:description" content="A concise and compelling description of the page content (aim for ~150 chars)." />
<meta name="twitter:image" content="https://example.com/images/preview-image.png" />
<meta name="twitter:domain" content="example.com" />
<meta name="twitter:url" content="https://example.com/your-page" />

Live Previews (Approximate)

How your link might look on social media.

example.com

My Awesome Page Title

A concise and compelling description of the page content (aim for ~150 chars).

Test & Validate

Use official tools to debug your tags.

X Card Validator Meta Sharing Debugger LinkedIn Post Inspector

About OpenGraph & Meta Tag Generator

When a page gets shared on social media or in a chat app, the rich preview — the title, description, and thumbnail image — comes from meta tags in the page's HTML head. Open Graph tags drive previews on most platforms, and X (Twitter) Card tags control how the link looks on X. Get them right and your links look professional; leave them out and you get a bare URL or, worse, a preview that pulls the wrong text and image.

This generator builds those tags for you. Fill in the title, description, canonical URL, and preview image, and it produces the corresponding og: and twitter: meta tags plus the standard SEO tags, ready to paste into your head. A live preview shows roughly how the card will render, so you can tune the title length and image before you ship rather than after a link looks broken in a tweet.

Everything is generated in the browser — there's no crawl of your site and nothing is stored — so you can draft tags for an unpublished page or a staging URL safely. Copy the output straight into your template, framework metadata config, or CMS, and you've covered the tags that decide how every shared link represents your site.

How to use OpenGraph & Meta Tag Generator

Enter your page details
Fill in the title, description, canonical URL, and the image URL you want shown in the social preview.
Review the live preview
Check the rendered card to see roughly how the link will appear, and adjust the title length or image so nothing gets truncated.
Copy the generated tags
The tool outputs the Open Graph (og:), X Card (twitter:), and standard SEO meta tags as copy-pasteable HTML.
Paste into your HTML head
Drop the tags into your page's <head>, framework metadata config, or CMS, then validate with each platform's debugger.

Frequently asked questions

SEO Structure Sniffer

Quickly analyze pasted HTML for basic on-page SEO structure: heading counts (H1, H2, H3), missing image alt text, and internal/external link counts.

Google SERP Snippet Emulator

Preview and optimize your webpage's Title, Description, and URL for Google search results. Check character counts and estimated pixel widths.

Image ➡️ Icon Generator

Generate icons from image for all platforms (Windows, Apple, Android, Browser, Huawei) from a single image. Upload JPG, PNG, GIF, WebP, or AVIF and download all icons as a ZIP file.