HTML Meta Tags: Essential Metadata for SEO
Configure essential HTML meta tags for SEO, viewport settings, character encoding, Open Graph social sharing, and browser behavior with practical examples.
Document Metadata
Detailed Explanation
HTML Meta Tags
The <meta> element provides metadata about the HTML document. Meta tags go in the <head> section and are not displayed on the page but are used by browsers, search engines, and social media platforms.
Essential Meta Tags
<!-- Character encoding (must be first) -->
<meta charset="UTF-8">
<!-- Viewport for responsive design -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Page description for SEO -->
<meta name="description" content="A concise description of the page content, 150-160 characters.">
<!-- Robots directive -->
<meta name="robots" content="index, follow">
Open Graph (Social Sharing)
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Page description">
<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">
Twitter Cards
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description">
<meta name="twitter:image" content="https://example.com/image.jpg">
Security and Performance
<!-- Content Security Policy -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<!-- Referrer Policy -->
<meta name="referrer" content="strict-origin-when-cross-origin">
<!-- Theme color for mobile browsers -->
<meta name="theme-color" content="#0a0a0b">
Common Mistakes
- Forgetting
charset(must be in the first 1024 bytes) - Missing viewport meta tag (breaks responsive design)
- Description too long (truncated in search results)
- Duplicate meta tags overriding each other
Use Case
Meta tags are essential for every web page. The viewport meta tag is required for responsive design on mobile devices. Description meta tags directly impact search engine result page (SERP) click-through rates. Open Graph tags determine how your pages appear when shared on social media platforms like Facebook, LinkedIn, and Discord.