Open Graph Tags: Complete Social Media SEO Guide | SlapMyWeb
On-Page SEO10 min read
Open Graph Tags: Complete Social Media SEO Guide
Set up Open Graph tags so your pages look perfect when shared. OG title, description, image specs, Twitter cards, copy-paste code, and debugging steps.
SlapMyWeb TeamΒ·
Open Graph tags are HTML meta tags placed in your page's <head> that control exactly how a URL looks when it is shared on social media and messaging apps. Originally built by Facebook in 2010, the Open Graph protocol is now the universal standard read by Facebook, LinkedIn, WhatsApp, Telegram, Discord, Slack, iMessage and more. Set five core tags β og:title, og:description, og:image, og:url and og:type β plus matching Twitter Card tags, and your links turn from grey placeholder boxes into clickable preview cards.
If you have ever pasted your site link into a WhatsApp chat or a LinkedIn post and watched a blank grey box appear instead of a polished preview, this is the fix. It is a two-minute job that most sites skip β and it quietly costs them clicks every single day.
What Are Open Graph Tags?
When someone shares your URL, the receiving platform sends a crawler (Facebook's is facebookexternalhit) to fetch the page and read the Open Graph tags in your <head>. Those tags tell the platform the title, description, image and URL to show in the link preview card. When they are missing, the platform guesses β and it usually guesses wrong, grabbing a logo, an ad, the first random image on the page, or nothing at all.
Think of Open Graph tags as the packaging for your content when it travels outside your website. You control how your pages look in someone's WhatsApp chat, X feed, Slack channel or LinkedIn post β not the platform. Because social and messaging traffic is a meaningful slice of how content actually spreads, getting this packaging right has a direct line to your click-through rate and how serious your brand looks.
Open Graph also overlaps heavily with on-page metadata you have probably already optimized. The same discipline that goes into writing SEO title tags that get clicks and meta descriptions that boost CTR applies here β except the audience is a human scrolling a feed, not a search ranking algorithm.
Why Open Graph Tags Matter for SEO and Marketing
Social sharing click-through rate
A link with a clear image, sharp title and tight description gets clicked far more than a grey placeholder box. That is not vanity β it is traffic. More clicks from sharing means more sessions, and the secondary effects ripple into SEO: more readers who can link to you, more brand searches, lower reliance on any single channel.
To be precise about the mechanics: social signals are not a confirmed direct Google ranking factor. The SEO benefit is indirect. Optimized previews earn more shares, those shares earn more visibility, and visibility earns the links and brand recognition that do move rankings. Treat Open Graph as a distribution lever, not a ranking hack.
Brand perception and trust
When your link previews look intentional, people trust the brand behind them. A broken preview signals carelessness β and if the packaging is sloppy, readers reasonably assume the content might be too. For agencies, freelancers and SaaS teams, every shared link is a tiny advertisement. Polishing it costs minutes and pays off on every share forever.
AI assistants and rich previews
Messaging apps and AI-powered tools increasingly lean on Open Graph data to build rich previews, summaries and recommendations. Clean OG metadata gives these systems a reliable title, description and image to surface β the same structured-clarity principle behind getting featured in AI answers and broader answer engine optimization.
Two people at a desk reviewing a link preview card on a laptop screen during a meeting
The Core Five Open Graph Tags
Every page should have these five. Everything else is enhancement.
og:title
The headline shown in the preview card. Keep it compelling and clear, ideally under 60 characters so it does not truncate. This can differ from your HTML <title> β use the <title> for search intent and keywords, and og:title to win the click in a feed.
og:description
A one-to-three-sentence summary shown beneath the title. Keep it under roughly 200 characters for consistent rendering, and make it actionable β tell the reader what they get by clicking.
og:image
The preview image, and the single biggest driver of social engagement because humans scan visually before they read. Requirements that work everywhere:
File size: keep it well under 1 MB for fast preview generation (Facebook accepts larger, but speed matters)
Format: JPG or PNG β WebP is still inconsistently supported by OG crawlers, so use JPG/PNG for the share image specifically
Text: keep any on-image text large enough to read in a mobile thumbnail
og:url
The canonical URL for the page. This consolidates sharing signals so that variations of the same page (trailing slash, www, query strings) do not each spawn a separate preview. It works hand-in-hand with canonical tags that prevent duplicate content.
og:type
Describes the content. Common values: website (most pages), article (blog posts and news), product (e-commerce). The type unlocks extra structured fields and changes how some platforms render the card.
Twitter Card Tags
X (Twitter) reads its own meta tags alongside Open Graph. It falls back to OG tags when its own are missing, but setting Twitter-specific tags gives you direct control over the card.
The two essentials:
`twitter:card` β the card type: summary (small square thumbnail), summary_large_image (full-width image), player (video) or app
`twitter:site` β your brand's handle, for example @slapmyweb
For most content, summary_large_image wins. It renders a full-width image that dominates the timeline and pulls far more attention than the small summary thumbnail. Without twitter:card, X defaults to the small card even when you have a perfect 1200 Γ 630 image β so always set it explicitly.
Complete Implementation: Copy-Paste Code
Here is the full Open Graph and Twitter Card set for a typical article page. Drop it inside <head>.
html
<head>
<!-- Primary Meta Tags -->
<title>How to Fix Core Web Vitals β Complete Guide 2026</title>
<meta name="description" content="Step-by-step guide to fixing LCP, INP, and CLS. Code examples, tool picks, and priority fixes for faster websites.">
<!-- Open Graph / Facebook / LinkedIn / WhatsApp -->
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/blog/fix-core-web-vitals">
<meta property="og:title" content="How to Fix Core Web Vitals β Complete Guide 2026">
<meta property="og:description" content="Step-by-step guide to fixing LCP, INP, and CLS. Code examples and priority fixes for faster websites.">
<meta property="og:image" content="https://example.com/images/og/core-web-vitals-guide.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Core Web Vitals dashboard showing green LCP, INP and CLS metrics">
<meta property="og:site_name" content="Example Blog">
<meta property="og:locale" content="en_US">
<!-- Article-specific OG tags -->
<meta property="article:published_time" content="2026-04-15T09:00:00Z">
<meta property="article:modified_time" content="2026-04-18T14:30:00Z">
<meta property="article:author" content="https://example.com/about">
<!-- Twitter / X Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@exampleblog">
<meta name="twitter:creator" content="@authorhandle">
<meta name="twitter:title" content="How to Fix Core Web Vitals β Complete Guide 2026">
<meta name="twitter:description" content="Step-by-step guide to fixing LCP, INP, and CLS. Code examples and priority fixes.">
<meta name="twitter:image" content="https://example.com/images/og/core-web-vitals-guide.jpg">
<meta name="twitter:image:alt" content="Core Web Vitals dashboard showing green metrics">
</head>
For Next.js, do not hand-write tags β use the Metadata API so titles, descriptions and OG images stay in sync and are generated per page:
The metadataBase line matters: it lets Next.js turn relative image paths into the absolute URLs that OG crawlers require. WordPress users get the same output for free from a configured SEO plugin β see the WordPress SEO optimization guide β and stores can wire it up through the Shopify SEO checklist.
OG Image Requirements Across Platforms
The image carries the preview. Get it wrong and your best content gets shared with an ugly box.
Platform
Recommended size
Aspect ratio
Facebook
1200 Γ 630
1.91:1
X (large card)
1200 Γ 628
~1.91:1
LinkedIn
1200 Γ 627
1.91:1
WhatsApp
1200 Γ 630
1.91:1
Discord
1200 Γ 630
1.91:1
The universal safe size is 1200 Γ 630 pixels β build one image at that size and it works everywhere. Keep critical text and logos inside the center 80%, since some platforms crop the edges of the card.
Always declare og:image:width and og:image:height. Without explicit dimensions, a platform has to download the full image just to learn its size, which delays the preview or causes it to fail on the first share. While you are optimizing the file itself, the same discipline from image optimization for SEO applies β a lean, correctly sized image renders the card faster.
Designer adjusting a 1200 by 630 social share image template in design software on a monitor
How to Test and Debug Open Graph Tags
Every platform caches OG data aggressively, so a bad first impression can persist for hours or days. Test before you share widely.
Validate with official tools
Use the platform debuggers β they are authoritative because they show exactly what the real crawler sees:
Facebook Sharing Debugger (developers.facebook.com/tools/debug) β previews the card and lets you re-scrape
LinkedIn Post Inspector (linkedin.com/post-inspector) β previews and refreshes LinkedIn's cache
The Open Graph spec itself is documented at ogp.me, and Google's guidance on how it reads page metadata lives in the Google Search Central docs
Clear a cached (stale) preview
When you update tags but the old card still shows, you need to bust the cache. In the Facebook Sharing Debugger, paste the URL and click Scrape Again. LinkedIn's Post Inspector refreshes on inspection. WhatsApp is the stubborn one β it can hold a preview up to 24 hours; appending a harmless query string (?v=2) forces a fresh fetch in the meantime.
Run a free SlapMyWeb audit to see which of these issues your site actually has β the On-Page SEO report flags every page with missing or malformed Open Graph markup.
Common Open Graph Mistakes
Missing og:image (or one that is too small)
The most common failure. With no og:image, platforms show nothing or grab a random page asset β usually a logo or ad. Images smaller than 200 Γ 200 pixels may be ignored entirely by Facebook and LinkedIn.
Relative URLs instead of absolute
All Open Graph URL values must be absolute. og:image="/images/hero.jpg" will not resolve β it must be og:image="https://example.com/images/hero.jpg". The same rule applies to og:url. This is the second most frequent implementation bug.
Skipping og:url
Without og:url, every variation of a page (trailing slash, www vs non-www, tracking parameters) spawns its own preview and splits share counts. Point og:url at the canonical URL to consolidate every signal onto one address.
Forgetting the Twitter card type
X falls back to OG tags but defaults to the small summary card unless you set twitter:card="summary_large_image". A gorgeous 1200 Γ 630 image renders as a tiny thumbnail without it.
Leaving out og:image:alt
Accessibility applies to social previews too. Add og:image:alt and twitter:image:alt so screen readers can describe the card β the same care you put into writing alt text for images on the page itself. It is a small quality signal and a courtesy to every user.
Person on a laptop running a link through a social preview debugger tool, broken preview being fixed
Open Graph sits inside the wider on-page layer of technical SEO. If you want the full picture of how metadata, structure and performance fit together, the complete technical SEO guide ties every piece β including heading tags and schema markup β into one workflow.
Frequently Asked Questions
Do Open Graph tags directly affect Google rankings?
No. Open Graph tags are not a confirmed direct Google ranking factor. They influence SEO indirectly by lifting social sharing, referral traffic and link opportunities, and Google can use og:image for richer presentation in surfaces like Discover. Treat OG as a distribution and presentation tool, not a ranking trick.
Can I use a different title for OG and SEO?
Yes, and you often should. Your HTML <title> should target search intent and keywords for the SERP, while og:title can be more conversational and curiosity-driven to win the click in a social feed. A single page can carry a keyword-focused search title and a punchier social title at the same time.
Why does my link still show the old preview after I changed the tags?
Because the platform cached the previous fetch. Open Graph data is stored on the platform's side, so updating your HTML does not refresh it automatically. Re-scrape the URL in the Facebook Sharing Debugger or LinkedIn Post Inspector; for WhatsApp, wait out the cache window or append a query string to force a fresh crawl.
What image size should an OG image be?
1200 Γ 630 pixels at a 1.91:1 ratio is the universal safe size that renders cleanly on Facebook, LinkedIn, X, WhatsApp and Discord. Keep important text and logos within the center 80% to survive edge cropping, declare og:image:width and og:image:height, and use JPG or PNG for reliable crawler support.
What happens if the OG image URL fails to load?
If the image returns a 404 or times out, the platform shows a blank card or falls back to a random page asset β and it caches that failure. Even after you fix the URL, the broken preview persists until you manually re-scrape it in the platform's debugger. Always confirm the image URL is publicly reachable before you ship the tags.