The Preview Card Is Your First Impression
You publish a well-researched blog post. You share it on LinkedIn. Instead of a clean preview card with your title, description, and a compelling image, the link renders as a gray box with a truncated URL, a random image pulled from your sidebar, and the first 160 characters of your cookie consent banner as the description.
This is not a LinkedIn bug. It is the absence of Open Graph tags on your page.
Open Graph (OG) tags are HTML meta elements that tell social platforms exactly how to display your content when someone shares a link. Without them, platforms guess — and they guess poorly. Facebook, LinkedIn, Twitter, Slack, Discord, iMessage, WhatsApp, and Telegram all read OG tags to generate link previews.
The protocol was originally created by Facebook in 2010 and is documented in their official Open Graph documentation. Twitter extends it with their own Twitter Cards markup. Both systems are straightforward to implement, but the details matter — a malformed tag or missing image dimension can silently break previews on specific platforms.
This article covers what OG tags are, which ones every page needs, how to debug broken previews, and how to handle different content types. For the full implementation walkthrough with CMS-specific instructions and testing workflows, the complete Open Graph implementation guide covers every platform and edge case in detail.
What Open Graph Tags Are (and Are Not)
OG tags live in the
<head>
section of your HTML. They are invisible to visitors but read by every platform that generates link previews. They do not affect SEO rankings directly — Google does not use OG tags as a ranking signal. However, they dramatically affect click-through rates from social shares, which indirectly impacts traffic and engagement metrics.
Here is what a minimal OG implementation looks like:
<head>
<meta property=”og:title” content=”Your Page Title Here” />
<meta property=”og:description” content=”A concise summary of the page content.” />
<meta property=”og:image” content=”https://example.com/images/preview.jpg” />
<meta property=”og:url” content=”https://example.com/page/” />
<meta property=”og:type” content=”article” />
</head>
These five tags handle 90% of use cases. The remaining 10% involves platform-specific extensions, video content, and multi-language sites.
Essential Tags Every Page Needs
The Core Five
| Tag | Purpose | Requirements |
| og:title | The headline displayed in the preview card | Under 60 characters for full display on all platforms |
| og:description | The summary text below the title | 120-160 characters. Longer text is truncated differently per platform |
| og:image | The preview image | Minimum 1200x630px. Ratio 1.91:1. Under 8 MB. Must be an absolute URL |
| og:url | The canonical URL of the page | Must match your canonical tag. Use the clean URL, not a tracked version |
| og:type | The content type | article for blog posts, website for homepages, product for e-commerce |
Article-Specific Tags
For blog posts and news articles, add these:
<meta property=”article:published_time” content=”2026-03-15T09:00:00Z” />
<meta property=”article:modified_time” content=”2026-03-20T14:30:00Z” />
<meta property=”article:author” content=”https://example.com/author/name/” />
<meta property=”article:section” content=”Technology” />
<meta property=”article:tag” content=”Open Graph” />
<meta property=”article:tag” content=”Social Media” />
These tags help platforms categorize and display your content appropriately. LinkedIn, in particular, uses
article:published_time
to show the publication date in preview cards.
Twitter Card Tags
Twitter supports OG tags as a fallback but has its own system that offers more control. The critical addition is
twitter:card
, which determines the preview layout:
<meta name=”twitter:card” content=”summary_large_image” />
<meta name=”twitter:site” content=”@yourhandle” />
<meta name=”twitter:creator” content=”@authorhandle” />
According to Twitter’s Cards documentation, there are four card types:
| Card Type | When to Use | Image Display |
| summary | Default. Good for most pages | Small square thumbnail (144×144 min) |
| summary_large_image | Blog posts, articles, landing pages | Large rectangular image (1200×628 recommended) |
| player | Video or audio content | Embedded player |
| app | Mobile app promotion | App store button |
For most content websites,
summary_large_image
is the correct choice. It produces the largest, most visually compelling preview.
The OG Image Problem
The image is the single most impactful element of a social preview. Posts with properly sized, relevant images receive 2-3x the engagement of those with default thumbnails or missing images.
Common image mistakes:
- Image too small. Facebook requires a minimum of 200x200px but displays best at 1200x630px. An image below the minimum renders as a small thumbnail instead of a full-width preview.
- Image served over HTTP. Some platforms will not fetch images from non-HTTPS URLs.
- Image URL is relative. OG image URLs must be absolute:
- https://example.com/img/preview.jpg
- , not
- /img/preview.jpg
- .
- Image is behind authentication. If your CDN requires a cookie or token to serve images, social platform crawlers cannot access it.
- Wrong aspect ratio. A 1:1 square image used as an OG image will be cropped awkwardly on platforms expecting 1.91:1.
The solution: Create a dedicated OG image template at 1200x630px. Use it for every page, customizing the text overlay per post. Tools like Figma templates, Canva, or automated services (like those built into WordPress SEO plugins) generate these at scale.
Debugging Wrong Previews
You have added OG tags, but the preview still looks wrong. This is the most common frustration, and it almost always comes down to caching.
Facebook Debugger
URL:
https://developers.facebook.com/tools/debug
Paste your URL. Facebook’s debugger shows exactly what its crawler sees. Click “Scrape Again” to force a cache refresh. Common issues it reveals:
- Missing
- og:image
- — the crawler could not fetch your image
- Redirect chains — your URL redirects and the final destination lacks OG tags
- og:url
- mismatch — your OG URL points somewhere different from the page being shared
The Facebook sharing documentation explains that Facebook caches previews aggressively. After fixing tags, you must manually scrape the URL in the debugger to update the cache. Otherwise, the old (broken) preview persists for days.
LinkedIn Post Inspector
URL:
https://www.linkedin.com/post-inspector
Similar to Facebook’s tool but specific to LinkedIn’s crawler. LinkedIn is stricter about image dimensions — images below 1200x627px may not display at all. The inspector shows warnings for undersized images.
Twitter Card Validator
URL:
https://cards-dev.twitter.com/validator
Enter your URL to preview how Twitter will render your card. Note that Twitter falls back to OG tags if Twitter Card meta tags are missing, but the rendering may differ from what you expect.
General Debugging Checklist
- View page source (not inspect element). Confirm OG tags appear in the raw HTML, not just in JavaScript-rendered DOM. Social crawlers do not execute JavaScript.
- Check that the image URL is accessible. Open the
- og:image
- URL directly in an incognito browser window. If it 404s or redirects, the crawler cannot fetch it.
- Verify no conflicting tags. Multiple
- og:title
- tags on the same page cause unpredictable behavior. Audit for duplicate tags from plugins or theme code.
- Test the canonical URL. Share the exact URL in your
- og:url
- tag, not a variant with tracking parameters.
OG Tags for Different Content Types
E-commerce Product Pages
<meta property=”og:type” content=”product” />
<meta property=”og:title” content=”Product Name — Your Store” />
<meta property=”og:description” content=”Brief product description with key selling point.” />
<meta property=”og:image” content=”https://store.com/products/item-hero.jpg” />
<meta property=”product:price:amount” content=”49.99″ />
<meta property=”product:price:currency” content=”USD” />
Use the product’s hero image, not a lifestyle shot. The image should clearly show the product against a clean background.
Video Content
<meta property=”og:type” content=”video.other” />
<meta property=”og:video” content=”https://example.com/video.mp4″ />
<meta property=”og:video:width” content=”1280″ />
<meta property=”og:video:height” content=”720″ />
Pair this with a
twitter:card
of type
player
and include
twitter:player
with the embed URL.
Multi-language Sites
Use
og:locale
and
og:locale:alternate
to specify language variants:
<meta property=”og:locale” content=”en_US” />
<meta property=”og:locale:alternate” content=”de_DE” />
<meta property=”og:locale:alternate” content=”fr_FR” />
Each locale variant should have its own page with locale-appropriate OG tags.
Implementation by Platform
WordPress: Yoast SEO and Rank Math both generate OG tags automatically from your post title, excerpt, and featured image. Verify the output with Facebook’s debugger — plugin conflicts occasionally produce duplicate or missing tags.
Static sites (Hugo, Jekyll, Eleventy): Add OG tags to your base template’s
<head>
section using template variables. This is a one-time setup that propagates across all pages.
Single-page applications (React, Vue, Next.js): This is where OG implementation gets difficult. Social crawlers do not execute JavaScript. You need server-side rendering (SSR) or a pre-rendering service to ensure OG tags are present in the initial HTML response.
Shopify: Themes include basic OG tags by default. Edit your
theme.liquid
to customize them. Shopify automatically uses the product’s featured image as the OG image.
Validating at Scale
For sites with hundreds or thousands of pages, manual debugging is impractical. Build an automated check into your deployment pipeline:
- Crawl your sitemap with Screaming Frog or a custom script
- Extract all
- og:title
- ,
- og:description
- ,
- og:image
- , and
- og:url
- values
- Flag pages where any of the four core tags are missing
- Flag pages where
- og:image
- returns a non-200 HTTP status
- Flag pages where
- og:title
- exceeds 60 characters or
- og:description
- exceeds 160 characters
Run this monthly. OG tags break silently — a theme update, a plugin conflict, or a CDN configuration change can strip them from thousands of pages without any visible error on the site itself.
The difference between a link that gets clicked and one that gets scrolled past is often nothing more than a properly rendered preview card. OG tags are a small implementation effort with a measurable impact on every link shared from your site, across every platform, every time.
