DEV Community

Cover image for Meta Tags Cheat Sheet for SEO in 2026
Theo
Theo

Posted on • Originally published at validatehtml.com

Meta Tags Cheat Sheet for SEO in 2026

#html #resources #tutorial #webdev

Every meta tag you need for search engines, social media, and browsers. Copy-paste templates, character limits, and common mistakes to avoid. Check your own tags with the ValidateHTML meta tag checker.

Essential Meta Tags (Every Page Needs These)

These tags should be on every single page of your website. Missing any of them means lost SEO value or a broken mobile experience.

Title Tag

The single most important on-page SEO element. Appears in search results, browser tabs, and bookmarks.

<title>Primary Keyword - Secondary Keyword | Brand</title>
Enter fullscreen mode Exit fullscreen mode
  • Max length: 60 characters (Google truncates after ~580px width)
  • Tip: Front-load your primary keyword. Users scan the first few words.
  • Mistake: Using the same title on multiple pages. Every page needs a unique title.

Meta Description

Not a ranking factor, but directly affects click-through rate from search results. Google may rewrite it if it doesn't match the query.

<meta name="description" content="Free online HTML validator with quality scores. Check HTML, CSS, JSON, XML, meta tags, and more in one place. No signup required.">
Enter fullscreen mode Exit fullscreen mode
  • Max length: 155-160 characters
  • Tip: Include a call to action and your primary keyword naturally.
  • Mistake: Stuffing keywords. Write for humans, not bots.

Viewport

Required for responsive design. Without it, mobile devices render at desktop width.

<meta name="viewport" content="width=device-width, initial-scale=1">
Enter fullscreen mode Exit fullscreen mode

Charset

Declares the character encoding. Must be the first tag in the head (within the first 1024 bytes).

<meta charset="UTF-8">
Enter fullscreen mode Exit fullscreen mode

Language

Set on the html element, not as a meta tag. Helps search engines serve the right language version.

<html lang="en">
Enter fullscreen mode Exit fullscreen mode

Open Graph Tags (Social Sharing)

Control how your page looks when shared on Facebook, LinkedIn, Slack, Discord, and other platforms. Without these, platforms guess your content with poor results.

<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A compelling description under 200 characters.">
<meta property="og:image" content="https://example.com/image-1200x630.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Your Brand">
Enter fullscreen mode Exit fullscreen mode
  • Image size: 1200 x 630px (1.91:1 ratio)
  • Image format: JPG or PNG, under 5MB
  • URLs: Must be absolute (https://...), not relative

Twitter / X Card Tags

Twitter falls back to OG tags, but you need at minimum the twitter:card tag to control the card format.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Title">
<meta name="twitter:description" content="Your description.">
<meta name="twitter:image" content="https://example.com/image.jpg">
Enter fullscreen mode Exit fullscreen mode
  • summary_large_image: Full-width image card (recommended)
  • summary: Small thumbnail on the left

SEO Control Tags

Canonical URL

Tells search engines which URL is the original when duplicate content exists (www vs non-www, HTTP vs HTTPS, query parameters).

<link rel="canonical" href="https://example.com/page">
Enter fullscreen mode Exit fullscreen mode

Robots

Controls whether search engines index the page and follow its links.

<meta name="robots" content="index, follow">       <!-- default -->
<meta name="robots" content="noindex, follow">      <!-- don't index but follow links -->
<meta name="robots" content="noindex, nofollow">     <!-- hide completely -->
Enter fullscreen mode Exit fullscreen mode

Hreflang (Multi-language)

For sites with content in multiple languages. Tells Google which language version to serve in each market.

<link rel="alternate" hreflang="en" href="https://example.com/en/page">
<link rel="alternate" hreflang="fr" href="https://example.com/fr/page">
<link rel="alternate" hreflang="x-default" href="https://example.com/page">
Enter fullscreen mode Exit fullscreen mode

Complete Copy-Paste Template

Here's a complete head section with every essential meta tag. Copy it, replace the values, and you're set.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Your Page Title | Brand Name</title>
  <meta name="description" content="Your compelling description under 160 characters.">
  <link rel="canonical" href="https://example.com/page">

  <!-- Open Graph -->
  <meta property="og:title" content="Your Page Title">
  <meta property="og:description" content="Description for social sharing.">
  <meta property="og:image" content="https://example.com/og-image-1200x630.jpg">
  <meta property="og:url" content="https://example.com/page">
  <meta property="og:type" content="website">

  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image">

  <!-- Optional -->
  <meta name="robots" content="index, follow">
</head>
Enter fullscreen mode Exit fullscreen mode

Check your own meta tags with our free Meta Tag Checker or test your social sharing with the Open Graph Checker.

Top comments (2)

Collapse
 
bhavin-allinonetools profile image
Bhavin Sheth •

This is honestly one of the cleanest meta tag guides I’ve seen.

I used to ignore things like OG + canonical, thinking they don’t matter much… but fixing just those improved my sharing previews and indexing consistency a lot.

Also +1 for mentioning real mistakes (like duplicate titles) — that’s what actually hurts.

I’ve been double-checking my tags on my own tool (Image Converter) lately, and you’d be surprised how many small issues show up 😅

Collapse
 
theo_dcrx profile image
Theo •

I keep this as my personal reference every time I set up a new page. The number of sites I've audited that are missing viewport or canonical tags is wild. What's the meta tag you see missing most often?