Fixing Wrong Open Graph Tags

Overview

Social previews not looking right? You are not alone. You share a link on Facebook, Twitter, or LinkedIn and the preview shows a generic title, the wrong image, or no image at all. Open Graph (OG) tags control what social platforms display when someone shares your URL, and getting them wrong is one of the most common issues with SPAs.

This guide covers the most frequent problems and how to fix them.

Quick Diagnosis

Check what social platforms see on your page:

# See the OG tags in your pre-rendered HTML
curl -s -A "Googlebot/2.1" "https://www.example.com/page" | grep -E "og:|twitter:"

You should see tags like:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A description of this specific page" />
<meta property="og:image" content="https://www.example.com/images/page-hero.jpg" />
<meta property="og:url" content="https://www.example.com/page" />
<meta name="twitter:card" content="summary_large_image" />

If these are missing, show your homepage values on every page, or contain placeholder text, read on.

Common Issues

1. Static Fallback Instead of Dynamic Data

Symptom: Every page on your site shows the same title, description, and image in social previews -- usually the homepage values or generic placeholder text.

Cause: Your app sets OG tags once in index.html and never updates them per page. Since SPAs render client-side, the initial HTML sent to crawlers contains only the static fallback tags.

Bad pattern -- hardcoded in index.html:

<!-- public/index.html -->
<head>
  <meta property="og:title" content="My App" />
  <meta property="og:description" content="Welcome to My App" />
  <meta property="og:image" content="https://example.com/logo.png" />
</head>

Every page shares these same tags. When someone shares /pricing, the preview still says "My App" with your logo.

Good pattern -- dynamic per-page with React Helmet:

import { Helmet } from "react-helmet";

function PricingPage() {
  return (
    <>
      <Helmet>
        <title>Pricing - My App</title>
        <meta property="og:title" content="Pricing - My App" />
        <meta property="og:description" content="Simple, transparent pricing for teams of all sizes." />
        <meta property="og:image" content="https://example.com/images/pricing-preview.jpg" />
        <meta property="og:url" content="https://example.com/pricing" />
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content="Pricing - My App" />
        <meta name="twitter:description" content="Simple, transparent pricing for teams of all sizes." />
      </Helmet>
      <main>
        <h1>Pricing</h1>
        {/* page content */}
      </main>
    </>
  );
}

For Next.js apps:

// app/pricing/page.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Pricing - My App",
  description: "Simple, transparent pricing for teams of all sizes.",
  openGraph: {
    title: "Pricing - My App",
    description: "Simple, transparent pricing for teams of all sizes.",
    images: ["https://example.com/images/pricing-preview.jpg"],
    url: "https://example.com/pricing",
  },
  twitter: {
    card: "summary_large_image",
    title: "Pricing - My App",
    description: "Simple, transparent pricing for teams of all sizes.",
  },
};

With RndrKit pre-rendering your pages, these dynamically-set tags are included in the HTML that social platform crawlers receive.

2. Images Not Showing

Symptom: The title and description appear correctly in the social preview, but there is no image, or it shows a broken image placeholder.

Common causes and fixes:

Relative URL instead of absolute:

<!-- Bad -- social platforms cannot resolve relative paths -->
<meta property="og:image" content="/images/hero.jpg" />

<!-- Good -- full absolute URL with protocol -->
<meta property="og:image" content="https://www.example.com/images/hero.jpg" />

Social platform crawlers do not resolve relative URLs. The og:image value must be a full absolute URL starting with https://.

Image too small:

Social platforms have minimum size requirements:

  • Facebook: minimum 200x200 pixels, recommended 1200x630
  • Twitter: minimum 144x144 for summary, 300x157 for summary_large_image
  • LinkedIn: minimum 200x200, recommended 1200x627

If your image is below the minimum, the platform may ignore it entirely.

Image too large:

Facebook rejects images over 8MB. Keep OG images under 5MB to be safe. Use JPEG for photos (good compression) and PNG only when you need transparency.

Image URL returning 404:

# Verify the image actually loads
curl -sI "https://www.example.com/images/hero.jpg" | head -5

If this returns 404, your image path is wrong or the file was not deployed. Check your build output and verify the image exists at the expected URL.

Recommended og:image setup:

<meta property="og:image" content="https://www.example.com/images/page-preview.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="A description of the image" />

3. Stale Social Platform Cache

Symptom: You fixed your OG tags, verified they are correct in your HTML, but Facebook/Twitter/LinkedIn still shows the old preview.

Cause: Social platforms aggressively cache OG data. When a URL is first shared, the platform fetches and caches the OG tags. Subsequent shares use the cached version, even if you have updated your tags.

Fix by platform:

Facebook:

  1. Go to the Facebook Sharing Debugger.
  2. Enter your URL.
  3. Click Scrape Again. This forces Facebook to re-fetch your OG tags.
  4. Verify the preview looks correct.
  5. If it still shows old data, click Scrape Again a second time. Facebook sometimes needs two scrapes to fully refresh.

Twitter / X:

  1. Go to the Twitter Card Validator.
  2. Enter your URL and click Preview card.
  3. Twitter re-fetches the tags each time you validate.

LinkedIn:

  1. LinkedIn does not have a public debugger tool.
  2. As a workaround, append a cache-busting query parameter when sharing: https://www.example.com/page?v=2
  3. LinkedIn will treat this as a "new" URL and fetch fresh OG data.
  4. Note: this creates a separate share count. Use it only to verify the fix, then share the clean URL.

4. RndrKit Workflow for Fixing OG Tags

When you have updated your OG tags in your application code and deployed the changes, the RndrKit cache may still contain the old pre-rendered HTML with the previous OG tags.

Steps to get fresh social previews:

  1. Deploy your updated application with the corrected OG tags to your origin.
  2. Purge the page cache in your RndrKit dashboard. Go to your domain, find the affected page, and purge it. Or use the Cache Management page to purge by URL.
  3. Trigger a fresh render by requesting the page as a bot:
curl -s -A "Googlebot/2.1" "https://www.example.com/page" | grep "og:title"
  1. Verify the new tags are in the output.
  2. Use Facebook's Sharing Debugger to pull the fresh version and confirm the preview looks correct.

This order matters: purge first, then re-render, then tell social platforms to re-fetch. If you ask Facebook to scrape before purging, it will get the old cached version from RndrKit.

Checklist

Before sharing a page, verify these OG essentials:

  • og:title is set and unique per page (not your site name on every page)
  • og:description is set and describes the specific page content
  • og:image uses an absolute URL (https://...) and the image returns 200
  • og:image dimensions are at least 1200x630 pixels
  • og:url matches the page's canonical URL
  • twitter:card is set to summary_large_image (for large previews) or summary
  • Tags are in the <head>, not the <body>
  • Tags appear in the pre-rendered HTML (test with curl -A "Googlebot/2.1")

Next Steps

Previous

Duplicate URLs

Next

Frequently Asked Questions