Your link preview shows a random page title, no description, or the wrong URL. The image might even load fine. Missing Open Graph tags beyond og:image cause exactly that kind of broken card. Here is how to find and fix each one.
Short answer
Open your page source and search for og:title, og:description, og:url, and og:type. Add any missing tags to the server-rendered <head> with absolute HTTPS values. Match og:title to your intended headline, write a clear og:description, set og:url to the canonical share URL, and pick the right og:type. Scan with OpenGraph Check to confirm crawlers see all tags. If only the image is broken, see How to Fix a Missing OG Image instead.
Missing tags vs. a missing image
These problems look similar but need different fixes.
| Symptom | Likely cause | Fix guide |
|---|---|---|
| No image in preview | Missing or broken og:image | Missing OG image |
| Wrong or empty title | Missing og:title | This article |
| Generic snippet text | Missing og:description | This article |
| Preview links to wrong URL | Missing or wrong og:url | This article |
| Card shows wrong content type | Missing og:type | This article |
A page can have a perfect image and still ship a useless preview because the text tags are empty. Fix all core tags together.
Step 1: Audit what crawlers actually receive
Right-click your live URL and choose View Page Source. Do not use DevTools Elements after JavaScript runs.
Search for these strings:
og:title
og:description
og:url
og:type
og:site_name
If any are absent, crawlers fall back to <title>, <meta name="description">, or the first text on the page. That fallback is often wrong for social sharing.
Paste the same URL into OpenGraph Check. The scan lists every detected tag and flags gaps in one view.
Step 2: Fix a missing og:title
og:title is the headline in the preview card. Without it, platforms scrape your HTML <title> tag or page heading, which may include site branding, category labels, or SEO keywords you never wanted in a social post.
Add this to your <head>:
<meta property="og:title" content="Your Social Headline Here">Guidelines:
- Keep it under 60 characters when possible
- Write for humans sharing the link, not for search rankings
- Match the headline you want on Facebook, LinkedIn, and Slack
- Do not duplicate boilerplate like
| Company Nameunless you want it visible
If you use a CMS or framework, set the Open Graph title field separately from the SEO title. They serve different audiences.
Step 3: Fix a missing og:description
og:description is the supporting text below the title. Missing descriptions produce empty cards or auto-generated snippets from random body copy.
<meta property="og:description" content="A clear one-sentence summary that makes people want to click.">Guidelines:
- Aim for 80 to 125 characters
- One idea per description
- No keyword stuffing
- Different from but consistent with your meta description for SEO
Some platforms truncate longer text. Front-load the important words.
Step 4: Fix a missing or wrong og:url
og:url tells platforms which URL the shared object represents. Without it, query strings, tracking parameters, or alternate paths can create duplicate preview entries in Facebook's cache.
<meta property="og:url" content="https://example.com/your-page">Checklist:
- Use the canonical URL you paste into posts
- Always HTTPS
- No trailing slash mismatch between
og:urland the link you share - Pick either
wwwor non-wwwand stay consistent
Wrong og:url values do not always break the preview visually, but they cause cache confusion when you update tags later. Read Why Social Platforms Cache Link Previews if old data persists after fixes.
Step 5: Set the correct og:type
og:type classifies the content. It affects which optional tags platforms expect and how cards render.
Common values:
| Type | Use for |
|---|---|
website | Homepages, landing pages, general pages |
article | Blog posts, news, editorial content |
product | E-commerce product detail pages |
<meta property="og:type" content="article">For articles, add optional tags like article:published_time and article:author when your CMS supports them. For products, product:price:amount and product:availability help some platforms.
Missing og:type defaults to website on most crawlers. That is fine for a homepage but wrong for a blog post where article-specific fields would help.
Step 6: Add og:site_name when useful
og:site_name is optional but improves branding on Facebook and Discord:
<meta property="og:site_name" content="Your Brand">Without it, the domain name appears instead. Not a critical failure, but easy to add.
Step 7: Put tags in server-rendered HTML
The most common root cause of missing tags: they exist only after client-side JavaScript runs.
React, Vue, Angular, and client-only Next.js components often inject meta tags after hydration. Facebook, LinkedIn, Slack, and WhatsApp crawlers read the initial HTML response. They do not execute your app bundle.
Fix options:
- Server-side rendering (SSR) or static generation at build time
- Framework metadata APIs that emit tags in the initial HTML (Next.js
generateMetadata, NuxtuseSeoMeta, etc.) - CMS plugins that write tags into the template before output
Confirm with View Source, not the live DOM. See Open Graph Tags Explained for the full tag reference.
Step 8: Handle duplicate or conflicting tags
Some templates output Open Graph tags twice: once from a SEO plugin and once from the theme. Crawlers usually take the first or last value depending on the platform. Unpredictable results follow.
Search your page source for duplicate property="og:title" entries. Keep one authoritative set. Remove the rest.
Also check that og:title and <title> are not fighting each other. They can differ, but both should make sense independently.
Step 9: Verify after deployment
Run this checklist before sharing:
- View Source shows
og:title,og:description,og:url,og:type - All values match your intended preview copy
- OpenGraph Check scan shows no missing required fields
- Platform debugger re-scrape succeeds if the URL was shared before
For a full pre-launch workflow, read How to Test Open Graph Tags Before You Publish.
Framework quick fixes
WordPress
Enable Open Graph in Yoast, Rank Math, or SEOPress. Fill in the social title and description fields per page. Verify output in View Source because some themes add duplicate tags.
Next.js App Router
Use the Metadata API in layout.tsx or page.tsx:
export const metadata = { openGraph: { title: "Your headline", description: "Your summary.", url: "https://example.com/page", type: "website", },};This emits server-rendered tags. Client components cannot replace this reliably.
Static HTML
Add the full tag block manually in <head>. Copy-paste templates in Open Graph Meta Tags Example.
Common mistakes when fixing missing tags
Copying only the SEO meta description
<meta name="description"> and og:description often hold the same text, but only the Open Graph tag drives social previews. Set both explicitly.
Using relative URLs in og:url
Always absolute HTTPS. Relative paths break canonical resolution on some crawlers.
Forgetting og:url on paginated or filtered pages
Each shareable URL needs its own og:url. A blog page at /blog?page=2 is a different object than /blog.
Fixing tags but not clearing cache
Platforms cache previews. After you add missing tags, re-scrape in the Facebook Sharing Debugger or LinkedIn Post Inspector. See Open Graph Cache Busting.
FAQ
What is the minimum set of Open Graph tags?
og:title, og:description, og:image, og:url, and og:type. Add og:site_name and Twitter Card tags for best results.
Can I use the page title as og:title automatically?
You can, but social headlines often need shorter copy than SEO titles. Set og:title explicitly on important pages.
Why does my preview show text but no image?
That is an image problem, not a missing text tag. Follow How to Fix a Missing OG Image.
Does og:description affect Google rankings?
No. It affects social preview text only. Keep your standard meta description for search.
What og:type should a blog post use?
Use article. Set og:type to website for homepages and general landing pages.
How do I know if tags are missing or just cached?
Compare View Source (live HTML) with the platform debugger output. If HTML is correct but the debugger shows old values, it is a cache issue. If HTML is missing tags, fix the template first.
Should og:url include UTM parameters?
No. Use the clean canonical URL without tracking parameters. Add UTMs to the link you paste in the post, not in og:url.
Bottom line
Missing Open Graph tags beyond the image break previews silently. Audit page source for og:title, og:description, og:url, and og:type, add them in server-rendered HTML, and confirm with OpenGraph Check. Text tags and image tags work together. Fix both before your next share.
