~/hackweb.dev
HTML Meta Tags
Quiz
...

HTML Meta Tags

beginner · updated Tue Sep 08 2026Contribute

Master SEO, viewport, and essential meta tags for better websites.

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