Optimizing Your <head> for SEO
Begin by setting a clear <title> and <meta name="description">.
Use unique, concise titles and descriptions for each page. Include the viewport meta for mobile
friendliness. Add a canonical link to prevent duplicate-content issues.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lesson 4: SEO-Friendly Markup | Markup Mason</title>
<meta name="description" content="Learn how to write SEO-friendly HTML with proper meta tags
<link rel="canonical" href="https://markupmason.com/tutorials/html-lesson4.html">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Lesson 4: SEO-Friendly Markup",
"description": "Optimize HTML for SEO with meta tags, headings, alt text, canonical links, and structured data.",
"author": {
"@type": "Person",
"name": "Markup Mason"
},
"publisher": {
"@type": "Organization",
"name": "Markup Mason",
"logo": {
"@type": "ImageObject",
"url": "https://markupmason.com/assets/images/logo.png"
}
},
"url": "https://markupmason.com/tutorials/html-lesson4.html"
}
</script>
</head>
</html>Key Points
- <title>: unique, concise, includes target keywords.
- <meta name="description">: summary of page content, under 160 characters.
- Use proper heading hierarchy (<h1>–<h6>) to structure content.
- Add meaningful alt attributes for all images.
- Include a canonical link to prevent duplicate content issues.
- Implement JSON-LD structured data for rich results.