Developers & Technical · Guide · Developer Utilities
How to write meta tags
Meta tags that matter in 2026, title and description rules, canonical tags, Open Graph and Twitter Cards, robots directives, testing tools.
Meta tags are the HTML signals browsers, search engines, and social platforms use to decide what your page means — before anyone sees the content. Good meta tags push rankings up, improve click-through rates in search results, and make shared links look professional. Bad meta tags (duplicated, missing, truncated, or outdated) cost clicks that never recover. This guide covers the meta tags that actually matter in 2026 (not all of them do), the character budgets Google and Bing enforce, how title tags and descriptions interact with ranking, the OG and Twitter Card variants for social, and how to test before shipping.
Advertisement
The meta tags that actually matter
<title>: technically an element, not a meta tag, but ranked alongside them in SEO importance. The most influential on-page signal.
<meta name="description">: doesn’t affect ranking directly but heavily affects click-through from search results. Often rewritten by Google when it disagrees with you.
<meta name="viewport">: critical for mobile. width=device-width, initial-scale=1 is the universal standard.
<meta charset>: <meta charset="UTF-8">. Must appear in the first 1024 bytes of the document.
<link rel="canonical">: tells search engines which URL is authoritative when duplicate content exists. Critical for syndication and faceted URLs.
Open Graph (og:*) tags: for Facebook, LinkedIn, Slack, Discord, any app using OG parsing.
Twitter Card (twitter:*) tags: for X previews. Falls back to OG if absent.
<meta name="robots">: controls indexing and following. noindex, nofollow, noarchive are common.
Meta tags that don’t matter
keywords meta: Google ignored it since 2009. Don’t bother.
author, generator: cosmetic. No SEO impact.
revisit-after, rating: never been supported by mainstream search engines.
Don’t waste bytes on tags that no parser reads.
Title tag — the rules
Length: Google truncates around 580 pixels on desktop, which is usually 50-60 characters. Over that, it cuts to “…” Mobile is similar.
Format: Primary Keyword | Secondary Context | Brand. Put the keyword first. Brand last lets you be terse if truncated.
Uniqueness: every page needs a unique title. Duplicate titles are a “this page isn’t helpful” signal.
Keyword placement: front-loaded keywords historically weighted more. Still a small factor.
Numbers and brackets: [2026 Guide] and specific numbers raise CTR in A/B tests. Use sparingly — feels spammy at scale.
Google rewrites titles about 60% of the time per 2022 research. You can’t prevent it, but clear titles with the primary query keyword get rewritten less often.
Meta description — the rules
Length: 150-160 characters. Desktop shows ~158 chars; mobile slightly less. Going longer isn’t penalized but gets truncated.
Purpose: entice the click. Make it read like ad copy, not a summary.
Include the query keyword — search engines bold matching terms in results, increasing CTR.
Action verbs: “Learn,” “ Compare,” “Find,” “Get.” Make the user click.
One sentence or two short sentences. Anything longer gets truncated in the middle of a clause.
Don’t duplicate across pages. Google ignores duplicate descriptions and writes its own from body text.
Canonical tags
<link rel="canonical" href="https://example.com/page">
When you need one: your page is accessible via multiple URLs (query params, tracking params, print version, www/non-www mix). Tell Google which is canonical.
Self-referencing canonicals on all pages are standard practice. Prevents surprise duplicate-content issues.
Canonical must be absolute URL with protocol. Relative canonicals work but are risky.
One canonical per page. Multiple canonical tags cause Google to ignore all of them.
Open Graph tags
OG tags control how links look when shared to Facebook, LinkedIn, WhatsApp, Discord, Slack, iMessage.
Minimum set:
og:title, og:description, og:image, og:url, og:type.
og:image specs: 1200×630 pixels is the sweet spot — works across all major platforms. Under 1MB. PNG or JPG. Include the brand and primary message (assume users won’t read the headline text).
og:type: website, article, product, video.other. Defaults to website.
og:locale: en_US, fr_FR, etc. Default is en_US.
Twitter Card tags
X reads twitter:* tags; falls back to OG if absent.
Minimum useful: twitter:card = summary_large_image (for the big preview) or summary (small preview). Add twitter:site with your @handle.
Twitter deprecated twitter:creator tracking but still parses it.
If OG tags are complete, you can skip Twitter-specific tags except for twitter:card.
Robots meta
<meta name="robots" content="index, follow">
Default is index, follow — you don’t need to declare it unless you’re changing the default.
Common overrides:
noindex — don’t show in search results (thank-you pages, internal tools, draft content).
nofollow — don’t pass link equity from this page’s links (rare for whole pages; usually set per-link).
noarchive — don’t show cached versions.
max-snippet:150 — cap description length in results.
hreflang for international
<link rel="alternate" hreflang="es" href="https://example.com/es/page">
Each language variant gets a tag. Include a hreflang="x-default" for the fallback. Bidirectional — every language page must reference every other.
Easy to mess up at scale. Audit with a hreflang checker before shipping international sites.
Testing before shipping
Facebook Sharing Debugger — tests OG tags. Shows what Facebook sees and re-fetches if you’ve updated.
Twitter Card Validator — deprecated but X still reads most tags via OG.
LinkedIn Post Inspector — verifies LinkedIn rendering (its OG parser is quirky).
Google Rich Results Test — checks structured data on top of meta tags.
View source — the oldest trick. Open your page, Ctrl+U, check that all meta tags actually render server-side. Client-rendered meta tags don’t work for most crawlers.
Common mistakes
Client-rendering meta tags. Single-page apps that set meta tags via JavaScript often fail to render for crawlers. Use server-side rendering or prerender.
Duplicate titles and descriptions. Common at scale in templated sites. Unique is better than good.
Missing OG image. Links shared without an OG image get a text-only preview — much lower click-through.
Using og:image without og:image:width/height.Slack and Discord cache aggressively. Without dimensions, they sometimes skip the preview entirely.
Very long titles. 70+ chars always truncate. Pick one primary keyword.
Keywords meta tag. Still seeing this in 2026 means the team hasn’t updated since 2008.
Run the numbers
Generate complete meta tag blocks with the meta tag generator. Pair with the Open Graph generator for social preview setup, and the word counter to keep your descriptions under 160 characters.
Advertisement