LBJhui-blog

Appearance

常用的 Meta 元素详解 ​

<meta> 元素标签用于提供有关 HTML 文档的元数据。这些元数据不会直接显示在页面上，但能够被机器（如搜索引擎、浏览器等）识别并用于处理页面。<meta> 标签对 SEO（搜索引擎优化）起着重要作用，同时也能控制页面的许多行为。

<meta> 元素定义的元数据类型包括以下几种：

  • 如果设置了 name 属性，<meta> 元素提供的是文档级别（document-level）的元数据，应用于整个页面。
  • 如果设置了 http-equiv 属性，<meta> 元素则是编译指令，提供的信息与类似命名的 HTTP 头部相同。
  • 如果设置了 charset 属性，<meta> 元素是一个字符集声明，告诉文档使用哪种字符编码。
  • 如果设置了 itemprop 或 property 属性，<meta> 元素提供用户定义的元数据，通常用于富媒体对象或社交媒体分享。

1. charset ​

该属性声明了文档的字符编码。如果存在该属性，则其值必须是字符串 "utf-8" 的不区分 ASCII 大小写的匹配，因为 UTF-8 是 HTML5 文档的唯一有效编码。声明字符编码的 <meta> 元素必须完全位于文档的前 1024 个字节内。

html
<meta charset="utf-8" />

2. name & content ​

通过 name 和 content 属性，可以指定元数据的名称和值。这部分对 SEO 非常有用。

html
<!-- author —— 定义了页面的作者 -->
<meta name="author" content="LBJhui" />
<!-- keywords —— 为搜索引擎提供关键字 -->
<meta name="keywords" content="HTML,CSS,JavaScript" />
<!-- description —— 对网页整体的描述 -->
<meta name="description" content="font-ended study" />
<!-- generator —— 包含生成页面软件的标识符 -->
<meta name="generator" content="Hexo 3.8.0" />
<!-- theme-color —— 定义主体颜色 -->
<meta name="theme-color" content="#222" />

<!-- robots —— 控制搜索引擎爬虫行为（如索引、跟随链接） -->
<meta name="robots" content="index, follow" />
<!-- 允许索引和跟随链接 -->
<!-- 禁止索引和跟随链接 -->
<meta name="robots" content="noindex, nofollow" />

<!-- referrer —— 控制 HTTP 请求中的 Referer 头（隐私保护） -->
<!-- 完全不发送 Referer -->
<meta name="referrer" content="no-referrer" />
<!-- 仅同源发送 Referer -->
<meta name="referrer" content="same-origin" />

<!-- copyright —— 声明页面版权信息 -->
<meta name="copyright" content="© 2023 LBJhui. All rights reserved." />

<!-- application-name —— 定义 Web 应用的名称（适用于 PWA 或桌面应用） -->
<meta name="application-name" content="My Awesome App" />

2.1 viewport ​

viewport 对页面视图相关进行定义。viewport 翻译为中文可以叫做 “视区”，是用户网页的可视区域。手机浏览器通常把页面放在一个虚拟的 “窗口”（viewport）中，这个虚拟的 “窗口” 比屏幕宽，以便用户可以通过平移和缩放来看网页的不同部分。

  • width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
  • height：和 width 相对应，指定高度。
  • initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
  • maximum-scale：允许用户缩放到的最大比例。
  • minimum-scale：允许用户缩放到的最小比例。
  • user-scalable：用户是否可以用手动缩放。
  • shrink-to-fit=no 防止 iOS Safari 自动调整布局。
html
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" />
  • 移动端适配的常见问题：
    • 固定宽度布局可能导致移动端显示不全，建议使用 width=device-width。
    • 禁止缩放（user-scalable=no）可能影响无障碍访问，需谨慎使用。

3. http-equiv & content ​

http-equiv 属性提供了 HTTP 头部信息，用于控制页面的行为。

Provides an HTTP header for the information/value of the content attribute.

3.1 content-security-policy ​

允许页面作者定义当前页面的内容策略。内容策略常用来指定允许的服务器源和脚本端点，这有助于防止跨站点脚本攻击。

防止 XSS 攻击，限制资源加载来源：

html
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://trusted.cdn.com" />

