Webpage metadata: head and meta

The <head> holds information that is not shown directly to the visitor but matters to browsers and search engines: the title, encoding, links to styles and scripts, and meta tags.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Fresh bread in Baku | Example Bakery</title>
  <link rel="stylesheet" href="style.css">
  <link rel="icon" href="favicon.svg">
</head>

• charset="utf-8" makes letters display correctly.
• viewport gives correct sizing on mobile screens.

<title> is the heading shown in the browser tab and in search results; it should be unique and clear for every page. <meta name="description"> can become the short blurb in search results; 150–160 characters are enough.

<meta name="description" content="Daily fresh bread, pastries and coffee in the centre of Baku.">
<link rel="canonical" href="https://example.com/bread">

Open Graph tags decide how a link looks when shared: og:title, og:description, og:image. <html lang="az"> declares the document language; hreflang links point to alternative languages.

<meta property="og:title" content="Fresh bread in Baku">
<meta property="og:image" content="https://example.com/cover.jpg">
<link rel="alternate" hreflang="en" href="https://example.com/en/bread">