Clarity

How to Fix Missing Open Graph Tags

Summary: To fix missing Open Graph tags, add four essential meta tags to your page's <head> section: og:title, og:description, og:image (1200×630px), and og:url. These tags control how your page appears when shared on Facebook, LinkedIn, Twitter/X, and Slack. Pages with properly configured Open Graph images receive up to 2x more engagement on social media compared to pages with missing or broken preview cards.

Every time your page gets shared on Facebook, LinkedIn, or Slack, Open Graph tags control what people see — the image, title, and description that appear in the preview card. Without them, your shared links look broken, generic, or invisible. That means fewer clicks and less social traffic.

What Are Open Graph Tags?

Open Graph (OG) is a protocol developed by Facebook in 2010 that lets website owners control how their pages appear when shared on social media platforms. These tags sit in the <head> section of your HTML and define the metadata that social platforms use to build link preview cards.

The four essential Open Graph tags are:

<meta property="og:title" content="Your Page Title Here"> <meta property="og:description" content="A compelling summary of your page — shown under the title in the preview card."> <meta property="og:image" content="https://yourdomain.com/images/og-image.jpg"> <meta property="og:url" content="https://yourdomain.com/your-page/">

Without these tags, platforms like Facebook scrape your page and guess what to show — often pulling the wrong image, using your site title instead of the page title, or displaying nothing useful at all.

