HomePluginsToolsGuidesWorkflowAboutContact
GetSet Logo

Premium UI/UX layout engines, customizable micro-interaction plugins, and high-performance components for modern web developers.

Company

  • Home
  • Plugins
  • Developer Tools
  • Guides
  • Showcase
  • Our Process
  • About Us
  • Contact

Free Tools

  • ConvertAll
  • CodeFormat
  • CSS Toolkit
  • Diff Checker
  • Code Image
  • Token Counter
  • SVG Toolkit
  • JSON Studio
  • Color Studio

More Tools

  • Unit Converter
  • Meta Tags
  • Favicon Generator
  • Mock Data
  • Dev Snippets
  • Password Generator
  • Calculator Hub
  • QR Code Generator
  • Word Counter

Policies

  • Terms and Conditions
  • Privacy Policy
  • Accessibility Policy
  • Cookie Policy

© 2026 GetSet. All rights reserved.

Crafted for frontend excellence.

Your Bundle

Your bundle is empty

Add plugins from the catalog to build one combined CDN link — like picking font families.

Browse plugins
Guides / SEO

Open Graph and Meta Tags: Controlling How Your Links Look Everywhere

The minimum viable tag set for rich link previews, correct image dimensions, Twitter card fallback rules, JSON-LD structured data, and the caching gotchas that keep old previews alive.

2026-08-06 · 7 min read · Related tool: Meta Tags

Three consumers, three vocabularies

Search engines read your <title> and meta description. Social platforms read Open Graph (og:*) tags. X/Twitter reads its own twitter:* tags, falling back to Open Graph for whatever is missing. Messaging apps — WhatsApp, Telegram, Slack, iMessage — mostly piggyback on Open Graph. One page therefore needs all three vocabularies to look right everywhere, and they must agree with each other.

<title>Page Title — Brand</title>
<meta name="description" content="150–160 characters that earn the click." />
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="May differ from search description." />
<meta property="og:image" content="https://example.com/og.png" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />

The image is 90% of the preview

  • Canonical size: 1200×630 (1.91:1). Platforms crop toward the center — keep text and faces away from edges.
  • Use an absolute HTTPS URL; relative og:image paths silently fail on most scrapers.
  • Keep it under ~1 MB; some scrapers time out on heavy images and show no preview at all.
  • Text on the image should survive being rendered at 400px wide — thumbnail legibility beats detail.

Description lengths that survive truncation

Google truncates descriptions around 155–160 characters; social platforms cut earlier, often near 65–90 in compact placements. Write the first 60 characters to stand alone, then elaborate. And remember the meta description is not a ranking factor — it is ad copy for the click.

JSON-LD: talking to machines properly

Structured data (<script type="application/ld+json">) is what earns rich results — article cards, breadcrumbs, FAQs, product snippets. Unlike meta tags it is a real graph: an Article with an author, a datePublished, a publisher. Keep it truthful and consistent with the visible page; mismatches can get rich results revoked.

Generate the complete set — SEO tags, Open Graph, Twitter cards and JSON-LD — with live Google, X and Facebook previews in the Meta Tags generator. Pair the og:image with a Code Image export if your content is technical.

Why your old preview will not die

Every platform caches scraped previews aggressively — sometimes for weeks. After changing tags, re-scrape explicitly: Facebook’s Sharing Debugger, LinkedIn’s Post Inspector, and Telegram’s @WebpageBot all force a refresh. If a preview still shows stale data, version the image URL (og.png?v=2) — a new URL bypasses every cache at once.

Keep reading

Images

WebP vs AVIF vs PNG vs JPG: Choosing the Right Image Format in 2026

7 min read
Data

CSV, JSON and XLSX: The Conversion Pitfalls That Corrupt Your Data

8 min read
Code

Minify vs Beautify: What Code Formatting Actually Does to Your Files

6 min read