Writing great content is only half of getting visitors. Search engines and social networks also read hidden information in your page's <head> to decide what the page is about, how to show it in results and link previews, and which address is the real one. A few lines of well-written HTML here can noticeably improve how many people click through to your site.
This lesson covers the SEO (search engine optimisation) elements every page should have: a unique title tag, a helpful meta description, a canonical link, robots directives, social sharing tags for Open Graph and Twitter/X cards, favicons, and structured data written in JSON-LD, which can earn rich results such as star ratings, prices and FAQs.
None of this replaces useful content, good headings, fast pages and links from other sites, which matter most. But missing or messy head tags are one of the most common reasons good pages are shown poorly, or not at all. You'll build on the head and meta tags lesson.
Title and meta description
<title>Handmade Ceramic Mugs | Codevra Shop</title>
<meta name="description" content="Shop handmade ceramic mugs in 12 colours. Dishwasher safe, gift wrapped, and delivered in 2 days across the UK.">- The title is the blue link in search results and the browser tab text. Keep it around 50 to 60 characters, put the main keyword first, make it unique for every page, and add the brand at the end.
- The meta description is often shown as the snippet under the title. Aim for 120 to 160 characters that summarise the page and give a reason to click. Search engines may rewrite it, but a good one is used more often.
- Use the words people actually search for, naturally. Repeating keywords ("mugs mugs cheap mugs") hurts more than it helps.
Canonical, robots and language
<link rel="canonical" href="https://example.com/mugs">tells search engines which URL is the main one when the same page is reachable at several addresses, such as with tracking parameters.<meta name="robots" content="noindex">keeps a page out of search results, useful for thank-you pages, internal search results and drafts.nofollowasks crawlers not to follow its links.<html lang="en">states the page's language;hreflanglinks connect translated versions.- Headings matter too: one clear
<h1>describing the page, then logical<h2>sections.
HTML SEO Syntax
SEO head tags
<html lang="en">
<head>
<title>Main Keyword: Specific Benefit | Brand</title>
<meta name="description" content="A clear 120 to 160 character summary of the page.">
<link rel="canonical" href="https://example.com/page">
<meta property="og:title" content="Main Keyword: Specific Benefit">
<meta property="og:description" content="Short summary for social previews.">
<meta property="og:image" content="https://example.com/share.jpg">
<meta name="twitter:card" content="summary_large_image">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<script type="application/ld+json">{ "@context": "https://schema.org", "@type": "Article", "headline": "..." }</script>
</head>HTML SEO Summary
- Give every page a unique title of about 50 to 60 characters with the main keyword first.
- Write a meta description of about 120 to 160 characters that encourages clicks.
- Use a canonical link to name the main URL, and robots noindex for pages that shouldn't appear in search.
- Open Graph and Twitter card tags control how links look when shared.
- JSON-LD structured data with schema.org can earn rich results.
HTML SEO Examples
Each example runs in the page. Edit the code and press Run to see what changes.
A complete SEO head for a product page
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Handmade Ceramic Mug, 350ml | Codevra Shop</title>
<meta name="description" content="A handmade 350ml ceramic mug in sea green. Dishwasher safe, gift boxed and delivered in 2 days. Rated 4.8 by 120 customers.">
<link rel="canonical" href="https://shop.example/mugs/sea-green">
<meta property="og:type" content="product">
<meta property="og:title" content="Handmade Ceramic Mug in Sea Green">
<meta property="og:description" content="Dishwasher safe, gift boxed, delivered in 2 days.">
<meta property="og:image" content="https://shop.example/img/mug-share.jpg">
<meta property="og:url" content="https://shop.example/mugs/sea-green">
<meta name="twitter:card" content="summary_large_image">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>
<body><h1>Handmade Ceramic Mug, 350ml</h1></body>Line-by-line explanation
- Line 4A specific title: product, key detail and brand, about 45 characters.
- Line 5A description with facts that make people want to click.
- Line 6The canonical URL, so tracking links don't count as separate pages.
- Lines 7 to 12Open Graph and Twitter tags for attractive link previews.
- Lines 13 to 14Icons for browser tabs and phone home screens.
Structured data for an article
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "How to Choose a Desk Lamp",
"author": { "@type": "Person", "name": "Priya Shah" },
"datePublished": "2026-03-14",
"dateModified": "2026-04-02",
"image": "https://example.com/img/desk-lamp.jpg"
}
</script>
<article>
<h1>How to Choose a Desk Lamp</h1>
<p>By Priya Shah, updated <time datetime="2026-04-02">2 April 2026</time></p>
</article>Line-by-line explanation
- Line 1JSON-LD lives in a script tag with a special type; it isn't shown on the page.
- Lines 3 to 4The schema.org vocabulary and the kind of thing described.
- Lines 5 to 9Facts about the article; they must match what's visible on the page.
FAQ and breadcrumb structured data
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://example.com/" },
{ "@type": "ListItem", "position": 2, "name": "Lamps", "item": "https://example.com/lamps" }
]
}
</script>
<nav aria-label="Breadcrumb"><a href="/">Home</a> / <a href="/lamps">Lamps</a></nav>
<h1>Desk Lamps</h1>Line-by-line explanation
- Line 4BreadcrumbList describes where the page sits in the site.
- Lines 5 to 8Each step has a position, name and URL.
- Line 11The visible breadcrumb matches the structured data, as search engines expect.
Common HTML SEO Mistakes
The same title on every page
<title>Home</title> <!-- on every page of the site --><title>Desk Lamps: Adjustable LED Lamps for Work | Codevra Shop</title>Unique, descriptive titles help search engines show the right page for each search.
Keyword stuffing
<meta name="description" content="mugs, cheap mugs, best mugs, mugs uk, buy mugs, mug, mugs online"><meta name="description" content="Handmade ceramic mugs in 12 colours, dishwasher safe and delivered in 2 days across the UK.">Structured data that doesn't match the page
<script type="application/ld+json">{ "@type": "Product", "aggregateRating": { "ratingValue": "5", "reviewCount": "900" } }</script>
<!-- the page shows no reviews --><!-- only mark up ratings that are shown on the page -->Misleading markup can lead to manual penalties and lost rich results.
HTML SEO in Real Projects
SEO tags in practice
Content management systems and plugins such as Yoast fill these tags for each page, and frameworks like Next.js provide APIs for them. Shops add Product structured data for prices and stock, recipe sites add Recipe data for cooking times and ratings, and every page shared on social media relies on Open Graph tags for its preview. Codevra's own pages use unique titles, descriptions, canonical links and breadcrumb structured data.
HTML SEO Exercises
Answer each one and check it instantly. If you get stuck, open the hint before the answer.
Complete the tag that gives search engines a summary of the page.
<meta name="" content="Learn to bake sourdough bread at home in 10 simple steps.">About how long should a page title be for search results?
What does a canonical link tell search engines?
Which tags control link previews on Facebook and LinkedIn?
This page's head is missing key SEO tags. Add a specific <title>, a meta description of at least 120 characters, and a canonical link to https://example.com/lamps.
<title>Page</title>
<h1>Desk Lamps</h1>- Title mentions Desk Lamps
- Description is 120 to 160 characters
- Canonical link set
HTML SEO Quiz
5 questions to check what you learned.
Where do SEO meta tags go?
- At the end of the body
- In the head
- Inside the h1
- In a footer
What does meta robots noindex do?
- Speeds up indexing
- Removes images
- Asks search engines not to show the page in results
- Hides the page from visitors
What format is recommended for structured data?
- Microdata in comments
- CSV
- XML sitemaps
- JSON-LD in a script type="application/ld+json"
What size works well for an Open Graph image?
- 16 by 16 pixels
- About 1200 by 630 pixels
- 100 by 100 pixels
- 4000 by 4000 pixels
Why should structured data match the visible page?
- It loads faster
- JSON-LD requires it technically
- Browsers display it
- Search engines check it, and misleading markup can lose rich results or bring penalties
HTML SEO Challenge
An SEO-ready article head
Write:
- A
<title>that includes the word "Sourdough" - A meta description between 120 and 160 characters
og:titleandog:imagemeta tags- A JSON-LD script whose
@typeisArticle
- Title includes Sourdough
- Description is 120 to 160 characters
- og:title and og:image
- JSON-LD Article
Social cards, favicons and structured data
og:title,og:description,og:image,og:url,og:typetwitter:card(summary_large_image)<link rel="icon">,apple-touch-icon<script type="application/ld+json">Open Graph images work best at 1200 by 630 pixels. Structured data uses the schema.org vocabulary, and Google's Rich Results Test shows whether yours is valid.