Skip to content

Instantly share code, notes, and snippets.

@watat83

watat83/HTML Meta Tags Modern Guide.md

Last active July 21, 2026 18:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save watat83/fda91c525efbad7e2489a0edff53784c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save watat83/fda91c525efbad7e2489a0edff53784c to your computer and use it in GitHub Desktop.
Download ZIP
A comprehensive reference of modern HTML meta tags, Open Graph, Twitter/X Cards, SEO, social sharing, browser, mobile, PWA, and security-related metadata. Includes practical examples, explanations, best practices, and notes on deprecated tags for modern web development.
Raw
HTML Meta Tags Modern Guide.md

Modern HTML Meta Tags & Head Elements Reference

A practical, up-to-date reference for HTML <head> metadata: SEO tags, social preview tags, browser behavior, PWA/mobile tags, icons, feeds, verification tags, privacy controls, and legacy tags you should usually avoid.

Goal: not just a “complete” list, but a useful one. Some tags are essential. Some are optional. Some are outdated and should not be copied into modern projects.

Table of Contents

Recommended Starter Template

Use this for most modern websites, blogs, landing pages, and SaaS pages.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Page Title | Brand Name</title>
  <meta name="description" content="Write a clear, human-readable summary of this page in about 140–160 characters.">
  <link rel="canonical" href="https://example.com/page-url/">

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

  <meta property="og:title" content="Page Title | Brand Name">
  <meta property="og:description" content="Write a compelling social preview description.">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://example.com/page-url/">
  <meta property="og:image" content="https://example.com/images/social-preview.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:site_name" content="Brand Name">

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Page Title | Brand Name">
  <meta name="twitter:description" content="Write a compelling social preview description.">
  <meta name="twitter:image" content="https://example.com/images/social-preview.jpg">

  <meta name="theme-color" content="#0f172a">
  <meta name="color-scheme" content="light dark">

  <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">
  <link rel="manifest" href="/site.webmanifest">
</head>

Essential HTML Metadata

Tag Example Use Priority
charset <meta charset="utf-8"> Declares document character encoding. Put it as early as possible in <head>. Essential
viewport <meta name="viewport" content="width=device-width, initial-scale=1"> Makes layouts responsive on mobile devices. Essential
title `<title>Best Grocery Apps CartLens</title>` Browser tab title and search result title candidate. Not a meta tag, but critical.
description <meta name="description" content="..."> Search snippet candidate and general page summary. Essential
canonical <link rel="canonical" href="https://example.com/page/"> Tells search engines the preferred URL for duplicate or near-duplicate pages. Essential for SEO pages
lang attribute <html lang="en"> Declares page language. Goes on <html>, not inside <head>. Essential

Notes

  • Use utf-8. There is almost never a reason to use anything else.
  • Keep the viewport simple unless you have a strong accessibility reason.
  • Do not disable zoom with user-scalable=no; it hurts accessibility.
  • The meta description is not a direct ranking button, but it strongly affects search result presentation and click-through.

SEO Metadata

Tag Example Use Recommendation
description <meta name="description" content="Compare grocery prices from real receipts and find cheaper stores nearby."> Search snippet candidate. Use on every indexable page.
robots <meta name="robots" content="index, follow"> Page-level crawl/index instructions. Use intentionally; default is usually index/follow.
googlebot <meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1"> Google-specific crawler instructions. Useful when you need Google-specific behavior.
bingbot <meta name="bingbot" content="index, follow"> Bing-specific crawler instructions. Optional.
keywords <meta name="keywords" content="..."> Historical keyword tag. Usually skip; major search engines do not rely on it.
author <meta name="author" content="Chris Nzouat"> Human or organization author. Optional. Better handled visibly on-page or via structured data.
generator <meta name="generator" content="WordPress"> Identifies software that generated the page. Optional; often removed for security/noise.
rating <meta name="rating" content="adult"> Signals adult content classification. Only use if relevant.

Better SEO Pattern

