The <code><head></code> is the part of your page nobody sees directly — but search engines and social networks read it closely. Getting it right is how your page earns a good title in Google results and a proper preview when shared. This is HTML's contribution to SEO.
The title and meta description
Two tags matter most for search. The <code><title></code> is the clickable headline in search results and the browser tab — make it clear and unique per page. The meta description is a short summary search engines often show beneath the title. It does not directly change ranking, but a good one improves click-through.
Essential meta tags
A few meta tags belong on every page. The charset ensures characters display correctly, and the viewport tag makes your page responsive on phones — without it, mobile browsers shrink the page to be unreadable.
| Tag | Why it matters |
|---|---|
| <meta charset="UTF-8"> | Correct text and emoji display |
| <meta name="viewport" ...> | Proper scaling on mobile |
| <title> | Search headline and tab label |
| <meta name="description"> | Search result summary |
| <html lang="en"> | Language for SEO and accessibility |
Open Graph: previews when shared
When someone shares your page on social media or chat, Open Graph tags control the preview card — its title, description and image. Without them, shares look bare; with them, they look professional.
Favicons
The little icon in the browser tab is the favicon, linked from the head. It is a small touch that makes a site feel finished and recognisable.
Write a complete head in the editable box for a page about your favourite hobby: charset, viewport, a unique title (~55 chars), a meta description (~155 chars), three Open Graph tags and a favicon link.
1. Which tag is the clickable headline in search results?
2. What does the viewport meta tag do?
3. What do Open Graph tags control?
4. Where do all these tags live?
5. Good practice for titles and descriptions is…
- The head is invisible to visitors but read by search engines and social networks.
- Unique <title> and meta description per page shape your search result.
- Always include charset and the viewport meta tag.
- Open Graph tags control share previews; favicons add polish.