SEO & Meta Tags
Optimize HTML head sections for search engines, social sharing, and discoverability
What you'll learn
Write viewport meta tag for proper mobile rendering
Implement Open Graph and Twitter Card meta tags for social sharing
Add structured data with JSON-LD for rich search results
Use canonical, noindex, and robots directives correctly
Write effective <title> and <meta name="description"> tags
Set up favicons and app icons for all platforms
Understand sitemaps and robots.txt files
The Complete Head Section
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary SEO -->
<title>Complete CSS Grid Guide | Learn CSS Today</title>
<meta
name="description"
content="Master CSS Grid with hands-on examples. Covers grid-template, auto-fit, minmax, placement, and responsive layouts from beginner to advanced."
/>
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://example.com/css-grid-guide" />
<!-- Open Graph -->
<meta property="og:title" content="Complete CSS Grid Guide" />
<meta
property="og:description"
content="Master CSS Grid with hands-on examples."
/>
<meta property="og:image" content="https://example.com/og-css-grid.png" />
<meta property="og:url" content="https://example.com/css-grid-guide" />
<meta property="og:type" content="article" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Complete CSS Grid Guide" />
<meta
name="twitter:description"
content="Master CSS Grid with hands-on examples."
/>
<meta
name="twitter:image"
content="https://example.com/twitter-css-grid.png"
/>
<!-- Icons -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
</head>
</html>
Title & Description Best Practices
<!-- Good: descriptive, keyword-rich, under 60 chars -->
<title>CSS Grid Layout Guide | Learn CSS Today</title>
<meta
name="description"
content="A step-by-step guide to CSS Grid layout with interactive examples. Covers grid-template, grid-area, auto-fit, minmax, and responsive design patterns."
/>
<!-- Bad: vague, keyword-stuffed -->
<title>Home</title>
<meta
name="description"
content="css grid css grid tutorial css grid guide css grid layout learn css grid best css grid tutorial"
/>
| Tag | Length Limit | Purpose |
|---|---|---|
<title> | 50-60 chars | Search result headline |
<meta description> | 150-160 chars | Search result snippet |
Open Graph for Social Sharing
<meta property="og:type" content="article" />
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Page description" />
<meta property="og:image" content="https://example.com/image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:site_name" content="Site Name" />
<meta property="og:locale" content="en_US" />
Image specs: 1200x630px, max 5MB, use JPG or PNG.
JSON-LD Structured Data
Google uses structured data for rich results (recipe stars, FAQ, breadcrumbs).
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "CSS Grid Layout Guide",
"description": "A step-by-step guide to CSS Grid layout.",
"author": {
"@type": "Person",
"name": "Jane Smith"
},
"datePublished": "2026-07-11",
"image": "https://example.com/og-css-grid.png",
"publisher": {
"@type": "Organization",
"name": "Learn CSS Today"
}
}
</script>
Test Your Structured Data
Use Google's Rich Results Test or Schema.org validator. Invalid JSON-LD is silently ignored — no error is shown to users.
Robots Directives
<!-- Allow indexing and link following (default) -->
<meta name="robots" content="index, follow" />
<!-- Prevent indexing a specific page -->
<meta name="robots" content="noindex, nofollow" />
<!-- Control crawler behavior via X-Robots-Tag in HTTP header -->
<!-- Can be set per-file type (e.g., noindex PDFs) -->
For site-wide control, use robots.txt:
User-agent: *
Allow: /
Disallow: /admin/
Sitemap: https://example.com/sitemap.xml
Favicon & App Icons
<!-- Modern SVG favicon (browser default) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<!-- Fallback for older browsers -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<!-- iOS home screen icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<!-- Web app manifest -->
<link rel="manifest" href="/site.webmanifest" />
<!-- Tile color for Windows -->
<meta name="msapplication-TileColor" content="#6366f1" />
<meta name="theme-color" content="#6366f1" />
Write Complete Head Section for a Blog Post
Code
html
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="utf-8" />5<meta name="viewport" content="width=device-width, initial-scale=1" />6<title>Learning Async — Complete Guide</title>7<meta name="description" content="Master async patterns in JavaScript" />8<meta property="og:title" content="Async Programming Guide" />9<meta property="og:description" content="Master async patterns" />10<meta property="og:type" content="article" />11<meta name="twitter:card" content="summary_large_image" />12<link rel="canonical" href="https://example.com/async" />13</head>14<body>15<h1>JavaScript Async Programming</h1>16</body>17</html>Demonstrates a complete HTML head section with title, meta description, Open Graph, Twitter Card, and canonical link — everything a blog post needs for SEO and social sharing.
Key Takeaways
viewport meta is essential for mobile rendering — always include it
Open Graph and Twitter Card meta control social previews
JSON-LD structured data enables rich search results
Use noindex for pages you don't want in search results
Favicon SVG is the modern standard, with PNG fallbacks for legacy
canonical URLs prevent duplicate content issues