Meta tags, SEO optimization, and Open Graph
Alex Chang
Feb 2026
2 tabs
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Essential meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Primary meta tags -->
<title>Ultimate Guide to Front-End Development | Frontend Dev</title>
<meta name="title" content="Ultimate Guide to Front-End Development">
<meta name="description" content="Learn modern front-end development with HTML, CSS, and JavaScript. Comprehensive tutorials for beginners and advanced developers.">
<meta name="keywords" content="front-end, HTML, CSS, JavaScript, web development, tutorial">
<meta name="author" content="Alex Chen">
<meta name="robots" content="index, follow">
<!-- Canonical URL (prevents duplicate content) -->
<link rel="canonical" href="https://frontend.dev/guide">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://frontend.dev/guide">
<meta property="og:title" content="Ultimate Guide to Front-End Development">
<meta property="og:description" content="Learn modern front-end development with HTML, CSS, and JavaScript. Comprehensive tutorials for beginners and advanced developers.">
<meta property="og:image" content="https://frontend.dev/images/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="Frontend Dev">
<meta property="og:locale" content="en_US">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://frontend.dev/guide">
<meta name="twitter:title" content="Ultimate Guide to Front-End Development">
<meta name="twitter:description" content="Learn modern front-end development with HTML, CSS, and JavaScript.">
<meta name="twitter:image" content="https://frontend.dev/images/twitter-card.jpg">
<meta name="twitter:creator" content="@alexchen">
<meta name="twitter:site" content="@frontenddev">
<!-- Favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#4285f4">
<!-- Schema.org structured data (JSON-LD) -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Ultimate Guide to Front-End Development",
"description": "Learn modern front-end development with HTML, CSS, and JavaScript.",
"image": "https://frontend.dev/images/og-image.jpg",
"author": {
"@type": "Person",
"name": "Alex Chen",
"url": "https://frontend.dev/author/alex"
},
"publisher": {
"@type": "Organization",
"name": "Frontend Dev",
"logo": {
"@type": "ImageObject",
"url": "https://frontend.dev/logo.png"
}
},
"datePublished": "2026-02-04",
"dateModified": "2026-02-04"
}
</script>
<!-- Preconnect to external domains -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="dns-prefetch" href="https://cdn.example.com">
<!-- Preload critical resources -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/css/critical.css" as="style">
<!-- Stylesheets -->
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<h1>Ultimate Guide to Front-End Development</h1>
<!-- Content here -->
</body>
</html>
<!-- Breadcrumb structured data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://frontend.dev"
},{
"@type": "ListItem",
"position": 2,
"name": "Tutorials",
"item": "https://frontend.dev/tutorials"
},{
"@type": "ListItem",
"position": 3,
"name": "HTML Guide"
}]
}
</script>
<!-- Product structured data (for e-commerce) -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Web Development Course",
"image": "https://frontend.dev/course-image.jpg",
"description": "Complete web development course covering HTML, CSS, and JavaScript",
"brand": {
"@type": "Brand",
"name": "Frontend Dev"
},
"offers": {
"@type": "Offer",
"url": "https://frontend.dev/course",
"priceCurrency": "USD",
"price": "99.00",
"priceValidUntil": "2026-12-31",
"availability": "https://schema.org/InStock"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"reviewCount": "247"
}
}
</script>
<!-- FAQ structured data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [{
"@type": "Question",
"name": "What is HTML?",
"acceptedAnswer": {
"@type": "Answer",
"text": "HTML (HyperText Markup Language) is the standard markup language for creating web pages."
}
},{
"@type": "Question",
"name": "What is CSS?",
"acceptedAnswer": {
"@type": "Answer",
"text": "CSS (Cascading Style Sheets) is used to style and layout web pages."
}
}]
}
</script>
<!-- Organization structured data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Frontend Dev",
"url": "https://frontend.dev",
"logo": "https://frontend.dev/logo.png",
"sameAs": [
"https://twitter.com/frontenddev",
"https://github.com/frontenddev",
"https://linkedin.com/company/frontenddev"
],
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+1-555-123-4567",
"contactType": "customer service"
}
}
</script>
<!-- Event structured data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Event",
"name": "Web Development Conference 2026",
"startDate": "2026-06-15T09:00",
"endDate": "2026-06-17T17:00",
"eventStatus": "https://schema.org/EventScheduled",
"eventAttendanceMode": "https://schema.org/OfflineEventAttendanceMode",
"location": {
"@type": "Place",
"name": "Convention Center",
"address": {
"@type": "PostalAddress",
"streetAddress": "123 Main St",
"addressLocality": "San Francisco",
"postalCode": "94102",
"addressCountry": "US"
}
},
"offers": {
"@type": "Offer",
"url": "https://frontend.dev/conference",
"price": "299",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock"
}
}
</script>
<!-- Video structured data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "VideoObject",
"name": "Learn CSS Grid in 20 Minutes",
"description": "Complete guide to CSS Grid layout system",
"thumbnailUrl": "https://frontend.dev/video-thumb.jpg",
"uploadDate": "2026-02-04T08:00:00+08:00",
"duration": "PT20M",
"contentUrl": "https://frontend.dev/videos/css-grid.mp4",
"embedUrl": "https://frontend.dev/embed/css-grid"
}
</script>
2 files · html
Explain with highlit
Meta tags provide metadata about HTML documents for search engines and social media. I use <meta name="description"> for search result snippets (150-160 characters). The viewport meta tag ensures responsive design on mobile devices. Open Graph tags (og:title, og:image, og:description) control how content appears when shared on social media. Twitter Card tags provide similar functionality for Twitter. The <link rel="canonical"> tag prevents duplicate content issues. Schema.org structured data helps search engines understand content type. Proper meta tags improve SEO ranking and social media engagement.