Skip to main content
toolk.site
Back to all posts

SEO

Open Graph & Meta Tags: The Complete Guide to Social Link Previews

The SEO title and meta description shape your SERP result; Open Graph and Twitter Card tags control how your link looks on Facebook, LinkedIn, X, and Slack.

MM H Tawfik11 min read

Paste a link into Slack and a rich card appears — title, description, a wide image. Paste the same link into a CMS that forgot its meta tags and you get a bare blue URL nobody clicks. The difference is a dozen lines in the <head>. This guide covers exactly which lines, why each one exists, and the specific sizes and rules that make a preview render correctly on every platform that matters in 2026.

TL;DR — which meta tags actually matter in 2026

Two families of tags do almost all the work. For search engines, the SEO <title> and meta description shape your result in the SERP. For social previews, the Open Graph protocol tags (og:title, og:description, og:image, og:url) control the card that Facebook, LinkedIn, Slack, Discord, and iMessage build from your URL, and Twitter Card tags do the same on X. Everything else — keywords meta, author meta, dozens of legacy tags — is noise. Get those six or seven right and your link looks correct everywhere.

The core SEO tags

These four tags control how your page appears in Google's results and how crawlers treat it. They live in the <head> and are server-rendered on every page.

Title

The <title> is the single most important on-page tag. Google shows it as the clickable headline in the SERP and truncates around 600 pixels — roughly 50–60 characters depending on letter width. Front-load the keyword, keep the brand suffix short:

<title>Open Graph Meta Tags: The Complete Guide | Toolk</title>

Google does rewrite titles when it judges the <title> unhelpful (empty, boilerplate, or stuffed). A clean, descriptive, unique title per page is the way to keep your wording.

Meta description

The meta description is not a ranking factor — Google confirmed this years ago. It is a click-through lever. Google uses it as the SERP snippet when it is relevant, and truncates around 155–160 characters:

<meta name="description" content="The SEO title and meta description shape your SERP result; Open Graph and Twitter Card tags control how your link previews on social platforms.">

Write it as ad copy, not a summary. One unique description per page; duplicate descriptions across a site are a quality signal Google notices.

Canonical

The canonical tag tells search engines which URL is the authoritative version when the same content is reachable at multiple URLs (trailing slashes, tracking params, http vs https). It must be an absolute URL:

<link rel="canonical" href="https://toolk.site/blog/open-graph-meta-tags-guide">

Self-reference the canonical on every page. Getting this wrong splits ranking signals across duplicate URLs.

Robots

The robots meta directive controls indexing and link-following at the page level. The default is index, follow, so you only add this tag to change behavior — for example, to keep a thank-you page or an internal search result out of the index:

<meta name="robots" content="noindex, follow">

Per Google's robots meta documentation, noindex only works if the crawler can fetch the page — never Disallow a URL in robots.txt and expect a noindex on it to be seen.

Open Graph: the social preview standard

Open Graph is a protocol Facebook published in 2010 that turns any web page into a rich object. Every major platform — LinkedIn, Slack, Discord, Pinterest, WhatsApp, iMessage — reads OG tags to build a link card. They go in the <head> and use the property attribute (not name):

<meta property="og:title" content="Open Graph & Meta Tags: The Complete Guide">
<meta property="og:description" content="Which meta tags actually matter in 2026, with exact sizes and the og:image dimensions that work everywhere.">
<meta property="og:image" content="https://toolk.site/og/open-graph-guide.png">
<meta property="og:url" content="https://toolk.site/blog/open-graph-meta-tags-guide">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Toolk">

The four required properties per the spec are og:title, og:type, og:image, and og:url. In practice you always want og:description and og:site_name too. og:type is usually website for pages and article for blog posts.

The og:image size that works everywhere

This is where most previews break. The image is what people actually see, and platforms have strict size rules. The dimensions that render correctly across Facebook, LinkedIn, X, Slack, and Discord are:

  • 1200 × 630 pixels — the universal recommended size.
  • ~1.91:1 aspect ratio — Facebook's recommended ratio for the large card.
  • Under ~8 MB — Facebook rejects images above 8 MB.
  • Absolute URL, HTTPS — og:image must point to a fully-qualified URL, never a relative path.

Declare the dimensions explicitly so platforms can lay out the card before the image downloads, which prevents a blank flash on first scrape:

<meta property="og:image" content="https://toolk.site/og/open-graph-guide.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Diagram of Open Graph meta tags rendering as a social card">

Twitter / X Cards

X (formerly Twitter) reads Open Graph tags as a fallback but has its own twitter: namespace for finer control. The key tag is twitter:card, which picks the layout:

  • summary — small square thumbnail beside the text.
  • summary_large_image — the wide hero card you almost always want.
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Open Graph & Meta Tags: The Complete Guide">
<meta name="twitter:description" content="Which meta tags matter in 2026, with the og:image sizes that render everywhere.">
<meta name="twitter:image" content="https://toolk.site/og/open-graph-guide.png">
<meta name="twitter:site" content="@toolk">

