DEV Community

Cover image for 7 Open Graph Tag Mistakes That Make Your Links Look Broken
Levi Nunnink
Levi Nunnink

Posted on

7 Open Graph Tag Mistakes That Make Your Links Look Broken

#webdev #html #beginners #seo

You write a great blog post. Someone shares it on LinkedIn. The preview shows a broken image, a truncated title, and a description pulled from your cookie banner.

This happens way more often than it should. And the fix is almost always the same: your Open Graph tags are wrong.

OG tags are the <meta> tags in your <head> that tell platforms like Facebook, LinkedIn, Slack, Discord, and Twitter/X what to show when someone shares a link. Get them wrong and your content looks unprofessional — or invisible.

Here are the 7 most common mistakes I see, and how to fix each one.

1. Missing og:image entirely

This is the big one. No og:image means no preview image. Most platforms will show a blank grey box or a tiny favicon. Your link looks like spam.

Fix:

<meta property="og:image" content="https://yoursite.com/images/post-preview.jpg" />
Enter fullscreen mode Exit fullscreen mode

Every page that could be shared should have an og:image. If you don't want to create unique images for every page, set a default fallback in your template.

2. Using a relative URL for og:image

This works in your browser:

<!-- Broken for OG -->
<meta property="og:image" content="/images/preview.jpg" />
Enter fullscreen mode Exit fullscreen mode

But Facebook's crawler doesn't know your domain. It needs the full URL:

<!-- Works -->
<meta property="og:image" content="https://yoursite.com/images/preview.jpg" />
Enter fullscreen mode Exit fullscreen mode

This applies to og:url and og:image — always use absolute URLs starting with https://.

3. og:image is the wrong size

You uploaded your 100x100 logo as the OG image. On Facebook it gets stretched into a blurry mess. On LinkedIn it shows as a tiny thumbnail instead of a large card.

The sweet spot: 1200 x 630 pixels.

This works well across every major platform — Facebook, LinkedIn, Twitter/X, Slack, and Discord. Keep the file under 8MB and stick with JPG or PNG.

4. Missing og:title and og:description

Without these, platforms fall back to your <title> tag and <meta name="description">. Sometimes that's fine. But often your <title> includes your site name and separators that look weird in a social card:

"How to Deploy Next.js | My Blog — A Blog About Things"

Set explicit OG tags with clean, shareable copy:

<meta property="og:title" content="How to Deploy Next.js" />
<meta property="og:description" content="A step-by-step guide to deploying your Next.js app to Vercel, AWS, and Cloudflare." />
Enter fullscreen mode Exit fullscreen mode

Keep og:title under 60 characters and og:description under 155 characters to avoid truncation.

5. Not setting twitter:card

Twitter/X has its own meta tag system. If you don't set twitter:card, you might get a tiny "summary" card instead of the large image card you wanted.

<!-- Small card with square thumbnail -->
<meta name="twitter:card" content="summary" />

<!-- Large card with full-width image — usually what you want -->
<meta name="twitter:card" content="summary_large_image" />
Enter fullscreen mode Exit fullscreen mode

Twitter/X will fall back to OG tags for the title, description, and image, so you don't need to duplicate everything. But you do need twitter:card to control the layout.

6. Serving different content to crawlers

Some setups accidentally serve different HTML to bots than to browsers. This happens with:

  • Client-side rendering: If your OG tags are injected by JavaScript, crawlers won't see them. Facebook, Slack, and most platforms don't execute JS.
  • A/B testing tools: If your testing script swaps the <title> or meta tags, crawlers might see the wrong variant.
  • Caching layers: A CDN or cache might serve a stale version of your page to crawlers.

Fix: Your OG tags must be in the initial HTML response. If you're using React/Next.js, use server-side rendering or static generation for your <head> tags. In Next.js App Router, export metadata from your page.tsx — it's server-rendered by default.

7. Never testing your tags

You set up OG tags once, deployed, and never checked. Then your image CDN changed domains, and every link shared for the last 3 months showed a broken preview.

Always test after deploying. You can use the Smmall Cloud Open Graph Checker to see exactly what every platform will display — it shows previews for Google, Facebook, Twitter/X, and Slack side by side, plus warns you about missing or misconfigured tags.

It's also useful to test periodically. CDN changes, CMS updates, and theme switches can silently break your OG tags.

Quick checklist

Before you ship any page that might get shared:

  • [ ] og:title is set and under 60 characters
  • [ ] og:description is set and under 155 characters
  • [ ] og:image is set with an absolute URL, 1200x630px, under 8MB
  • [ ] og:url is set to the canonical URL
  • [ ] twitter:card is set to summary_large_image
  • [ ] Tags are in the server-rendered HTML, not injected by JS
  • [ ] You've tested the URL in a preview tool

Get these right and your links will look polished every time someone shares them. It takes 5 minutes and makes a real difference in click-through rates.

Built a free Open Graph Checker that shows previews for Google, Facebook, Twitter/X, and Slack. Check your site's OG tags in seconds.

Top comments (0)