Open Graph and Twitter preview

What Open Graph tags are (in one breath)

Open Graph is a vocabulary of <meta property="og:*"> elements. Facebook introduced it; LinkedIn, Pinterest, Discord, and many others respect the same fields. They describe the canonical object your URL represents: usually an article or a website, plus a human title, description, and share image.

They do not replace your normal <title> or meta name="description" for search snippets—Google still primarily uses those for organic results—but social apps overwhelmingly prefer OG when building cards. Think of OG as your social SERP snippet.

Why this matters for traffic and trust

Organic search is not the only discovery channel. Newsletters, Slack threads, community posts, and employee advocacy all rely on link unfurling. A crisp OG image and a specific title make the same URL look intentional; a missing image or truncated title makes people hesitate to click—even if your landing page is excellent.

For brand search and referral traffic, consistent previews reinforce that the destination matches the promise in the post. That is not a magic ranking boost, but it is a measurable lift in clicks from the same inventory of impressions.

Core tags most teams should set

• og:title — The headline on the card. Can match your <title> or be slightly more conversational for social.
• og:description — One or two sentences; avoid keyword stuffing. This is not a place to paste your entire meta keywords tag from 2009.
• og:image — Absolute URL to an image (HTTPS strongly preferred). This is the asset people notice first.
• og:url — The preferred share URL; helps aggregators deduplicate HTTP vs HTTPS or tracking parameters if you normalize correctly.
• og:type — Often website or article; affects how some platforms categorize the object.

Twitter / X Cards vs Open Graph

X still reads twitter:* meta tags. In practice, many sites set both OG and Twitter fields to the same values, or rely on X to fall back to OG for title, description, and image when Twitter-specific tags are absent. For predictable behavior, either duplicate the important fields or verify fallbacks in the Card Validator.

twitter:card declares layout: summary_large_image is the common choice for marketing pages that supply a wide image; summary uses a smaller thumbnail.

Images: dimensions, weight, and safe areas

A widely recommended size for large share images is around 1200×630 pixels (roughly 1.91:1). Many platforms crop or letterbox; keep logos and faces away from the extreme edges. Compress images so they load fast—crawlers fetch the OG image in real time, and a multi-megabyte PNG hurts both perceived quality and your server logs.

Serve images over HTTPS, avoid blocking hotlinking rules that might return 403 to Facebook's crawler, and use stable URLs. If you change filenames on every deploy, expect caches to show old art until refreshed.

OG title vs page title vs SEO title

Your visible <h1>, the browser tab <title>, and og:title can all differ slightly. That is valid: search snippets might need a keyword-heavy title, while social might need shorter, friendlier phrasing. Just keep them aligned enough that users do not feel baited when they land.

If you use a SEO plugin or head manager, check that it outputs OG tags once—duplicate conflicting og:title values are a common source of "random" previews.

JSON-LD and Open Graph: different jobs

JSON-LD structured data (for example Article, Product, Organization) helps search engines understand entities and can power rich results. Open Graph targets social crawlers first. You often want both on important templates; they complement rather than replace each other.

Testing tools and cache busting

After you deploy, assume nothing: run your URL through the official debuggers—Meta Sharing Debugger, X Card Validator, LinkedIn Post Inspector—each maintains its own cache. A change on your site may not appear in Slack until that cache expires or you trigger a refresh from the debugger.

• If the preview shows an old image, you likely need a cache refresh, not a new React deploy.
• If no image appears, check for mixed content, robots blocking the image path, or relative URLs where an absolute URL is required.

Mistakes we see in production

• Using relative paths like /og.jpg in og:image without resolving to an absolute URL.
• Reusing a tiny favicon or logo as the only OG image—cards look amateur next to competitors with full-width art.
• Forgetting to update OG fields on template pages—every blog post inherits the homepage image and looks like spam.
• Blocking social crawlers in robots.txt or returning soft 404s for user-agents you did not test.

Frequently asked questions

Do Open Graph tags affect Google rankings directly?

There is no public scoring factor that says "og:description = +3 points." Indirectly, better social CTR and fewer confusing shares can help distribution; your primary SEO levers remain content quality, crawlability, and page experience.

Can I use different OG data per language or region?

Yes—hreflang and separate URLs often pair with distinct OG tags per locale. Ensure each localized URL returns matching OG fields so shares from each market show the right language.

Why does WhatsApp show a different preview than Facebook?

Each app caches and renders slightly differently. Always verify the URL in the specific platform's debugger or by sharing to a private test channel after major changes.

Should og:image be the same as my hero image?

Not necessarily—OG art can be a tighter crop or include text safe for small thumbnails. Many teams design a dedicated 1200×630 template with logo lockup.

How often should I audit OG tags?

After template changes, rebrands, or CMS migrations—at minimum spot-check key landing pages and a sample of dynamic routes (articles, products) quarterly.