OG Tags Not Working — Complete Fix Guide for Every Problem
Table of Contents
Open Graph tags can fail in more ways than you might expect. The tag might be present but in the wrong location. The image URL might be correct syntax but unreachable to platform scrapers. The tags might be there in the source but injected by JavaScript after the initial page load, invisible to any bot that does not run JavaScript.
This guide covers every category of OG tag failure, how to diagnose which one you are dealing with, and the specific fix for each.
Step 1: Diagnose With the OG Checker
Before fixing anything, confirm what the problem actually is. Run the page through the OG checker using the HTML paste method:
- Open your page in a browser
- Press Ctrl+U (or Cmd+U) to view page source
- Copy the full HTML
- Paste it into the OG checker
- Click Check Tags
The checker shows what tags are present, what values they have, and what is missing. The recommendations panel lists issues in order of priority.
If the checker finds correct tags but the platform shows a wrong preview
Your tags are right. The problem is platform caching. Skip to the caching section below.
If the checker finds missing or wrong tags
The tags themselves need to be fixed. The sections below cover each category of tag problem.
If the checker shows no OG tags at all on a page you know has them
Your tags might be injected by JavaScript after the page loads. View source shows the HTML as it arrives from the server, before JavaScript runs. If your meta tags only appear in the rendered DOM (check via browser DevTools Elements panel), they are invisible to platform scrapers. See the JavaScript-rendered tags section below.
Category 1: Tags Missing Entirely
If no OG tags exist on the page, you need to add them. The minimum set every page needs:
<!-- In the <head> section of your HTML -->
<meta property="og:title" content="Your Page Title Here" />
<meta property="og:description" content="Your description under 155 characters." />
<meta property="og:image" content="https://yourdomain.com/og-image.jpg" />
<meta property="og:url" content="https://yourdomain.com/this-page/" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />In a CMS like WordPress, these tags are usually added through an SEO plugin (Yoast, RankMath, All in One SEO). In a custom app, add them to the HTML template in the head section.
Category 2: Tags in the Wrong Location
Open Graph tags must be inside the <head> element. Tags in the <body> are ignored by platform scrapers.
Diagnosing location problems
In the view-source output, look at where the og: tags appear. They should be within the <head>...</head> block. If they appear after the <body> tag, they need to be moved.
Why this happens
Some page builders, theme customizers, or poorly configured plugins inject meta tags into the wrong location. Some JavaScript frameworks append head tags to the DOM but the server-rendered HTML does not include them correctly, resulting in tags that appear in the right DOM location visually but in the wrong place in the serialized HTML.
The fix
Identify where your meta tags are being generated — template file, plugin, layout component — and move them inside the head section. In React, use react-helmet or the Next.js metadata API. In Vue or Nuxt, use the head() configuration. In plain HTML templates, move the tags above the closing </head> tag.
Sell Custom Apparel — We Handle Printing & Free ShippingCategory 3: og:image Problems
The og:image tag has the most common failure modes of any OG tag.
Relative URL instead of absolute
The og:image value must start with https://. Change /images/preview.jpg to https://yourdomain.com/images/preview.jpg. The full absolute URL is required because platform scrapers fetch the image from their own servers, not from a browser context.
Image not publicly accessible
If the image requires authentication, is in a private S3 bucket, or is served from an origin that blocks bots, the platform scraper cannot fetch it. Test accessibility: open an incognito/private browser window and paste the og:image URL directly. If the image does not load without logging in, it will not load for platform scrapers either.
Image too small
Facebook minimum is 200x200px for any display, 600x314px for the large card. Images below the threshold show as no image or a tiny thumbnail.
HTTP image URL
Platforms require HTTPS. An HTTP image URL fails silently on most platforms — no error, just no image in the preview.
Category 4: JavaScript-Rendered Meta Tags
This is one of the most common invisible causes of broken OG tags in modern web apps.
The problem
If your React, Vue, or Angular app injects meta tags via JavaScript (using react-helmet, vue-meta, or similar), the tags only exist in the DOM after JavaScript runs. Platform scrapers typically do not execute JavaScript. They fetch the raw HTML from the server and parse the head section from that.
The result: the tags look correct in your browser's Elements panel (because the browser ran the JavaScript) but are invisible to platform scrapers (and to view-source, which shows the pre-JavaScript HTML).
Diagnosing
If the tags appear in DevTools Elements panel but not in Ctrl+U view-source, they are JavaScript-rendered and invisible to scrapers.
Fixes
- Next.js App Router: Use the metadata export in page.tsx or layout.tsx — this generates tags server-side
- Next.js Pages Router: Use next/head in _document.tsx for true server-side rendering
- Nuxt 3: Use useHead or useSeoMeta in the setup function — Nuxt renders these server-side by default
- SvelteKit: Use the <svelte:head> element in layouts for SSR head injection
- React SPA (no SSR): Use Prerender.io, react-snap, or another prerendering service to generate static HTML with tags for crawler bots
Category 5: Caching Issues
Your tags are correct, but the platform cached the old version before you fixed them.
Platform-side cache
Each platform caches preview data after the first scrape. Use the platform's debug tool to force a re-scrape:
- Facebook: developers.facebook.com/tools/debug > Scrape Again
- LinkedIn: linkedin.com/post-inspector > Inspect
- Twitter: cards-dev.twitter.com/validator
Server or CDN cache
If your server or CDN is caching the HTML page, it may be serving the old HTML even after you updated the og: tags. Clear your CDN cache (in Cloudflare: Caching > Purge Cache > by URL) before re-scraping with platform debug tools.
Bypassing cache immediately
Append a query string to the URL for your immediate share: https://yourdomain.com/page/?v=2 is treated as a new URL by platforms, forcing a fresh scrape without cached data.
Try It Free — No Signup Required
Runs 100% in your browser. No data is collected, stored, or sent anywhere.
Open Free OG Tag CheckerFrequently Asked Questions
My og:tags are in the head and correct, but Facebook still shows the wrong preview. How long until it fixes itself?
It will not fix itself — Facebook uses cached data indefinitely for URLs it has already scraped. Use Facebook's Sharing Debugger (developers.facebook.com/tools/debug) and click "Scrape Again" to force an immediate update. After that, new shares of the URL will show the correct preview.
I am using Next.js and my og:tags work in the browser but platform scrapers do not see them. Why?
If you are using the Pages Router with react-helmet or a client-side head library that injects tags after hydration, the tags may not be in the server-rendered HTML. Use the Next.js built-in head management: next/head for Pages Router, or the metadata export in App Router. Both generate tags server-side, making them visible to platform scrapers that do not execute JavaScript.
All my OG tags are present and correct but Slack still does not show a preview for my link. What else could cause this?
Slack uses its own bot to unfurl links, and it respects robots.txt and user-agent blocking. If your robots.txt blocks all bots or your security configuration blocks Slack's IP ranges, Slack will not be able to fetch your page. Check that your robots.txt allows the Slackbot user-agent. Also confirm that your og:image URL is publicly accessible — Slack has its own image fetcher that may behave differently from platform scrapers.