Open Graph Checker

TL;DR: Open Graph tags control how your page looks when shared on Facebook, LinkedIn, Twitter/X, Discord, Slack, and WhatsApp. Without them, platforms guess what to display. The result is usually ugly. This tool checks your OG and Twitter Card tags, previews the share card for each platform, and flags anything missing or broken so you can fix it before your content goes live.

What Are Open Graph Tags?

Open Graph (OG) tags are snippets of HTML that sit inside your page's <head> section. They tell social platforms exactly what title, description, image, and URL to show when someone shares a link. Facebook created the Open Graph protocol in 2010, and it quickly became the standard across the web.

Without OG tags, platforms scrape whatever they can find. They might pull a random image from your sidebar, grab boilerplate footer text as the description, or show no preview at all. That means fewer clicks, less traffic, and a weaker brand presence on every social share.

The Open Graph Protocol: Required vs. Optional Tags

The Open Graph protocol specification defines four required properties. Everything else is optional but recommended. Here is a breakdown of the most important tags.

Tag	Purpose	Required?
og:title	The headline shown in the share preview	Yes
og:type	Content type (website, article, product, video)	Yes
og:image	The preview image URL (absolute path only)	Yes
og:url	The canonical URL of the page	Yes
og:description	A short summary shown below the title	Recommended
og:site_name	Your website or brand name	Optional
og:locale	Language and territory (e.g., en_US)	Optional
og:image:alt	Alt text for the preview image (accessibility)	Recommended

Missing og:title or og:image is the single most common mistake. Platforms will still render a preview, but it will look incomplete and unprofessional. Always include at least those two tags plus og:url and og:type.

og:image Best Practices

The image is the most visible part of any social share card. Get it wrong and your click-through rate drops. Follow these guidelines for best results across all platforms.

Use 1200 x 630 pixels. This 1.91:1 aspect ratio is the universal sweet spot. Facebook, LinkedIn, Twitter/X, and messaging apps all handle it well.
Keep file size under 1 MB. The technical limit on most platforms is 8 MB, but large images load slowly in feeds. Compress with tools like TinyPNG or Squoosh.
Always use absolute URLs. Relative paths like /images/og.jpg will not work. Use the full URL starting with https://.
Center your key content. Different platforms crop differently. Keep important text and visuals away from the edges.
Use JPG or PNG format. Both work reliably. Avoid SVG and WebP for OG images since some platforms still do not support them.
Add og:image:alt text. This helps with accessibility and gives platforms fallback text if the image fails to load.

Twitter Card Tags

Twitter/X uses its own set of meta tags defined in the Twitter Cards documentation. The good news: Twitter falls back to Open Graph tags when its own tags are missing. The only tag you truly need is twitter:card, which controls the preview layout.

Card Type	Layout	Best For
summary	Small square thumbnail next to the title and description	Homepages, category pages, profiles
summary_large_image	Large image above the title and description	Blog posts, articles, product pages
player	Embedded video or audio player	Video content, podcasts
app	App install card with direct download link	Mobile app promotion

Most websites should use summary_large_image. The large image format gets significantly more engagement than the small thumbnail. If you do not set twitter:card at all, Twitter defaults to summary, which is the small card.

How Each Platform Renders Previews

Every platform has its own quirks when it comes to displaying shared links. Understanding these differences helps you create previews that look great everywhere.

Facebook: Uses OG tags exclusively. Crops images to 1.91:1. Caches previews aggressively. Titles are truncated around 65 characters in the feed.
LinkedIn: Relies on OG tags. Displays a large image card similar to Facebook. Titles cut off around 70 characters. Descriptions are limited to about 100 characters.
Twitter/X: Checks Twitter Card tags first, then falls back to OG tags. The summary_large_image card dominates most feeds. Images are cropped to a 2:1 ratio.
Discord: Reads OG tags and displays them in an embedded card. Supports og:video for inline playback. Shows a colored sidebar pulled from the site's theme color meta tag.
Slack: Uses OG tags to build an unfurled preview. Displays the site name, title, description, and image. Respects og:site_name for the header label.
WhatsApp: Fetches OG tags and shows a compact preview with image, title, and description. Images smaller than 300 x 200 pixels may not appear at all.

Debugging Cached Previews

You updated your OG tags, but the old preview still shows up. This happens because platforms cache the metadata the first time a URL is shared. Here is how to force a refresh on each platform.

