`<meta>` - Document Metadata
The <meta> tag is a key element in HTML documents used to provide metadata. It does not directly display on the page but is crucial for document parsing, search engine optimization (SEO), and browser behavior control. Below is a detailed analysis of the <meta> tag.
Basic Structure of the <meta> Tag
The <meta> tag is typically located in the <head> section of an HTML document and is an empty element (does not require a closing tag). Its core attributes include name, content, charset, and http-equiv. Here is a basic example:
<head>
<meta charset="UTF-8">
<meta name="description" content="This is a detailed guide about HTML meta tags">
</head>
Character Encoding Declaration
The charset attribute specifies the document's character encoding, which is the standard practice in modern HTML5. For example:
<meta charset="UTF-8">
Omitting this or declaring it incorrectly may cause garbled text on the page. In older HTML4, a more complex syntax was used:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
Document Description and Keywords
The name attribute, combined with content, can define various metadata:
-
Page Description
Search engines often display the description as a snippet in search results:<meta name="description" content="Free online tutorials for learning HTML and CSS"> -
Keywords (gradually deprioritized by search engines)
<meta name="keywords" content="HTML, CSS, JavaScript"> -
Author Information
<meta name="author" content="John Doe">
Viewport Control (Mobile Adaptation)
The viewport controls display scaling on mobile devices and is essential for responsive design:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
A more complex viewport control example:
<meta name="viewport"
content="width=device-width,
initial-scale=1.0,
maximum-scale=5.0,
minimum-scale=0.5,
user-scalable=yes">
HTTP Header Simulation (http-equiv)
The http-equiv attribute can simulate HTTP header behavior:
-
Page Refresh and Redirect
Redirect to a new URL after 5 seconds:<meta http-equiv="refresh" content="5; url=https://example.com"> -
Disable Browser Caching
<meta http-equiv="cache-control" content="no-cache"> -
X-UA-Compatible (for legacy IE)
Force the latest rendering mode:<meta http-equiv="X-UA-Compatible" content="IE=edge">
Social Media Metadata
Specialized meta tags for social media, such as Open Graph protocol:
<meta property="og:title" content="Page Title">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com">
<meta property="og:image" content="https://example.com/image.jpg">
Twitter card example:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@username">
Browser and Platform-Specific Tags
-
Theme Color (Android Chrome)
<meta name="theme-color" content="#4285f4"> -
iOS Safari Configuration
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> -
Disable Phone Number Detection
<meta name="format-detection" content="telephone=no">
Search Engine Control Directives
-
Disable Indexing
<meta name="robots" content="noindex"> -
Disable Link Weight Tracking
<meta name="referrer" content="no-referrer"> -
Disable Translation
<meta name="google" content="notranslate">
Verification Meta Tags
Common tags for website ownership verification:
<meta name="google-site-verification" content="...">
<meta name="baidu-site-verification" content="...">
Special-Purpose Tag Examples
-
PWA App Configuration
<meta name="mobile-web-app-capable" content="yes"> -
Dark Mode Support
<meta name="color-scheme" content="light dark"> -
Disable Autoplay (some browsers)
<meta name="autoplay-policy" content="user-gesture-required">
JavaScript Example for Dynamically Generating Meta Tags
Modify meta tag content dynamically using JavaScript:
// Update page description
document.querySelector('meta[name="description"]')
.setAttribute('content', 'Dynamically updated description');
// Add a new meta tag
const metaTag = document.createElement('meta');
metaTag.name = "viewport";
metaTag.content = "width=1200";
document.head.appendChild(metaTag);
Meta Tag Validation and Debugging
Use browser developer tools to inspect meta tags:
- Open Chrome DevTools (F12)
- Switch to the "Elements" panel
- View the expanded list of meta tags in the
<head>section
Google Rich Results Test tool for validating structured data:
<meta name="generator" content="CMS Name">
本站部分内容来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn
下一篇：<base>-基准URL
