Ankore
On-Page SEO · Free

Open Graph Tag Generator

Generate Open Graph and Twitter Card tags with live previews for Facebook, LinkedIn, X, and Slack. Image preview, length warnings, complete head-tag output ready to paste.

  • No signup, no email required
  • Works entirely in your browser
  • Output you can copy and paste directly
  • Built by a working SEO team, not gated by upsells

Open Graph & Twitter card

Type & Twitter card

Live preview

1200×630 image preview
yoursite.com
Your title here
Your description here
HTML head tags
<!-- enter at least a title and description to generate -->

What it does

Open Graph (OG) is the metadata standard Facebook introduced in 2010 that has since become the universal vocabulary for social link previews. When you paste a URL into Facebook, LinkedIn, Slack, Discord, iMessage, or essentially any messaging app, the rich preview card you see is built from the page's OG tags. Twitter / X uses its own related twitter: namespace that gets the same treatment.

This tool takes your title, description, image, and URL, and outputs the complete set of OG and Twitter card tags ready to paste into the <head> of your page. The live preview pane shows how the card renders on each major platform, so you catch truncation, missing images, or layout issues before publishing.

Why OG tags matter for SEO and CTR

OG tags are not a direct ranking signal in Google, but they influence two things that quietly compound:

  • Click-through rate from social shares. A page shared on LinkedIn with a strong OG image and clear title earns 2–4x more clicks than the same page shared without OG tags (where the platform falls back to a generic preview or no preview at all). Click-throughs from social shares are tracked by Google Analytics and inform your overall organic-search CTR patterns.
  • Brand consistency in earned media.Every journalist, blogger, or community member who shares your page is your unpaid distribution. OG tags are how you control how you show up in those shares. A page with no OG tags shows up as "yoursite.com" with no card; a page with strong OG tags shows up as a polished editorial preview.
  • AI assistants and link unfurlers parse them. Discord, Slack, Telegram, ChatGPT, and similar tools all extract OG tags to render link previews and inform AI summaries. Strong OG metadata makes your content machine-readable in the right way.

