beginner general 14 min read
Complete Guide to HTML Meta Tags
Learn all about meta tags including SEO, social sharing, and browser behavior.
meta tags html meta seo meta tags open graph tags
Essential Meta Tags
Character Set
<meta charset="UTF-8">
Viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Title (Not a meta tag, but essential)
<title>Page Title - Site Name</title>
Description
<meta name="description" content="A 150-160 character description of your page content.">
SEO Meta Tags
Robots
<meta name="robots" content="index, follow">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="index, follow">
Canonical
<link rel="canonical" href="https://example.com/page">
Language
<html lang="en">
<meta name="language" content="English">
Open Graph Tags
For Facebook, LinkedIn, and most social platforms:
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Page description for sharing">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
Image requirements:
- Minimum 1200x630 pixels
- Maximum 8MB
- JPG, PNG, or GIF format
Twitter Card Tags
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@username">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description">
<meta name="twitter:image" content="https://example.com/image.jpg">
Card types:
summary- Small imagesummary_large_image- Large imageapp- App downloadplayer- Video/audio
Favicon Tags
<link rel="icon" href="/favicon.ico">
<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">
Browser/App Meta Tags
Theme Color
<meta name="theme-color" content="#3b82f6">
Apple Web App
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="App Name">
Complete Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Primary Meta Tags -->
<title>Page Title - Site Name</title>
<meta name="title" content="Page Title - Site Name">
<meta name="description" content="Page description here">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page">
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Page description">
<meta property="og:image" content="https://example.com/og-image.jpg">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://example.com/page">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description">
<meta name="twitter:image" content="https://example.com/twitter-image.jpg">
<!-- Favicon -->
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Canonical -->
<link rel="canonical" href="https://example.com/page">
<meta name="theme-color" content="#3b82f6">
</head>
<body>
<!-- Content -->
</body>
</html>
Use our Meta Tags Generator to create these automatically.