How to Fix Missing OpenGraph Tags in 5 Minutes (2026 Guide)

Step-by-step guide to add OpenGraph tags to your website. Fix missing og:title, og:image, og:description for better social sharing on Twitter, Facebook, LinkedIn.

Last Updated: February 15, 2026

When you share a link on Twitter, Facebook, or LinkedIn and it shows up as a plain text URL with no image, title, or description — that's because your page is missing OpenGraph tags.

This guide shows you exactly how to fix it in 5 minutes (or less).

What Are OpenGraph Tags?

OpenGraph (OG) tags are HTML meta tags that tell social media platforms how to display your content when shared.

Without them, platforms guess what to show. With them, you control exactly how your links appear.

The 4 essential tags:

Tag Purpose Example
og:title Page title (shows in bold) "Ultimate Guide to Email Marketing"
og:description Short summary (2-3 sentences) "Learn proven strategies to boost open rates..."
og:image Preview image URL "https://example.com/og-image.jpg"
og:url Canonical URL of the page "https://example.com/guide"

Step 1: Check Your Current Tags

Before fixing, see what's missing:

  1. Go to OpenGraph.xyz or use our Social Share Debugger
  2. Enter your URL
  3. Review which tags are missing
💡 Quick Tip: Most sites are missing og:image and og:description. If you see "No preview" on social platforms, that's your problem.

Step 2: Add OpenGraph Tags (Choose Your Platform)

Option A: Plain HTML/Static Site

Add these tags inside the <head> section of your HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Page title (shows in browser tab) -->
    <title>Your Page Title</title>

    <!-- OpenGraph Tags -->
    <meta property="og:title" content="Your Page Title">
    <meta property="og:description" content="A compelling 2-3 sentence description of your page.">
    <meta property="og:image" content="https://example.com/images/og-image.jpg">
    <meta property="og:url" content="https://example.com/your-page">
    <meta property="og:type" content="website">

    <!-- Twitter Card Tags (optional but recommended) -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Your Page Title">
    <meta name="twitter:description" content="A compelling 2-3 sentence description.">
    <meta name="twitter:image" content="https://example.com/images/og-image.jpg">
</head>
<body>
    <!-- Your content here -->
</body>
</html>

Option B: WordPress (No Plugin)

Add this code to your theme's header.php file, inside the <head> section:

<!-- OpenGraph Tags -->
<meta property="og:title" content="<?php echo get_the_title(); ?>">
<meta property="og:description" content="<?php echo get_the_excerpt(); ?>">
<meta property="og:image" content="<?php echo get_the_post_thumbnail_url(get_the_ID(), 'full'); ?>">
<meta property="og:url" content="<?php echo get_permalink(); ?>">
<meta property="og:type" content="<?php echo is_single() ? 'article' : 'website'; ?>">
💡 Easier way: Use Yoast SEO or Rank Math plugin — they add OG tags automatically.

Option C: Next.js (React Framework)

In your page component, use Next.js Head:

import Head from 'next/head';

export default function MyPage() {
  return (
    <>
      <Head>
        <title>Your Page Title</title>
        <meta property="og:title" content="Your Page Title" />
        <meta property="og:description" content="Page description here." />
        <meta property="og:image" content="https://example.com/og-image.jpg" />
        <meta property="og:url" content="https://example.com/page" />
        <meta name="twitter:card" content="summary_large_image" />
      </Head>

      <main>
        {/* Your page content */}
      </main>
    </>
  );
}

Option D: React (Create React App / Vite)

Install react-helmet:

npm install react-helmet

Then use it in your component:

import { Helmet } from 'react-helmet';

function MyPage() {
  return (
    <>
      <Helmet>
        <title>Your Page Title</title>
        <meta property="og:title" content="Your Page Title" />
        <meta property="og:description" content="Page description." />
        <meta property="og:image" content="https://example.com/og-image.jpg" />
        <meta property="og:url" content="https://example.com/page" />
      </Helmet>

      <div>
        {/* Your page content */}
      </div>
    </>
  );
}

Step 3: Create Your OG Image

The og:image is the most important visual element. Here's how to create one:

Image Specifications

  • Recommended size: 1200 x 630 pixels
  • Minimum size: 600 x 315 pixels
  • Aspect ratio: 1.91:1 (landscape)
  • File format: JPG, PNG (keep under 1MB)
  • Text: Keep important text in the center (edges may crop)

