Metadata, Sharing and Search Basics — HTML & CSS

TL;DR

Every page needs a unique, descriptive <title>: it appears in the browser tab, in bookmarks, in search results, and is the first thing a screen reader announces.
<html lang="…"> tells browsers and screen readers which language the page is in. Search engines work the language out from the text instead.
Open Graph tags (og:title, og:type, og:image, og:url, written with property=) control the preview card when someone shares a link.
rel="canonical" names the preferred URL of a page; robots.txt asks crawlers not to fetch URLs, and <meta name="robots" content="noindex"> asks search engines not to list a page.
Meta keywords do nothing for Google. Good search results come from useful content, clear titles and headings, working links and fast, accessible pages.

What is in the head

The <head> of an HTML document holds information about the page rather than content shown on it: metadata. Browsers use it to label the tab and decode the text, search engines to list the page, and social platforms to draw a preview when someone shares a link. Here is a complete head for a page of the Kestrel Energy customer portal; the rest of this page explains it line by line.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Report an outage — Kestrel Energy</title>
    <meta name="description" content="Report a power or gas outage at your address and follow the repair status, 24 hours a day.">
    <link rel="canonical" href="https://kestrel.example.com/outages/report">

    <link rel="icon" href="/favicon.ico" sizes="32x32">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">

    <meta property="og:title" content="Report an outage">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://kestrel.example.com/outages/report">
    <meta property="og:image" content="https://kestrel.example.com/images/share-outage.png">
    <meta property="og:description" content="Report an outage and follow the repair status.">

    <link rel="stylesheet" href="/css/site.css">
  </head>
  <body>
    <h1>Report an outage</h1>
  </body>
</html>

The first two lines inside the head, the character encoding and the viewport, are covered under HTML document structure; the encoding itself is explained under UTF-8. Nothing in the head is shown in the page itself, which is also why the live examples on this page show visible stand-ins rather than the head tags.

The title

The title element, <title>, holds the name of the document. Every HTML document needs exactly one, in the head. It is used in more places than any other line of the page:

the browser tab and the window title;
bookmarks and browser history;
the clickable headline in search results (search engines may shorten or rewrite it);
the first thing a screen reader announces when the page loads, which is why WCAG requires a descriptive title (2.4.2 Page Titled, level A).

A good title is unique per page and puts the specific part first: "Report an outage — Kestrel Energy", not "Kestrel Energy — Customer portal — Outages — Report". With ten tabs open, only the first few words are visible, and long titles are cut off in search results. The title is plain text: tags inside it are shown literally, so write & for an ampersand.

The meta description

The meta description is a <meta name="description" content="…"> tag with a one- or two-sentence summary of the page. Search engines may show it as the snippet under the title in the results, though they often write their own snippet from the page text when that matches the search better. Treat it as a short advertisement for the page: say what the reader gets there, in about 150 characters, and make it different for every page.

The lang attribute

The lang attribute declares the human language of an element's content, using a language tag such as en, nl, en-GB or pt-BR. Set it on <html> for the whole page, and on any element whose content is in another language:

<html lang="en">
  …
  <p>In the Netherlands this is called a <span lang="nl">jaarafrekening</span>.</p>
</html>

Who uses it? Screen readers switch pronunciation rules, so Dutch text is not read with English sounds (WCAG 3.1.1 Language of Page, level A, and 3.1.2 Language of Parts, level AA). Browsers use it for hyphenation, spell checking, quotation marks, font choice for some scripts, and to decide whether to offer a translation. Google, on the other hand, says it ignores lang and works out a page's language from the text itself. A missing language is still one of the six most common accessibility failures (13.5% of home pages in the WebAIM Million 2026).

The example shows one visible effect. The same CSS, hyphens: auto, hyphenates each narrow column by the rules of its own language, if your browser has a hyphenation dictionary for it. Without a lang, the browser would not hyphenate at all.

<div class="columns">
  <p lang="en">Your annual statement compares your advance payments with
     your actual consumption and calculates the difference.</p>
  <p lang="nl">Uw jaarafrekening vergelijkt uw termijnbedragen met uw
     werkelijke energieverbruik en berekent het verschil.</p>