Beyond these four core tags, there are several additional OG tags you should know about:

  • og:type: Defines the type of content — website, article, product, video.movie, etc. Defaults to website if not specified.
  • og:site_name: The name of your website (e.g., "MobileBarn"). Displayed above the title in some preview cards.
  • og:locale: The language and region of the content (e.g., en_AU for Australian English).
  • og:image:width and og:image:height: Helps platforms render the image correctly on first share without needing to download it first.
  • Why It Matters for SEO

  • Social click-through rate: Pages with properly configured OG images and titles consistently get more clicks from social shares. According to Backlinko's content study, articles with at least one image get 94% more views than those without — and the social preview image is often the first image people see. A missing or ugly preview card kills engagement before anyone reads a word.
  • Link sharing amplification: Every share is essentially a free ad. A well-optimised OG preview makes each share more effective, multiplying the traffic from every person who shares your content. Social shares with rich preview cards receive 2–3x more clicks than bare URL links.
  • Indirect ranking signal: Social engagement (visits, time on site) from social traffic contributes to overall site authority and engagement metrics that influence rankings. While Google doesn't directly use social signals as a ranking factor, the traffic and backlinks generated from social sharing do impact rankings.
  • Brand consistency: OG tags let you control your brand's appearance across every platform — the right logo, the right image, the right message. Without them, each platform makes its own choices about what to display.
  • Chat app previews: OG tags aren't just for social media. When links are shared in Slack, Discord, WhatsApp, iMessage, and Teams, these apps use OG tags to generate the preview card. That's billions of daily link shares where your OG tags determine your page's first impression.
  • AI citation previews: AI tools like ChatGPT and Perplexity display link previews when citing sources. These previews pull from OG tags, making them important for AI search visibility.
  • Open Graph vs Twitter Cards — Do You Need Both?

    Twitter (now X) uses its own metadata system called Twitter Cards. The key tags are:

    <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Your Page Title"> <meta name="twitter:description" content="Your page description."> <meta name="twitter:image" content="https://yourdomain.com/images/og-image.jpg">

    The good news: Twitter falls back to OG tags if Twitter-specific tags are missing. So if you only implement OG tags, Twitter/X will still show a preview card. However, the twitter:card tag is unique to Twitter and has no OG equivalent — you need it to specify the card type (summary for small cards, summary_large_image for full-width image cards).

    Best practice: Include both OG tags and at minimum the twitter:card tag. This gives you full control across all platforms.

    The Perfect OG Image — Size, Format, and Design

    The OG image is the most impactful Open Graph tag. A compelling image can increase social engagement by 150% or more. Here's what you need to know:

    Size Requirements by Platform

  • Facebook: 1200 × 630 pixels (1.91:1 ratio). Minimum: 600 × 315.
  • Twitter/X: 1200 × 628 pixels for summary_large_image. 144 × 144 minimum for summary.
  • LinkedIn: 1200 × 627 pixels. Images under 200px wide may not display.
  • Slack/Discord: Uses the same 1200 × 630 standard.
  • Universal recommendation: Create one image at 1200 × 630 pixels (PNG or JPG, under 1MB) and it will work well across all platforms.

    OG Image Design Tips

  • Include text overlay: Add a short headline on the image itself. Many users scroll social feeds quickly — the image text is often all they see before deciding to click.
  • Use brand colors: Consistent visual branding makes your shared links instantly recognizable in feeds.
  • Include your logo: Place your logo in a corner for brand recognition.
  • Avoid text in the "safe zone" edges: Some platforms crop the edges. Keep critical text centered with at least 10% margin.
  • Use high contrast: Images need to look good at both full size and as small mobile thumbnails.
  • How to Check Your Open Graph Tags

    Use Clarity SEO's free OG Preview tool to see exactly how your page will appear when shared on Facebook, Twitter/X, LinkedIn, and other platforms. It shows you the preview card in real time and flags any missing or broken tags.

    → Check your OG tags free with Clarity SEO

    You can also run a full Report Card audit which checks for missing OG tags across your entire site.

    → Run a full site audit

    Additional debugging tools from the platforms themselves:

  • Facebook: Facebook Sharing Debugger — Paste your URL to see the cached OG data. Click "Scrape Again" to refresh.
  • Twitter/X: Twitter Card Validator — Preview how your link will appear in tweets.
  • LinkedIn: LinkedIn Post Inspector — Check and refresh your OG data for LinkedIn.
  • How to Fix It

    For HTML/Generic

    Add the full set of Open Graph tags inside your <head>:

    <head> <meta charset="UTF-8"> <title>iPhone Screen Repair Sydney | MobileBarn</title> <!-- Open Graph / Facebook --> <meta property="og:type" content="website"> <meta property="og:url" content="https://mobilebarn.shop/repairs/iphone-screen/"> <meta property="og:title" content="iPhone Screen Repair Sydney — Same Day | MobileBarn"> <meta property="og:description" content="Cracked iPhone screen? We fix it in 30 minutes. Walk-in or book online. All models covered. Free quote."> <meta property="og:image" content="https://mobilebarn.shop/images/iphone-screen-repair-og.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <!-- Twitter Card (also used by LinkedIn, Slack, Discord) --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="iPhone Screen Repair Sydney — Same Day | MobileBarn"> <meta name="twitter:description" content="Cracked iPhone screen? We fix it in 30 minutes. Walk-in or book online."> <meta name="twitter:image" content="https://mobilebarn.shop/images/iphone-screen-repair-og.jpg"> </head>

    OG image requirements:

  • Minimum size: 1200 × 630 pixels (2:1 ratio ideal for most platforms)
  • File format: JPG or PNG
  • File size: Under 8MB (under 1MB recommended for fast loading)
  • Must be publicly accessible via HTTPS — no login required
  • For Next.js / React

    In Next.js App Router, set OG tags via the metadata export:

    export const metadata = {
      title: 'iPhone Screen Repair Sydney | MobileBarn',
      description: 'Cracked iPhone screen? Same-day repair...',
      openGraph: {
        title: 'iPhone Screen Repair Sydney — Same Day | MobileBarn',
        description: 'We fix it in 30 minutes. Walk-in or book online.',
        url: 'https://mobilebarn.shop/repairs/iphone-screen/',
        images: [
          {
            url: 'https://mobilebarn.shop/images/iphone-screen-repair-og.jpg',
            width: 1200,
            height: 630,
          },
        ],
        type: 'website',
      },
      twitter: {
        card: 'summary_large_image',
        title: 'iPhone Screen Repair Sydney — Same Day | MobileBarn',
        description: 'We fix it in 30 minutes. Walk-in or book online.',
        images: ['https://mobilebarn.shop/images/iphone-screen-repair-og.jpg'],
      },
    };

    Next.js also supports dynamic OG image generation using the ImageResponse API — perfect for blogs and product pages where you want auto-generated social images.

    For WordPress

    With Yoast SEO:

  • Edit the page or post.
  • Open the Yoast SEO meta box → Social tab.
  • Set the Facebook image, title, and description separately from the SEO fields.
  • Yoast auto-generates OG tags for every page — verify the defaults in Yoast SEO → Social → Facebook.
  • With Rank Math:

  • Edit the page or post.
  • Open Rank Math SEO → Edit Snippet → Social.
  • Upload a custom OG image and write a social-specific title/description.
  • Global defaults (Yoast): Go to Yoast SEO → Social → Facebook → enable OG meta data and set a default OG image for pages that don't have a custom one.

    For Shopify

    Shopify automatically generates basic OG tags using your product/page title and featured image. To improve them:

  • Go to Online Store → Themes → Edit code.
  • Open layout/theme.liquid.
  • Find the <head> section and look for any existing OG tags.
  • Update or add the tags manually, using Liquid variables:
  • <meta property="og:title" content="{{ page_title }} | {{ shop.name }}"> <meta property="og:description" content="{{ page_description | escape }}"> <meta property="og:url" content="{{ canonical_url }}"> <meta property="og:image" content="{{ page_image | img_url: '1200x630', crop: 'center' }}">

    For products specifically, page_image references the first product image. Make sure your product images are high quality and at least 1200px wide.

    For Wix / Squarespace / Webflow

    Wix: Page Settings → SEO → Social Share section. Upload a custom social image per page.

    Squarespace: Pages → Gear icon → Social Image. Upload a 1200×630 image for each key page.

    Webflow: Page Settings → Open Graph Settings. Upload image, write title and description. For CMS items, bind OG fields to your collection fields.

    Platform-Specific OG Tag Behaviour

    Different platforms handle Open Graph tags slightly differently. Understanding these differences helps you optimize for maximum impact:

    Facebook

    Facebook created the Open Graph protocol and has the most complete support. Key behaviours:

  • Caches OG data aggressively — changes may take 24+ hours to appear unless you use the Sharing Debugger to force a refresh.
  • Prefers 1200 × 630 images. Images smaller than 600 × 315 display as tiny thumbnails.
  • Supports og:type values like article which enable additional metadata like article:published_time.
  • LinkedIn

    LinkedIn uses OG tags for link previews in posts and articles. It's one of the most important platforms for B2B content:

  • Caches aggressively — use the Post Inspector to refresh cached data.
  • Images under 200px may not display at all.
  • The description field is truncated earlier than on Facebook — keep it under 120 characters for LinkedIn optimization.
  • Slack and Discord

    Both messaging platforms generate unfurl previews using OG tags. Slack shows a rich preview card; Discord shows an embed with colored sidebar. Both fall back to og:title, og:description, and og:image tags.

    WhatsApp and iMessage

    Both mobile messaging apps show link previews using OG tags. Since mobile screens are small, ensure your OG image text is large enough to read at thumbnail size.

    Common Mistakes to Avoid

  • Missing og:image: The image is the most important OG tag. A preview without an image gets almost no engagement on social platforms. According to social media research, posts with images receive 2.3x more engagement than those without.
  • Image too small: Images under 600px wide may not display at all on some platforms. Use 1200×630px as your standard.
  • Using a non-public image URL: The OG image must be accessible without login. Local, staging, or password-protected URLs won't work.
  • Forgetting og:url: Without a canonical URL, platforms may cache the wrong version of your page.
  • Duplicate OG titles: If you set og:title to the same value as your <title> tag and leave the meta description blank, platforms default to pulling the same generic text everywhere.
  • Not testing after changes: Always verify with the Clarity OG Preview tool or Facebook's Sharing Debugger after updating tags.
  • Using relative image URLs: OG image URLs must be absolute (starting with https://). Relative paths like /images/og.jpg won't work.
  • Forgetting to update cached data: After fixing your OG tags, you must clear the platform cache. Facebook caches indefinitely; LinkedIn caches for 7 days. Use each platform's debug tool to force a refresh.
  • How OG Tags Work With Other SEO Elements

    Open Graph tags are part of a larger ecosystem of metadata on your page. Here's how they interact:

  • Title tag: If og:title is missing, platforms fall back to your HTML title tag. Set both for best results.
  • Meta description: If og:description is missing, platforms fall back to your meta description. Write social-specific descriptions when they differ from your SEO description.
  • Structured data: Schema markup serves a different purpose (rich results in Google), but having both OG tags and structured data gives you maximum visibility across both social and search channels.
  • Alt text: Your image alt text doesn't affect OG previews, but the image quality matters — use the same high-quality images for both.
  • FAQ

    Q: What is an Open Graph tag?

    An Open Graph tag is an HTML meta tag in the og: namespace that controls how your page appears when shared on social media platforms like Facebook, LinkedIn, and Slack. The four key tags are og:title, og:description, og:image, and og:url. The protocol was created by Facebook in 2010 and is now a widely adopted web standard.

    Q: Do Open Graph tags affect Google SEO?

    Open Graph tags are not a direct Google ranking factor. However, they improve social sharing engagement, which drives referral traffic and can indirectly support SEO through increased visits, longer session durations, and potential backlinks from people who discover your content through social shares. Google has also confirmed it can use OG images as the main image for articles in Discover.

    Q: What size should an Open Graph image be?

    The recommended Open Graph image size is 1200 × 630 pixels (approximately 1.91:1 ratio). This displays well across Facebook, LinkedIn, Twitter/X, and Slack. The minimum is 600 × 315 pixels, but larger images get better treatment and higher engagement. Keep file size under 1MB for fast loading — Facebook's maximum is 8MB. Use JPG for photos and PNG for graphics with text.

    Q: Why is Facebook showing the wrong image when I share my page?

    Facebook caches Open Graph data aggressively. After you add or update OG tags, use the Facebook Sharing Debugger and click "Scrape Again" to force a cache refresh. If the image still doesn't update, verify that the image URL is publicly accessible (no authentication required), the image file is under 8MB, and the URL uses HTTPS.

    Q: Do I need separate tags for Twitter vs Facebook?

    Twitter uses its own twitter:card, twitter:title, twitter:description, and twitter:image tags. However, Twitter also falls back to OG tags if Twitter-specific tags are missing. Best practice is to include at minimum twitter:card (since it has no OG equivalent) and your full OG tag set. This gives you coverage across all platforms with minimal extra code.

    Q: How do I create OG images at scale for hundreds of pages?

    For sites with many pages, create a template-based OG image system. Tools like Cloudinary, Imgix, or Vercel OG (for Next.js) can dynamically generate images with page-specific text overlaid on a brand template. This gives every page a unique, professional OG image without manual design work. For WordPress, plugins like Jetstark or Jetwp can auto-generate social images from post titles.

    Related Guides

    Open Graph tags work alongside other SEO elements. Explore these related guides:

  • How to Write the Perfect Title Tag for SEO — Your title tag is the fallback when og:title is missing.
  • How to Write a Meta Description That Gets Clicks — The OG description is the social equivalent of your meta description.
  • How to Fix Missing Alt Text on Images — Ensure your images are optimized for both social sharing and search.
  • How to Add Structured Data to Your Website — Structured data and OG tags together maximize your search and social visibility.
  • Summary

    Open Graph tags are a five-minute fix that can significantly improve how your content performs when shared on social media. Set the image (1200×630px), title, description, and URL — and verify the result with the Facebook Sharing Debugger or Clarity SEO's OG Preview tool. With social shares generating billions of link clicks daily, properly configured OG tags are one of the easiest ways to increase your site's traffic.

    Check your site's OG tags right now with the free Clarity SEO audit.

    → Get your free SEO Report Card

    Related Tools