← Back to Blog
SEO & Web

Open Graph Tags Guide — Fix Broken Link Previews for Free

Social media share card preview mockup on a phone screen
Published: July 2, 20266 min read

Open Graph Tags Guide: Make Your Links Look Right When Shared

You've probably shared a link on Facebook, LinkedIn, or Twitter/X only to see a blank box, the wrong image, or an awkward auto-generated snippet instead of a clean preview card. That's almost always a missing or broken Open Graph tag — and it's one of the most overlooked pieces of on-page SEO because it only shows up when someone else shares your link, not when you visit the page yourself.

This guide explains what Open Graph tags are, why they matter for social traffic, and how to preview and generate them correctly before you publish.


What Is Open Graph?

Open Graph (OG) is a protocol originally created by Facebook that lets any webpage describe itself with a small set of `<meta>` tags so that when the link is shared, the platform can render a rich preview card — image, title, and description — instead of a bare link.

The core tags are:

  • `og:title` — the headline shown on the share card
  • `og:description` — a short summary shown under the title
  • `og:image` — the preview image (most important — a missing or broken image is the #1 cause of ugly share cards)
  • `og:url` — the canonical URL for the content being shared
  • `og:type` — usually "website" or "article"

Twitter/X uses its own `twitter:card`, `twitter:title`, `twitter:description`, and `twitter:image` tags, but will automatically fall back to your Open Graph tags if the Twitter-specific ones are missing.


What Size Should the og:image Be?

Use an image that is **at least 1200×630 pixels**. This is the size Facebook, LinkedIn, and Twitter/X all optimize for with the `summary_large_image` card type. Smaller images may get cropped awkwardly or displayed at a lower resolution, and images that are too small (under roughly 200×200) may be rejected entirely by some platforms.

Also make sure the image file is publicly accessible — a URL that requires login, or one blocked by robots.txt, won't be fetched by the crawler each platform uses to generate the preview.


Previewing Your Share Card Before You Publish

Rather than posting a link and hoping it looks right, use the ToolzGo Open Graph Preview tool:

  • Go to toolzgo.com/tools/seo-tools/open-graph-preview
  • Enter your title, description, image URL, and page URL
  • See a live mockup of the share card update as you type
  • Copy the generated `og:` and `twitter:` tags into your page's `<head>`

Catching a missing image or a description that gets cut off before you publish saves you from an embarrassing broken share card that's already been posted and seen.


Why Isn't My Link Preview Updating?

This is the single most common Open Graph support question. Facebook, LinkedIn, and Twitter/X all **cache** the Open Graph data for a URL the first time it's shared — so if you change your tags afterward, the old cached version keeps showing up.

To force a refresh:

PlatformHow to Refresh the Cache
------
Facebook / InstagramFacebook Sharing Debugger — paste the URL and click "Scrape Again"
Twitter / XTwitter Card Validator — paste the URL to force a re-fetch
LinkedInLinkedIn Post Inspector — paste the URL and click "Inspect"

Common Open Graph Mistakes

  • **Using an SVG for og:image** — most social platforms silently fail to render SVG share images; always use a PNG or JPG
  • **Relative image URLs** — og:image must be a full absolute URL (https://example.com/image.png), not a relative path
  • **Forgetting og:url** — without it, some platforms may resolve the canonical URL incorrectly, especially after redirects
  • **Not testing before publishing** — always preview before sharing a link publicly, since fixing a cached bad preview requires manually forcing a re-scrape on every platform

Frequently Asked Questions

Q: Do I need both Open Graph and Twitter Card tags?

A: Twitter/X falls back to Open Graph tags if Twitter-specific tags are missing, but adding both gives you finer control — for example, choosing `summary` vs `summary_large_image` independently of how Facebook renders the same link.

Q: Why does my link show the wrong image after I changed it?

A: The platform cached the old Open Graph data from the first time the link was shared. Use that platform's debugger tool (Facebook Sharing Debugger, Twitter Card Validator, LinkedIn Post Inspector) and force a re-scrape.

Q: Can I use the same og:image for every page on my site?

A: You can, but a unique image per page (or per content type) typically performs better and looks more intentional in a social feed than a generic site-wide banner repeated everywhere.

Q: Does Open Graph affect my Google ranking?

A: Not directly — Open Graph is about how links look when shared on social platforms, not a Google ranking factor. But better-looking share cards drive more clicks and traffic, which indirectly benefits SEO.


Open Graph tags are a five-minute fix that meaningfully improves how your content performs whenever someone shares it. Preview and generate yours with the ToolzGo Open Graph Preview tool, and pair it with the Meta Tag Generator to cover your search-engine-facing tags at the same time.

Preview and generate your Open Graph tags before you publish.

Try Open Graph Preview Free