Facebook: Open the Facebook Sharing Debugger, paste your URL, and click "Scrape Again." Repeat once more to confirm the updated tags are pulled.
Twitter/X: Use the Twitter Card Validator to preview and refresh your card. Note that Twitter may still serve the cached version for a short period after scraping.
LinkedIn: Use the LinkedIn Post Inspector to refetch and preview your updated tags.
Discord and Slack: There is no official debugger. In Discord, you can try re-posting the link. In Slack, remove the unfurled preview and re-paste the URL. Caches typically expire within 24 hours.

Common Open Graph Mistakes

After checking thousands of pages, these are the errors we see most often.

Missing og:image entirely. No image means a text-only card. Engagement drops dramatically without a visual.
Using a relative image URL. Social crawlers cannot resolve relative paths. Always use the full absolute URL.
Image too small. Images under 200 x 200 pixels are ignored by most platforms. Stick with 1200 x 630.
Duplicate OG tags. Having two og:title tags confuses crawlers. Only one of each tag should exist per page.
Using the same OG tags on every page. Each page should have unique title, description, and image tags. Reusing the same ones site-wide makes every share look identical.
Forgetting twitter:card. Without it, Twitter defaults to the small summary card, even if your image is sized for the large format.
Blocking crawlers in robots.txt. If your robots.txt blocks Facebook or Twitter bots, they cannot read your OG tags. Make sure social crawlers have access.

Implementing OG Tags in Different CMSes

How you add Open Graph tags depends on your platform.

WordPress

Plugins like Yoast SEO, Rank Math, and All in One SEO automatically generate OG tags. Set the social image and title in the post editor's SEO panel. No code needed.

Shopify

Shopify generates basic OG tags from product data automatically. For custom control, edit the theme.liquid file and add meta tags in the <head> section. Apps like SEO Manager offer a visual interface.

Static Sites and Custom Code

Add the meta tags directly in your HTML <head>. For frameworks like Next.js, use the built-in Head component or the Metadata API. In Gatsby, use react-helmet. In Rails, set the tags in your layout or use a gem like meta-tags.

Frequently Asked Questions

Do Open Graph tags affect SEO rankings?

Not directly. Google does not use OG tags as a ranking factor. But better social previews lead to more clicks, more traffic, and more backlinks. Those signals do help your SEO over time. Think of OG tags as a conversion optimization for social sharing.

Can og:title be different from my page title tag?

Yes. Your <title> tag is written for search engines. Your og:title is written for social feeds. Social titles can be shorter, punchier, or more conversational. Many SEOs write a different title for each context.

Why does Facebook still show the old image after I changed it?

Facebook caches OG data the first time a URL is scraped. Updates do not appear automatically. Open the Facebook Sharing Debugger, enter your URL, and click "Scrape Again" twice. The new image should appear immediately after that.

Do I need both OG tags and Twitter Card tags?

Not always. Twitter falls back to OG tags when its own are missing. However, you should always include twitter:card to control the layout. Without it, Twitter defaults to the small summary card. Adding twitter:card with a value of summary_large_image ensures you get the large image format.

What happens if my og:image URL returns a 404?

The platform will show a preview with no image. Some platforms display a generic gray placeholder. Others show text only. Either way, it looks broken and hurts your click-through rate. Always verify that your image URL is accessible and returns a valid image.

Can I use different images for Facebook and Twitter?

Yes. Set og:image for Facebook and LinkedIn. Then set twitter:image for a Twitter-specific image. Twitter will use its own tag when present and ignore the OG version. This is useful when the optimal crop differs between platforms.

How often should I audit my Open Graph tags?

Check them whenever you redesign a page, change your CMS theme, or update page templates. Also audit after any migration or URL structure change. Broken OG images and outdated descriptions are common after site redesigns.

Related Free SEO Tools

Schema Markup Validator: Validate your structured data alongside your OG tags to maximize how your pages appear in search and social.
On-Page SEO Analyzer: Run a full SEO audit that covers meta tags, headings, images, and social markup in one scan.
Google SERP Preview Tool: See how your page title and description appear in Google search results next to your social previews.

Check Open Graph and Twitter Card meta tags for any URL. Preview how your page looks when shared on Facebook, Twitter/X, and LinkedIn.