HTML Meta Tags

Meta tags provide metadata about your HTML document. They go in the <head> section and affect SEO, social sharing, and browser behavior.

Essential Meta Tags

Charset

Always include charset first:

<meta charset="UTF-8" />

• Defines character encoding
• Always use UTF-8 (supports all characters)
• Must be in the first 1024 bytes of the document

Viewport

Makes your site responsive on mobile:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Attributes:

• width=device-width — Matches screen width
• initial-scale=1.0 — No zoom on load

Without this tag, mobile sites look zoomed out and tiny!

Title

Not a meta tag, but essential for SEO:

<title>Page Title - Site Name</title>

Best practices:

• 50-60 characters max
• Include primary keyword
• Unique for each page
• Site name at the end

SEO Meta Tags

Description

Summary shown in search results:

<meta name="description" content="Learn HTML from scratch with comprehensive tutorials and practical examples. Perfect for beginners." />

Best practices:

• 150-160 characters
• Include target keywords
• Make it compelling
• Unique per page

Keywords

Less important today (search engines ignore this):

<meta name="keywords" content="html, css, web development, tutorial" />

Note: Google doesn’t use meta keywords for ranking. Focus on content instead.

Robots

Controls search engine behavior:

<!-- Allow indexing (default) -->
<meta name="robots" content="index, follow" />

<!-- Prevent indexing -->
<meta name="robots" content="noindex, nofollow" />

<!-- Allow indexing but don't follow links -->
<meta name="robots" content="index, nofollow" />

Social Media Meta Tags

Open Graph (Facebook, LinkedIn)

<meta property="og:title" content="HTML Meta Tags Guide" />
<meta property="og:description" content="Master SEO and viewport meta tags." />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/meta-tags" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="My Site" />

Twitter Cards

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="HTML Meta Tags Guide" />
<meta name="twitter:description" content="Master SEO and viewport meta tags." />
<meta name="twitter:image" content="https://example.com/image.jpg" />

Performance Meta Tags

Preconnect

Establish early connections to important origins:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://cdn.example.com" crossorigin />

DNS Prefetch

Resolve DNS for likely destinations:

<link rel="dns-prefetch" href="https://analytics.example.com" />

Theme Color

Changes browser chrome color on mobile:

<meta name="theme-color" content="#4285f4" />

Complete Example

Here’s a complete, production-ready <head>:

<head>
  <!-- Essential -->
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Meta Tags Guide - Web Development Tutorial</title>

  <!-- SEO -->
  <meta name="description" content="Learn how to use HTML meta tags for SEO, viewport configuration, and social media sharing. Comprehensive guide with examples." />
  <meta name="robots" content="index, follow" />
  <link rel="canonical" href="https://example.com/tutorials/meta-tags" />

  <!-- Open Graph -->
  <meta property="og:title" content="HTML Meta Tags Guide" />
  <meta property="og:description" content="Master SEO and viewport meta tags." />
  <meta property="og:image" content="https://example.com/images/meta-tags.jpg" />
  <meta property="og:url" content="https://example.com/tutorials/meta-tags" />
  <meta property="og:type" content="article" />

  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="HTML Meta Tags Guide" />
  <meta name="twitter:description" content="Master SEO and viewport meta tags." />
  <meta name="twitter:image" content="https://example.com/images/meta-tags.jpg" />

  <!-- Performance -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://cdn.example.com" crossorigin />

  <!-- PWA -->
  <meta name="theme-color" content="#4285f4" />
  <link rel="manifest" href="/manifest.json" />

  <!-- Favicon -->
  <link rel="icon" href="/favicon.ico" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
</head>

Meta Tags Checklist

Essential (must have):

• charset=“UTF-8”
• viewport
• title
• description

SEO (should have):

• robots
• canonical
• Open Graph tags

Social (nice to have):

• Twitter cards
• Social images

Performance (optional):

• preconnect
• dns-prefetch
• theme-color

Common Mistakes

1. Missing viewport — Site looks broken on mobile
2. Duplicate titles — Hurts SEO ranking
3. Missing description — Search engines generate random text
4. No social images — Links look empty on social media
5. Using keywords — Ignored by modern search engines
6. Blocking indexing — robots noindex by accident