<title>Best Grocery Price Comparison Apps in 2026 | CartLens</title>
<meta name="description" content="Compare the best grocery price comparison apps, including receipt scanning, local price tracking, features, pricing, pros, and cons.">
<link rel="canonical" href="https://www.cartlens.co/blog/best-grocery-price-comparison-apps/">
<meta name="robots" content="index, follow, max-image-preview:large">

Robots and Indexing Controls

Robots meta tags control how search crawlers index, follow, preview, and cache pages.

<meta name="robots" content="noindex, follow">
Directive Meaning Common Use
index Allow indexing. Usually default.
noindex Do not show this page in search results. Thank-you pages, internal pages, thin duplicates.
follow Allow crawlers to follow links. Usually default.
nofollow Do not follow links on the page. Rare at page level.
noarchive Do not show cached result. Sensitive or frequently changing pages.
nosnippet Do not show text snippet or video preview. When snippets expose unwanted content.
max-snippet:N Limit snippet length to N characters. Fine-grained snippet control.
max-snippet:-1 No snippet length limit. Let Google choose.
max-image-preview:none No image preview. Restrictive image control.
max-image-preview:standard Standard image preview. Conservative default.
max-image-preview:large Large image preview allowed. Recommended for content sites.
max-video-preview:N Limit video preview to N seconds. Video pages.
unavailable_after Remove page after a specific date/time. Events, expired offers, limited-time pages.
notranslate Prevent translation link/snippet in some search features. Brand/legal pages.
noimageindex Do not index images on the page. Private/proprietary images.

Examples

Index normally:

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

Noindex but allow link discovery:

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

Allow large previews:

<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">

Remove after a campaign ends:

<meta name="robots" content="unavailable_after: 31 Dec 2026 23:59:59 PST">

X-Robots-Tag Header

For PDFs, images, and non-HTML files, use the HTTP header instead of an HTML meta tag.

X-Robots-Tag: noindex

Canonical, Pagination, and Alternate URLs

Element Example Use
Canonical <link rel="canonical" href="https://example.com/page/"> Preferred URL for duplicate/similar pages.
Hreflang alternate <link rel="alternate" hreflang="es" href="https://example.com/es/page/"> Language/region alternates.
x-default <link rel="alternate" hreflang="x-default" href="https://example.com/"> Default fallback for international pages.
AMP alternate <link rel="amphtml" href="https://example.com/page/amp/"> AMP version, if used.
Mobile alternate <link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.example.com/page/"> Separate mobile URLs. Usually avoid in modern responsive sites.

Hreflang Example

<link rel="canonical" href="https://example.com/pricing/">
<link rel="alternate" hreflang="en" href="https://example.com/pricing/">
<link rel="alternate" hreflang="fr" href="https://example.com/fr/tarifs/">
<link rel="alternate" hreflang="es" href="https://example.com/es/precios/">
<link rel="alternate" hreflang="x-default" href="https://example.com/pricing/">

Pagination Note

rel="prev" and rel="next" used to be common for paginated series. Google no longer uses them as an indexing signal, but they can still help browsers, accessibility tools, and other systems understand navigation.

<link rel="prev" href="https://example.com/blog/page/2/">
<link rel="next" href="https://example.com/blog/page/4/">

Open Graph Metadata

Open Graph controls how pages appear when shared on Facebook, LinkedIn, Slack, iMessage, WhatsApp, Discord, and many other platforms.

Core Tags

<meta property="og:title" content="Best Grocery Price Comparison Apps">
<meta property="og:description" content="Compare the top apps for grocery savings, receipt scanning, and local price tracking.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://www.cartlens.co/blog/best-grocery-price-comparison-apps/">
<meta property="og:image" content="https://www.cartlens.co/images/best-grocery-apps-og.jpg">
<meta property="og:site_name" content="CartLens">
<meta property="og:locale" content="en_US">
Property Use Recommended?
og:title Social preview title. Yes
og:description Social preview description. Yes
og:type Object type: website, article, product, etc. Yes
og:url Permanent canonical URL. Yes
og:image Social preview image. Yes
og:image:secure_url HTTPS image URL. Optional if og:image is already HTTPS.
og:image:width Image width. Recommended
og:image:height Image height. Recommended
og:image:alt Image alt text. Recommended
og:site_name Site or brand name. Recommended
og:locale Locale, e.g. en_US. Recommended
og:locale:alternate Alternate locales. Optional

