TToolsOfWeb
Try tools

Open Graph & Twitter Card Tags – Fix Social Share Previews (OG Tags)

If a page looks wrong when shared — missing image, wrong title, or an old description — you usually need Open Graph tags and Twitter Card tags. These tags control the preview shown on platforms like Facebook, LinkedIn, Slack, Discord, and X/Twitter. This guide explains the core tags, the most common mistakes, and a quick copy-paste workflow using a generator.

The long-tail problems this solves include: “Open Graph image not showing”, “Twitter card not working”, “wrong title when sharing link”, and “share preview not updating”. Most of the time, the fix is a consistent canonical URL plus the right OG/Twitter tags in the HTML response.

What are Open Graph (OG) tags?

Open Graph meta tags are HTML tags used by social platforms to understand your page content and generate a rich preview. The typical preview includes a title, description, and image. Without OG tags, platforms guess — and the guess is often wrong.

OG tags are not “only for Facebook”. Many link preview systems use the same OG data, even if they show it in different layouts. That’s why good OG tags improve previews across multiple platforms.

What are Twitter Card tags?

Twitter Cards do the same job for X/Twitter: they define the title/description/image for the shared URL. The most common card type is summary_large_image, which displays a big image preview.

Even if you don’t actively post on X/Twitter, adding Twitter Card tags is still useful because some tools and clients read them as a fallback.

Generate OG tags + Twitter tags (copy/paste)

The fastest workflow is to generate tags from your title/description/image and paste them into your page’s <head>. Use ToolsOfWeb’s Open Graph / Twitter Card Tag Generator to produce the common OG + Twitter tags in seconds.

If you’re using Next.js, you can also implement these tags through the Metadata API. The key requirement is that the tags must appear in the HTML that the crawler sees (not only after client-side JavaScript runs).

Step-by-step: fix a broken share preview

  1. Pick the exact URL you want to share (canonical URL).
  2. Write a clear title and a concise description that matches the page.
  3. Choose a strong preview image (readable text, high contrast).
  4. Generate tags and paste them into the page <head>.
  5. Re-share and give platforms time to refresh cached previews.

Minimal tag set (what you actually need)

If you only add a few tags, start with these. They cover the majority of preview issues:

  • og:title and og:description (clear, human-friendly)
  • og:url (your canonical URL)
  • og:image (a strong preview image)
  • twitter:card (usually summary_large_image)
  • twitter:title, twitter:description, twitter:image

If you want to be extra thorough, include og:image:alt and twitter:image:alt. They improve accessibility and help explain your preview image.

Canonical URL matters (avoid duplicates)

A frequent long-tail issue is: “share preview shows the wrong page.” That often happens when you have multiple URL variants (http vs https, www vs non-www, trailing slash differences). Keep your canonical URL consistent. If you want a full set of SEO tags (title, description, robots, canonical), use the Meta Tag Generator and then add your OG/Twitter preview tags.

For a deeper explanation of titles, descriptions, canonicals, and Open Graph, read: Meta Tag Generator (Title, Description, Open Graph) – Step-by-Step.

Title and description tips (CTR + clarity)

Social previews behave like mini-ads for your page. Keep titles unique and specific, and keep descriptions short enough to be readable without truncation. Avoid keyword stuffing. If your preview looks “spammy”, it can reduce clicks even if your content is good.

  • Title: clear intent, no duplication, brand at the end if needed.
  • Description: 1–2 sentences, explain what the reader gets.
  • Consistency: OG and Twitter text should match the page headline.

Best Open Graph image practices (long-tail SEO)

For “what size should og:image be?”, a common recommendation is 1200×630. More important than the exact size is readability: use high contrast, large text, and keep critical content away from the edges. Always host the image at a stable URL and ensure it’s publicly accessible.

If your OG image files are too large, compress them using the Image Compressor so previews load quickly.

Avoid images behind login, blocked by robots, or served from unstable URLs. If a crawler can’t fetch the image, your preview will be missing or inconsistent.

Why previews don’t update (cache problems)

Even after you fix tags, platforms may show an old preview because they cache results. If you update OG tags and still see old content, wait a bit and try sharing again. Some platforms also provide “debugger” tools to force refresh — but even without that, consistent tags and a stable canonical URL reduce preview drift over time.

Tip: if you change the image often, you can use a versioned image URL (for example, include a build hash in the filename) so platforms fetch the new asset instead of reusing a cached file.

Common issues checklist (quick debugging)

  • Relative URLs: use absolute URLs for og:image and canonical.
  • Redirect chains: too many redirects can cause crawlers to fail.
  • Wrong canonical: canonical points to a different page or variant.
  • Image blocked: robots rules, auth, or hotlink protection blocks the image.
  • Client-only tags: tags added after JS runs won’t be seen by many crawlers.

Internal linking and structured data

If you’re already improving previews, it’s a good time to strengthen on-site SEO too: use internal links between related pages and include structured data where it fits. For example, ToolsOfWeb blog pages use JSON-LD. If you’re drafting schema, format it safely with the JSON Formatter.

If you’re building landing pages, small design details also matter. Pair a clean preview image with a modern UI using the Box Shadow Generator (CSS) and CSS Gradient Generator.

Conclusion

Open Graph tags and Twitter Card tags are the fastest way to fix broken social share previews. Start with a consistent canonical URL, a strong preview image, and clear title/description text. For speed, generate tags with the OG/Twitter tag generator and paste them into your page head.

Next read: Meta Tag Generator best practices.