Quick Design Tools

  • Canva: Free templates for social media images (search "Open Graph")
  • Figma: Create from scratch (1200x630 frame)
  • Photopea: Free Photoshop alternative online
⚠️ Common Mistake: Using a small logo or portrait-oriented image. Social platforms will crop it badly. Always use landscape (1.91:1 ratio).

Step 4: Test Your Tags

After adding tags, test them on each platform:

Twitter Card Validator

  1. Go to Twitter Card Validator
  2. Paste your URL
  3. Click "Preview card"
  4. If it doesn't show up, check for errors

Facebook Sharing Debugger

  1. Go to Facebook Debugger
  2. Paste your URL
  3. Click "Debug"
  4. If tags are cached, click "Scrape Again"

LinkedIn Post Inspector

  1. Go to LinkedIn Inspector
  2. Paste your URL
  3. Click "Inspect"
  4. LinkedIn caches aggressively — may take 24h to update

Common Issues & Fixes

1. "Image doesn't show on Twitter"

Problem: Twitter requires twitter:card and twitter:image

Fix: Add these tags:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/image.jpg">

2. "Old image still showing after update"

Problem: Platforms cache meta tags for 24-48 hours

Fix:

  • Use Facebook Debugger → "Scrape Again"
  • Add ?v=2 to your image URL to force refresh
  • Wait 24 hours for cache to expire

3. "Image shows but title is wrong"

Problem: og:title doesn't match your page title

Fix: Update og:title to match. They can be different, but should be consistent.

4. "Image is cropped badly on LinkedIn"

Problem: LinkedIn crops to center, so top/bottom text may be cut

Fix: Keep important elements in the center 1200x600 safe zone.

Advanced: Dynamic OG Tags

For sites with multiple pages (blogs, e-commerce), you need dynamic tags.

Example: Node.js + Express

app.get('/blog/:slug', async (req, res) => {
  const post = await getPostBySlug(req.params.slug);

  const html = `
    <!DOCTYPE html>
    <html>
    <head>
      <meta property="og:title" content="${post.title}">
      <meta property="og:description" content="${post.excerpt}">
      <meta property="og:image" content="${post.imageUrl}">
      <meta property="og:url" content="https://example.com/blog/${post.slug}">
    </head>
    <body>...</body>
    </html>
  `;

  res.send(html);
});

Example: Next.js App Router

// app/blog/[slug]/page.js
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.imageUrl],
      url: `https://example.com/blog/${params.slug}`,
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.imageUrl],
    },
  };
}

Checklist: Are You Done?

Before publishing, verify:

  • ✅ og:title is set (60 characters max)
  • ✅ og:description is set (160 characters max)
  • ✅ og:image is set (1200x630px, under 1MB)
  • ✅ og:url matches the canonical URL
  • ✅ twitter:card is set to "summary_large_image"
  • ✅ Tested on Twitter, Facebook, LinkedIn validators
  • ✅ Image loads correctly (no 404s)

🚀 Need a Faster Way?

Use our free Social Share Debugger to check all platforms at once.

Try Debugger Free →

FAQ

Do I need both OpenGraph AND Twitter tags?

No. Twitter falls back to OpenGraph tags if twitter:* tags are missing. But adding them gives you more control.

Can I use different images for different platforms?

Yes! Use twitter:image for Twitter and og:image for Facebook/LinkedIn.

How often do platforms re-scrape my tags?

Facebook: 24-48 hours. Twitter: 7 days. LinkedIn: 7 days. Force re-scrape using debuggers.

What if I have multiple pages?

Use dynamic tags (see "Advanced" section above). Each page should have unique tags.

Do I need og:type?

Optional but recommended. Use "website" for pages, "article" for blog posts.

Conclusion

Fixing missing OpenGraph tags takes 5 minutes but dramatically improves how your links look when shared.

Quick recap:

  1. Check which tags are missing (use validators)
  2. Add og:title, og:description, og:image, og:url
  3. Create a 1200x630px image
  4. Test on Twitter, Facebook, LinkedIn
  5. Done!

Now go fix those boring text-only links. Your share rate will thank you.

Test Your Link Preview on All Platforms

See exactly how Discord, Twitter, LinkedIn, and all social platforms will display your link. Catch broken tags before your audience sees them.

Test Your Link Preview Free

See How Your Page Looks When Shared

Test your OG tags across Twitter, LinkedIn, Facebook, Slack, and WhatsApp instantly.

Test Share Preview Free →