Quick answer: HTML meta tags and the rest of the <head> hold everything the page needs but does not display: the <title>, the meta description used by search engines, the viewport tag for mobile, the character encoding, the favicon, and Open Graph tags for link previews. Getting these right costs minutes and affects every search result and shared link.
Table of Contents
A complete modern head
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CSS Grid Guide: Responsive Layouts in 2026</title>
<meta name="description"
content="Learn CSS Grid with worked examples, the auto-fit card pattern and subgrid." />
<link rel="canonical" href="https://example.com/css/css-grid-guide/" />
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="/styles.css" />
<meta property="og:title" content="CSS Grid Guide" />
<meta property="og:description" content="Responsive layouts with CSS Grid." />
<meta property="og:image" content="https://example.com/og/grid.png" />
<meta property="og:url" content="https://example.com/css/css-grid-guide/" />
<meta name="twitter:card" content="summary_large_image" />
</head>What each HTML meta tag does
| Tag | Purpose |
|---|---|
<title> | The browser tab text and the headline in search results |
meta description | The snippet under the title in search results |
meta charset | Character encoding — keep it first, set to utf-8 |
meta viewport | Makes the page respect the device width |
link canonical | The preferred URL, to avoid duplicate-content issues |
og:* | Title, description and image for social previews |
Title and description: two HTML meta tags that matter
The title is the single most important on-page element.
Put the primary topic first, keep it under roughly 60 characters so it is not truncated, and make it specific. A description does not directly affect ranking but it decides which result people click, so write it as an honest summary with the key phrase in it.
- Good title: “CSS Grid Guide: Responsive Layouts in 2026” — topic, benefit, year.
- Weak title: “Home” or “Welcome to our website” — says nothing.
- Good description: A concrete promise of what the page contains, in a sentence or two.
Load order and performance hints
Where assets go in the head affects how fast the page paints. Three attributes are worth knowing:
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />
<script src="/app.js" defer></script>
<img src="/hero.jpg" fetchpriority="high" width="1200" height="675" alt="" />defer— download the script in parallel and run it after the HTML is parsed, without blocking rendering.preload— start fetching a critical resource early, such as the main font.fetchpriority="high"— a hint that the likely largest image should load first.Use it on one image, not many.
Favicons and social images as HTML meta tags
The favicon appears in the browser tab and in bookmarks; a single icon link pointing at an .ico or .svg file is enough for most sites. The Open Graph image is what shows when the URL is shared on social media or in chat. It should be roughly 1200 by 630 pixels, and it must be an absolute URL, since crawlers fetch it outside your page context.
Next: native dialog, popover and inert. To learn HTML and SEO fundamentals with a mentor, Ampersand Academy teaches web development one-to-one.
Frequently asked questions
How long should a title tag be?
Keep it under about 60 characters so it is not cut off in search results. Put the primary topic first and make it specific rather than a generic welcome message.
Does the meta description affect ranking?
Not directly. It is often the snippet shown in search results, so it strongly affects whether people click, which is why a clear honest summary matters.
What is the viewport meta tag for?
It tells mobile browsers to use the device width for layout rather than a desktop width. Without it, responsive CSS has no effect on phones.
What are Open Graph tags?
Meta tags that control the title, description and image shown when a link is shared on social media or in messaging apps. The og:image should be an absolute URL.
Should a script go in the head or the body?
In the head with the defer attribute, which downloads it in parallel and runs it after the HTML is parsed, so rendering is not blocked and the DOM is ready.
Last updated on · Written by Dinesh Kumar R
