20 Checks · Code Examples · Free

Head Elements & Meta Tags Checklist

Q: What is the difference between meta robots and X-Robots-Tag?

Meta robots is an HTML element placed inside the <head> of your document that controls indexing for that specific page. X-Robots-Tag is an HTTP response header that can control indexing for any resource including PDFs, images, and non-HTML files. Use X-Robots-Tag when you need noindex directives on resources where you cannot edit HTML.

The head section contains meta tags, Open Graph, Twitter Cards, and directives that control how search engines and social platforms display your page.

Why Head Elements Matters

Every page on your site has a head section that contains metadata invisible to users but critical for search engines. The title tag, meta description, canonical link, and structured data in your head section determine how your page appears in search results, how it is shared on social media, and whether it gets indexed correctly.

20 essential head elements

60% of sites miss key tags

+35% CTR from optimized meta

Best Practices Overview

Title tag under 60 characters ✓ Recommended

Meta description 150-160 characters ✓ Recommended

Self-referencing canonical on every page ✓ Recommended

Charset and viewport declared first ✓ Recommended

Open Graph image 1200×630 px ✓ Recommended

Hreflang return tags match all variants ✓ Recommended

The 20 Checks

Every check ranked by impact. Start at the top and work down.

#	Check	Category	Impact	Difficulty
1	Optimize title tag with primary keyword	SEO	Critical	Easy
2	Write compelling meta description	SEO	Critical	Easy
3	Add self-referencing canonical tag	Configuration	Critical	Easy
4	Set charset to UTF-8	Technical	Critical	Easy
5	Add meta viewport for mobile	Mobile	Critical	Easy
6	Implement Open Graph tags	Social	High	Easy
7	Add Twitter Card tags	Social	High	Easy
8	Set meta robots directives	Indexing	High	Easy
9	Add favicon link	Branding	Medium	Easy
10	Implement hreflang for multilingual	International	Medium	Medium
11	Add JSON-LD structured data	Schema	High	Medium
12	Set language declaration	International	Medium	Easy
13	Add preconnect for external resources	Performance	Medium	Easy
14	Preload critical resources	Performance	Medium	Easy
15	Set appropriate Cache-Control headers	Performance	Medium	Medium
16	Add Last-Modified header	Crawling	Low	Easy
17	Implement X-Robots-Tag HTTP header	Indexing	Low	Medium
18	Add RSS/Atom feed link	Content	Low	Easy
19	Verify all meta tags are in head	Quality	Low	Easy
20	Audit head elements quarterly	Maintenance	Low	Easy

Proper <head> Structure

The order of elements in your head section matters. Charset and viewport must come before any external resources to prevent rendering issues.

HTML — Recommended <head> order

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 1. Charset first (prevents FOUC) -->
  <meta charset="UTF-8">

  <!-- 2. Viewport for mobile rendering -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 3. Title tag (under 60 characters) -->
  <title>Primary Keyword - Secondary | Brand</title>

  <!-- 4. Meta description (150-160 characters) -->
  <meta name="description" content="Compelling description with primary keyword that entices users to click. Keep it under 160 characters.">

  <!-- 5. Canonical URL -->
  <link rel="canonical" href="https://www.example.com/page/">

  <!-- 6. Robots directive (only if needed) -->
  <meta name="robots" content="index, follow">

  <!-- 7. Preconnect to critical origins -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://cdn.example.com" crossorigin>

  <!-- 8. Preload critical assets -->
  <link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>

  <!-- 9. Favicon -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <!-- 10. Open Graph -->
  <meta property="og:type" content="website">
  <meta property="og:title" content="Page Title">
  <meta property="og:description" content="Description for social sharing.">
  <meta property="og:image" content="https://www.example.com/images/og-image.jpg">
  <meta property="og:url" content="https://www.example.com/page/">
  <meta property="og:site_name" content="Brand Name">

  <!-- 11. Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Page Title">
  <meta name="twitter:description" content="Description for Twitter.">
  <meta name="twitter:image" content="https://www.example.com/images/twitter-card.jpg">

  <!-- 12. JSON-LD structured data -->
  <script type="application/ld+json">{ "@context": "https://schema.org", ... }</script>
</head>

Preconnect & DNS Prefetch

Preconnect establishes early connections to critical third-party origins. DNS prefetch resolves domain names ahead of time for less critical resources.

HTML — Preconnect for critical origins

<!-- Preconnect: establishes TCP + TLS + HTTP handshake immediately -->
<!-- Use for 1-3 critical origins only (each costs CPU) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdn.example.com" crossorigin>

