PHP小码农

Appearance

meta 其他属性 ​

除了字符编码、视口、描述和关键词之外，<meta> 标签还有许多其他重要属性，包括 http-equiv（模拟 HTTP 响应头）、name（各种命名元数据）和 property（Open Graph 等第三方协议）。

前置知识

阅读本节前，建议先了解：meta 描述与关键词

基础概念 ​

meta 标签的三种核心用法 ​

<meta> 标签通过不同的属性组合实现三种功能：

属性组合用途示例
charset声明字符编码<meta charset="UTF-8">
name + content定义文档元数据<meta name="author" content="张三">
http-equiv + content模拟 HTTP 响应头<meta http-equiv="refresh" content="5">
property + content定义第三方协议元数据<meta property="og:title" content="标题">

语法 ​

http-equiv 属性 ​

http-equiv 属性让 <meta> 标签模拟 HTTP 响应头的行为：

html
<meta http-equiv="属性名" content="属性值">

name 属性 ​

name 属性用于定义各种命名的元数据：

html
<meta name="名称" content="值">

property 属性 ​

property 属性用于 Open Graph、Twitter Card 等第三方协议：

html
<meta property="属性名" content="值">

详细说明 ​

http-equiv 详解 ​

refresh（页面刷新/跳转） ​

html
<!-- 5 秒后自动刷新当前页面 -->
<meta http-equiv="refresh" content="5">

<!-- 3 秒后自动跳转到指定 URL -->
<meta http-equiv="refresh" content="3;url=https://example.com/">
参数说明
content="N"N 秒后刷新当前页面
content="N;url=URL"N 秒后跳转到指定 URL

不推荐使用 refresh 做跳转

使用 http-equiv="refresh" 进行页面跳转有以下问题：

  1. 用户无法通过"后退"按钮回到上一页（会立即再次跳转）
  2. 搜索引擎可能无法正确跟踪跳转
  3. 对屏幕阅读器不友好

推荐使用 HTTP 301/302 重定向或 JavaScript 跳转代替。

X-UA-Compatible（IE 兼容模式） ​

html
<!-- 指定 IE 使用最新的渲染引擎 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- 指定 IE 使用特定文档模式（不推荐） -->
<!-- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> -->
content 值说明
IE=edge使用 IE 的最高可用模式
IE=11使用 IE11 标准模式
IE=EmulateIE7模拟 IE7 怪异模式
chrome=1如果安装了 Chrome Frame 插件则使用 Chrome

注意

X-UA-Compatible 主要用于旧版 Internet Explorer（IE11 及以下）。由于 IE 已于 2022 年 6 月停止支持，这个标签在现代 Web 开发中的重要性已大大降低。但为了兼容仍使用 IE 的企业用户，建议保留。

Content-Security-Policy（内容安全策略） ​

html
<!-- 设置内容安全策略（不推荐在 meta 中设置，推荐 HTTP 头） -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

建议

CSP 优先通过 HTTP 响应头设置，<meta> 标签只作为备用方案。

Content-Type（旧式编码声明） ​

html
<!-- HTML4 时代的编码声明方式（不推荐） -->
<!-- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> -->

<!-- HTML5 推荐写法 -->
<meta charset="UTF-8">

name 详解 ​

author（作者） ​

html
<meta name="author" content="张三">
<meta name="author" content="前端教程团队 (contact@example.com)">

搜索引擎不使用 author 作为排名因素，但它可以：

  • 帮助用户识别内容创作者
  • 配合 Google 的作者信息功能
  • 作为网站的内部管理信息

robots（搜索引擎爬虫指令） ​

html
<!-- 允许索引和跟踪链接（默认值） -->
<meta name="robots" content="index, follow">

<!-- 不索引页面，但跟踪链接 -->
<meta name="robots" content="noindex, follow">

<!-- 索引页面，但不跟踪链接 -->
<meta name="robots" content="index, nofollow">

<!-- 不索引也不跟踪链接 -->
<meta name="robots" content="noindex, nofollow">

<!-- 不显示搜索结果中的摘要 -->
<meta name="robots" content="index, follow, nosnippet">

<!-- 不在搜索结果中缓存页面 -->
<meta name="robots" content="index, follow, noarchive">

<!-- 指定特定搜索引擎 -->
<meta name="googlebot" content="noindex">
<meta name="baiduspider" content="noindex, nofollow">
指令说明
index允许索引页面（默认）
noindex不允许索引页面
follow允许跟踪页面上的链接（默认）
nofollow不跟踪页面上的链接
noarchive不在搜索结果中提供缓存链接
nosnippet不在搜索结果中显示文本摘要
noimageindex不索引页面上的图片
nocache与 noarchive 类似