Article Tags

<meta property="article:published_time" content="2026-07-04T10:00:00-07:00">
<meta property="article:modified_time" content="2026-07-04T12:30:00-07:00">
<meta property="article:author" content="https://example.com/authors/chris-nzouat/">
<meta property="article:section" content="Shopping">
<meta property="article:tag" content="grocery savings">
<meta property="article:tag" content="price comparison">

Product Tags

<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">

Image Guidance

  • Use 1200 × 630 px for general Open Graph images.
  • Use absolute HTTPS URLs.
  • Avoid tiny text in social images.
  • Provide og:image:alt for accessibility.
  • Do not rely on SVG for social previews; many crawlers prefer JPG/PNG/WebP.

X / Twitter Card Metadata

X still uses Twitter Card metadata names.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Best Grocery Price Comparison Apps">
<meta name="twitter:description" content="Compare grocery savings apps by pricing, receipt scanning, local price tracking, pros, and cons.">
<meta name="twitter:image" content="https://www.cartlens.co/images/best-grocery-apps-twitter.jpg">
<meta name="twitter:image:alt" content="A grocery cart with a receipt and price comparison chart.">
<meta name="twitter:site" content="@cartlens">
<meta name="twitter:creator" content="@watat83">
Tag Use
twitter:card Card type. Use summary or summary_large_image.
twitter:title X preview title.
twitter:description X preview description.
twitter:image Preview image.
twitter:image:alt Accessible image description.
twitter:site Site account handle.
twitter:creator Author account handle.
twitter:player Player URL for video/audio cards.
twitter:app:name:iphone iPhone app card metadata.
twitter:app:id:iphone App Store ID.
twitter:app:url:iphone Deep link URL.
twitter:app:name:googleplay Android app name.
twitter:app:id:googleplay Android package name.
twitter:app:url:googleplay Android deep link.

Card Types

<meta name="twitter:card" content="summary">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:card" content="player">
<meta name="twitter:card" content="app">

Schema.org and Structured Data

Structured data is not usually written as <meta> tags anymore. Use JSON-LD.

Article JSON-LD

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Best Grocery Price Comparison Apps",
  "description": "A practical comparison of grocery price comparison apps, receipt scanners, pricing, pros, and cons.",
  "image": "https://example.com/images/best-grocery-apps.jpg",
  "author": {
    "@type": "Person",
    "name": "Chris Nzouat"
  },
  "publisher": {
    "@type": "Organization",
    "name": "CartLens",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  },
  "datePublished": "2026-07-04",
  "dateModified": "2026-07-04",
  "mainEntityOfPage": "https://example.com/blog/best-grocery-price-comparison-apps/"
}
</script>

Common Schema Types

Type Use
Organization Company/brand identity.
WebSite Site-level search/action metadata.
WebPage General page metadata.
Article Blog posts and articles.
NewsArticle News content.
BlogPosting Blog posts.
Product Product pages.
Offer Price and availability.
FAQPage FAQ sections.
HowTo Step-by-step guides.
BreadcrumbList Breadcrumb navigation.
LocalBusiness Local business pages.
SoftwareApplication SaaS/apps.
Review Reviews, when eligible.
VideoObject Video pages.
ImageObject Image metadata.
Recipe Recipe content.
Event Events.
JobPosting Job listings.
Course Courses.

Browser, UI, and Device Metadata