Per X's Cards documentation, twitter: tags use the name attribute and X falls back to the matching og: tag when a twitter: one is missing — so if your title and description are identical, you can skip twitter:title/twitter:description and let X inherit og:title/og:description. The one tag worth always setting is twitter:card, because the default layout is the small summary, not the large image.

Comparison table: tag, where it shows, recommended size

| Tag | Where it shows | Recommended length / size | |-----|----------------|---------------------------| | <title> | Google SERP headline, browser tab | ~50–60 chars (≤600px) | | meta description | Google SERP snippet | ~155–160 chars | | link rel="canonical" | Not visible (de-dupes URLs) | Absolute URL | | meta robots | Not visible (indexing control) | index,follow default | | og:title | Social card headline | ~60–90 chars | | og:description | Social card subtext | ~110–200 chars | | og:image | Social card image | 1200×630, ≤8 MB, ~1.91:1 | | og:url | Card canonical link | Absolute URL | | og:type | Object classification | website / article | | og:site_name | Brand label on card | Short brand name | | twitter:card | X layout selector | summary_large_image | | twitter:image | X card image | 1200×630 (inherits og:image) |

Common mistakes that break previews

These are the failures we see most often, in order of frequency.

  1. Missing og:image. No image means a tiny, low-engagement card — or none at all on platforms that require an image. This is the single biggest preview killer.
  2. Wrong image dimensions. A 600×600 square gets cropped into the small card; a 4000px banner may be rejected or downscaled. Ship exactly 1200×630.
  3. Relative image URLs. og:image="/og/cover.png" fails on most scrapers — they fetch the tag without your page's base URL context. Always use the absolute, HTTPS URL.
  4. Unescaped characters in tag content. An ampersand, raw quote, or angle bracket inside a content attribute can break parsing. Encode them — & becomes &amp;, " becomes &quot;. Our HTML entity converter handles this in one paste.
  5. Stale social cache. Facebook, LinkedIn, and X cache your tags on first scrape and do not re-fetch on their own. After you fix the tags, the old (or empty) preview persists. You must force a re-scrape.

How to re-scrape a stale cache

Each platform exposes a debugger that re-fetches your tags and shows the parsed result:

  • Facebook / Meta — the Sharing Debugger. Paste the URL, click Scrape Again.
  • LinkedIn — the Post Inspector. Inspecting the URL refreshes its cache.
  • X — the legacy Card Validator is deprecated; posting the link in a draft refreshes X's cache.

Run the debugger before you publish anywhere — once a bad preview is cached, sharing it spreads the broken card. Preview your tags first with the meta tag previewer.

A note on favicons

The favicon is the small icon in the browser tab, bookmarks, and increasingly in Google's mobile SERP beside your result. It is a separate concern from social previews but part of the same first-impression layer:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Google's favicon guidelines want a multiple-of-48px square (96×96 works well) at a stable URL. Generate a full icon set — .ico, SVG, and the Apple touch icon — with the favicon generator.

Putting it together

Generate the full block once and validate it before you ship. The fastest workflow:

  1. Build the tags with the Open Graph generator — it outputs the OG, Twitter, and core SEO tags from a short form.
  2. Preview the rendered card with the meta tag previewer to catch a missing image or truncated title.
  3. Escape any special characters in the copy with the HTML entity converter.
  4. Generate icons with the favicon generator.
  5. After deploy, force a re-scrape in the Facebook and LinkedIn debuggers so the live preview matches.

The complete head block for a typical article looks like this:

<!-- Core SEO -->
<title>Open Graph & Meta Tags: The Complete Guide | Toolk</title>
<meta name="description" content="Which meta tags matter in 2026 and the og:image sizes that render everywhere.">
<link rel="canonical" href="https://toolk.site/blog/open-graph-meta-tags-guide">

<!-- Open Graph -->
<meta property="og:type" content="article">
<meta property="og:title" content="Open Graph & Meta Tags: The Complete Guide">
<meta property="og:description" content="Which meta tags matter in 2026 and the og:image sizes that render everywhere.">
<meta property="og:image" content="https://toolk.site/og/open-graph-guide.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://toolk.site/blog/open-graph-meta-tags-guide">
<meta property="og:site_name" content="Toolk">

<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://toolk.site/og/open-graph-guide.png">

TL;DR

Two tag families decide how your link looks. The SEO <title> (~60 chars) and meta description (~155 chars) shape your Google result; the description drives clicks but does not rank. The Open Graph tags — og:title, og:description, og:image, og:url, og:type, og:site_name — plus twitter:card="summary_large_image" control the social card on Facebook, LinkedIn, X, Slack, and Discord. Ship a 1200×630 image under 8 MB at an absolute HTTPS URL, escape special characters, and re-scrape the platform debugger after every change. Generate the tags with the Open Graph generator, check them in the meta tag previewer, and browse the rest of the free developer tools while you are there.

Keep reading

Related posts

All posts