Open Graph Tags — How to Control Social Media Previews

Key Takeaways

The four required OG properties are og:title, og:description, og:url, and og:image — a page missing any of these will display incorrectly when shared
og:image should be 1200×630 pixels — the size that renders correctly across Facebook, LinkedIn, Twitter/X, and messaging apps without being cropped
Twitter/X has its own card system (twitter:card, twitter:title, etc.) but falls back to OG tags when Twitter-specific tags are absent
og:url should be the canonical URL of the page — not the URL it was shared from (prevents duplicate content confusion in analytics)
Google does not use OG tags directly for ranking — but they affect click-through rates from social shares, which drives traffic

The Required OG Properties

Add these to the <head> of every page:

<meta property="og:title" content="Your Page Title Here">
<meta property="og:description" content="A 2-3 sentence description of the page.">
<meta property="og:url" content="https://www.example.com/page/">
<meta property="og:image" content="https://www.example.com/images/og-image.jpg">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Your Site Name">

og:type values: website (default for most pages), article (blog posts), product, video.movie. For most sites, website for the homepage and article for blog posts covers everything.

Each property does a specific job. og:title is the bold headline shown in the preview card — this is what people read first in a feed. og:description is the supporting text beneath the title. og:url sets the canonical link that appears under the card and determines what URL analytics tools record when the share is clicked. og:image is the visual thumbnail — the single biggest factor in whether someone stops scrolling to read your link.

og:image Requirements

The OG image is the most important tag for social share appearance. Get the dimensions wrong and your image will be cropped, letterboxed, or skipped entirely.

Requirement	Value	Notes
Recommended dimensions	1200×630px	The standard across all platforms — renders without cropping on Facebook, LinkedIn, Twitter/X, and most messaging apps
Minimum dimensions	600×315px	Anything smaller may not display at all
File size	Under 1MB recommended	Facebook's hard limit is 8MB; smaller loads faster in feed previews
Format	JPG, PNG, WebP	GIF supported as static image; animated GIFs behave inconsistently across platforms
Aspect ratio	1.91:1	Do not use square images for `og:image` — they will be cropped or letterboxed in feed previews
URL format	Absolute URL required	Relative paths like `/images/og.jpg` do not work — must include `https://`

Create one branded OG image template and use it as the default for all pages without a specific image. Individual blog posts or product pages benefit from unique, contextual images — a custom image with the article headline will consistently outperform a generic site logo in social shares.

Tip: Keep your important visual content away from the edges of the OG image. Many platforms apply subtle rounding or overlay elements near the borders — a 60px safe zone on all sides protects text and logos from being obscured.

Twitter Cards

Twitter/X has its own meta tag system but falls back to OG tags if Twitter-specific tags are absent. Best practice is to include both sets — the duplication is minimal and the control is worth it:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Page Title Here">
<meta name="twitter:description" content="A description for Twitter.">
<meta name="twitter:image" content="https://www.example.com/images/og-image.jpg">

twitter:card controls the layout of the card. The three main values:

summary_large_image: shows a full-width image preview — use this for content pages, blog posts, and any page where the visual is the hook
summary: shows a smaller square thumbnail alongside the text — better for product pages or when the image is secondary to the text content
player: for video or audio content — requires additional twitter:player properties and approval from Twitter/X

If you omit Twitter Card tags entirely, Twitter/X will read og:title, og:description, and og:image as fallbacks. The default card type in that case is summary — a small thumbnail, not the large image preview. This is why explicitly setting twitter:card to summary_large_image matters: without it, your carefully sized 1200×630 image will display as a tiny thumbnail.

og:title and og:description

These do not need to match your HTML <title> and <meta name="description"> exactly. Social context is different from search result context — and optimising for one can hurt the other if you treat them as identical.

For og:title: social platforms are more generous with length than Google SERPs. Up to 100 characters is common. You can drop the keyword-stuffing conventions that make SEO titles awkward and write something a person would actually want to click in a feed. If your SEO title is "Open Graph Tags Guide — Control How Your Pages Look When Shared," the OG title can be more conversational.