关于 robots 的注意事项

  • robots 指令只是一个"建议"，不遵守的爬虫可能忽略它
  • 对于敏感页面，应使用服务器级别的访问控制（如认证），而非依赖 robots
  • 如果有 robots.txt 文件，它的优先级高于 meta robots

theme-color（主题色） ​

html
<!-- 设置浏览器地址栏和标题栏的主题色 -->
<meta name="theme-color" content="#0066cc">

<!-- 针对 Chrome on Android -->
<meta name="theme-color" content="#0066cc" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#1a1a2e" media="(prefers-color-scheme: dark)">

theme-color 的效果：

  • Android Chrome：地址栏颜色
  • iOS Safari：状态栏颜色（需要配合 apple-mobile-web-app-capable）
  • Windows 任务栏：网站图标高亮颜色

generator（生成工具） ​

html
<!-- 标记页面使用的生成工具 -->
<meta name="generator" content="WordPress 6.0">
<meta name="generator" content="VuePress 1.9.0">
<meta name="generator" content="Hugo 0.100.0">

安全提示

暴露使用的 CMS 或框架版本可能成为安全漏洞的信息来源。在生产环境中，可以考虑移除 generator 标签。

其他有用 name 值 ​

html
<!-- 视口设置（前面已详细讲解） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- 渲染优化 -->
<meta name="renderer" content="webkit">              <!-- 旧版 360 浏览器使用 Webkit 内核 -->

<!-- 移动端 Web 应用 -->
<meta name="apple-mobile-web-app-capable" content="yes">           <!-- 全屏模式 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="我的应用">

<!-- 格式检测 -->
<meta name="format-detection" content="telephone=no">    <!-- 禁止自动检测电话号码 -->
<meta name="format-detection" content="email=no">        <!-- 禁止自动检测邮箱地址 -->
<meta name="format-detection" content="address=no">      <!-- 禁止自动检测地址 -->

<!-- 日期 -->
<meta name="date" content="2024-01-15">
<meta name="last-modified" content="2024-01-15T10:30:00+08:00">

property 详解（Open Graph） ​

Open Graph（OG）协议由 Facebook 提出，现已成为社交媒体分享的事实标准。

核心 OG 标签 ​

html
<!-- 必需的 OG 标签 -->
<meta property="og:title" content="页面标题">
<meta property="og:description" content="页面描述">
<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">
<meta property="og:site_name" content="网站名称">

<!-- 可选的 OG 标签 -->
<meta property="og:locale" content="zh_CN">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="图片描述">

og:type 常用值 ​

type 值说明额外可用属性
website网站（默认）-
article文章article:published_time、article:author、article:tag
profile个人主页profile:first_name、profile:last_name
book书籍book:author、book:isbn
music.song音乐music:duration、music:album
video.movie电影video:director、video:duration

文章类型的完整 OG 标签 ​

html
<meta property="og:type" content="article">
<meta property="og:title" content="CSS Grid 完全指南">
<meta property="og:description" content="系统学习 CSS Grid 布局的所有知识。">
<meta property="og:image" content="https://example.com/images/grid-tutorial.jpg">
<meta property="og:url" content="https://example.com/css-grid-guide">
<meta property="og:site_name" content="前端学习指南">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2024-01-15T08:00:00+08:00">
<meta property="article:modified_time" content="2024-01-20T14:30:00+08:00">
<meta property="article:author" content="张三">
<meta property="article:tag" content="CSS">
<meta property="article:tag" content="Grid">
<meta property="article:tag" content="布局">
<meta property="article:section" content="前端开发">

Twitter Card 标签 ​

html
<!-- 卡片类型 -->
<meta name="twitter:card" content="summary">              <!-- 小卡片 -->
<meta name="twitter:card" content="summary_large_image">  <!-- 大图卡片 -->

<!-- 卡片内容 -->
<meta name="twitter:site" content="@your_twitter">
<meta name="twitter:creator" content="@author_twitter">
<meta name="twitter:title" content="推文标题">
<meta name="twitter:description" content="推文描述">
<meta name="twitter:image" content="https://example.com/twitter-image.jpg">

实战示例 ​