Tag Example Use
theme-color <meta name="theme-color" content="#10b981"> Browser UI color on supported devices.
theme-color with media <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#020617"> Different color for light/dark mode.
color-scheme <meta name="color-scheme" content="light dark"> Tells browser supported color schemes.
format-detection <meta name="format-detection" content="telephone=no"> Prevents automatic phone number linking on iOS.
referrer <meta name="referrer" content="strict-origin-when-cross-origin"> Controls referrer behavior.
application-name <meta name="application-name" content="CartLens"> App/site name in some browsers.
mobile-web-app-capable <meta name="mobile-web-app-capable" content="yes"> Android/Chrome install-like behavior.
apple-mobile-web-app-capable <meta name="apple-mobile-web-app-capable" content="yes"> iOS standalone web app behavior.
apple-mobile-web-app-title <meta name="apple-mobile-web-app-title" content="CartLens"> iOS home screen app title.
apple-mobile-web-app-status-bar-style <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> iOS status bar style.
HandheldFriendly <meta name="HandheldFriendly" content="true"> Old mobile browsers. Mostly legacy.
MobileOptimized <meta name="MobileOptimized" content="width"> Old mobile browsers. Mostly legacy.

Dark/Light Theme Example

<meta name="color-scheme" content="light dark">
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#020617">

Progressive Web App Metadata

Modern PWA metadata should live mostly in the web app manifest.

<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#10b981">

Example site.webmanifest

