Open Graph meta tags: what you need to know

A practical guide to Open Graph meta tags: what they do, key tags and examples, platform fallbacks, testing steps, and a checklist to get social previews right.

Michael

Published 16 Februari 2026

Open Graph Meta Tags - What You Need to Know

What Open Graph does and why it matters

Open Graph meta tags tell social platforms what title, description and image to show when someone shares a URL. Placed in the HTML head, these tags standardize how pages are previewed across services that support the protocol. When you set them, you control the snippets people see in feeds, private messages and chat previews instead of leaving the selection to the platform’s heuristics.

A few technical notes that affect implementation and troubleshooting: Google uses the mobile version of a page as its primary basis for crawling and indexing; since July 2024 Google crawls Search with Googlebot Smartphone by default. Facebook, Twitter/X and other social scrapers may fetch a page with different user-agents and cache previews. Also note that Google removed traditional cached pages in early 2024, which does not change how Open Graph works but affects how search engines surface older page snapshots.

Key Open Graph tags and example markup

The core Open Graph tags you should include in the head of each shareable page are og:title, og:description, og:image, og:url and og:type. Add them alongside standard meta description and structured data; social crawlers only read the head, so include fully rendered tags there.

Example HTML (place inside <head>):

If you publish content programmatically (CMS templates or server rendering), ensure those tags are generated server-side so scrapers receive them without relying on client-side JavaScript.

Platform differences and fallbacks

Open Graph is a broadly supported protocol, but each platform applies its own rules and fallbacks.

Because platforms cache previews differently, always test your page across the services you expect users to share on. Use platform debuggers to inspect what each service extracts and to clear cached snapshots when you update metadata.

Image guidance and accessibility considerations

Visuals are the most visible element of a social preview. Aim for images that are large enough to render crisply on high-DPI devices and are visually centered for common crop ratios. A widely used approach is to provide an image with a landscape orientation and include explicit width/height metadata where supported (og:image:width and og:image:height) so scrapers know the dimensions without downloading the full file.

Also check these practical points:

Example: check the image headers with a command like curl -I https://yourdomain.com/wp-content/uploads/your-image.png to confirm 200 response and Content-Type.

How to test and troubleshoot Open Graph

When a preview looks wrong, follow a systematic checklist rather than guessing. Start with the raw HTML head to confirm tags exist, then check how scrapers fetch the page and whether proxies or caches are returning stale content.

For pages you own, Google Search Console’s URL Inspection remains useful for indexation and mobile rendering checks, but it is not a substitute for the social platforms’ own debuggers when diagnosing social preview issues.

Common mistakes and a quick implementation checklist

Quick implementation checklist:

If you want a deeper technical audit on how your pages are served and rendered, see Read the Technical SEO Guide for layout, rendering and server-side considerations.

FAQ: What if a platform ignores my og:image?

Platforms apply their own heuristics and caching. Confirm the image URL returns a 200 status and correct Content-Type, is large enough and has a suitable aspect ratio, and isn’t blocked by robots.txt. Use the platform’s debugger to see exactly what the scraper extracted and to force a re-scrape.

FAQ: Can I use different text for Twitter/X and Facebook?

Yes. Twitter/X supports twitter:* tags for title, description and image. If you need a different headline or image on Twitter/X, include both og:* and twitter:* tags — the platform will prefer its own tags when present.

FAQ: Should Open Graph tags be added for every page?

Prioritize shareable pages: blog posts, landing pages and product pages typically benefit most. For site-wide pages (legal, admin) the benefit is smaller but harmless. If a page is unlikely to be shared, tags add little value but also little cost.

FAQ: Do Open Graph tags affect SEO rankings?

Open Graph tags control social previews and do not directly change how search engines rank pages. However, better previews can increase click-throughs from social channels, which may indirectly influence user engagement signals. Keep crawl, index and ranking distinctions in mind: OG tags affect what social platforms show, not the search engine indexation rules.

Artikel terkait