</div>

.columns {
  display: flex;
  gap: 2rem;
  font-family: system-ui, sans-serif;
}
.columns p {
  width: 8.5rem;
  margin: 0;
  hyphens: auto;
  border-left: 2px solid #595959;
  padding-left: 0.5rem;
}

If you publish the same page in several languages, link the versions to each other with <link rel="alternate" hreflang="nl" href="…">, so search engines can send each visitor to the right one.

Favicons

A favicon is the small icon that identifies a site in the browser tab, bookmarks, history and on a phone's home screen. It is declared with <link rel="icon"> in the head. When a page declares none, browsers try /favicon.ico at the root of the site, which is why server logs are full of requests for that file even on sites that never had one.

A practical, small set:

favicon.ico (32 × 32 pixels) for older browsers and tools that only look at that path;
an SVG icon (type="image/svg+xml"), which stays sharp at every size and works in all current major browsers (Safari since version 26); keep the ICO as a fallback for older browsers and tools;
apple-touch-icon, a 180 × 180 PNG that iOS uses when someone adds the site to the home screen.

An icon this small must be drawn for its size. A detailed logo turns into a smudge at 16 pixels; a bold letter or simple shape survives. Below is an icon as inline SVG, shown at three sizes: SVG is a text format, so the same few lines of markup can sit in an icon.svg file or directly in a page.

<p class="sizes">
  <svg width="64" height="64" viewBox="0 0 32 32" role="img" aria-label="Kestrel Energy icon, 64 pixels">
    <rect width="32" height="32" fill="#1e3a8a"></rect>
    <path d="M9 6v20M9 16l12-10M13 13l9 13" stroke="#fff" stroke-width="4" fill="none"></path>
  </svg>
  <svg width="32" height="32" viewBox="0 0 32 32" role="img" aria-label="Same icon, 32 pixels">
    <rect width="32" height="32" fill="#1e3a8a"></rect>
    <path d="M9 6v20M9 16l12-10M13 13l9 13" stroke="#fff" stroke-width="4" fill="none"></path>
  </svg>
  <svg width="16" height="16" viewBox="0 0 32 32" role="img" aria-label="Same icon, 16 pixels">
    <rect width="32" height="32" fill="#1e3a8a"></rect>
    <path d="M9 6v20M9 16l12-10M13 13l9 13" stroke="#fff" stroke-width="4" fill="none"></path>
  </svg>
</p>

.sizes {
  display: flex;
  align-items: end;
  gap: 1.5rem;
}

Open Graph: link previews

Open Graph is a set of <meta> tags, defined at ogp.me, that tell social networks and chat apps what to show when someone shares a link: a title, an image, a description. When a link is pasted, the platform's server fetches the page, reads these tags and draws a preview card. Without them, the platform guesses, often picking the wrong image or the cookie banner text.

Open Graph requires four properties: og:title, og:type (usually website or article), og:image and og:url. og:description and og:site_name are common extras. Two details trip people up:

The tags use property="og:title", not name="og:title".
og:image and og:url must be absolute URLs (https://kestrel.example.com/images/share-outage.png), because the platform's server reads them out of context. A wide image of 1200 × 630 pixels is a commonly recommended size.

Each platform draws its own card, but most look roughly like the illustration below, built from the four tags in the head example at the top of this page:

<article class="card" aria-label="Example link preview">
  <div class="card-image" role="img" aria-label="Share image: outage map">Outage map</div>
  <p class="card-site">kestrel.example.com</p>
  <p class="card-title">Report an outage</p>
  <p class="card-text">Report an outage and follow the repair status.</p>
</article>

.card {
  max-width: 24rem;
  border: 1px solid #595959;
  font-family: system-ui, sans-serif;
}
.card-image {
  aspect-ratio: 1200 / 630;
  background: #1e3a8a;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
}
.card p {
  margin: 0.25rem 0.75rem;
}
.card-site {
  font-size: 0.8rem;
  color: #595959;
  text-transform: uppercase;
}
.card-title {
  font-weight: bold;
}
.card-text {
  padding-bottom: 0.5rem;
  color: #333;
}

Platforms cache previews, sometimes for days, so a corrected image does not show up at once; most large platforms offer an inspector tool that fetches the page again. X (formerly Twitter) also reads its own twitter:card tags, written with name=, and falls back to Open Graph for the rest. The page must be publicly reachable: a platform cannot preview a page behind a login, which is fine for the portal's account pages.

Canonical URLs

The same page is often reachable at several URLs: with and without www, with a trailing slash or not, with tracking parameters (?utm_source=newsletter) or a sort order (?sort=date). To a search engine these look like different pages with duplicate content. A canonical URL is the one address you declare as the preferred version of a page:

<link rel="canonical" href="https://kestrel.example.com/tariffs">

Put the same tag, with the same absolute URL, on every variant (including the canonical page itself). Search engines then combine the signals for all variants and show the canonical address in their results. They treat it as a strong hint rather than a command: if the "canonical" page is very different or broken, they may choose another. Redirecting variants to one URL on the web server (for example http:// to https://) is even better where possible; the canonical tag covers the cases you cannot redirect, such as tracking parameters.

Robots rules: crawling and indexing

Search engines work in two steps: a crawler fetches pages and follows their links, and the index stores what was found so it can appear in results. Two separate mechanisms control those steps.

robots.txt is a plain text file at the root of the site (https://kestrel.example.com/robots.txt) that asks crawlers not to fetch certain paths. The format is standardized as the Robots Exclusion Protocol in RFC 9309:

User-agent: *
Disallow: /search
Disallow: /account/

Sitemap: https://kestrel.example.com/sitemap.xml

A robots meta tag is a <meta name="robots"> tag in a page's head that tells search engines what they may do with that page once they have fetched it, for example not to list it:

<meta name="robots" content="noindex">

Common values are noindex (do not show this page in results) and nofollow (do not follow its links). For files that have no head, such as PDFs, the server can send the same instruction as an X-Robots-Tag HTTP header.

What search engines really use

Search engine optimization (SEO) is the work of making pages easy for search engines to find, understand and rank for the searches they are relevant to. Search engines do not publish their ranking formulas, and a large industry sells guesses about them. The basics that search engines' own documentation points to are much the same as good web development:

Useful content written for people, in the words they search with.
A clear title and headings that describe each page, and semantic HTML.
Crawlable links: real <a href> elements with descriptive link text ("view the tariffs", not "click here").
Pages that work for everyone: on phones, over HTTPS, loading quickly (see building and publishing a page for Core Web Vitals). Many accessibility practices, such as alt text, headings and link text, help search engines as well.

Things that do not help: meta keywords, hiding lists of keywords on the page, and paying for links. Search engines treat the last two as spam.

Structured data and microdata

Search engines can show extra details in results, such as opening hours, ratings, prices or an FAQ, when a page describes its content in a machine-readable way. That description uses the shared vocabulary of schema.org, written in one of three formats: JSON-LD (a JSON block in a <script> element), microdata (attributes on the visible HTML) or RDFa. Microdata is part of the HTML standard and uses three main attributes: itemscope starts an item, itemtype says what kind of thing it is, and itemprop marks its properties.

<section itemscope itemtype="https://schema.org/Organization">
  <h2 itemprop="name">Kestrel Energy</h2>
  <p>Outage line, 24 hours a day:
     <a href="tel:+31201234567"><span itemprop="telephone">+31 20 123 4567</span></a></p>
  <p><a itemprop="url" href="https://kestrel.example.com">kestrel.example.com</a></p>
</section>

body {
  font-family: system-ui, sans-serif;
}

The result looks like any other contact block: microdata changes nothing on screen; it only adds meaning for machines. The same information as JSON-LD, the format Google's documentation recommends, sits in the head or body and is not shown at all:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Kestrel Energy",
  "url": "https://kestrel.example.com",
  "telephone": "+31 20 123 4567"
}
</script>

Structured data must match what is visible on the page, and it makes a page eligible for richer results; it does not guarantee them.