Meta tags are the hidden heroes of the web. They control how your pages appear in search results, social media, and browsers. This cheat sheet covers every meta tag you need in 2025, with copy-paste templates.
Essential Meta Tags
Every page should have these basic meta tags:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Character encoding -->
<meta charset="UTF-8">
<!-- Responsive viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Page title (50-60 characters) -->
<title>Your Page Title | Brand Name</title>
<!-- Page description (150-160 characters) -->
<meta name="description" content="A compelling description of your page that entices users to click through from search results.">
<!-- Canonical URL -->
<link rel="canonical" href="https://example.com/page">
</head>
Open Graph Meta Tags
Open Graph controls how your content appears on Facebook, LinkedIn, Discord, Slack, and most other platforms.
Basic Open Graph
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page">
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A compelling description for social sharing.">
<meta property="og:image" content="https://example.com/images/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="Your Site Name">
<meta property="og:locale" content="en_US">
Open Graph for Articles
<meta property="og:type" content="article">
<meta property="article:published_time" content="2025-01-15T08:00:00+00:00">
<meta property="article:modified_time" content="2025-01-16T10:30:00+00:00">
<meta property="article:author" content="https://example.com/author/john">
<meta property="article:section" content="Technology">
<meta property="article:tag" content="JavaScript">
<meta property="article:tag" content="React">
Open Graph for Products
<meta property="og:type" content="product">
<meta property="product:price:amount" content="29.99">
<meta property="product:price:currency" content="USD">
<meta property="product:availability" content="in stock">
<meta property="product:condition" content="new">
<meta property="product:retailer_item_id" content="SKU123">
Open Graph Image Requirements
| Platform | Minimum Size | Recommended Size | Aspect Ratio |
|---|---|---|---|
| 200x200 | 1200x630 | 1.91:1 | |
| 200x200 | 1200x627 | 1.91:1 | |
| Discord | 256x256 | 1200x630 | 1.91:1 |
| Slack | 250x250 | 1200x630 | 1.91:1 |
Twitter Card Meta Tags
Twitter has its own meta tags, but falls back to Open Graph if Twitter-specific tags aren't present.
Summary Card
Small card with thumbnail on the left:
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@yourusername">
<meta name="twitter:creator" content="@authorusername">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="Your page description.">
<meta name="twitter:image" content="https://example.com/images/twitter-card.jpg">
<meta name="twitter:image:alt" content="Image description for accessibility">
Summary Large Image Card
Large image above the content:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourusername">
<meta name="twitter:creator" content="@authorusername">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="Your page description.">
<meta name="twitter:image" content="https://example.com/images/twitter-large.jpg">
Twitter Card Image Requirements
| Card Type | Minimum Size | Maximum Size | Aspect Ratio |
|---|---|---|---|
| Summary | 144x144 | 4096x4096 | 1:1 |
| Summary Large Image | 300x157 | 4096x4096 | 2:1 |
Complete Social Media Template
Here's a complete template that works everywhere:
<!-- Primary Meta Tags -->
<title>Your Awesome Page Title | Brand</title>
<meta name="title" content="Your Awesome Page Title | Brand">
<meta name="description" content="Your compelling page description goes here. Keep it under 160 characters for best results in search engines.">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/your-page">
<meta property="og:title" content="Your Awesome Page Title">
<meta property="og:description" content="Your compelling page description goes here.">
<meta property="og:image" content="https://example.com/images/social-share.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="Your Brand">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://example.com/your-page">
<meta name="twitter:title" content="Your Awesome Page Title">
<meta name="twitter:description" content="Your compelling page description goes here.">
<meta name="twitter:image" content="https://example.com/images/social-share.jpg">
<meta name="twitter:site" content="@yourbrand">
SEO Meta Tags
Robots Directives
Control how search engines index your pages:
<!-- Allow indexing (default) -->
<meta name="robots" content="index, follow">
<!-- Prevent indexing -->
<meta name="robots" content="noindex, nofollow">
<!-- Index but don't follow links -->
<meta name="robots" content="index, nofollow">
<!-- Don't show in search results after specific date -->
<meta name="robots" content="unavailable_after: 2025-12-31">
<!-- Don't show cached version -->
<meta name="robots" content="noarchive">
<!-- Don't show snippet in search results -->
<meta name="robots" content="nosnippet">
<!-- Limit snippet length -->
<meta name="robots" content="max-snippet:150">
<!-- Limit image preview size -->
<meta name="robots" content="max-image-preview:large">
Google-Specific Tags
<!-- Prevent Google from showing sitelinks search box -->
<meta name="google" content="nositelinkssearchbox">
<!-- Prevent Google from translating -->
<meta name="google" content="notranslate">
<!-- Verify site ownership -->
<meta name="google-site-verification" content="your-verification-code">
Bing-Specific Tags
<meta name="msvalidate.01" content="your-bing-verification-code">
Browser Behavior Meta Tags
Theme and Colors
<!-- Theme color for browser UI -->
<meta name="theme-color" content="#4285f4">
<!-- Different theme for dark mode -->
<meta name="theme-color" content="#4285f4" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#1a1a2e" media="(prefers-color-scheme: dark)">
<!-- iOS Safari status bar style -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
Mobile Web App
<!-- iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="App Name">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Android -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="manifest" href="/manifest.json">
Security
<!-- Content Security Policy -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<!-- Prevent MIME type sniffing -->
<meta http-equiv="X-Content-Type-Options" content="nosniff">
<!-- Referrer policy -->
<meta name="referrer" content="strict-origin-when-cross-origin">
Favicon Meta Tags
Complete favicon setup for all platforms:
<!-- Standard favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- SVG favicon (modern browsers) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Android/Chrome -->
<link rel="manifest" href="/site.webmanifest">
<!-- Microsoft -->
<meta name="msapplication-TileColor" content="#4285f4">
<meta name="msapplication-config" content="/browserconfig.xml">
Internationalization
<!-- Language of the page -->
<html lang="en">
<!-- Alternative language versions -->
<link rel="alternate" hreflang="en" href="https://example.com/en/page">
<link rel="alternate" hreflang="es" href="https://example.com/es/page">
<link rel="alternate" hreflang="fr" href="https://example.com/fr/page">
<link rel="alternate" hreflang="x-default" href="https://example.com/page">
Structured Data (JSON-LD)
While not traditional meta tags, JSON-LD is essential for rich search results:
Website Schema
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "Your Site Name",
"url": "https://example.com",
"potentialAction": {
"@type": "SearchAction",
"target": "https://example.com/search?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>
Article Schema
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Your Article Title",
"description": "Article description",
"image": "https://example.com/image.jpg",
"datePublished": "2025-01-15T08:00:00+00:00",
"dateModified": "2025-01-16T10:30:00+00:00",
"author": {
"@type": "Person",
"name": "Author Name",
"url": "https://example.com/author"
},
"publisher": {
"@type": "Organization",
"name": "Publisher Name",
"logo": {
"@type": "ImageObject",
"url": "https://example.com/logo.png"
}
}
}
</script>
Next.js Metadata Template
For Next.js App Router:
// app/layout.tsx
import { Metadata } from 'next';
export const metadata: Metadata = {
metadataBase: new URL('https://example.com'),
title: {
default: 'Your Site Name',
template: '%s | Your Site Name',
},
description: 'Your site description',
keywords: ['keyword1', 'keyword2', 'keyword3'],
authors: [{ name: 'Author Name' }],
creator: 'Your Name',
publisher: 'Your Company',
robots: {
index: true,
follow: true,
},
openGraph: {
type: 'website',
locale: 'en_US',
url: 'https://example.com',
siteName: 'Your Site Name',
title: 'Your Site Name',
description: 'Your site description',
images: [
{
url: '/og-image.jpg',
width: 1200,
height: 630,
alt: 'Your Site Name',
},
],
},
twitter: {
card: 'summary_large_image',
site: '@yourusername',
creator: '@yourusername',
},
icons: {
icon: '/favicon.ico',
apple: '/apple-touch-icon.png',
},
manifest: '/site.webmanifest',
};
Validating Your Meta Tags
Always validate your meta tags before deploying:
- Facebook Sharing Debugger - developers.facebook.com/tools/debug
- Twitter Card Validator - cards-dev.twitter.com/validator
- LinkedIn Post Inspector - linkedin.com/post-inspector
- Google Rich Results Test - search.google.com/test/rich-results
Or use an API to programmatically validate meta tags across multiple URLs:
const response = await fetch(
'https://api.katsau.com/v1/extract?url=https://example.com',
{
headers: { 'Authorization': 'Bearer YOUR_API_KEY' }
}
);
const { data } = await response.json();
// Check all meta tags
console.log('Title:', data.title);
console.log('Description:', data.description);
console.log('OG Image:', data.image);
console.log('Twitter Card:', data.twitterCard);
Common Mistakes to Avoid
1. Missing og:image
Without an image, your social shares look bland:
<!-- Always include an image! -->
<meta property="og:image" content="https://example.com/image.jpg">
2. Relative URLs
Open Graph requires absolute URLs:
<!-- Wrong -->
<meta property="og:image" content="/images/share.jpg">
<!-- Correct -->
<meta property="og:image" content="https://example.com/images/share.jpg">
3. Duplicate Meta Tags
Each meta tag should appear only once:
<!-- Wrong: duplicate descriptions -->
<meta name="description" content="First description">
<meta name="description" content="Second description">
<!-- Correct: single description -->
<meta name="description" content="Your one description">
4. Title Too Long
Keep titles under 60 characters:
<!-- Too long - will be truncated -->
<title>This Is An Extremely Long Title That Will Definitely Get Cut Off In Search Results</title>
<!-- Better -->
<title>Concise Title That Fits | Brand</title>
Conclusion
Meta tags might seem like a small detail, but they have a massive impact on your site's visibility and click-through rates. Use this cheat sheet as a reference, and always validate your tags before deploying.
Need to audit meta tags across your entire site? Try Katsau's metadata extraction API — validate thousands of pages programmatically.
Ready to build?
Try Katsau API
Extract metadata, generate link previews, and monitor URLs with our powerful API. Start free with 1,000 requests per month.