<!-- DNS Prefetch: resolves DNS only (lighter than preconnect) -->
<!-- Use for analytics, tracking, and secondary origins -->
<link rel="dns-prefetch" href="https://www.googletagmanager.com">
<link rel="dns-prefetch" href="https://connect.facebook.net">
<link rel="dns-prefetch" href="https://analytics.example.com">

Always add crossorigin when the preconnected resource uses CORS (fonts, CDN assets). Preconnecting to too many origins hurts performance — limit it to the 2-3 most critical.

Canonical Tag Implementation

The canonical tag tells Google which URL is the authoritative version of a page. It prevents duplicate content issues from URL parameters, tracking codes, and protocol variations.

HTML — Self-referencing canonical

<!-- On https://www.example.com/page/ -->
<link rel="canonical" href="https://www.example.com/page/">

<!-- For paginated content (canonical points to page 1) -->
<!-- On https://www.example.com/blog/page/2/ -->
<link rel="canonical" href="https://www.example.com/blog/">

<!-- For HTTP to HTTPS redirect -->
<!-- On https://www.example.com/page/ -->
<link rel="canonical" href="https://www.example.com/page/">

Apache .htaccess — Canonical redirect

# Force HTTPS
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

# Force www
RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteRule ^(.*)$ https://www.%{HTTP_HOST}/$1 [L,R=301]

