The Problem

You share your website's link on Facebook or LinkedIn, and instead of a nice preview with a title, description and image, you get a blank box, a random image pulled from nowhere, or no preview at all. This happens because those platforms don't just show your link as-is - they read specific tags from your page's code first, and if those tags aren't there, the preview breaks.

What Are Open Graph Tags?

Open Graph tags are a small set of meta tags that tell platforms like Facebook and LinkedIn exactly what to show when your link is shared - a title, a description, and an image. Without them, the platform has to guess, and it often guesses badly.

Think of Open Graph tags as writing your own preview card, instead of letting Facebook grab a random paragraph and image from your page and hope it looks good.

The three tags that matter most:

  • og:title - the headline shown in the preview
  • og:description - the short summary text underneath
  • og:image - the image shown, usually as a large banner

Steps to Add Open Graph Tags

  1. Decide on a clear title, a short description, and an image for the page (roughly 1200x630px works well for the image)
  2. Add the three tags to the <head> section of your page's HTML
  3. Share the link somewhere to test it - or better, use a checker tool first so you don't have to post publicly to see if it worked
  4. If the preview looks wrong, fix the tags and re-check - platforms often cache old previews, so you may need to force a re-scrape (see the FAQ below)

Example

Here's what the tags look like in your page's code:

<meta property="og:title" content="Your Page Title Here" />
<meta property="og:description" content="A short, clear summary of the page." />
<meta property="og:image" content="https://yourwebsite.com/preview-image.jpg" />

Common Mistakes

  • No og:image set - the most common cause of a blank or broken-looking preview
  • Using a tiny or oddly-shaped image - gets cropped strangely or looks blurry when stretched
  • Forgetting to update tags after a redesign - old titles and descriptions can linger and show outdated information
  • Assuming it'll update instantly - platforms cache previews, so a fix doesn't always show immediately without forcing a re-check
If you only set one thing, set og:image. A missing image is the single biggest reason shared links look unfinished or untrustworthy.

Check Your Tags With WaqarWeb

Rather than guessing whether your Open Graph tags are set up correctly, the Open Graph Checker fetches your page, reads the actual tags, and shows you a live preview of exactly how your link will look on Facebook, LinkedIn and X - plus flags anything missing.

Frequently Asked Questions

Why does my old preview still show after I fixed the tags?

Facebook and LinkedIn cache link previews. You'll usually need to use their own debugging tools (like Facebook's Sharing Debugger) to force a re-scrape - checking your tags with a tool shows your current code, not what's cached on their side.

Do I need different tags for Twitter/X?

X has its own twitter:card tags, but falls back to Open Graph tags automatically if those aren't set. Twitter-specific tags just give you more control if you want something different for that platform specifically.

Does having Open Graph tags help my SEO ranking?

Not directly - they don't influence search rankings. Their value is entirely about how your links look and perform when shared on social platforms, which can indirectly drive more traffic.

Ready to put this into practice?

Use our free Meta Tag Generator — no signup required.

Open Meta Tag Generator →

Ready to put this into practice?

Use our free Open Graph Checker — no signup required.

Open Open Graph Checker →