{
  "name": "CartLens",
  "short_name": "CartLens",
  "description": "Compare real local prices from receipts and price tags.",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#10b981",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/icons/maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

PWA-Related Tags

Element Use
<link rel="manifest"> Points to the app manifest.
<meta name="theme-color"> Browser/system UI color.
<link rel="apple-touch-icon"> iOS home screen icon.
<meta name="apple-mobile-web-app-capable"> iOS standalone behavior.
<meta name="apple-mobile-web-app-title"> iOS app name.
<meta name="apple-mobile-web-app-status-bar-style"> iOS status bar style.

Icons, Favicons, and App Icons

<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">
<link rel="manifest" href="/site.webmanifest">
Link Use
rel="icon" Browser favicon.
rel="shortcut icon" Legacy favicon syntax. Usually not needed.
rel="apple-touch-icon" iOS home screen icon.
rel="mask-icon" Safari pinned tab icon.
rel="manifest" PWA manifest.

Safari Pinned Tab

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#10b981">

Microsoft Tiles / Legacy Windows

<meta name="msapplication-TileColor" content="#10b981">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="msapplication-config" content="/browserconfig.xml">

Use only if you care about older Windows tile behavior.

Security, Privacy, and Referrer Controls

Some security policies can be declared with meta tags, but HTTP headers are usually stronger and more reliable.

Tag/Header Example Recommendation
referrer meta <meta name="referrer" content="strict-origin-when-cross-origin"> Useful.
CSP meta <meta http-equiv="Content-Security-Policy" content="default-src 'self'"> Prefer HTTP header.
Permissions-Policy HTTP header only Use server header.
X-Frame-Options HTTP header only Use server header or CSP frame-ancestors.
HSTS HTTP header only Use server header.

Referrer Policy Values

<meta name="referrer" content="no-referrer">
<meta name="referrer" content="origin">
<meta name="referrer" content="strict-origin">
<meta name="referrer" content="strict-origin-when-cross-origin">
<meta name="referrer" content="same-origin">
<meta name="referrer" content="no-referrer-when-downgrade">
<meta name="referrer" content="unsafe-url">

CSP Meta Example

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' https: data:; script-src 'self'; style-src 'self' 'unsafe-inline'">

Use CSP headers in production when possible.

Performance-Oriented Head Tags

These are not meta tags, but they live in <head> and can improve perceived speed when used carefully.

Element Example Use
DNS prefetch <link rel="dns-prefetch" href="//fonts.gstatic.com"> Resolve DNS early.
Preconnect <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> Open connection early.
Preload <link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin> Load critical resource early.
Module preload <link rel="modulepreload" href="/assets/app.js"> Preload JS modules.
Prefetch <link rel="prefetch" href="/next-page/"> Fetch likely next resource.
Prerender <script type="speculationrules">...</script> Browser speculation rules for future navigation.

Examples

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin>

Use sparingly. Too many preloads can make performance worse.

Feeds, Discovery, and Machine-Readable Links

Link Example Use
RSS <link rel="alternate" type="application/rss+xml" title="RSS" href="/feed.xml"> RSS feed discovery.
Atom <link rel="alternate" type="application/atom+xml" title="Atom" href="/atom.xml"> Atom feed discovery.
JSON Feed <link rel="alternate" type="application/feed+json" title="JSON Feed" href="/feed.json"> JSON feed discovery.
OpenSearch <link rel="search" type="application/opensearchdescription+xml" title="Site Search" href="/opensearch.xml"> Browser/site search integration.
Webmention <link rel="webmention" href="https://example.com/webmention"> IndieWeb replies/mentions.
Micropub <link rel="micropub" href="https://example.com/micropub"> IndieWeb publishing endpoint.
me <link rel="me" href="https://mastodon.social/@username"> Identity verification across profiles.
payment <link rel="payment" href="https://example.com/pay"> Payment/donation discovery. Niche.
license <link rel="license" href="https://creativecommons.org/licenses/by/4.0/"> Content license.
author <link rel="author" href="/humans.txt"> Author information.

Feed Example

<link rel="alternate" type="application/rss+xml" title="CartLens Blog RSS" href="https://www.cartlens.co/feed.xml">
<link rel="alternate" type="application/feed+json" title="CartLens Blog JSON Feed" href="https://www.cartlens.co/feed.json">

Site Verification Tags

Use only the verification tags required by the services you actually use.

<meta name="google-site-verification" content="verification_token">
<meta name="msvalidate.01" content="verification_token">
<meta name="yandex-verification" content="verification_token">
<meta name="baidu-site-verification" content="verification_token">
<meta name="p:domain_verify" content="verification_token">
<meta name="facebook-domain-verification" content="verification_token">
Tag Service
google-site-verification Google Search Console
msvalidate.01 Bing Webmaster Tools
yandex-verification Yandex Webmaster
baidu-site-verification Baidu Webmaster Tools
p:domain_verify Pinterest
facebook-domain-verification Meta/Facebook Business
norton-safeweb-site-verification Norton Safe Web

Remove verification tags for services you no longer use.

Content Ownership, Authorship, and Licensing

Tag/Link Example Use
author <meta name="author" content="Chris Nzouat"> Basic author name.
copyright <meta name="copyright" content="CartLens Inc."> Mostly informational.
dc.title <meta name="DC.title" content="Page Title"> Dublin Core metadata. Niche.
dc.creator <meta name="DC.creator" content="Chris Nzouat"> Dublin Core creator. Niche.
dc.description <meta name="DC.description" content="..."> Dublin Core description. Niche.
dc.rights <meta name="DC.rights" content="Copyright 2026 CartLens"> Dublin Core rights. Niche.
license link <link rel="license" href="https://creativecommons.org/licenses/by/4.0/"> Machine-readable license.

Dublin Core Example

<meta name="DC.title" content="Best Grocery Price Comparison Apps">
<meta name="DC.creator" content="Chris Nzouat">
<meta name="DC.subject" content="Grocery savings, price comparison, receipt scanning">
<meta name="DC.description" content="A guide to the best grocery price comparison apps.">
<meta name="DC.publisher" content="CartLens">
<meta name="DC.date" content="2026-07-04">
<meta name="DC.language" content="en">
<meta name="DC.rights" content="Copyright 2026 CartLens">

Use Dublin Core only if your content needs library/archive/document-style metadata.

Internationalization and Localization

Element Example Use
HTML language <html lang="en-US"> Primary language.
Content language meta <meta http-equiv="content-language" content="en-US"> Legacy. Prefer HTTP headers or html lang.
Hreflang <link rel="alternate" hreflang="fr-FR" href="https://example.com/fr/"> International SEO.
Open Graph locale <meta property="og:locale" content="en_US"> Social preview locale.
Open Graph alternate locale <meta property="og:locale:alternate" content="fr_FR"> Alternate social locales.

Example

<html lang="en-US">
<head>
  <link rel="alternate" hreflang="en-US" href="https://example.com/">
  <link rel="alternate" hreflang="fr-FR" href="https://example.com/fr/">
  <link rel="alternate" hreflang="x-default" href="https://example.com/">
  <meta property="og:locale" content="en_US">
  <meta property="og:locale:alternate" content="fr_FR">
</head>

News, Articles, and Publishers

Tag Example Use
article:published_time <meta property="article:published_time" content="2026-07-04T10:00:00-07:00"> Open Graph publish date.
article:modified_time <meta property="article:modified_time" content="2026-07-04T12:00:00-07:00"> Open Graph update date.
article:author <meta property="article:author" content="https://example.com/authors/chris/"> Author profile URL.
article:publisher <meta property="article:publisher" content="https://www.facebook.com/brand"> Publisher page.
article:section <meta property="article:section" content="Shopping"> Article category.
article:tag <meta property="article:tag" content="receipt scanner"> Article tags.
news_keywords <meta name="news_keywords" content="..."> Old Google News tag. Usually unnecessary.

Article Example

<meta property="og:type" content="article">
<meta property="article:published_time" content="2026-07-04T10:00:00-07:00">
<meta property="article:modified_time" content="2026-07-04T12:00:00-07:00">
<meta property="article:section" content="Shopping">
<meta property="article:tag" content="grocery savings">
<meta property="article:tag" content="receipt scanner">

Ecommerce and Product Pages

Use Open Graph plus Product structured data.

<meta property="og:type" content="product">
<meta property="og:title" content="CartLens Pro">
<meta property="og:description" content="Advanced receipt scanning and local price intelligence for smarter shopping.">
<meta property="og:image" content="https://example.com/cartlens-pro.jpg">
<meta property="product:price:amount" content="9.99">
<meta property="product:price:currency" content="USD">

Product JSON-LD

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "CartLens Pro",
  "description": "Advanced receipt scanning and local price intelligence.",
  "image": "https://example.com/cartlens-pro.jpg",
  "brand": {
    "@type": "Brand",
    "name": "CartLens"
  },
  "offers": {
    "@type": "Offer",
    "url": "https://example.com/pricing/",
    "priceCurrency": "USD",
    "price": "9.99",
    "availability": "https://schema.org/InStock"
  }
}
</script>

