HTML Cheatsheet

Metadata and SEO

Use this HTML reference while you build software engineering projects, review code for technical interview prep, or polish examples for a software engineer resume.

`<meta>` Element

Provides document metadata. All <meta> elements go inside <head>. They are void elements (no closing tag).

<head>
  <!-- Character encoding — MUST be first, within first 1024 bytes -->
  <meta charset="UTF-8">

  <!-- Viewport — required for responsive design -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Page description (shown in search results) -->
  <meta name="description" content="Learn HTML from scratch. Comprehensive tutorials and reference.">

  <!-- Page keywords (largely ignored by modern search engines) -->
  <meta name="keywords" content="HTML, CSS, JavaScript, web development">

  <!-- Author -->
  <meta name="author" content="Jane Doe">

  <!-- Robots — control crawling/indexing -->
  <meta name="robots" content="index, follow">

  <!-- Generator (set by CMSes/builders) -->
  <meta name="generator" content="WordPress 6.4">

  <!-- Theme color (browser UI on mobile) -->
  <meta name="theme-color" content="#d4af37">
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">

  <!-- Color scheme preference hint -->
  <meta name="color-scheme" content="light dark">

  <!-- Referrer policy -->
  <meta name="referrer" content="strict-origin-when-cross-origin">

  <!-- HTTP refresh / redirect -->
  <meta http-equiv="refresh" content="5; url=https://example.com/new-page">

  <!-- Disable IE compatibility mode -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <!-- Content security policy (better done via HTTP header) -->
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'">
</head>

Viewport Meta

<!-- Standard responsive -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Prevent user scaling (accessibility: avoid) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<!-- Set minimum / maximum scale -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">

Viewport `content` tokens

Token	Description
`width=device-width`	Match device screen width
`initial-scale=1.0`	No initial zoom
`minimum-scale`	Minimum zoom level (1.0 = no zoom out)
`maximum-scale`	Maximum zoom level
`user-scalable=yes/no`	Allow/forbid user zoom
`viewport-fit=cover`	Extend content into safe area (PWA/notch)

Robots Meta

<!-- Default (crawl and index) -->
<meta name="robots" content="index, follow">

<!-- Don't index this page, but follow links -->
<meta name="robots" content="noindex, follow">

<!-- Index this page, but don't follow links -->
<meta name="robots" content="index, nofollow">

<!-- Don't index or follow -->
<meta name="robots" content="noindex, nofollow">

<!-- Advanced directives -->
<meta name="robots" content="nosnippet">          <!-- no description snippet in SERP -->
<meta name="robots" content="noimageindex">       <!-- don't index images on this page -->
<meta name="robots" content="max-snippet:150">    <!-- limit snippet to 150 chars -->
<meta name="robots" content="max-image-preview:large"> <!-- allow large image previews -->
<meta name="robots" content="max-video-preview:30">    <!-- 30s video preview -->
<meta name="robots" content="notranslate">        <!-- don't offer translation -->
<meta name="robots" content="unavailable_after: 2025-12-31T00:00:00Z">

<!-- Googlebot-specific directives -->
<meta name="googlebot" content="noindex, nosnippet">

Open Graph Protocol (`og:`)

Controls how content appears when shared on Facebook, LinkedIn, Slack, iMessage, and most social platforms.

<!-- Required -->
<meta property="og:title" content="Page Title — 60 chars max">
<meta property="og:description" content="Page description — 155 chars max.">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:url" content="https://example.com/current-page">
<meta property="og:type" content="website">

<!-- Recommended -->
<meta property="og:site_name" content="My Site">
<meta property="og:locale" content="en_US">
<meta property="og:locale:alternate" content="es_ES">

<!-- Image details -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Description of the image">
<meta property="og:image:type" content="image/jpeg">

<!-- Article type -->
<meta property="og:type" content="article">
<meta property="article:author" content="https://example.com/authors/jane">
<meta property="article:published_time" content="2025-06-13T09:00:00Z">
<meta property="article:modified_time" content="2025-06-13T12:00:00Z">
<meta property="article:section" content="Technology">
<meta property="article:tag" content="HTML">
<meta property="article:tag" content="Web Development">

`og:type` values

Value	Use case
`website`	Default — generic web page
`article`	Blog post, news article
`book`	Book page
`profile`	User profile page
`video.movie`	Movie
`video.tv_show`	TV show
`video.episode`	Episode
`music.song`	Song
`music.album`	Album

OG image best practices

1200 × 630 px — works on all platforms.
Include text in the image (titles/branding) since og:title may not always show.
Use absolute URLs (not relative).
image/jpeg for photos, image/png for graphics.

Twitter / X Card Meta

<!-- Summary card (small image, left-aligned) -->
<meta name="twitter:card" content="summary">

<!-- Summary with large image (recommended) -->
<meta name="twitter:card" content="summary_large_image">

<!-- Player card (for videos) -->
<meta name="twitter:card" content="player">
<meta name="twitter:player" content="https://example.com/embed">
<meta name="twitter:player:width" content="480">
<meta name="twitter:player:height" content="270">

<!-- App card -->
<meta name="twitter:card" content="app">
<meta name="twitter:app:name:iphone" content="My App">
<meta name="twitter:app:id:iphone" content="123456">

<!-- Standard tags (used when og: equivalents are missing) -->
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description.">
<meta name="twitter:image" content="https://example.com/og.jpg">
<meta name="twitter:image:alt" content="Image description">
<meta name="twitter:site" content="@MySiteHandle">
<meta name="twitter:creator" content="@AuthorHandle">

