All fix guides
NoticeOn-Page SEO

How to Fix Missing Open Graph Tags

Your page has no Open Graph (og:) meta tags, so when someone shares its URL on LinkedIn, Slack, WhatsApp, X, or Facebook, the preview renders with no title, no description, and no image. That same head-level metadata is read by AI answer engines and their crawlers, so weak OG data also weakens how your page appears when ChatGPT, Perplexity, or Google AI Overviews summarize or cite it. This is a notice-level issue that does not directly affect Google rankings, but it lowers click-through on shared links, where a lot of qualified traffic starts. The fix is one-time: add four required og: tags plus a couple of recommended ones to your page head, point og:image at a 1200x630 image, and re-scrape the URL in the platform debuggers.

What this means

Open Graph is a metadata protocol (originally from Facebook) that tells other platforms how to render a preview card when your URL is shared. The tags live in the <head> of your HTML as <meta property="og:..."> elements. "Missing Open Graph tags" means our crawler found none of the core og: properties, or too few of them to build a clean preview card.

The protocol defines four required properties: og:title (the card headline), og:type (usually "website" or "article"), og:image (an absolute HTTPS image URL), and og:url (the page's canonical URL). In practice you also want og:description and og:site_name, since platforms use them to complete the card.

Without these, each platform falls back to guessing. It scrapes your <title>, hunts for a meta description, and grabs the first usable image on the page. The result is unpredictable, often a text-only link with no image at all. This is separate from your SEO title tag and meta description, which control your Google search result. OG tags control the share card, and the OG copy usually reads better when it's a little punchier than your SEO copy.

Why it matters

A shared link with no image and no title is a link people scroll past. Every major sharing surface reads OG tags to build its preview: LinkedIn, X, Slack, Discord, WhatsApp, iMessage, Facebook, Teams. When the tags are missing, your page shows up as a bare URL or a mismatched thumbnail, and click-through on shared links drops. If you invest in social, newsletters, or community sharing, this is one of the cheapest CTR wins available.

It does not directly move Google rankings, which is why it's flagged as a notice rather than an error. Google's organic snippet comes from your title tag, meta description, and page content, not from og: tags.

The answer-engine angle is where OG now earns its keep. The crawlers behind Perplexity, ChatGPT search, Google AI Overviews, and Bing Copilot parse head-level metadata to understand a document. When valid JSON-LD structured data is present, schema is the primary source of truth. When it isn't (and schema coverage across the web is far from universal), OG tags act as a clean, machine-readable fallback that states your page's title, canonical URL, and a concise description. A clearly labeled page is easier to summarize and cite than one an AI crawler has to reverse-engineer from raw HTML. OG tags are low-effort insurance for both human shares and AI visibility.

How to fix it

  1. 1

    Add the required og: tags to your page head

    Place the four required properties plus og:description and og:site_name inside the <head>. og:image must be an absolute HTTPS URL, not a relative path, and og:url should match your canonical URL. Set og:type to "article" for blog posts and "website" for everything else. Give each page its own unique title, description, and ideally its own image, rather than copying one site-wide set everywhere.

  2. 2

    Create a 1200x630 preview image

    1200x630 pixels (a 1.91:1 ratio) renders cleanly across Facebook, LinkedIn, X, Slack, and Discord. Use PNG or JPEG; WebP and SVG are not reliably rendered by every platform, so avoid them for previews. Keep the file under a few MB, and keep any text large and centered so it survives cropping. Add og:image:width and og:image:height so platforms can lay out the card before the image finishes loading.

  3. 3

    Add one Twitter/X tag on top of OG

    X reads your og: tags as a fallback, so og:title, og:description, and og:image already carry over. The one thing it won't infer is the card format. Add <meta name="twitter:card" content="summary_large_image"> to force the large-image layout; without it X may show a small thumbnail even with a good og:image. Only add twitter:image or twitter:title if you want X to display something different from your OG values.

  4. 4

    Use your platform's built-in fields or a plugin

    Most platforms handle OG for you once you fill in the right field. On WordPress, Yoast or Rank Math output og: tags automatically; set the Social image, title, and description per post. On Shopify, most themes emit OG tags from theme.liquid, so set a per-product social image and a store-wide default. On Wix and Squarespace, set the social share image and title in each page's settings. Hand-code the tags only if your platform or custom framework doesn't already output them.

  5. 5

    Hand-code it for raw HTML, Next.js, or headless setups

    On a static site, paste the meta tags directly into each page's head. In Next.js (App Router), export a metadata object or generateMetadata with an openGraph block and Next renders the tags for you; set metadataBase so relative image paths resolve to absolute HTTPS URLs. Whatever the stack, confirm the tags appear in View Source (server-rendered), not only after JavaScript runs, since some crawlers won't execute your JS.

  6. 6

    Re-scrape and validate the URL

    Platforms cache the old, empty preview, so you must force a refresh. Run the URL through the Facebook Sharing Debugger and LinkedIn Post Inspector and trigger a re-scrape. Confirm the title, description, and image all populate and that og:image loads over HTTPS. Fix any warnings about image size or missing properties, then re-share to check the card looks right.

Example

<!-- Required Open Graph properties -->
<meta property="og:title" content="How to Fix Missing Open Graph Tags" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/fix/missing-open-graph-tags" />
<meta property="og:image" content="https://example.com/images/og/og-tags.png" />

<!-- Strongly recommended -->
<meta property="og:description" content="Add these tags to fix broken link previews on social and AI answer engines." />
<meta property="og:site_name" content="Example" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

<!-- X/Twitter: OG covers the rest; this forces the large-image card -->
<meta name="twitter:card" content="summary_large_image" />

The core Open Graph tags plus one X/Twitter tag, placed inside your page's <head>. Use absolute HTTPS URLs and unique values per page.

Platform-specific steps

WordPress (Yoast / Rank Math)

Both plugins output og: tags automatically. In the post editor, open the Yoast or Rank Math Social tab and set the Social image, title, and description per post. Set a site-wide default OG image in the plugin's Social settings so pages without a custom one still get a card. Don't also add OG tags by hand, or you'll get duplicate tags.

Shopify

Most themes already emit OG tags from theme.liquid using product, collection, and page data. Set a per-product social sharing image and a store-wide fallback (Online Store > Preferences has a social sharing image field). If your theme is missing tags, add them to theme.liquid inside the <head> using Liquid objects like {{ page_title }} and {{ product.featured_image | image_url }}.

Wix

Open the page's SEO / Social Share settings and set the social share title, description, and image under the tab for what you share on social. Wix renders the og: tags for you. Set these per page rather than relying on the site default, so each URL shares with its own card.

Squarespace

Set a Social Sharing image in Marketing > Social Sharing for the site default, and override per page under the page's Settings > Social Image / SEO panel. Squarespace outputs the og: tags automatically from these fields.

Next.js / raw HTML

In Next.js App Router, export a metadata object (or generateMetadata) with an openGraph block, and set metadataBase so relative image paths become absolute HTTPS URLs. On a static HTML site, paste the meta tags directly into each page's <head>. Confirm the tags appear in View Source (server-rendered), since some crawlers don't run JavaScript.

Free tool
Check this with the Open Graph Checker

Frequently asked

Do Open Graph tags affect my Google rankings?

No, not directly. Google builds its search snippet from your title tag, meta description, and page content, not from og: tags, which is why this is a notice rather than an error. The impact is on click-through when your link is shared on social and messaging apps, and increasingly on how cleanly AI answer engines read and cite your page.

What's the difference between Open Graph tags and my SEO title and meta description?

They serve different surfaces. Your title tag and meta description control how the page looks in Google's search results. Open Graph tags (og:title, og:description) control how it looks as a share card on LinkedIn, X, Slack, and similar. They can be identical, but the OG versions often read better slightly more social and click-worthy, since they compete in a feed rather than a search results page.

What image size should I use for og:image?

Use 1200 by 630 pixels, a 1.91:1 ratio, in PNG or JPEG. That size renders correctly across Facebook, LinkedIn, X, Slack, and Discord without awkward cropping. Don't go below 200x200 or Facebook will ignore the image, and avoid WebP and SVG since several platforms won't render them in previews. Always use an absolute HTTPS URL for the image.

I added the tags but the old preview still shows. Why?

Platforms cache previews aggressively. After you add or change OG tags, force a re-scrape using the Facebook Sharing Debugger and LinkedIn Post Inspector; X updates its card once you re-share. If the tags still don't appear, check that they're in the raw HTML source and rendered server-side, not injected by client-side JavaScript a crawler may not run.

Do I need both Open Graph tags and Twitter Card tags?

Usually just OG plus one Twitter tag. X falls back to your og:title, og:description, and og:image automatically, so you don't need to duplicate them. The one thing X won't infer is the card layout, so add a single twitter:card tag set to summary_large_image for the full-width image card. Add other twitter:* tags only if you want X to show different content from your OG values.

Does your site have this issue?

Run a free, AI-powered audit and we’ll flag this and 150+ other checks in about a minute. No signup.

No signup needed. Results in under 60 seconds.

Related fixes