Every meta tag in common use — what it does, the right syntax, and when each is required vs optional.
This reference covers HTML head elements that influence search engines, social platforms, and browsers. Tags fall into four families: foundational HTML, SEO-specific, Open Graph (Facebook/LinkedIn/Slack), and Twitter Cards (X). The first family is required on every page; the rest are recommended where the context applies.
Declares character encoding. Should always be UTF-8 in modern HTML.
<meta charset="UTF-8">
Controls mobile rendering. Required for responsive sites; without it, mobile browsers zoom out to fit a desktop-width layout.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The page's title — most prominent on-page SEO element, shown in search results, browser tabs, and social shares (as fallback).
<title>Page Topic | Site Name</title>
See our title tag guide for length and format conventions.
On the <html> element. Declares document language; improves accessibility and search engine targeting.
<html lang="en">
Summary shown in search snippets. Doesn't directly affect rankings but heavily influences CTR.
<meta name="description" content="A practical guide to title tags — length, format, and SEO impact.">
140–155 characters is the sweet spot. See our meta description guide.
Per-page crawler instructions. Default is index, follow if no tag is present.
<meta name="robots" content="noindex, nofollow">
Common values: index, follow (default), noindex (don't index), nofollow (don't follow links), noarchive (don't cache).
Declares the canonical URL for this page. Required when duplicate content exists; recommended even on unique pages as a safety against URL parameter variants.
<link rel="canonical" href="https://example.com/page/">
See our canonical guide.
Declares alternate language/region versions of the page.
<link rel="alternate" hreflang="en-US" href="https://example.com/us/"> <link rel="alternate" hreflang="en-GB" href="https://example.com/uk/"> <link rel="alternate" hreflang="x-default" href="https://example.com/">
Title shown when URL is shared on social platforms. Falls back to the HTML title if absent.
<meta property="og:title" content="Page Topic | Site Name">
Description shown in social previews.
<meta property="og:description" content="A practical summary of the page.">
Image shown in social previews. Should be 1200×630 pixels (1.91:1 ratio).
<meta property="og:image" content="https://example.com/og-image.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:image:alt" content="Description of the image">
Canonical URL of the page being shared.
<meta property="og:url" content="https://example.com/page/">
Type of content — affects how some platforms render the preview.
<meta property="og:type" content="website">
Common values: website, article, product, profile.
<meta property="og:site_name" content="Acme Bank">
Card style. summary_large_image for content with hero images; summary for general links.
<meta name="twitter:card" content="summary_large_image">
See our Twitter Cards guide.
Override OG defaults for Twitter-specific previews.
<meta name="twitter:title" content="Custom title for X"> <meta name="twitter:description" content="Custom description for X"> <meta name="twitter:image" content="https://example.com/twitter-image.png"> <meta name="twitter:image:alt" content="Image alt text">
The @handle of your brand and the article's author.
<meta name="twitter:site" content="@yourbrand"> <meta name="twitter:creator" content="@authorname">
Colours mobile browser UI to match your brand on supporting platforms.
<meta name="theme-color" content="#0a0a0a">
Icon shown when users add your site to their iOS home screen.
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
Icon shown in browser tabs and bookmarks.
<link rel="icon" type="image/png" href="/favicon.png">
Identifies the CMS that built the site. Common but not load-bearing; some sites omit for security.
<meta name="generator" content="WordPress 6.4">
Ignored by Google since 2009. Some smaller search engines may use it. Most modern sites omit entirely.
<meta name="keywords" content="seo, meta tags, web"> <!-- generally not needed -->
Documented but rarely used by search engines today. For author identification, prefer schema.org Article structured data.
<meta name="author" content="Jane Doe">
Auto-redirects via meta refresh. Search engines may treat as either 301 or as low-quality. Use server-side 301 redirects instead.
<meta http-equiv="refresh" content="0; URL=https://example.com/"> <!-- avoid -->
For a typical content page, the head should include at minimum:
<html> (accessibility).That's roughly 8–12 lines in the head. Meta Tag Checker verifies every one in seconds.