Previous: HTML5 Features Next: Accessibility

HTML Metadata & SEO

Use metadata and head tags to describe your page for users and search engines

Page Title & Meta Description

Why they matter:

The page title (<title>) and meta description influence how your page appears in browser tabs and search results. Clear, descriptive titles and summaries improve click‑through rates and SEO.

Example:
<head>
    <title>HTML Forms Tutorial - Learn Web Forms</title>
    <meta name="description"
          content="Step-by-step HTML forms tutorial covering inputs, labels and validation.">
</head>

Social Sharing Meta (Open Graph & Twitter)

Open Graph and Twitter Card tags control how your page looks when shared on social networks.

Key Tags:
  • og:title, og:description, og:image, og:url
  • twitter:card, twitter:title, twitter:description
Example: Open Graph & Twitter Tags
<meta property="og:title" content="HTML Lists Tutorial">
<meta property="og:description" content="Learn unordered, ordered and description lists with examples.">
<meta property="og:image" content="https://example.com/images/html-lists-cover.png">
<meta property="og:url" content="https://example.com/html-lists.html">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="HTML Lists Tutorial">
<meta name="twitter:description" content="Master HTML lists step by step.">

Canonical URLs & Robots

Use the <link rel="canonical"> tag to indicate the preferred URL for a page, and the robots meta tag to control indexing behavior.

Example: Canonical & Robots Tags
<link rel="canonical" href="https://example.com/html-tutorial.html">
<meta name="robots" content="index,follow">

If you have multiple URLs showing the same content (for example, with and without tracking parameters), the canonical tag helps search engines avoid duplicate‑content issues.

Technical Meta Tags

  • <meta charset="UTF-8"> - proper character encoding.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> - mobile responsiveness.
  • <meta name="theme-color" content="#0d6efd"> - browser UI color on mobile.
  • <meta http-equiv="X-UA-Compatible" content="IE=edge"> - legacy browser compatibility.
Example:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#0d6efd">

Quick On-Page SEO Checklist

  • Unique title and description for every page.
  • One clear h1 matching search intent.
  • Canonical URL set for indexable pages.
  • Open Graph image with valid size and absolute URL.
  • Descriptive alt text for important images.
  • Internal links to related pages for crawlability.
Previous: HTML5 Features Next: Accessibility