Meta Tags for SEO and Social Sharing
1. Introduction
The <head> section controls how your page appears in search engines and when shared on social media platforms. Beyond the basics of <title> and <meta name="description">, the Open Graph protocol (Facebook, LinkedIn, Slack) and Twitter Card meta tags let you define the exact image, title, and description that appears in social previews. This lesson covers the complete modern meta tag toolkit for maximum visibility.
2. Concept
Meta Tag Categories
| Category | Example Tags | Consumed By |
|---|---|---|
| Core SEO | title, meta description, canonical | All search engines |
| Open Graph | og:title, og:image, og:url, og:type | Facebook, LinkedIn, Discord, Slack, WhatsApp |
| Twitter Cards | twitter:card, twitter:title, twitter:image | X (Twitter) |
| Technical | viewport, charset, robots, theme-color | Browsers, crawlers |
| App icons | apple-touch-icon, manifest | iOS/Android home screens |
<title> and og:title can differ. Keep <title> under 60 characters for search results. og:title can be slightly longer and more conversational for social sharing contexts where different audiences see it.og:image show a blank preview on social media, significantly reducing clicks.<link rel="canonical"> tag is critical for preventing duplicate content penalties. If your page is accessible at multiple URLs (http/https, www/non-www, trailing slash variants), always specify the canonical URL to consolidate ranking signals.3. Basic Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Core SEO -->
<title>HTML5 Tutorial for Beginners | Dev Academy</title>
<meta name="description" content="Learn HTML5 from scratch with hands-on examples and quizzes. Free beginner course by Dev Academy.">
<link rel="canonical" href="https://devacademy.com/html5-tutorial">
<!-- Open Graph -->
<meta property="og:type" content="article">
<meta property="og:title" content="HTML5 Tutorial for Beginners">
<meta property="og:description" content="Learn HTML5 from scratch with hands-on examples and quizzes.">
<meta property="og:image" content="https://devacademy.com/images/html5-og.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://devacademy.com/html5-tutorial">
<meta property="og:site_name" content="Dev Academy">
<meta property="og:locale" content="en_GB">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="HTML5 Tutorial for Beginners">
<meta name="twitter:description" content="Learn HTML5 with hands-on examples and quizzes.">
<meta name="twitter:image" content="https://devacademy.com/images/html5-og.jpg">
<meta name="twitter:site" content="@devacademy">
<!-- Technical -->
<meta name="robots" content="index, follow">
<meta name="theme-color" content="#1d4ed8">
<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>
<body>
<h1>HTML5 Tutorial for Beginners</h1>
</body>
</html>
4. How It Works
Step 1 — Core SEO Tags
The <title> is the blue clickable headline in search results. meta description is the grey snippet beneath — keep it under 160 characters, action-oriented. link rel="canonical" tells Google which URL is the definitive version of the page, consolidating all ranking signals to one URL.
Step 2 — Open Graph Protocol
Open Graph tags use property (not name) attributes. When a URL is pasted into Facebook, Slack, or WhatsApp, the platform fetches your page and reads these tags to build the preview card. og:type is typically article for blog posts or website for homepages.
Step 3 — Twitter Cards
Twitter Cards are separate from Open Graph. summary_large_image shows a full-width image above the tweet text — far more engaging than the small summary type. If Twitter-specific tags are absent, X/Twitter will fall back to Open Graph values automatically.
Step 4 — robots and theme-color
content="index, follow" is the default — index the page and follow links. Use noindex for admin, thank-you, or duplicate pages. theme-color tints the browser chrome bar on Android Chrome matching your brand colour.
5. Real-World Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ProBook 15 Laptop — Intel i7, 16 GB RAM | TechStore</title>
<meta name="description" content="Buy the ProBook 15 with Intel i7-13th Gen, 16 GB RAM, 512 GB SSD. Free UK delivery. In stock now.">
<link rel="canonical" href="https://techstore.com/laptops/probook-15">
<!-- JSON-LD Breadcrumb -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{"@type":"ListItem","position":1,"name":"Home","item":"https://techstore.com"},
{"@type":"ListItem","position":2,"name":"Laptops","item":"https://techstore.com/laptops"},
{"@type":"ListItem","position":3,"name":"ProBook 15"}
]
}
</script>
<meta property="og:type" content="product">
<meta property="og:title" content="ProBook 15 — Intel i7 Laptop">
<meta property="og:description" content="16 GB RAM, 512 GB SSD, 15.6" IPS 144 Hz. Free UK delivery.">
<meta property="og:image" content="https://techstore.com/images/probook15-og.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://techstore.com/laptops/probook-15">
<meta property="og:site_name" content="TechStore">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="ProBook 15 — Intel i7 Laptop">
<meta name="twitter:description" content="16 GB RAM, 512 GB SSD, 15.6" 144 Hz. Free UK delivery.">
<meta name="twitter:image" content="https://techstore.com/images/probook15-og.jpg">
<meta name="twitter:site" content="@TechStoreUK">
<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">
<meta name="theme-color" content="#0f172a">
</head>
<body>
<h1>ProBook 15 Laptop</h1>
</body>
</html>
6. Common Mistakes
❌ No canonical — same content at multiple URLs causes duplicate penalty
<head>
<title>Product Page</title>
</head>✓ Always declare the canonical URL
<link rel="canonical" href="https://www.stacklesson.com/products/probook-15">❌ Description too long — truncated in search results
<meta name="description" content="This is an extremely long description that goes well over 160 characters and will definitely be cut off in Google's search results making it look broken and incomplete to visitors...">✓ Keep description under 160 characters — concise and action-oriented
<meta name="description" content="Learn HTML5 with hands-on examples and quizzes. Free beginner course — start building web pages today.">7. Try It Yourself
8. Quick Reference
| Tag | Attribute Type | Recommended Value / Length |
|---|---|---|
<title> |
element | Max 60 characters |
meta description |
name | Max 160 characters; action-oriented |
link canonical |
rel=”canonical” | Absolute URL of preferred version |
og:image |
property | 1200 × 630 px JPEG/PNG |
og:type |
property | website | article | product |
twitter:card |
name | summary_large_image recommended |
meta robots |
name | index, follow (default) or noindex |