Deprecated, Obsolete, or Usually Useless Tags

These appear in old meta tag lists, but most modern sites should avoid them.

Tag Example Status / Problem
keywords <meta name="keywords" content="..."> Usually ignored by major search engines.
revisit-after <meta name="revisit-after" content="7 days"> Not useful for modern crawlers.
expires <meta http-equiv="expires" content="0"> Use HTTP caching headers instead.
pragma <meta http-equiv="pragma" content="no-cache"> Legacy. Use HTTP headers.
cache-control meta <meta http-equiv="cache-control" content="no-cache"> Use HTTP headers.
refresh <meta http-equiv="refresh" content="0; url=/new-page/"> Use server redirects when possible. Accessibility/UX issues.
X-UA-Compatible <meta http-equiv="X-UA-Compatible" content="IE=edge"> Legacy Internet Explorer. Usually unnecessary.
imagetoolbar <meta http-equiv="imagetoolbar" content="no"> Old IE behavior. Obsolete.
mssmarttagspreventparsing <meta name="mssmarttagspreventparsing" content="true"> Old Microsoft feature. Obsolete.
HandheldFriendly <meta name="HandheldFriendly" content="true"> Old mobile browsers. Usually unnecessary.
MobileOptimized <meta name="MobileOptimized" content="320"> Old mobile browsers. Usually unnecessary.
abstract <meta name="abstract" content="..."> Rarely used. Use description/schema.
topic <meta name="topic" content="..."> Not broadly useful.
summary <meta name="summary" content="..."> Not broadly useful.
classification <meta name="classification" content="Business"> Old directory-style metadata.
directory <meta name="directory" content="submission"> Obsolete.
distribution <meta name="distribution" content="global"> Usually useless.
coverage <meta name="coverage" content="Worldwide"> Usually useless.
reply-to <meta name="reply-to" content="email@example.com"> Exposes email to scraping. Avoid.
owner <meta name="owner" content="..."> Not broadly useful.
designer <meta name="designer" content="..."> Optional vanity tag.
rating as general <meta name="rating" content="General"> Usually pointless. Only use for adult content control.
resource-type <meta name="resource-type" content="document"> Obsolete.
audience <meta name="audience" content="all"> Usually useless.
page-topic <meta name="page-topic" content="Shopping"> Obsolete.
page-type <meta name="page-type" content="Article"> Use structured data instead.
content-language meta <meta http-equiv="content-language" content="en"> Prefer <html lang="en">.

