The <head> of an HTML page is invisible to users but read by everything else: search engines, social media scrapers, browsers, and bots. Getting it wrong costs you rankings and ugly social previews. Getting it right is maybe 30 lines of markup that you write once and rarely touch again. Here's what those 30 lines should contain.

The Non-Negotiable Basics

Two tags that should be on every single page, no exceptions:

html
<!-- Character encoding: always first, always UTF-8 -->
<meta charset="UTF-8">

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

The charset declaration must come within the first 1024 bytes of the document so the browser can determine encoding before parsing the rest. UTF-8 handles every language and emoji on earth — there's no reason to use anything else. The viewport meta tag tells mobile browsers not to zoom out to show a desktop-sized layout. Without it, Google's mobile-first indexing will penalise your page.

Title and Meta Description

These two directly affect click-through rates from search results:

html
<!-- Title: shown in browser tab and search result headlines -->
<title>HTML Forms Guide — Input Types, Validation & Accessibility | DevTools</title>

<!-- Meta description: shown as snippet text in search results -->
<meta
  name="description"
  content="A complete guide to HTML form input types, constraint validation, label association, and building accessible forms. Real examples with no library dependencies."
>
  • Title length. Keep it under 60 characters so it doesn't get truncated in SERPs. Put the most important keywords near the front — search engines weight the beginning more heavily.
  • Title format. A common pattern: Primary Topic — Secondary Info | Brand. The brand at the end keeps the useful content front-loaded.
  • Meta description length. Google truncates around 155–160 characters. Write it to be read by a human, not stuffed with keywords — it doesn't directly affect ranking, but it affects whether people click.
  • Uniqueness. Every page needs a unique title and description. Duplicate titles across your site confuse search engines about which page to rank for a given query.

Open Graph — Social Sharing Previews

When someone shares your URL on LinkedIn, Slack, Facebook, or Discord, those platforms scrape your Open Graph tags to build the preview card. Without them, the preview is either empty or ugly. With them, it looks professional:

html
<!-- Open Graph: controls how pages appear when shared on social media -->
<meta property="og:type"        content="article">
<meta property="og:title"       content="HTML Forms Guide — Input Types, Validation & Accessibility">
<meta property="og:description" content="Build forms that work for everyone using HTML's built-in input types, constraint validation, and accessibility features.">
<meta property="og:url"         content="https://devtools.example.com/blog/html/html-forms-guide">
<meta property="og:image"       content="https://devtools.example.com/og/html-forms-guide.png">
<meta property="og:image:width"  content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name"   content="DevTools Blog">
  • og:type. Use article for blog posts. Use website for home pages and category pages. The type affects how some platforms display the card.
  • og:image. The most important OG tag for visual impact. Aim for 1200×630px (the canonical Open Graph image size). PNG or JPEG both work. Facebook and LinkedIn require it to be at least 200×200px.
  • og:url. Set this to the canonical URL of the page — not the URL the user arrived at, which may include UTM parameters.
  • og:title vs <title>. These can differ. Your HTML <title> is optimised for search; your og:title can be a bit more human and punchy since it's for social context.
Test your OG tags using Facebook's Sharing Debugger or LinkedIn's Post Inspector before publishing. They cache OG data aggressively, and the debugger lets you force a refresh.

Twitter Card Tags

Twitter/X has its own set of tags that work similarly to Open Graph. If OG tags are present, Twitter falls back to them for some fields — but you should still set the Twitter-specific ones for best results:

html
<meta name="twitter:card"        content="summary_large_image">
<meta name="twitter:site"        content="@devtoolsblog">
<meta name="twitter:creator"     content="@alicechen_dev">
<meta name="twitter:title"       content="HTML Forms Guide — Real Examples, No Libraries">
<meta name="twitter:description" content="Everything you need for HTML forms: input types, validation, accessibility. Working code throughout.">
<meta name="twitter:image"       content="https://devtools.example.com/og/html-forms-guide.png">
<meta name="twitter:image:alt"   content="Screenshot showing a styled HTML form with accessible error messages">

summary_large_image gives you the big banner-style card. summary gives you a small square thumbnail. The twitter:image:alt tag is often forgotten but matters — it's the alt text for the card image, important for Twitter users who rely on screen readers.

Canonical URL

If the same content is accessible at multiple URLs (with/without trailing slash, with UTM parameters, HTTP vs HTTPS, www vs non-www), you need a canonical tag to tell search engines which version is the "real" one:

html
<!-- Canonical: tells search engines which URL is the authoritative version -->
<link rel="canonical" href="https://devtools.example.com/blog/html/html-forms-guide">

The canonical URL should always be the full absolute URL, including protocol. Without a canonical tag, Google has to guess — and it might pick a different version of your page than you intended, splitting your ranking signals across multiple URLs.

Robots Meta Tag

The robots meta tag tells search engine crawlers what they're allowed to do with a page. Most pages don't need it — the default behaviour is to index and follow links. But you'll want it for specific cases:

html
<!-- Default (you don't need to write this, but it's the implicit behaviour) -->
<meta name="robots" content="index, follow">

<!-- Don't index this page (e.g. admin pages, thank-you pages) -->
<meta name="robots" content="noindex, follow">

<!-- Don't follow links on this page (rare) -->
<meta name="robots" content="index, nofollow">

<!-- Don't index, don't follow, don't cache, don't show snippet -->
<meta name="robots" content="noindex, nofollow, noarchive, nosnippet">

Good candidates for noindex: search results pages, filtered category pages with thin content, user account pages, order confirmation pages, staging environments. If you're blocking with robots.txt, note that noindex in the meta tag is more reliable — Google respects it even when crawling the page directly.

