Metadata & SEO HTML
Metadata helps browsers, search engines and social media platforms understand your webpage. In this chapter, you will learn the HTML tags that support SEO, sharing and professional page identity.
title
Shows page title in browser tab and search results.
description
Gives a short summary of the page content.
canonical
Defines the preferred URL of the webpage.
Open Graph
Controls how page appears when shared socially.
After This Chapter, You Will Understand
This chapter teaches the head-section tags required for professional and SEO-ready webpages.
Title Tag
Write clear browser and search result titles.
Description
Create useful page summaries for users and search engines.
Social Sharing
Use Open Graph and Twitter tags for better sharing preview.
Structured Data
Understand basic JSON-LD structured data concept.
What is Metadata?
Metadata means information about the webpage, usually written inside the head section.
1 Simple Meaning
Metadata is not directly shown in the visible body of the webpage. It gives important information to browsers, search engines, social media platforms and devices.
2 Basic Head Metadata
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
<meta name="description" content="Page summary">
</head>
Important SEO Metadata Tags
These tags help your webpage look clearer in search results and avoid SEO mistakes.
| Tag | Purpose | Example |
|---|---|---|
| <title> | Page title shown in browser tab and search result | <title>HTML Course Notes</title> |
| meta description | Short page summary | <meta name="description" content="Learn HTML"> |
| meta robots | Tells search engines whether to index/follow | <meta name="robots" content="index, follow"> |
| canonical | Defines preferred URL of the page | <link rel="canonical" href="https://example.com/page"> |
| favicon | Small icon shown in browser tab | <link rel="icon" href="favicon.png"> |
| viewport | Supports mobile responsive display | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
3 Search Preview
The title and description help users decide whether they should open your page from search results. Keep them clear, relevant and honest.
Basic JSON-LD Structured Data
Structured data gives extra machine-readable information about your page.
7 What is JSON-LD?
JSON-LD is a format used to provide structured information to search engines. It is commonly added inside a script tag in the head section.
8 Course Schema Example
{
"@context": "https://schema.org",
"@type": "Course",
"name": "HTML with CSS",
"provider": "AICPE Learning Hub"
}
</script>
Create an SEO-Ready Head Section
Edit the code and click Run Code. Check the page title in the preview browser frame.
Mistakes Students Should Avoid
SEO metadata should be useful, accurate and unique for every important page.
Wrong Habits
- Using the same title on every page
- Writing very long or unclear titles
- Leaving meta description empty
- Using fake keywords unrelated to content
- Forgetting viewport tag on mobile pages
Correct Habits
- Write unique title for every page
- Write clear and honest description
- Use canonical URL carefully
- Use proper OG image for sharing
- Keep metadata aligned with page content
Test Your Understanding
Select the correct answers and check your score.
1. Which tag shows the page title in browser tab?
2. Which meta tag gives a short page summary?
3. Which tag defines the preferred URL of a page?
4. Which tags help social sharing preview?
5. Which meta tag supports mobile responsive display?
Remember These Points
Revise these before moving to Chapter 12.
Metadata
Metadata gives information about the webpage and is written in the head section.
Title
The title tag shows the page title in browser tab and search results.
Description
The meta description gives a short summary of the page.
Canonical
The canonical link defines the preferred URL of a page.
Open Graph
Open Graph tags control how the page appears when shared socially.
Schema
Structured data gives machine-readable information about page content.
Open Graph and Twitter Card Tags
These tags control how your page appears when shared on social media or messaging platforms.
4 Open Graph Tags
<meta property="og:description" content="Learn HTML with CSS">
<meta property="og:image" content="cover.jpg">
<meta property="og:url" content="https://example.com">
HTML with CSS Course
Social preview cards use title, description and image metadata.
5 Twitter Card Tags
<meta name="twitter:title" content="HTML Course">
<meta name="twitter:description" content="Learn HTML">
<meta name="twitter:image" content="cover.jpg">
6 Social Image
A social preview image should be clear, branded and related to the page. For course pages, use a course banner or branded learning image.