防止点击劫持（Clickjacking）：

html
<!-- 禁止所有嵌套 -->
<meta http-equiv="X-Frame-Options" content="DENY" />
<!-- 仅允许同源嵌套 -->
<meta http-equiv="X-Frame-Options" content="SAMEORIGIN" />

3.2 default-style ​

设置默认 CSS 样式表组的名称。

3.3 content-type ​

声明 MIME 类型和文档的字符编码。如果使用 content-type 属性，与之在同一个 <meta> 元素中使用的 content 属性的值必须是 "text/html; charset=utf-8"。这相当于一个具有指定 charset 属性的 <meta> 元素，并对其在文档中的放置位置有相同的限制。注意：该属性只能用于 MIME 类型为 text/html 的文档，不能用于 MIME 类型为 XML 的文档。

3.4 refresh ​

每 30 秒刷新一次文档。

html
<meta http-equiv="refresh" content="30" />

3.5 X-UA-Compatible ​

告知浏览器以何种版本渲染界面。下面的例子优先使用 IE 最新版本。

html
<meta http-equiv="X-UA-Compatible" content="ie=edge" />

3.6 Cache-Control ​

请求和响应遵循的缓存机制，可以声明缓存的内容、修改过期时间等，可多次声明。

  • no-transform：禁止中间代理（如 CDN、缓存服务器）对内容进行修改（如压缩、转码、格式转换等），确保用户接收到原始服务器内容。
  • no-siteapp：禁止百度进行转码。
html
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 静态资源永久缓存 -->
<meta http-equiv="Cache-Control" content="max-age=31536000" />
<!-- 动态内容校验新鲜度 -->
<meta http-equiv="Cache-Control" content="no-cache" />

3.7 Pragma ​

兼容 HTTP/1.0 的缓存控制（与 Cache-Control 类似）。

html
<meta http-equiv="pragma" content="no-cache" />

3.8 expires ​

设置缓存过期时间（需配合 Cache-Control 使用）。

html
<meta http-equiv="expires" content="Wed, 21 Oct 2025 07:28:00 GMT" />

3.9 set-cookie ​

极少使用，但可定义页面级 Cookie（通常通过 HTTP 头设置）。

html
<meta http-equiv="set-cookie" content="name=value; path=/; expires=Wed, 21 Oct 2025 07:28:00 GMT" />

4. property & content ​

property 属性可以让网页成为一个富媒体对象，同意网页内容被其他网站引用，同时在应用的时候不会只是一个链接，而是会提取相应的信息展现给用户。

html
<!-- 声明页面类型为“网站”。 -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://blog.csdn.net/qq_36081714?spm=1000.2115.3001.5343" />
<!-- 声明站点名称为“LBJhui's blog” -->
<meta property="og:site_name" content="LBJhui's blog" />
<!-- 页面标题 -->
<meta property="og:title" content="My Awesome Page" />
<!-- 页面描述 -->
<meta property="og:description" content="This is a description of my awesome page." />
<!-- 页面图片 -->
<meta property="og:image" content="https://example.com/image.jpg" />

5. itemprop ​

itemprop 用于定义微数据（Microdata），提升 SEO 和富片段展示：

html
<div itemscope itemtype="http://schema.org/Article">
  <meta itemprop="name" content="Article Title" />
  <meta itemprop="author" content="LBJhui" />
  <meta itemprop="datePublished" content="2023-10-01" />
</div>

6. 性能优化标签 ​

html
<!-- dns-prefetch 提前解析域名，加速资源加载 -->
<link rel="dns-prefetch" href="https://fonts.googleapis.com" />

<!-- preconnect 提前建立连接，减少延迟 -->
<link rel="preconnect" href="https://api.example.com" crossorigin />

总结 ​

<meta> 标签在 HTML 文档中扮演着至关重要的角色，它们不仅提供了关于页面的元数据，还控制了页面的许多行为。通过合理使用 <meta> 标签，可以优化页面的 SEO，提升用户体验，并确保页面在不同设备和浏览器上的兼容性。希望本文能帮助你更好地理解和使用 <meta> 标签。

Last updated:

Copyright © 2026- LBJhui