Free Meta Tag & Open Graph Generator

Fill in your page details and get ready-to-paste meta, Open Graph, and Twitter Card tags — with a live preview of your Google search result and social share card.

Google search preview

Your page title

https://example.com/page/

Your meta description will show up here as you type.

Social share preview

Generated tags


      

Why a page needs metadata separate from its visible content

Everything on this page lives in the <head>, invisible to a human visitor, because its audience isn't the visitor — it's the crawlers and link-preview bots that read a page before anyone clicks through. The "og:" prefix on several of these tags stands for Open Graph, a protocol originally introduced by Facebook around 2010 specifically so any web page could describe how it should look when someone shares its link — a title, description, and image, independent of whatever the page's actual on-page headline says. That's also why the <title> tag and a page's visible <h1> heading are allowed to differ: the title tag drives the browser tab and the search-result headline, aimed at getting someone to click, while the H1 is the on-page heading a visitor reads once they've already arrived — different audiences, different jobs, even though many pages simply reuse the same text for both.

Frequently Asked Questions

What's the difference between a meta description and an Open Graph description?

The meta description shows up in Google search results. The Open Graph (og:description) shows up when the link is shared on Facebook, LinkedIn, Slack, and most other apps. They can be the same text, but you're free to tune each for its audience.

How long should my title and description be?

Keep titles under about 60 characters and descriptions under about 160 — longer text gets truncated with an ellipsis in Google's results. Social previews are more forgiving but still cut off very long text.

What image size should I use for og:image?

1200×630 pixels is the safe standard — it displays well as both a large "summary_large_image" card on Twitter/X and a link preview on Facebook, LinkedIn, and Slack, without awkward cropping.

Do I need both Open Graph and Twitter Card tags?

Yes, for the best coverage. X (Twitter) reads twitter:* tags first and only falls back to Open Graph if they're missing, while nearly every other platform (Facebook, LinkedIn, Slack, Discord) reads Open Graph tags. Adding both takes a few extra lines and covers every sharing surface.

Why does the title tag matter separately from my page's H1 heading?

The title tag drives the browser tab label and the headline shown in search results — its job is getting someone to click before they've even seen the page. The H1 is the heading a visitor reads once they've arrived. They can share the same text, but they don't have to, since they're written for different moments in the visitor's journey.

What does "og" stand for in tags like og:title and og:image?

Open Graph — a protocol originally introduced by Facebook to let any web page describe how it should appear when shared as a link. It was later adopted well beyond Facebook and is now read by most social and messaging platforms.