🌱BeginnerAdvanced Basics
SEO Meta Tags
Optimize pages for search engines with meta description, robots, canonical, and structured data hints.
Overview
Search Engine Optimization (SEO) starts in the <head> of your HTML. Several meta tags directly influence how search engines discover, index, and display your pages.
Key SEO-relevant head elements:
- <title>: the most important SEO signal appears in search results
- meta description: the snippet shown below the title in results (up to 160 chars)
- meta robots: controls indexing and link following
- canonical link: prevents duplicate content issues
- meta viewport: mobile-friendliness is a ranking factor
- Structured data (schema.org JSON-LD): enables rich results
Key Points
- •<title> is the single most important on-page SEO factor 50-60 characters
- •meta description does not directly affect ranking but impacts click-through rate
- •meta robots: index/noindex controls whether search engines index the page
- •canonical link prevents duplicate content by specifying the "canonical" URL
- •Open Graph tags (og:title, og:image) improve social media sharing appearance
- •JSON-LD structured data enables rich results (star ratings, FAQs, event dates) in Google
Examples
Essential SEO meta tags
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Page title: shown in search results and browser tabs -->
<title>HTML Tutorial for Beginners | LearnHTML.dev</title>
<!-- Description: shown under title in search results -->
<meta name="description" content="Learn HTML from scratch with 40 hands-on topics, exercises, and quizzes. Free interactive HTML course for beginners.">
<!-- Robots: control indexing -->
<meta name="robots" content="index, follow">
<!-- Canonical: prevent duplicate content -->
<link rel="canonical" href="https://learnhtml.dev/html/beginner/what-is-html">
</head>Robots tag values
<!-- Default: index and follow all links -->
<meta name="robots" content="index, follow">
<!-- Don't index, but follow links -->
<meta name="robots" content="noindex, follow">
<!-- Don't index, don't follow links (login pages, private content) -->
<meta name="robots" content="noindex, nofollow">JSON-LD structured data for rich results
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "HTML Tutorial for Beginners",
"author": { "@type": "Person", "name": "Jane Doe" },
"datePublished": "2024-06-01",
"image": "https://example.com/image.jpg"
}
</script>JSON-LD is placed in <head> or <body>. Google uses it for rich snippets.
Common Mistakes
- Duplicate titles and descriptions across pages each page should have unique values
- Description over 160 characters search engines truncate it
- Missing canonical tag on paginated or duplicate-URL content
Note
Google's Search Console is the authoritative tool for checking how your pages appear in search results. After deploying, submit your sitemap and check for indexing issues.
Exercises
Write HTML to solve each exercise. Use Preview to see it render in a live iframe, then mark as done.
Loading editor…
Completed: 0 / 5 exercises
Knowledge Check
Question 1 of 4