Page & Bell

Open Graph Meta Tag Generator

Fill in your page details and get a complete Open Graph + Twitter Card meta block, with live previews of how the link will render on Facebook, LinkedIn, X, and Discord. The previews are built locally from your form values — nothing is fetched from your URL — so you can design the card before the page even exists. Your image URL is loaded directly by your browser, with a clear warning if it fails.

0 characters — platforms truncate around 60–90.

Facebook / LinkedIn preview

No image set

example.com

Your page title appears here

Your description appears here. Keep it under about 200 characters.

X (Twitter) preview — summary_large_image

No image set
Your page title appears here

From example.com

Discord preview

Your page title appears here

Your description appears here. Keep it under about 200 characters.

Fill in at least a title or URL to generate the meta tags.

How to use the open graph meta tag generator

  1. Enter the page title, description, canonical URL, and a direct image URL (ideally 1200×630 pixels).
  2. Pick og:type (website for most pages, article for blog posts) and the Twitter card style — summary_large_image is the right choice for almost everything.
  3. Check the three previews: the image crop, title truncation, and description cut-off match how each platform actually renders cards.
  4. Copy the meta block and paste it inside <head>, before any other meta tags if possible.
  5. After publishing, force a re-scrape with Facebook’s Sharing Debugger or by re-pasting the link, since platforms cache the first scrape.

Required vs nice-to-have tags

TagStatusNotes
og:titleRequiredTruncates around 60–90 chars depending on platform
og:imageRequired1200×630, under 8 MB, absolute URL
og:urlRequiredCanonical URL — consolidates share counts
og:descriptionStrongly recommendedShown on Facebook/LinkedIn/Discord; ~200 char budget
og:typeRecommendedwebsite or article covers 95 percent of pages
og:site_nameNice-to-haveShown by Discord and some platforms as a kicker
twitter:cardRequired for XWithout it X may render no card at all

Platform quirks worth knowing: WhatsApp and Telegram read OG tags but prefer smaller images and may skip ones over ~600 KB; Discord additionally honours theme-color for the embed accent; LinkedIn ignores og:description on some layouts and writes its own snippet. Design for Facebook's 1.91:1 crop and you are safe nearly everywhere.

Frequently asked questions

Which Open Graph tags are actually required?

Four tags do almost all the work: og:title, og:description, og:image, and og:url. Without them, platforms fall back to guessing from your HTML — usually badly. og:type and og:site_name are nice-to-have refinements, and twitter:card is the one Twitter/X-specific tag you should always add (X falls back to OG tags for title, description, and image, so duplicating them under twitter:* names is belt-and-braces, not strictly required).

What size should my og:image be?

1200×630 pixels (a 1.91:1 ratio) is the de-facto standard: Facebook and LinkedIn crop to 1.91:1, and X’s summary_large_image crops to 2:1, which a 1200×630 image survives with minimal loss. Keep the file under 8 MB (Facebook’s limit; in practice aim under 1 MB for fast scrapes), use JPG or PNG, and keep any text away from the outer 10 percent where crops differ between platforms.

I updated my tags but Facebook/LinkedIn still shows the old card. Why?

Platforms scrape a URL once and cache the result — often for days or weeks. Facebook’s cache is cleared with the Sharing Debugger (developers.facebook.com/tools/debug): paste the URL and click “Scrape Again”. LinkedIn has the Post Inspector (linkedin.com/post-inspector). For X, re-validating happens automatically but can take time; changing the URL (e.g. adding a query parameter) forces a fresh scrape anywhere as a last resort.

Why does this tool not fetch my URL and check the live tags?

Honesty time: checking a live URL requires a server-side fetch (browsers block cross-origin HTML reads), and this tool runs entirely in your browser. It is a generator and visual previewer, not a live checker — design the card here, paste the tags, then verify the published page with each platform’s own debugger, which also refreshes their cache in the same step.

Do Open Graph tags affect Google rankings?

Not directly — OG tags are not a Google ranking factor. They matter for the click, not the rank: links with a proper image card get substantially higher engagement on every social platform and in chat apps like WhatsApp, Slack, and Discord (which all read OG tags). Google does sometimes use og:image as a candidate thumbnail in Discover, so a good image has indirect search benefits too.

What is the difference between summary and summary_large_image?

summary renders a small square thumbnail beside the text — appropriate for profile-like or icon-led pages. summary_large_image renders a full-width 2:1 image above the title and gets far more attention in the feed; use it whenever you have a real 1200×630 image. This tool switches the X preview between the two layouts so you can see exactly what changes.

Related tools