For og:description: aim for 2–4 sentences or 100–200 characters. Unlike a meta description (which Google may rewrite anyway), the OG description is shown exactly as written in most social previews. Make it concrete — tell the reader what they'll learn or what problem the page solves.

For most pages, using the same value as the SEO title and description is a perfectly acceptable starting point. Customise when the SEO title is too keyword-dense to be compelling in a social feed.

Verifying OG Tags

Four ways to check that your OG tags are working as expected:

1. Facebook Sharing Debugger: developers.facebook.com/tools/debug/ — enter any URL and see exactly how Facebook will render the share preview. Also fetches a fresh version (bypassing cache) if you recently updated tags. Facebook aggressively caches OG data; this is the only reliable way to force a refresh after a change.

2. LinkedIn Post Inspector: linkedin.com/post-inspector/ — same concept for LinkedIn. LinkedIn is particularly strict about image dimensions and will show no image at all if your OG image is below the minimum size.

3. Twitter Card Validator (now X): cards-dev.twitter.com/validator — shows the Twitter card preview as it will appear in a tweet. Note that X has progressively restricted access to this tool; it may require a developer account.

4. SEO Analyzer: The ByteWaveNetwork SEO Analyzer crawls every page on your site and flags missing og:title, og:description, og:image, and Twitter Card tags across your entire domain in one pass — no need to check pages one by one.

5. View source check: In your browser, open any page, view source (Ctrl+U / Cmd+U), and search for og:. Verify all four required properties are present with correct absolute URLs.

Common OG Tag Mistakes

Relative image URLs. og:image must be absolute. /images/og.jpg does not work; https://www.example.com/images/og.jpg does. This is the single most common OG implementation error — the tag is present but the image never loads in previews.

No og:image at all. Pages without an OG image will show as a plain text link when shared — no visual, much lower engagement. Even a generic branded image is significantly better than none.

Same og:image for every page. A single fallback image is fine for most pages, but blog posts, product pages, and landing pages all benefit from unique images. A preview card that shows the article headline as an image will consistently outperform a generic site logo.

og:title that duplicates the H1 verbatim. The H1 is written for page context; the OG title is written for feed context. They're often similar but consider whether the H1 makes sense read in a Twitter timeline without the surrounding page structure.

Forgetting to account for platform cache. Social platforms cache OG data aggressively — sometimes for days. After updating OG tags, use the platform debugger tools to force a cache refresh before concluding the tags aren't working.

Missing twitter:card tag. Without explicitly setting twitter:card, Twitter/X defaults to summary (small thumbnail) even when you have a perfect 1200×630 OG image. Always include <meta name="twitter:card" content="summary_large_image"> on content pages.

Don't confuse og:image caching with a broken implementation. If you update an OG image and the old one still shows in social previews, the tag is likely correct — the platform's cache just hasn't expired. Use the platform's URL debugger tool (Facebook Sharing Debugger, LinkedIn Post Inspector) to force an immediate re-fetch.

Audit Your Site's OG Tag Coverage

Free, no signup. The SEO Analyzer checks every page on your site for missing og:title, og:image, og:description, and Twitter Card tags — the complete social meta audit in one crawl.

Try the SEO Analyzer Free →

Sunny Pal Singh

Fellow · Technical Director — AI Infrastructure, Cloud Orchestration & Network Automation

Sunny is a Fellow and Technical Director specialising in AI infrastructure, cloud orchestration, and network automation. With hands-on depth across AWS, Azure, GCP, Red Hat OpenStack, and OpenShift, he leads high-performing teams of architects and engineers building transformative solutions at scale. He built ByteWaveNetwork to bring the same engineering rigour to everyday web tooling.

Affiliate disclosure: Some links on this page may be affiliate links. We only mention tools we've personally used and have an honest opinion about. Affiliate revenue helps keep ByteWaveNetwork's tools free and maintained. We are not paid by any of the tools compared in this article for favorable coverage.