Validation Checklist

Before publishing, check the following:

  • One <title> per page.
  • One clear meta description per indexable page.
  • charset appears early in <head>.
  • viewport is present and does not disable zoom.
  • Canonical URL is absolute and points to the preferred page.
  • robots is not accidentally set to noindex.
  • Open Graph image is absolute, crawlable, and at least 1200 × 630 px for general sharing.
  • og:title, og:description, og:url, og:type, and og:image are present.
  • twitter:card is present if X sharing matters.
  • Structured data validates without critical errors.
  • Favicon and app icons load correctly.
  • Theme color matches brand and dark mode behavior.
  • Verification tags are only included when needed.
  • No private emails, internal tokens, staging URLs, or secret IDs are exposed.
  • No old copy-pasted tags from unrelated websites remain.

Quick Copy-Paste Templates

Basic Landing Page

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Product Name | Brand</title>
<meta name="description" content="Clear one-sentence value proposition for the page.">
<link rel="canonical" href="https://example.com/">
<meta name="robots" content="index, follow, max-image-preview:large">
<meta property="og:title" content="Product Name | Brand">
<meta property="og:description" content="Clear social preview description.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/og-image.jpg">
<meta name="theme-color" content="#10b981">

Blog Post

<title>Article Title | Blog Name</title>
<meta name="description" content="A useful article summary written for humans.">
<link rel="canonical" href="https://example.com/blog/article-slug/">
<meta name="robots" content="index, follow, max-image-preview:large">

<meta property="og:type" content="article">
<meta property="og:title" content="Article Title">
<meta property="og:description" content="A useful social description.">
<meta property="og:url" content="https://example.com/blog/article-slug/">
<meta property="og:image" content="https://example.com/images/article-og.jpg">
<meta property="article:published_time" content="2026-07-04T10:00:00-07:00">
<meta property="article:modified_time" content="2026-07-04T12:00:00-07:00">
<meta property="article:section" content="Category">
<meta property="article:tag" content="keyword one">
<meta property="article:tag" content="keyword two">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Article Title">
<meta name="twitter:description" content="A useful social description.">
<meta name="twitter:image" content="https://example.com/images/article-og.jpg">

Noindex Page

<meta name="robots" content="noindex, follow">
<link rel="canonical" href="https://example.com/private-or-thank-you-page/">

Multilingual Page

<link rel="canonical" href="https://example.com/pricing/">
<link rel="alternate" hreflang="en-US" href="https://example.com/pricing/">
<link rel="alternate" hreflang="fr-FR" href="https://example.com/fr/tarifs/">
<link rel="alternate" hreflang="es-ES" href="https://example.com/es/precios/">
<link rel="alternate" hreflang="x-default" href="https://example.com/pricing/">
<meta property="og:locale" content="en_US">
<meta property="og:locale:alternate" content="fr_FR">
<meta property="og:locale:alternate" content="es_ES">

PWA / App-Like Site

<meta name="theme-color" content="#10b981">
<meta name="color-scheme" content="light dark">
<link rel="manifest" href="/site.webmanifest">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="App Name">
<meta name="apple-mobile-web-app-status-bar-style" content="default">

Practical Rule

Do not build a <head> by copying every tag you can find. Build it by intent:

  1. Rendering: charset, viewport, title.
  2. Search: description, canonical, robots, structured data.
  3. Sharing: Open Graph and X/Twitter cards.
  4. Brand/UI: icons, theme color, manifest.
  5. Control: referrer, indexing, verification, security headers.
  6. Only then: niche metadata for archives, feeds, apps, or special platforms.
@MartinMMCyt

MartinMMCyt commented Jul 21, 2026

Copy link
Copy Markdown

nice

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment