Open Graph Tags Guide

What Is Open Graph?

Open Graph (OG) is a protocol created by Facebook in 2010. It lets you control how your webpage looks when someone shares it on social media. Without OG tags, platforms guess — they might pull the wrong title, a broken image, or an irrelevant description.

Any platform that renders link previews — Facebook, LinkedIn, Discord, Slack, Twitter, and others — reads Open Graph tags. Setting them correctly ensures your shared links always look professional and clickable.

Core OG Tags

Four tags form the minimum viable set. Include them on every page:

<meta property="og:title" content="JSON Formatter Online - Free Tool">
<meta property="og:description" content="Format and validate JSON instantly. No signup needed.">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:url" content="https://example.com/tools/json-formatter">

Skip any of these four and you risk broken or empty previews. Platforms fall back to scraping <title> and the first <p> tag — results are unpredictable.

og:type Values

The og:type tag tells the platform what kind of content you are sharing. The default is website, which covers most pages:

For articles, add these supplementary tags:

<meta property="og:type" content="article">
<meta property="article:published_time" content="2026-05-28T09:00:00Z">
<meta property="article:author" content="Jane Doe">
<meta property="article:section" content="Web Development">

OG Image Best Practices

The image tag deserves special attention because visuals drive clicks. A strong OG image can increase share engagement by 2–3x.

Dimensions: Use 1200 × 630 pixels. This ratio works across Facebook, LinkedIn, and most platforms. Images smaller than 600 × 315 may appear blurry or get rejected.

File size: Keep images under 5 MB. Large files slow down preview rendering and some platforms time out.

Text safety zone: Place all text within the center 80% of the image. Platforms crop edges differently — Facebook trims top and bottom on mobile, LinkedIn crops from the sides.

Format: PNG or JPEG. Use PNG for graphics with text, JPEG for photographs.

<meta property="og:image" content="https://example.com/images/og-json-formatter.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="JSON Formatter tool screenshot showing formatted code output">

Including og:image:width and og:image:height helps platforms render previews faster because they skip dimensional lookups.

Twitter Card Tags

Twitter (now X) has its own meta tag system called Twitter Cards. While modern Twitter also reads OG tags, explicit Twitter Card tags give you more control and avoid edge-case fallback issues.

Two card types matter:

<!-- summary_large_image — best for tools and products -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="JSON Formatter Online - Free Tool">
<meta name="twitter:description" content="Format and validate JSON instantly.">
<meta name="twitter:image" content="https://example.com/images/og-json-formatter.png">

Always set twitter:card first. The card type determines how Twitter interprets all other tags. Without it, Twitter ignores your other Twitter meta tags entirely.

If you omit twitter:title or twitter:image, Twitter falls back to og:title and og:image. This works most of the time, but defining both sets eliminates ambiguity.

Testing and Debugging OG Tags

Never publish OG tags without testing them. Each platform caches previews aggressively — fixing mistakes after deployment often requires cache-busting.

Facebook Sharing Debugger

Visit developers.facebook.com/tools/debug/ and enter your URL. It shows exactly what Facebook renders, including warnings for missing or malformed tags. Click "Scrape Again" to force a cache refresh.

LinkedIn Post Inspector

Go to linkedin.com/post-inspector/ to preview how LinkedIn displays your link. This tool also clears LinkedIn's cache.

Twitter Card Validator

Use cards-dev.twitter.com/validator to check your Twitter Card markup. Note: Twitter's tool sometimes requires login.

General Tips

• Test before launch — once a platform caches a broken preview, clearing it can take hours
• Use query strings to bust cache — append ?v=2 to your URL when testing changes
• Check HTTPS — mixed-content images (HTTP OG images on HTTPS pages) get blocked by most platforms

Common OG Tag Mistakes

• Missing og:image — the most impactful tag omitted most often; previews show blank thumbnails
• Using relative image URLs — OG images must be absolute, including the protocol (https://)
• Tiny or low-resolution images — anything under 600 × 315 looks blurry on desktop
• Forgetting twitter:card — without it, Twitter ignores every other Twitter meta tag
• Not setting og:type — platforms default to website, which may strip article-specific features
• Stale cached previews — after updating OG tags, the old version may persist for days without manual cache clearing
• Images behind authentication — crawlers cannot access login-protected images, so previews break

Key Takeaways

• Include og:title, og:description, og:image, and og:url on every page
• Use 1200 × 630 pixel images with text in the center 80% safety zone
• Set og:type to article for blog posts and website for tool pages
• Always add twitter:card — it activates all other Twitter Card tags
• Test previews with Facebook Debugger, LinkedIn Inspector, and Twitter Validator before launch
• Use absolute HTTPS URLs for all OG image paths

Try It Yourself

Build your OG and Twitter Card tags the easy way with our free Meta Tag Generator. Fill in your content details and copy the complete HTML snippet — includes Open Graph, Twitter Cards, and standard SEO meta tags.

Related Guides

• Meta Tag Generator Guide
• SEO Tools for Developers