完整的 meta 标签配置 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!-- 字符编码 -->
  <meta charset="UTF-8">

  <!-- 视口设置 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- IE 兼容（兼容旧版 IE） -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <!-- 页面信息 -->
  <title>CSS Grid 完全指南 - 前端学习指南</title>
  <meta name="description" content="系统学习 CSS Grid 布局的所有知识，从基础概念到高级技巧。">
  <meta name="author" content="前端教程团队">
  <meta name="keywords" content="CSS, Grid, 布局, 教程">
  <meta name="robots" content="index, follow">
  <meta name="theme-color" content="#0066cc">
  <meta name="date" content="2024-01-15">
  <meta name="last-modified" content="2024-01-20T14:30:00+08:00">

  <!-- 移动端配置 -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="apple-mobile-web-app-title" content="前端指南">
  <meta name="format-detection" content="telephone=no">

  <!-- Open Graph（Facebook、LinkedIn 等） -->
  <meta property="og:type" content="article">
  <meta property="og:title" content="CSS Grid 完全指南">
  <meta property="og:description" content="系统学习 CSS Grid 布局的所有知识。">
  <meta property="og:image" content="https://example.com/images/og-grid.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:url" content="https://example.com/css-grid-guide">
  <meta property="og:site_name" content="前端学习指南">
  <meta property="og:locale" content="zh_CN">
  <meta property="article:published_time" content="2024-01-15T08:00:00+08:00">
  <meta property="article:tag" content="CSS">
  <meta property="article:tag" content="Grid">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@frontend_guide">
  <meta name="twitter:title" content="CSS Grid 完全指南">
  <meta name="twitter:description" content="系统学习 CSS Grid 布局的所有知识。">
  <meta name="twitter:image" content="https://example.com/images/twitter-grid.jpg">

  <!-- 外部资源 -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <article>
    <h1>CSS Grid 完全指南</h1>
    <p>文章内容...</p>
  </article>
</body>
</html>

自动页面刷新倒计时 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面跳转倒计时</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      margin: 0;
      background: #f5f5f5;
    }
    .countdown {
      font-size: 72px;
      font-weight: bold;
      color: #0066cc;
      margin: 20px 0;
    }
    .message {
      font-size: 18px;
      color: #666;
    }
    a {
      color: #0066cc;
    }
  </style>
</head>
<body>
  <h1>页面即将跳转</h1>
  <p class="message">将在 <span id="seconds">10</span> 秒后跳转到首页</p>
  <div class="countdown" id="countdown">10</div>
  <p><a href="/" id="manual-link">立即跳转</a> | <a href="#" id="cancel-link">取消跳转</a></p>

  <script>
    var seconds = 10;
    var countdownEl = document.getElementById('countdown');
    var secondsEl = document.getElementById('seconds');
    var timer = null;

    // 推荐使用 JavaScript 跳转而非 meta refresh
    function startCountdown() {
      timer = setInterval(function() {
        seconds--;
        countdownEl.textContent = seconds;
        secondsEl.textContent = seconds;
        if (seconds <= 0) {
          clearInterval(timer);
          window.location.href = '/';
        }
      }, 1000);
    }

    startCountdown();

    // 取消跳转
    document.getElementById('cancel-link').addEventListener('click', function(e) {
      e.preventDefault();
      clearInterval(timer);
      document.getElementById('countdown').textContent = '已取消';
      document.getElementById('seconds').textContent = '已取消';
    });
  </script>
</body>
</html>

注意事项 ​

1. http-equiv 不如 HTTP 响应头 ​

http-equiv 模拟 HTTP 响应头的效果，但实际优先级低于真正的 HTTP 响应头。对于 CSP、CORS 等安全相关的配置，应使用服务器端的 HTTP 响应头。

2. OG 图片的尺寸要求 ​

平台推荐尺寸最小尺寸
Facebook1200 x 630 px600 x 315 px
Twitter1200 x 628 px300 x 157 px
LinkedIn1200 x 627 px200 x 200 px

3. 避免暴露敏感信息 ​

html
<!-- 不推荐：暴露具体版本号 -->
<meta name="generator" content="WordPress 5.2.3">

<!-- 不推荐：暴露内部工具名 -->
<meta name="generator" content="内部管理系统 v1.0">

最佳实践 ​

1. 为社交分享配置完整的 OG 标签 ​

每个页面都应配置 og:title、og:description、og:image 和 og:url。

2. 使用 theme-color 提升移动端体验 ​

html
<meta name="theme-color" content="#0066cc">

3. 设置合适的 robots 指令 ​

html
<!-- 公开页面（默认） -->
<meta name="robots" content="index, follow">

<!-- 测试/暂存页面 -->
<meta name="robots" content="noindex, nofollow">

<!-- 搜索结果页等动态页面 -->
<meta name="robots" content="noindex, follow">

4. 使用社交媒体分享调试工具 ​

下一节

继续学习：base 基准 URL

参考链接 ​