How to use this generator

  1. Fill in the title and description. These are the only two truly required fields. The image URL is strongly recommended — without it, your card displays as a small text-only preview on most platforms.
  2. Add your image URL. Must be a fully-qualified URL (start with http:// or https://). 1200×630 pixels (1.91:1 aspect ratio) is the universal sweet spot — it renders correctly on every major platform.
  3. Set og:url and og:site_name. URL should be the canonical URL of the page (matches your <link rel="canonical">). Site name is your brand.
  4. Pick the right Twitter card type. summary_large_image renders as a full-width image card (best for blog posts, articles, landing pages). summary renders as a compact card with a small square image (best for utilities, settings pages, or content without a hero image).
  5. Switch through the preview tabs — Facebook, LinkedIn, X, Slack — to see how the card renders on each platform. Each renders OG slightly differently, especially around image dimensions and description length.
  6. Copy the HTML outputand paste into your page's <head>. The output includes both OG and Twitter tags, plus the standard meta tags they fall back to.

Open Graph best practices

  • Use 1200×630 for og:image. The universal sweet-spot dimension. Renders cleanly on Facebook, LinkedIn, Slack, and X with summary_large_image. Larger images get downscaled; smaller images get pixelated or padded.
  • Image must be under 8MB. Most platforms silently fail above 8MB or refuse to cache the image. Stay under 1MB if you want fast, reliable rendering across every platform.
  • Title 60–95 characters.Below 60 wastes the card's prominence; above 95 truncates on LinkedIn (the tightest constraint). Most other platforms allow ~120.
  • Description 100–160 characters.155 is the Facebook limit; LinkedIn shows about 190; X (summary_large_image) shows 70 then a fade. Write to fit Facebook's 155 limit and the rest follows.
  • Set og:type correctly."website" for static pages, "article" for blog posts. Article-type cards on LinkedIn get extra metadata fields (author, publish date) that website-type does not.
  • Match Twitter tags to OG tags. If you only set OG tags, Twitter falls back to them — so you do not strictly need a separate twitter:title. But matching them explicitly handles edge cases on older clients and gives you the option to vary if needed.
  • Set twitter:card explicitly.Without it, Twitter falls back to "summary" (small image card). Explicit summary_large_image is what most modern content wants.
  • Make every page's OG tags unique. Same issue as title tags and meta descriptions — duplicate OG metadata across pages weakens each share. Use page-specific images where possible.
  • Test on real platforms before launch.Use Facebook's Sharing Debugger, LinkedIn's Post Inspector, and Twitter Card Validator. Each catches issues the others miss. (Note: Twitter / X removed the public Card Validator in 2023, but you can preview by drafting a tweet with the URL.)

Common Open Graph mistakes

  • Relative image URLs. og:image="/og-hero.png" works in browsers but is invalid OG syntax. Must be a fully-qualified URL with protocol.
  • Missing og:image entirely. Without an image, Facebook falls back to whatever it can find on the page (often an unrelated thumbnail) and LinkedIn shows a small grey placeholder. Always set og:image.
  • Image dimensions wrong. Common mistakes: using square (1:1) images for summary_large_image (gets cropped), using portrait images (gets letterboxed), using tiny thumbnails (gets blurred when scaled up).
  • Aggressive caching by Facebook. Facebook caches OG data for ~30 days after first scrape. If you ship a page with a placeholder image and update later, Facebook keeps the old one. Use the Sharing Debugger to force re-scrape.
  • Mismatched og:url and canonical. og:url should match your canonical URL. Mismatches cause some platforms to show the wrong domain in the preview.
  • Forgetting twitter:card type.Without it, Twitter defaults to "summary" (small image), not the prominent summary_large_image most modern content wants.
  • Using emoji in title where parsing varies. Some emoji render as text, some as images, some break the preview entirely depending on platform. If you use them, test on every platform you care about.

How to validate your OG tags

  1. Facebook Sharing Debugger. Paste your URL, click "Debug", see exactly what Facebook scrapes. Use the "Scrape Again" button to force a re-fetch after updates. Most authoritative tool for FB and LinkedIn (LinkedIn parses similarly).
  2. LinkedIn Post Inspector. LinkedIn-specific. Catches issues with article-type cards and confirms author/publish-date rendering for og:type=article.
  3. Draft a real tweet to test X cards. The Twitter Card Validator was retired in 2023. The remaining test is to compose a tweet with your URL and see how the preview renders before posting.
  4. Paste into Slack and Discord. Both render from OG tags directly. Easy, free, real-time check.

Frequently asked questions

Do I need both Open Graph and Twitter Card tags?

Twitter / X falls back to OG tags when twitter:* tags are missing, so you can technically get away with just OG. But explicit twitter:* tags handle edge cases on older clients and let you vary the social headline if you want. Best practice: set both, matched, unless you have a specific reason to differ.

What's the ideal og:image size?

1200×630 pixels (1.91:1 aspect ratio) — the universal sweet spot that renders correctly on every major platform. Larger images get downscaled; smaller images pixelate. Keep file size under 1MB for fast, reliable rendering.

Why isn't my Facebook share showing my updated image?

Facebook caches OG data for about 30 days from first scrape. Even if you update the og:image on your page, Facebook keeps the old one. Fix: paste your URL into Facebook's Sharing Debugger and click 'Scrape Again' to force a re-fetch.

Do OG tags affect SEO?

Not directly — Google has confirmed OG tags are not a ranking signal. They affect SEO indirectly via click-through-rate from social shares, which is a measured user-engagement signal.

What's the difference between summary and summary_large_image?

summary renders as a compact horizontal card with a small square image (good for utilities, settings pages, content without a hero image). summary_large_image renders as a full-width image card (best for blog posts, articles, marketing pages). Most modern content wants summary_large_image.

Can I have different titles on Google vs social?

Yes. The HTML <title> controls Google SERP and browser tabs; og:title controls Facebook/LinkedIn/Slack; twitter:title controls X. Best practice is to keep them matched unless you have a deliberate reason to vary the social headline.

What is og:type and when does it matter?

og:type tells the platform what kind of content this is. 'website' is the default for static pages; 'article' enables extra metadata fields (author, publish date) on LinkedIn and improves how blog content renders. Set it to 'article' for blog posts and editorial content.

Does my page need OG tags if I never share it?

Anyone who has the URL can share it — and they will. Pages without OG tags show up as bare URL strings in chats, Slack messages, and emails. OG tags exist as a free quality-of-life baseline for every public page on your site.