Skip to main content
SerpGem
Technical SEO

Open Graph Tag Generator

Build the exact meta tags Facebook, LinkedIn, and X/Twitter need to render a beautiful share card — with a live preview for each platform.

How to use this tool3 quick steps
  1. Fill in your page details

    Title, description, and image URL are the three fields that control how your page looks when shared. Image should be 1200×630 px for best results.
  2. Check the live preview

    Facebook/LinkedIn and X/Twitter render cards differently — the preview shows both. Social images that don't load are replaced with a placeholder.
  3. Copy and paste into <head>

    All tags are generated as a single block. Paste before </head>. og: tags serve Facebook/LinkedIn; twitter: tags override them for X/Twitter.
InputPage details

50–60 chars for best display in Google and social cards.

The absolute URL of the page being shared.

0/160

120–160 chars. Write it like ad copy, not a summary.

Absolute URL. 1200×630 px recommended for best social preview.

Shown under the preview on Facebook and LinkedIn.

Without @ (we'll add it).

OutputMeta tags

Use this with

See all 4 tools

Open Graph Guide

Why OG tags make or break your social CTR

When someone pastes your URL into Facebook, LinkedIn, WhatsApp, Slack, or X, those platforms look for Open Graph (og:) tags to decide what to show. Without them, the preview is a blank card — or worse, a stock guess that undersells your page.

og:title and og:description

These override your SEO title and meta description specifically for social shares. You can (and should) write more emotional, benefit-driven copy here than in your SEO tags — social readers respond to emotion, not keywords.

og:image sizing

Use 1200×630 pixels at 2:1 aspect ratio. Under 600×315 and Facebook shows a small preview instead of the large card. Max file size 8MB; keep under 1MB for fast loading.

Twitter card types

`summary_large_image` is the modern default — full-width image, title, and description. Use `summary` (thumbnail + text) only for tight-data pages like author bios or category pages.

og:type: website vs. article

Use `article` for blog posts and news — Facebook indexes them differently and enables additional features like reading time. Use `website` for homepages, product pages, and landing pages.

Absolute URLs only

og:image and og:url must be absolute URLs starting with https://. Relative paths (/og-image.jpg) are ignored by every social crawler.

Why this tool, not your CMS

Many CMS plugins generate OG tags, but they often miss twitter: variants or use your SEO description verbatim. Use this tool to audit what your template outputs or to customize a specific high-value page.

Pro Tips

Test before publishing

After publishing, validate your OG tags at Facebook Debugger (developers.facebook.com/tools/debug) and Twitter Card Validator. Their caches can be stubborn — both tools force a re-fetch.

Image = 80% of the click

The image is the single biggest CTR lever on social. Don't reuse a generic brand hero — create a per-page image that literally shows the value prop.

Don&apos;t skip twitter:

X/Twitter technically falls back to og: tags, but twitter:card controls layout (large vs small). Always set twitter:card explicitly.

?

Frequently Asked Questions

Do I need both og: and twitter: tags?
Twitter/X falls back to og: tags when twitter: tags are missing, so strictly no. But for best results on each platform — and to use Twitter-specific features like summary_large_image — set both. This tool generates them together.
Can I use an og:image from a CDN?
Yes. Any publicly-accessible HTTPS URL works. CDN-hosted images are actually preferred — social platforms re-fetch images when they cache your page, and slow origin servers can result in no image being cached at all.
Why is Facebook showing an old image after I updated my page?
Facebook aggressively caches OG data. After updating your tags, run the URL through developers.facebook.com/tools/debug and click "Scrape Again." Same for LinkedIn: post-inspector.linkedin.com.
How is this different from the Meta Tag Analyzer?
Meta Tag Analyzer inspects tags on a live URL to audit what's there. This tool generates the tags from scratch based on your inputs. Use this when writing new meta tags; use that when auditing existing ones.