|$ curl https://forge-ai.dev/api/markdown?path=docs/html/meta-tags
$cat docs/html-meta-tags.md
updated Last week·18 min read·published
HTML Meta Tags
Introduction
Meta tags provide metadata about an HTML document. They live inside the <head> section and are invisible to users but critical for browsers, search engines, social media platforms, and other tools that process your page. Meta tags control how your page is indexed, shared, displayed, and rendered.
A well-configured set of meta tags improves SEO, ensures correct mobile rendering, provides rich social media previews, and helps browsers handle your page efficiently. This guide covers every important meta tag category with practical examples.
Charset Declaration
The charset meta tag declares the character encoding for the document. It must be the first element inside <head> and within the first 1024 bytes. UTF-8 is the universal standard that supports every character in the Unicode standard:
charset-meta.html
HTML
| 1 | <head> |
| 2 | <!-- charset must be first in <head> --> |
| 3 | <meta charset="UTF-8"> |
| 4 | <title>Page Title</title> |
| 5 | </head> |
Without the charset declaration, browsers may fall back to a legacy encoding, causing special characters to appear as garbled text (mojibake). Modern pages should always specify UTF-8:
charset-comparison.html
HTML
| 1 | <!-- What happens without charset --> |
| 2 | <!-- If encoding is misdetected: --> |
| 3 | <!-- café → café, résumé → résumé --> |
| 4 | <!-- emoji: 🚀 → ���� --> |
| 5 | |
| 6 | <!-- With UTF-8, all characters render correctly --> |
| 7 | <meta charset="UTF-8"> |
| 8 | <!-- café, résumé, 🚀, 中文, العربية, हिंदी --- |
| 9 | |
| 10 | <!-- Equivalent to the HTTP header: --> |
| 11 | <!-- Content-Type: text/html; charset=UTF-8 --> |
ℹ
info
Always use UTF-8. It is the only encoding that supports every character from every language, including emoji. It is required by the HTML5 specification and eliminates encoding-related bugs entirely.
Viewport Meta Tag
The viewport meta tag controls how the page is displayed on mobile devices. Without it, mobile browsers render pages at a desktop width (typically 980px) and then scale down, resulting in tiny text and an unreadable layout:
viewport-meta.html
HTML
| 1 | <!-- Standard viewport configuration --> |
| 2 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 3 | |
| 4 | <!-- Common viewport options --> |
| 5 | <meta name="viewport" content=" |
| 6 | width=device-width, |
| 7 | initial-scale=1.0, |
| 8 | minimum-scale=1.0, |
| 9 | maximum-scale=5.0, |
| 10 | user-scalable=yes |
| 11 | "> |
| 12 | |
| 13 | <!-- For web apps that should not zoom --> |
| 14 | <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> |
| 15 | |
| 16 | <!-- For iOS Safari standalone mode --> |
| 17 | <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> |
| 18 | |
| 19 | <!-- Control virtual keyboard behavior --> |
| 20 | <meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content"> |
| Directive | Values | Description |
|---|---|---|
| width | device-width, number | Sets viewport width. device-width matches the device screen. |
| initial-scale | 0.1 – 10.0 | Initial zoom level when page loads. |
| minimum-scale | 0.1 – 10.0 | Minimum zoom level allowed. |
| maximum-scale | 0.1 – 10.0 | Maximum zoom level allowed. |
| user-scalable | yes / no | Whether user can zoom. Avoid no for accessibility. |
| interactive-widget | resizes-visual, resizes-content, overlays-content | Controls viewport behavior when virtual keyboard appears. |
⚠
warning
Never set user-scalable=no or maximum-scale=1 on production websites. These settings prevent users with low vision from zooming in, which is a WCAG 2.1 accessibility violation. Only consider these values for web apps where zooming would break the UI.
Description & Keywords
The description meta tag provides a brief summary of the page content. Search engines typically display it as the snippet below the title in search results. The keywords meta tag was once important for SEO but is now ignored by all major search engines:
description-meta.html
HTML
| 1 | <!-- Meta description: 150-160 characters recommended --> |
| 2 | <meta name="description" content="Learn HTML meta tags with practical examples. Covers viewport, charset, Open Graph, Twitter Cards, and SEO best practices for 2026."> |
| 3 | |
| 4 | <!-- Meta keywords: ignored by Google, but may be used by some small engines --> |
| 5 | <meta name="keywords" content="HTML meta tags, SEO, viewport, Open Graph, web development"> |
| 6 | |
| 7 | <!-- Meta author --> |
| 8 | <meta name="author" content="ForgeLearn"> |
| 9 | |
| 10 | <!-- Document classification --> |
| 11 | <meta name="rating" content="general"> |
| 12 | <meta name="distribution" content="global"> |
| 13 | <meta name="language" content="en"> |
| 14 | |
| 15 | <!-- Content type (legacy, mostly replaced by charset) --> |
| 16 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
Description writing guidelines:
◆Keep between 150–160 characters to avoid truncation in SERPs
◆Include the target keyword naturally within the first sentence
◆Write compelling, action-oriented copy that encourages clicks
◆Use a unique description for every page — duplicate descriptions hurt SEO
◆Do not use quotation marks in descriptions — they can truncate the snippet
Robots Meta Tag
The robots meta tag tells search engine crawlers how to handle the page. It controls indexing, link following, snippet generation, and caching behavior:
robots-meta.html
HTML
| 1 | <!-- Default behavior: index the page and follow links --> |
| 2 | <meta name="robots" content="index, follow"> |
| 3 | |
| 4 | <!-- Prevent indexing (page won't appear in search results) --> |
| 5 | <meta name="robots" content="noindex, follow"> |
| 6 | |
| 7 | <!-- Allow indexing but don't follow outbound links --> |
| 8 | <meta name="robots" content="index, nofollow"> |
| 9 | |
| 10 | <!-- Fully exclude from search engines --> |
| 11 | <meta name="robots" content="noindex, nofollow"> |
| 12 | |
| 13 | <!-- Control snippet generation --> |
| 14 | <meta name="robots" content="nosnippet"> |
| 15 | <meta name="robots" content="max-snippet:160"> |
| 16 | <meta name="robots" content="max-image-preview:large"> |
| 17 | |
| 18 | <!-- Prevent caching of the page --> |
| 19 | <meta name="robots" content="noarchive"> |
| 20 | |
| 21 | <!-- Prevent display of a cached link in search results --> |
| 22 | <meta name="robots" content="nocache"> |
| 23 | |
| 24 | <!-- Combined directives --> |
| 25 | <meta name="robots" content="noindex, nofollow, nosnippet, noarchive"> |
| 26 | |
| 27 | <!-- Page-level: tell specific engines --> |
| 28 | <meta name="googlebot" content="index, follow"> |
| 29 | <meta name="bingbot" content="index, follow"> |
| 30 | <meta name="slurp" content="noindex"> <!-- Yahoo --> |
| 31 | |
| 32 | <!-- For staging or development environments --> |
| 33 | <meta name="robots" content="noindex, nofollow, disallow"> |
| Directive | Purpose |
|---|---|
| index | Allow the page to appear in search results |
| noindex | Remove the page from search results |
| follow | Follow and crawl links on the page |
| nofollow | Do not follow links on the page |
| nosnippet | Do not show a text snippet in search results |
| noarchive | Do not show a cached link in search results |
| max-snippet | Maximum characters for the text snippet |
| max-image-preview | none, standard, or large image preview |
Open Graph Meta Tags
Open Graph (OG) is a protocol originally created by Facebook that controls how your page appears when shared on social platforms. OG tags generate rich link previews with title, description, image, and site information:
open-graph-meta.html
HTML
| 1 | <!-- Required OG properties --> |
| 2 | <meta property="og:title" content="HTML Meta Tags Guide — ForgeLearn"> |
| 3 | <meta property="og:description" content="Learn HTML meta tags with practical examples. Covers viewport, charset, Open Graph, Twitter Cards, and SEO best practices."> |
| 4 | <meta property="og:image" content="https://forgelearn.dev/images/og/meta-tags.png"> |
| 5 | <meta property="og:url" content="https://forgelearn.dev/docs/html/meta-tags"> |
| 6 | <meta property="og:type" content="article"> |
| 7 | |
| 8 | <!-- Recommended OG properties --> |
| 9 | <meta property="og:site_name" content="ForgeLearn"> |
| 10 | <meta property="og:locale" content="en_US"> |
| 11 | <meta property="og:image:width" content="1200"> |
| 12 | <meta property="og:image:height" content="630"> |
| 13 | <meta property="og:image:alt" content="HTML Meta Tags Guide — ForgeLearn Documentation"> |
| 14 | |
| 15 | <!-- Article-specific properties --> |
| 16 | <meta property="article:published_time" content="2026-07-07T10:00:00Z"> |
| 17 | <meta property="article:modified_time" content="2026-07-14T15:30:00Z"> |
| 18 | <meta property="article:author" content="ForgeLearn Team"> |
| 19 | <meta property="article:section" content="HTML"> |
| 20 | <meta property="article:tag" content="meta tags"> |
| 21 | <meta property="article:tag" content="SEO"> |
| 22 | |
| 23 | <!-- Video content --> |
| 24 | <meta property="og:type" content="video.other"> |
| 25 | <meta property="og:video" content="https://example.com/video.mp4"> |
| 26 | <meta property="og:video:url" content="https://example.com/video.mp4"> |
| 27 | <meta property="og:video:width" content="1920"> |
| 28 | <meta property="og:video:height" content="1080"> |
| 29 | |
| 30 | <!-- Multiple images (carousel) --> |
| 31 | <meta property="og:image" content="https://example.com/image1.png"> |
| 32 | <meta property="og:image" content="https://example.com/image2.png"> |
| Property | Description | Recommended Size |
|---|---|---|
| og:title | Title shown in the social share card | Under 60 characters |
| og:description | Description shown below the title | Under 160 characters |
| og:image | Image displayed in the share card | 1200 x 630 pixels |
| og:url | Canonical URL of the page | Full URL with https |
| og:type | Content type (website, article, etc.) | website or article |
| og:site_name | Overall site or brand name | Consistent across all pages |
✓
best practice
Test your Open Graph tags using the Facebook Sharing Debugger (developers.facebook.com/tools/debug) and LinkedIn Post Inspector. Both tools will show you exactly how your link preview will appear and flag any missing or incorrect properties.
Twitter Cards
Twitter Cards define how your content appears when shared on X (formerly Twitter). They use the twitter: namespace and fall back to Open Graph tags when specific Twitter tags are missing:
twitter-cards-meta.html
HTML
| 1 | <!-- Summary Card (small image) --> |
| 2 | <meta name="twitter:card" content="summary"> |
| 3 | <meta name="twitter:site" content="@forgelearn"> |
| 4 | <meta name="twitter:creator" content="@forgelearn"> |
| 5 | <meta name="twitter:title" content="HTML Meta Tags Guide"> |
| 6 | <meta name="twitter:description" content="Learn HTML meta tags with practical examples and best practices."> |
| 7 | <meta name="twitter:image" content="https://forgelearn.dev/images/og/meta-tags.png"> |
| 8 | <meta name="twitter:image:alt" content="HTML Meta Tags Guide — Visual reference"> |
| 9 | |
| 10 | <!-- Summary Large Card (large image) --> |
| 11 | <meta name="twitter:card" content="summary_large_image"> |
| 12 | <meta name="twitter:site" content="@forgelearn"> |
| 13 | <meta name="twitter:creator" content="@forgelearn"> |
| 14 | <meta name="twitter:title" content="HTML Meta Tags Guide — ForgeLearn"> |
| 15 | <meta name="twitter:description" content="Comprehensive guide to HTML meta tags with examples."> |
| 16 | <meta name="twitter:image" content="https://forgelearn.dev/images/og/meta-tags-large.png"> |
| 17 | <meta name="twitter:image:width" content="1200"> |
| 18 | <meta name="twitter:image:height" content="630"> |
| 19 | |
| 20 | <!-- Player Card (embedded media) --> |
| 21 | <meta name="twitter:card" content="player"> |
| 22 | <meta name="twitter:player" content="https://example.com/embed/video"> |
| 23 | <meta name="twitter:player:width" content="1280"> |
| 24 | <meta name="twitter:player:height" content="720"> |
| 25 | |
| 26 | <!-- App Card (mobile app links) --> |
| 27 | <meta name="twitter:card" content="app"> |
| 28 | <meta name="twitter:app:name:iphone" content="My App"> |
| 29 | <meta name="twitter:app:id:iphone" content="123456789"> |
| 30 | <meta name="twitter:app:name:googleplay" content="My App"> |
| 31 | <meta name="twitter:app:id:googleplay" content="com.example.app"> |
ℹ
info
Twitter will use Open Graph tags as fallback when Twitter-specific tags are not present. However, explicitly defining both OG and Twitter tags gives you full control over how your content appears on each platform. Always set both for maximum compatibility.
Favicon & App Icons
Favicons and app icons are small images that appear in browser tabs, bookmarks, and mobile home screens. They are declared using <link> elements in the head, but they serve a meta-informational purpose:
favicon-meta.html
HTML
| 1 | <!-- Standard favicon --> |
| 2 | <link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16"> |
| 3 | <link rel="icon" href="/favicon.svg" type="image/svg+xml"> |
| 4 | <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> |
| 5 | <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> |
| 6 | |
| 7 | <!-- Apple Touch Icon (iOS home screen) --> |
| 8 | <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180"> |
| 9 | |
| 10 | <!-- Android Chrome icons --> |
| 11 | <link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png"> |
| 12 | <link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png"> |
| 13 | |
| 14 | <!-- Web App Manifest for PWA --> |
| 15 | <link rel="manifest" href="/site.webmanifest"> |
| 16 | |
| 17 | <!-- Tile icon for Windows --> |
| 18 | <meta name="msapplication-TileColor" content="#0A0A0A"> |
| 19 | <meta name="msapplication-TileImage" content="/mstile-144x144.png"> |
| 20 | |
| 21 | <!-- Safari Pinned Tab --> |
| 22 | <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00FF41"> |
| 23 | |
| 24 | <!-- Theme color for mobile browsers --> |
| 25 | <meta name="theme-color" content="#0A0A0A"> |
| 26 | <meta name="theme-color" content="#00FF41" media="(prefers-color-scheme: dark)"> |
| 27 | <meta name="theme-color" content="#FFFFFF" media="(prefers-color-scheme: light)"> |
| 28 | |
| 29 | <!-- Browser configuration (legacy IE/Edge) --> |
| 30 | <meta name="msapplication-config" content="browserconfig.xml"> |
site.webmanifest
JSON
| 1 | // site.webmanifest — referenced by the manifest <link> tag |
| 2 | { |
| 3 | "name": "ForgeLearn", |
| 4 | "short_name": "FL", |
| 5 | "icons": [ |
| 6 | { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, |
| 7 | { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } |
| 8 | ], |
| 9 | "theme_color": "#0A0A0A", |
| 10 | "background_color": "#0A0A0A", |
| 11 | "display": "standalone", |
| 12 | "start_url": "/" |
| 13 | } |
ℹ
info
Generate all required favicon sizes from a single SVG using a tool like RealFaviconGenerator (realfavicongenerator.net). It will produce the correct icons for every platform and give you the complete HTML code to paste into your head section.
Theme Color & Color Scheme
The theme-color meta tag sets the color of the browser UI (address bar, status bar) on mobile devices. The color-scheme meta tag tells the browser which color schemes the page supports, enabling native dark mode:
theme-color-meta.html
HTML
| 1 | <!-- Theme color for Chrome, Edge, and mobile browsers --> |
| 2 | <meta name="theme-color" content="#0A0A0A"> |
| 3 | |
| 4 | <!-- Respect user preference: different color for light/dark mode --> |
| 5 | <meta name="theme-color" content="#00FF41" media="(prefers-color-scheme: dark)"> |
| 6 | <meta name="theme-color" content="#FFFFFF" media="(prefers-color-scheme: light)"> |
| 7 | |
| 8 | <!-- Color scheme: tells the browser what modes are supported --> |
| 9 | <meta name="color-scheme" content="light dark"> |
| 10 | |
| 11 | <!-- Only light mode --> |
| 12 | <meta name="color-scheme" content="light"> |
| 13 | |
| 14 | <!-- CSS that responds to the color-scheme --> |
| 15 | <style> |
| 16 | :root { |
| 17 | color-scheme: light dark; |
| 18 | } |
| 19 | body { |
| 20 | background: light-dark(#FFFFFF, #0A0A0A); |
| 21 | color: light-dark(#1A1A1A, #E0E0E0); |
| 22 | } |
| 23 | </style> |
| 24 | |
| 25 | <!-- Prevent browser-injected autofill background colors --> |
| 26 | <meta name="color-scheme" content="only light"> |
When color-scheme: light dark is set, the browser applies native dark mode to form controls, scrollbars, and other UA-styled elements. This ensures your dark theme feels consistent even on system components.
Practical Head Example
Here is a complete, production-ready head section with all essential meta tags in the correct order:
complete-head.html
HTML
| 1 | <!DOCTYPE html> |
| 2 | <html lang="en"> |
| 3 | <head> |
| 4 | <!-- 1. Character encoding (must be first) --> |
| 5 | <meta charset="UTF-8"> |
| 6 | |
| 7 | <!-- 2. Viewport for responsive design --> |
| 8 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 9 | |
| 10 | <!-- 3. SEO: title, description, canonical --> |
| 11 | <title>HTML Meta Tags Guide — ForgeLearn</title> |
| 12 | <meta name="description" content="Learn HTML meta tags with practical examples. Covers viewport, charset, Open Graph, Twitter Cards, and SEO best practices."> |
| 13 | <link rel="canonical" href="https://forgelearn.dev/docs/html/meta-tags"> |
| 14 | |
| 15 | <!-- 4. Robots directives --> |
| 16 | <meta name="robots" content="index, follow"> |
| 17 | |
| 18 | <!-- 5. Open Graph --> |
| 19 | <meta property="og:title" content="HTML Meta Tags Guide — ForgeLearn"> |
| 20 | <meta property="og:description" content="Learn HTML meta tags with practical examples."> |
| 21 | <meta property="og:image" content="https://forgelearn.dev/api/og?title=HTML%20Meta%20Tags§ion=HTML&color=00FF41"> |
| 22 | <meta property="og:url" content="https://forgelearn.dev/docs/html/meta-tags"> |
| 23 | <meta property="og:type" content="article"> |
| 24 | <meta property="og:site_name" content="ForgeLearn"> |
| 25 | |
| 26 | <!-- 6. Twitter Cards --> |
| 27 | <meta name="twitter:card" content="summary_large_image"> |
| 28 | <meta name="twitter:site" content="@forgelearn"> |
| 29 | <meta name="twitter:title" content="HTML Meta Tags Guide"> |
| 30 | <meta name="twitter:description" content="Learn HTML meta tags with practical examples."> |
| 31 | <meta name="twitter:image" content="https://forgelearn.dev/api/og?title=HTML%20Meta%20Tags§ion=HTML&color=00FF41"> |
| 32 | |
| 33 | <!-- 7. Favicon & app icons --> |
| 34 | <link rel="icon" href="/favicon.svg" type="image/svg+xml"> |
| 35 | <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180"> |
| 36 | <link rel="manifest" href="/site.webmanifest"> |
| 37 | |
| 38 | <!-- 8. Theme & color scheme --> |
| 39 | <meta name="theme-color" content="#0A0A0A"> |
| 40 | <meta name="color-scheme" content="light dark"> |
| 41 | |
| 42 | <!-- 9. Author & classification --> |
| 43 | <meta name="author" content="ForgeLearn"> |
| 44 | </head> |
Best Practices
◆Place charset first inside <head> — it must be within the first 1024 bytes of the document
◆Always include viewport: width=device-width, initial-scale=1.0 for responsive pages
◆Write unique, compelling meta descriptions for every page — 150–160 characters
◆Set canonical URL on every page to prevent duplicate content penalties
◆Add both Open Graph and Twitter Card tags for full social media coverage
◆Use og:image at 1200x630 pixels for the best display across all platforms
◆Generate all favicon sizes from a single source using a favicon generator tool
◆Set theme-color to match your brand and use media queries for light/dark mode
◆Use noindex on staging, internal, and thin content pages
◆Test social previews regularly using Facebook Debugger and Twitter Card Validator
🔥
pro tip
Google generates meta descriptions automatically if you do not provide one, but the auto-generated snippet often misses your key selling points. Writing your own description gives you control over what appears in search results and can significantly improve click-through rates.
$ForgeLearn — Engineering Documentation·Section ID: HTML-17·Revision: 1.0