`<meta>` - document metadata

Author：Chuan Chen 阅读数：58033人阅读分类： HTML

The <meta> tag is a key element in HTML documents used to provide metadata. It does not display directly on the page but significantly impacts document parsing, search engine optimization (SEO), viewport adaptation, and more. This metadata typically exists in key-value pairs, defined through attributes like name, content, and http-equiv.

Basic Structure of the `<meta>` Tag

The <meta> tag is a self-closing tag and must be placed in the <head> section. A common structure is as follows:

<head>
  <meta charset="UTF-8">
  <meta name="description" content="This is an example about HTML meta tags">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Character Encoding Declaration

Specify the document's character encoding using the charset attribute. UTF-8 is recommended to avoid garbled text:

<meta charset="UTF-8">

Omitting this declaration may cause browsers to fail in parsing non-ASCII characters (e.g., Chinese, Japanese, etc.).

Viewport Control

For mobile development, the viewport meta tag is crucial as it controls the layout viewport's width and scaling behavior:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

width=device-width: Viewport width equals the device width.
initial-scale=1.0: Initial zoom level is 1.
maximum-scale=1.0: Disables zooming in.
user-scalable=no: Prevents manual zooming by users.

Page Description and SEO Optimization

The following metadata directly affects search engine indexing and display:

<meta name="description" content="Free online tutorials for learning HTML5 and CSS3">
<meta name="keywords" content="HTML, CSS, JavaScript, Frontend">
<meta name="author" content="John Doe">

description appears in the summary of search engine results pages (SERPs).
keywords used to carry high SEO weight but are now mostly ignored by search engines.
author declares the content creator.

Social Media Cards (Open Graph/Twitter Cards)

Customize content display for social media sharing:

<!-- Open Graph (Facebook/LinkedIn) -->
<meta property="og:title" content="HTML Meta Tags Explained">
<meta property="og:description" content="In-depth analysis of <meta> tag usage">
<meta property="og:image" content="https://example.com/thumbnail.jpg">
<meta property="og:url" content="https://example.com/meta-tag">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@username">

HTTP Header Equivalents

Use the http-equiv attribute to simulate HTTP response headers:

<!-- Force IE to use the latest rendering engine -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- Set page caching policy -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

<!-- Timed refresh or redirect -->
<meta http-equiv="refresh" content="5; url=https://example.com">

Browser Theme Color

Control the browser UI's theme color:

<!-- Set address bar color (Android Chrome) -->
<meta name="theme-color" content="#4285f4">

<!-- Safari bookmark bar color -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Disable Automatic Format Detection

Prevent mobile browsers from automatically modifying content display:

<!-- Disable phone number auto-detection -->
<meta name="format-detection" content="telephone=no">

<!-- Disable email address auto-detection -->
<meta name="format-detection" content="email=no">

<!-- Disable address auto-detection -->
<meta name="format-detection" content="address=no">

Web App Configuration

PWA (Progressive Web App) related configurations:

<!-- Run in fullscreen mode -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">

<!-- App splash screen -->
<link rel="apple-touch-startup-image" href="/launch.png">

Search Engine Crawler Directives

Control search engine indexing behavior:

<!-- Block all search engines from indexing -->
<meta name="robots" content="noindex, nofollow">

<!-- Allow indexing but block link following -->
<meta name="robots" content="index, nofollow">

<!-- Disable Google's sitelinks search box -->
<meta name="google" content="nositelinkssearchbox">

Browser Compatibility Hints

Optimization hints for specific browsers:

<!-- Force 360 Browser to use WebKit mode -->
<meta name="renderer" content="webkit">

<!-- Force QQ Browser to use speed mode -->
<meta name="x5-page-mode" content="app">

Security-Related Meta Tags

Enhance page security policies:

<!-- Block iframe embedding -->
<meta http-equiv="X-Frame-Options" content="deny">

<!-- Enable CSP (Content Security Policy) -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

Special-Purpose Metadata

Metadata for specific scenarios:

<!-- Tool generation annotation -->
<meta name="generator" content="Hexo 6.0">

<!-- Copyright statement -->
<meta name="copyright" content="2023 Example Inc.">

<!-- Page creation date -->
<meta name="created" content="2023-05-20T08:00:00+08:00">

Dynamic Metadata Manipulation

Modify meta tags dynamically via JavaScript:

// Update page description
document.querySelector('meta[name="description"]')
  .setAttribute('content', 'New page description');

// Add a new meta tag
const meta = document.createElement('meta');
meta.name = 'viewport';
meta.content = 'width=1200';
document.head.appendChild(meta);

Verification Metadata

Common methods for website ownership verification:

<!-- Google Search Console verification -->
<meta name="google-site-verification" content="verification_token">

<!-- Bing Webmaster verification -->
<meta name="msvalidate.01" content="BING_VERIFICATION_CODE">

做个网站！

本站部分内容来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn

上一篇：-文档主体内容

下一篇：<link>-外部资源链接