`<link rel="canonical">`

Prevents duplicate content penalties by specifying the preferred URL.

<!-- Always use absolute URL -->
<link rel="canonical" href="https://example.com/canonical-page">

When to use canonical

Page accessible via multiple URLs: ?utm_source=twitter, ?sort=price, ?page=1.
HTTP vs HTTPS.
www vs non-www.
Trailing slash vs none.
Syndicated content (canonical points to original).

Alternate / Hreflang (International SEO)

Tells search engines which language/region variant to show each user.

<!-- Each page variant links to all others + itself -->
<link rel="alternate" hreflang="en" href="https://example.com/page">
<link rel="alternate" hreflang="es" href="https://es.example.com/page">
<link rel="alternate" hreflang="pt-BR" href="https://example.com/pt-br/page">
<link rel="alternate" hreflang="x-default" href="https://example.com/page">

x-default marks the fallback URL shown when no other language matches.

JSON-LD Structured Data

Machine-readable metadata embedded in a <script> tag. Preferred over Microdata/RDFa.

<!-- Article -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "How to Write Clean HTML",
  "datePublished": "2025-06-13",
  "dateModified": "2025-06-13",
  "author": {
    "@type": "Person",
    "name": "Jane Doe",
    "url": "https://example.com/authors/jane"
  },
  "publisher": {
    "@type": "Organization",
    "name": "My Site",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  },
  "image": "https://example.com/article-image.jpg",
  "description": "A comprehensive guide to writing clean, semantic HTML."
}
</script>

<!-- Organization -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "ACME Corp",
  "url": "https://acme.com",
  "logo": "https://acme.com/logo.png",
  "sameAs": [
    "https://twitter.com/acme",
    "https://linkedin.com/company/acme"
  ],
  "contactPoint": {
    "@type": "ContactPoint",
    "telephone": "+1-555-123-4567",
    "contactType": "customer service"
  }
}
</script>

<!-- BreadcrumbList -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://example.com"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Blog",
      "item": "https://example.com/blog"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "HTML Guide"
    }
  ]
}
</script>

<!-- FAQ -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "What is HTML?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "HTML (HyperText Markup Language) is the standard markup language for web pages."
      }
    },
    {
      "@type": "Question",
      "name": "Is HTML a programming language?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "No, HTML is a markup language, not a programming language."
      }
    }
  ]
}
</script>

<!-- Product -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Widget Pro",
  "image": "https://example.com/widget.jpg",
  "description": "The best widget for all your needs.",
  "brand": { "@type": "Brand", "name": "ACME" },
  "offers": {
    "@type": "Offer",
    "url": "https://example.com/product",
    "priceCurrency": "USD",
    "price": "29.99",
    "availability": "https://schema.org/InStock"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8",
    "reviewCount": "127"
  }
}
</script>

Web App Manifest

Linked via <link rel="manifest">. Enables "Add to Home Screen" / PWA behavior.

<link rel="manifest" href="/site.webmanifest">

<!-- /site.webmanifest (JSON file) -->
<!--
{
  "name": "My Application",
  "short_name": "MyApp",
  "description": "The best app",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#d4af37",
  "orientation": "portrait",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icon-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "screenshots": [
    { "src": "/screenshot-mobile.png", "sizes": "390x844", "type": "image/png", "form_factor": "narrow" },
    { "src": "/screenshot-desktop.png", "sizes": "1280x800", "type": "image/png", "form_factor": "wide" }
  ]
}
-->

Complete `<head>` Reference Template

<head>
  <!-- 1. Charset (first) -->
  <meta charset="UTF-8">

  <!-- 2. Viewport (second) -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 3. Title -->
  <title>Page Title | Site Name</title>

  <!-- 4. Core SEO meta -->
  <meta name="description" content="Description — 150-160 chars.">
  <meta name="robots" content="index, follow">
  <link rel="canonical" href="https://example.com/current-page">

  <!-- 5. Open Graph -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://example.com/current-page">
  <meta property="og:title" content="Page Title">
  <meta property="og:description" content="Description">
  <meta property="og:image" content="https://example.com/og.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Image description">
  <meta property="og:site_name" content="Site Name">
  <meta property="og:locale" content="en_US">

  <!-- 6. Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@handle">
  <meta name="twitter:title" content="Page Title">
  <meta name="twitter:description" content="Description">
  <meta name="twitter:image" content="https://example.com/og.jpg">

  <!-- 7. Theme -->
  <meta name="theme-color" content="#d4af37">
  <meta name="color-scheme" content="light dark">

  <!-- 8. Favicon -->
  <link rel="icon" href="/favicon.ico" sizes="any">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="manifest" href="/site.webmanifest">

  <!-- 9. Internationalization -->
  <link rel="alternate" hreflang="en" href="https://example.com/page">
  <link rel="alternate" hreflang="es" href="https://es.example.com/page">
  <link rel="alternate" hreflang="x-default" href="https://example.com/page">

  <!-- 10. Resource hints -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="dns-prefetch" href="https://cdn.example.com">
  <link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

  <!-- 11. Stylesheet -->
  <link rel="stylesheet" href="/styles.css">

  <!-- 12. Structured data -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebSite",
    "name": "Site Name",
    "url": "https://example.com"
  }
  </script>
</head>