hreflang for Multilingual Sites

If your site has content in multiple languages, hreflang tells search engines which version of a page to show to users in different locales. Without it, Google picks one version and your non-English pages may never rank in their target markets:

html
<!-- hreflang: tells Google which language version to show per region -->
<link rel="alternate" hreflang="en"    href="https://example.com/blog/html-forms">
<link rel="alternate" hreflang="es"    href="https://example.com/es/blog/html-forms">
<link rel="alternate" hreflang="fr"    href="https://example.com/fr/blog/html-forms">
<link rel="alternate" hreflang="de"    href="https://example.com/de/blog/html-forms">
<link rel="alternate" hreflang="x-default" href="https://example.com/blog/html-forms">

x-default is the fallback for users whose language doesn't match any specific locale. Every page in the hreflang set must include the full list, including a self-referencing entry. It's verbose, but missing any entry causes Google to ignore the entire annotation.

Structured Data with JSON-LD

Structured data in JSON-LD format lets Google display rich results — star ratings, article metadata, FAQs, how-to steps — directly in search results. For a blog article, this is the minimum useful schema:

html
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "HTML Forms Guide — Input Types, Validation & Accessibility",
  "description": "A complete guide to HTML form input types and built-in validation.",
  "author": {
    "@type": "Person",
    "name": "Alice Chen",
    "url": "https://devtools.example.com/authors/alice-chen"
  },
  "publisher": {
    "@type": "Organization",
    "name": "DevTools Blog",
    "logo": {
      "@type": "ImageObject",
      "url": "https://devtools.example.com/logo.png"
    }
  },
  "datePublished": "2026-04-16",
  "dateModified": "2026-04-16",
  "image": "https://devtools.example.com/og/html-forms-guide.png",
  "url": "https://devtools.example.com/blog/html/html-forms-guide"
}
</script>

JSON-LD goes in a <script type="application/ld+json"> block anywhere in the <head> or <body> — the head is conventional. It doesn't affect page rendering speed and is completely separate from your page markup, making it easy to generate server-side.

What NOT to Use — The Dead Meta Tag

One meta tag you see in old tutorials and legacy codebases that genuinely does nothing:

html
<!-- This does nothing for modern SEO. Google stopped using it in 2009. -->
<meta name="keywords" content="html, forms, validation, accessibility">

Google officially announced in 2009 that it ignores the keywords meta tag because of widespread spam abuse. Bing and other major search engines followed. You can remove it without any SEO impact. The only place it still has any use is in internal site search systems — and only if your site search software is specifically configured to read it.

A Complete head Template

Here's a production-ready <head> you can use as a starting template for any article or page:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Encoding and viewport: always first -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Core SEO -->
  <title>HTML Forms Guide — Input Types, Validation & Accessibility | DevTools</title>
  <meta name="description" content="A complete guide to HTML form input types, built-in constraint validation, and accessible form patterns. Real examples, no libraries.">
  <link rel="canonical" href="https://devtools.example.com/blog/html/html-forms-guide">
  <meta name="robots" content="index, follow">

  <!-- Open Graph (Facebook, LinkedIn, Discord, Slack) -->
  <meta property="og:type"         content="article">
  <meta property="og:title"        content="HTML Forms Guide — Input Types, Validation & Accessibility">
  <meta property="og:description"  content="Build forms that work for everyone using HTML's built-in features.">
  <meta property="og:url"          content="https://devtools.example.com/blog/html/html-forms-guide">
  <meta property="og:image"        content="https://devtools.example.com/og/html-forms-guide.png">
  <meta property="og:image:width"  content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:site_name"    content="DevTools Blog">

  <!-- Twitter / X Card -->
  <meta name="twitter:card"        content="summary_large_image">
  <meta name="twitter:site"        content="@devtoolsblog">
  <meta name="twitter:title"       content="HTML Forms Guide — Input Types, Validation & Accessibility">
  <meta name="twitter:description" content="Real form examples with no library dependencies.">
  <meta name="twitter:image"       content="https://devtools.example.com/og/html-forms-guide.png">
  <meta name="twitter:image:alt"   content="An accessible HTML form with inline error validation">

  <!-- hreflang (only needed for multilingual sites) -->
  <link rel="alternate" hreflang="en" href="https://devtools.example.com/blog/html/html-forms-guide">
  <link rel="alternate" hreflang="x-default" href="https://devtools.example.com/blog/html/html-forms-guide">

  <!-- Structured data -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "HTML Forms Guide",
    "author": { "@type": "Person", "name": "Alice Chen" },
    "datePublished": "2026-04-16",
    "image": "https://devtools.example.com/og/html-forms-guide.png"
  }
  </script>

  <!-- Favicon -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  <link rel="icon" type="image/png"     href="/favicon.png">
</head>
Verify your implementation with Google's Rich Results Test for structured data, and metatags.io for a quick visual preview of how your OG and Twitter cards will look when shared.

Tools for HTML Work

If you're working with HTML markup, HTML Formatter keeps your <head> readable and properly indented, and HTML Validator catches structural errors before they hit production. For editing and previewing HTML live, the HTML Editor lets you see changes in real time.

Wrapping Up

The meta tags that move the needle are: charset and viewport as a baseline, a well-crafted <title> and meta description for search clicks, Open Graph and Twitter Card tags for social previews, a canonical link to prevent duplicate content issues, and JSON-LD structured data for rich results. Skip the keywords meta tag — it's been dead for 15 years. Get the rest right and your pages will look sharp in every context they appear.

← All HTML articles Browse all categories →