Always use absolute URLs (with https:// and www) in canonical tags. Relative canonicals are ambiguous and Google may ignore them.

Hreflang Tags for International Sites

Hreflang tags tell search engines which language and regional version of a page to serve. Every variant must reference itself and all other variants, plus an x-default fallback.

HTML — Hreflang implementation with x-default

<!-- English (US) page references all variants -->
<link rel="alternate" hreflang="en-us" href="https://www.example.com/page/">
<link rel="alternate" hreflang="en-gb" href="https://www.example.com/en-gb/page/">
<link rel="alternate" hreflang="de" href="https://www.example.com/de/page/">
<link rel="alternate" hreflang="fr" href="https://www.example.com/fr/page/">
<link rel="alternate" hreflang="x-default" href="https://www.example.com/page/">

<!-- German page must also reference all variants -->
<link rel="alternate" hreflang="en-us" href="https://www.example.com/page/">
<link rel="alternate" hreflang="en-gb" href="https://www.example.com/en-gb/page/">
<link rel="alternate" hreflang="de" href="https://www.example.com/de/page/">
<link rel="alternate" hreflang="fr" href="https://www.example.com/fr/page/">
<link rel="alternate" hreflang="x-default" href="https://www.example.com/page/">

XML Sitemap — Hreflang via sitemap (alternative)

<url>
  <loc>https://www.example.com/page/</loc>
  <xhtml:link rel="alternate" hreflang="en-us" href="https://www.example.com/page/" />
  <xhtml:link rel="alternate" hreflang="de" href="https://www.example.com/de/page/" />
  <xhtml:link rel="alternate" hreflang="x-default" href="https://www.example.com/page/" />
</url>

The most common hreflang error is missing return tags. If page A references page B, page B must also reference page A. Use Ahrefs or Screaming Frog to audit for missing return tags.

X-Robots-Tag HTTP Header

X-Robots-Tag is an HTTP response header that controls indexing for any resource — including PDFs, images, and files where you cannot add HTML meta tags.

Apache .htaccess — X-Robots-Tag for PDFs

# Noindex all PDF files
<FilesMatch "\.pdf$">
  Header set X-Robots-Tag "noindex, nofollow"
</FilesMatch>

# Noindex specific directory
<Directory "/var/www/html/private">
  Header set X-Robots-Tag "noindex, nofollow"
</Directory>

Nginx — X-Robots-Tag configuration

# Noindex images in a specific directory
location /uploads/private/ {
    add_header X-Robots-Tag "noindex, nofollow" always;
}

# Noindex all .docx files
location ~* \.docx$ {
    add_header X-Robots-Tag "noindex, nofollow" always;
}

X-Robots-Tag takes precedence over the meta robots HTML tag. Use it for non-HTML resources or when you want to add noindex without modifying HTML.

Open Graph & Twitter Card Meta Tags

Open Graph controls how your content appears on Facebook, LinkedIn, and Slack. Twitter Card tags control how it appears on X/Twitter. Both require specific image dimensions.

HTML — Complete Open Graph implementation

<!-- Required Open Graph tags -->
<meta property="og:type" content="article">
<meta property="og:title" content="Your Page Title Here">
<meta property="og:description" content="A compelling description that appears below the title when shared on social media.">
<meta property="og:image" content="https://www.example.com/images/og-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Descriptive alt text for the image">
<meta property="og:url" content="https://www.example.com/page/">
<meta property="og:site_name" content="Your Brand Name">
<meta property="og:locale" content="en_US">

<!-- Article-specific OG tags -->
<meta property="article:published_time" content="2026-08-01T08:00:00+00:00">
<meta property="article:modified_time" content="2026-08-10T12:00:00+00:00">
<meta property="article:author" content="https://www.example.com/author/">
<meta property="article:section" content="SEO">
<meta property="article:tag" content="On-Page SEO">

HTML — Twitter Card tags

<!-- summary_large_image for blog posts and articles -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourhandle">
<meta name="twitter:creator" content="@authorhandle">
<meta name="twitter:title" content="Your Page Title Here">
<meta name="twitter:description" content="Description shown below the title on Twitter.">
<meta name="twitter:image" content="https://www.example.com/images/twitter-1200x675.jpg">
<meta name="twitter:image:alt" content="Descriptive alt text">

<!-- Use "summary" for smaller card with square image -->
<!-- <meta name="twitter:card" content="summary"> -->

Recommended OG image size: 1200×630 px (1.91:1 ratio). Twitter large image: 1200×675 px. Always use absolute URLs for images. Test with the Facebook Sharing Debugger and Twitter Card Validator after deploying.

Tools for Auditing Head Elements

Use these tools to find missing tags, validate structured data, and audit your head section at scale.

Recommended Tools

Screaming Frog — Crawls every page and extracts all head elements: title, meta description, canonical, hreflang, OG tags, robots directives. Exports to CSV for bulk analysis. Free for up to 500 URLs. Free / Paid

Google Search Console — Shows which pages Google has indexed, flags duplicate titles and missing descriptions, and reports canonical conflicts under the Pages report. Free

Ahrefs Site Audit — Crawls your site and reports missing canonicals, duplicate meta descriptions, broken hreflang tags, and missing Open Graph tags with clear severity ratings. Paid

Chrome DevTools — Right-click → Inspect → Elements to view the live <head> of any page. Use the Network tab to inspect HTTP headers like X-Robots-Tag and Cache-Control. Free

WebPageTest — Tests page performance and shows which preconnect, preload, and resource hints are active. Highlights render-blocking resources loaded from the head. Free

Need Better Rankings

Let's Optimize Pages That Rank and Convert

Got pages stuck on page two? Traffic that won't convert? Let's fix it with a personalized on-page SEO audit.

Get a Free SEO Audit

Frequently Asked Questions

What meta tags are essential for SEO?

The essential meta tags are: title tag, meta description, canonical link, meta viewport, charset, and meta robots. These control how your page appears in search results and how search engines crawl and index it. Without these, Google has to guess how to display and rank your page.

What is the difference between meta robots and X-Robots-Tag?

Meta robots is an HTML element placed inside the head of your document that controls indexing for that specific page. X-Robots-Tag is an HTTP response header that can control indexing for any resource including PDFs, images, and non-HTML files. Use X-Robots-Tag when you need noindex directives on resources where you cannot edit HTML.

Do Open Graph tags affect SEO?

Open Graph tags do not directly influence search rankings, but they control how your content appears when shared on Facebook, LinkedIn, and other platforms. Well-crafted social previews drive higher click-through rates from social traffic, which can send positive engagement signals and bring more visitors who may link to your content.

How long should a meta description be?

Aim for 150 to 160 characters including spaces. Google may sometimes display longer snippets depending on the query, but keeping your meta description within this range ensures it renders fully on both desktop and mobile. Front-load your most compelling value proposition since truncation cuts from the end.

Should every page have a self-referencing canonical tag?

Yes. Every page should include a self-referencing canonical tag even if there are no duplicate versions. This prevents issues caused by URL parameters, trailing slashes, HTTP vs HTTPS, and www vs non-www variations. It tells Google explicitly which URL is the authoritative version of the page.

How do hreflang tags work for international SEO?

Hreflang tags tell search engines which language and regional version of a page to show to users in different locations. Each language version must reference itself and all other alternate versions, including an x-default for unmatched regions. Missing return tags are the most common hreflang error and will cause Google to ignore the entire set.

Amir Ali

Founder of Clienvora, a content marketing agency that combines SEO and copywriting to drive rankings, traffic, and revenue. This checklist is maintained and updated regularly.