HTML — Lesson 21
HTML SEO & Meta Tags
Optimizing HTML for search engines and social media.
HTML SEO & Meta Tags
Search Engine Optimization (SEO) in HTML is about structuring your markup so search engines can crawl, index, and rank your content effectively.
Essential SEO Tags
<head>
<!-- Title: appears in search results (50-60 chars) -->
<title>Web Development Tutorial - Learn HTML & CSS</title>
<!-- Meta description: shows under the title (150-160 chars) -->
<meta name="description" content="Learn web development step by step with interactive lessons, code examples, and hands-on practice.">
<!-- Canonical URL: prevents duplicate content -->
<link rel="canonical" href="https://example.com/tutorial">
<!-- robots: tell search engines what to index -->
<meta name="robots" content="index, follow">
</head>
Open Graph (Facebook, LinkedIn)
<meta property="og:type" content="website">
<meta property="og:title" content="My Amazing Article">
<meta property="og:description" content="A brief summary of the article.">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:url" content="https://example.com/article">
<meta property="og:site_name" content="My Website">
Twitter Cards
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="My Article Title">
<meta name="twitter:description" content="Short description.">
<meta name="twitter:image" content="https://example.com/tw-image.jpg">
Structured Data (JSON-LD)
Helps search engines understand your content and show rich results like recipes, reviews, and events.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "How to Learn HTML",
"author": { "@type": "Person", "name": "Jane Doe" },
"datePublished": "2026-01-15",
"image": "https://example.com/article-image.jpg"
}
</script>
SEO Semantic Markup
- Use exactly one
<h1>per page - Use headings in order: h1, h2, h3 (no skipping)
- Use
<strong>and<em>for emphasis - Use descriptive
<a>text, not "click here" - Use
<alt>text on all images - Use
<time>for dates
Tip: Use the Google Mobile-Friendly Test and Rich Results Test to validate your SEO markup.
Practice what you learned in the Deoit Editor — a free, browser-based code editor.
Open Editor →