HTML head 元素详解

一、从一个问题开始

当你把网站链接分享到社交媒体时，有没有见过有些链接显示漂亮的卡片（有图片、标题、描述），而有些只是一个干巴巴的 URL？决定这个差异的，正是 head 区域内的各种元数据标签。

<head> 是文档的"头部"，包含的内容不会直接显示在页面上，但它们控制着浏览器如何解析文档、搜索引擎如何理解内容、社交平台如何展示链接。这是一个常被低估的区域——很多开发者把注意力放在 body 内的可见内容上，却忽略了这个幕后关键地带。

二、title 元素的多重职责

2.1 为什么 title 既是"标签页名称"又是"SEO 之王"

<title> 是 HTML 文档中最重要的元素之一，但它经常被随手写一个敷衍的值。让我解释为什么这个习惯需要改变：

<head>
  <!-- ❌ 敷衍的 title -->
  <title>首页</title>

  <!-- ✅ 规范的 title -->
  <title>前端性能优化完全指南 | 现代 Web 开发实践</title>
</head>

在浏览器标签页上，title 是那个显示在tab上的文字。在搜索结果页面上，title 是用户看到的那条蓝色可点击链接。在社交分享时，title 是卡片上最大最显眼的文字。在书签收藏时，title 是收藏夹里显示的名称。

同一个元素，同时服务于五个不同的场景——浏览器 UI、搜索引擎、社交平台、书签系统、以及语义规范。这就是为什么 title 的写法值得认真对待。

2.2 title 的 SEO 最佳实践

根据 Google 的搜索结果展示规范：

title 的理想长度是 50-60 个字符（中文约 25-30 个汉字）
超过的部分会被截断显示为"..."
重要内容放在前面，因为搜索引擎对前面的文字权重更高
用竖线 | 或连字符 - 分隔主标题和站点名是常见做法
每个页面应该有独特的 title，不要全站共用同一个

<!-- 推荐：品牌名放在后面，核心关键词放在前面 -->
<title>CSS Grid 布局完全指南 | 前端开发文档</title>

<!-- 推荐：带有明确面包屑含义 -->
<title>产品详情 - 电子产品 - 网上商城</title>

<!-- 不推荐：全站所有页面用同一个 title -->
<title>我的网站</title>

三、link rel=icon 和 favicon 的多格式支持

3.1 现代 favicon 格式

favicon 经历了多代技术演进，当前最完善的方案需要提供多种格式：

<head>
  <!-- PNG favicon（现代浏览器推荐）-->
  <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
  <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">

  <!-- SVG favicon（矢量，任意尺寸）-->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">

  <!-- Apple Touch Icon（iOS 主屏幕）-->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <!-- Windows 磁贴 -->
  <meta name="msapplication-square70x70logo" content="/tiny.png">
  <meta name="msapplication-square150x150logo" content="/square.png">
  <meta name="msapplication-wide310x150logo" content="/wide.png">
  <meta name="msapplication-square310x310logo" content="/large.png">
</head>

3.2 为什么 PNG 格式现在更受推荐

传统的 .ico 文件可以包含多个尺寸，但它是微软设计的专有格式。PNG 是开放的 Web 标准文件格式，所有现代浏览器都原生支持。使用 PNG favicon 的优势：

更小的文件体积（对于简单图标）
更高的色彩深度和透明度支持
与现代图片工作流更易整合
Safari 曾经强制要求 .ico，但现在也支持 PNG

3.3 SVG favicon 的未来

SVG favicon 理论上可以用一个文件适配所有尺寸，但浏览器支持还不完全一致。MDN 的建议是：提供至少一个 PNG 格式和一个 ICO 格式作为后备。当前最稳妥的做法是同时提供 SVG（主）和 PNG（后备）。

四、Open Graph 和 Twitter Card

4.1 Open Graph 的完整配置

Open Graph 协议最初由 Facebook 在 2010 年提出，现在已成为社交分享的事实标准：

<head>
  <!-- 基础属性 -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://example.com/page">
  <meta property="og:title" content="页面标题">
  <meta property="og:description" content="页面描述，建议 150-200 字符">
  <meta property="og:image" content="https://example.com/image.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="图片描述（可访问性）">
  <meta property="og:locale" content="zh_CN">
  <meta property="og:site_name" content="网站名称">

  <!-- 视频（如果页面包含视频）-->
  <meta property="og:video" content="https://example.com/video.mp4">
  <meta property="og:video:type" content="video/mp4">

  <!-- 音频（如果页面包含音频）-->
  <meta property="og:audio" content="https://example.com/audio.mp3">
</head>

4.2 og:type 的常用值

og:type 告诉社交平台页面的内容类型，不同类型会触发不同的展示模板：

<!-- 网站首页 -->
<meta property="og:type" content="website">

<!-- 文章或博客帖子 -->
<meta property="og:type" content="article">
<meta property="article:published_time" content="2026-04-08T00:00:00Z">
<meta property="article:author" content="https://example.com/author/jane">
<meta property="article:tag" content="前端开发">

<!-- 产品页面 -->
<meta property="og:type" content="product">
<meta property="product:price:amount" content="99.99">
<meta property="product:price:currency" content="CNY">

<!-- 音乐 -->
<meta property="og:type" content="music">
<meta property="music:duration" content="180">

4.3 Twitter Card 的配置

Twitter 有自己的 Card 标签系统，但与 Open Graph 有很好的兼容性——你可以用 Twitter 特定的 meta 覆盖 OG 值：

<head>
  <!-- Twitter Card 必须的 -->
  <meta name="twitter:card" content="summary_large_image">

  <!-- 可选：Twitter @username -->
  <meta name="twitter:site" content="@twitterhandle">
  <meta name="twitter:creator" content="@authorhandle">

  <!-- 如果与 OG 不同，才需要单独指定 -->
  <meta name="twitter:title" content="Twitter 标题">
  <meta name="twitter:description" content="Twitter 描述">
  <meta name="twitter:image" content="https://example.com/twitter-image.jpg">
  <meta name="twitter:image:alt" content="图片描述">
</head>

Twitter Card 有四种类型：summary、summary_large_image、app、player。大多数内容网站使用 summary_large_image 类型，它展示大图和较长的描述文字。

五、canonical URL 与 SEO

5.1 为什么需要 canonical

同一个页面可能有多个 URL 访问：

https://example.com/page
https://example.com/page/
https://example.com/page?utm_source=newsletter
https://www.example.com/page (非 HTTPS)
https://http://example.com/page (非 HTTPS)

从搜索引擎的角度，这些都是"同一内容"的不同 URL。如果没有 canonical 声明，搜索引擎可能会把它们当作重复内容，分散排名权重，甚至被误判为内容抄袭。

5.2 canonical 标签的用法

<head>
  <!-- 告诉搜索引擎这是规范版本，其他 URL 都是重复 -->
  <link rel="canonical" href="https://example.com/page">

  <!-- 移动端页面指向桌面端规范页 -->
  <link rel="canonical" href="https://example.com/page">

  <!-- 分页场景：第二页指向第一页作为规范 -->
  <link rel="canonical" href="https://example.com/articles">

  <!-- AMP 页面指向普通页面 -->
  <link rel="canonical" href="https://example.com/article">
</head>

canonical 是一个 hint（提示），不是强制命令。搜索引擎会参考它，但可能会选择忽略。不过在实际实践中，主流搜索引擎对 canonical 的支持是相当可靠的。

5.3 hreflang 与国际化

如果网站有多个语言版本，hreflang 是告诉搜索引擎每个 URL 对应哪种语言的关键：

<head>
  <!-- 当前页面 -->
  <link rel="alternate" hreflang="zh-CN" href="https://example.cn/page">
  <link rel="alternate" hreflang="en-US" href="https://example.com/page">
  <link rel="alternate" hreflang="ja-JP" href="https://example.jp/page">

  <!-- 必须包含 self-referential 版本 -->
  <link rel="alternate" hreflang="zh-CN" href="https://example.cn/page">

  <!-- x-default：当语言不匹配时显示的默认版本 -->
  <link rel="alternate" hreflang="x-default" href="https://example.com/page">
</head>

六、JSON-LD 结构化数据

6.1 什么是结构化数据

结构化数据是在网页中嵌入机器可读的词汇表标注，让搜索引擎更好地理解页面内容。Google 支持的结构化数据格式有三种：JSON-LD（推荐）、Microdata、RDFa。JSON-LD 是当前推荐的方式，因为它与 HTML 结构解耦，更易于维护。

<head>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "深入理解 HTML head 元素",
    "image": "https://example.com/og-image.jpg",
    "author": {
      "@type": "Person",
      "name": "张三"
    },
    "publisher": {
      "@type": "Organization",
      "name": "前端大师",
      "logo": {
        "@type": "ImageObject",
        "url": "https://example.com/logo.png"
      }
    },
    "datePublished": "2026-04-08",
    "dateModified": "2026-04-08"
  }
  </script>
</head>

6.2 常见结构化数据类型

<!-- 面包屑导航 -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "首页",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "文章",
      "item": "https://example.com/articles"
    }
  ]
}
</script>

<!-- 产品 -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "无线蓝牙耳机",
  "image": "https://example.com/headphones.jpg",
  "description": "高品质降噪耳机",
  "brand": {
    "@type": "Brand",
    "name": "AudioPro"
  },
  "offers": {
    "@type": "Offer",
    "price": "299.00",
    "priceCurrency": "CNY",
    "availability": "https://schema.org/InStock"
  }
}
</script>

<!-- FAQ -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "什么是 canonical URL？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "canonical URL 是告诉搜索引擎哪个 URL 是页面规范版本的标签。"
      }
    },
    {
      "@type": "Question",
      "name": "JSON-LD 是什么？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "JSON-LD 是一种结构化数据格式，用于在网页中嵌入机器可读的语义标注。"
      }
    }
  ]
}
</script>

6.3 结构化数据的验证

Google 提供了 Rich Results Test 工具，可以直接输入 URL 或粘贴 HTML 代码来验证结构化数据是否正确。结构化数据错误不会导致惩罚，但正确实现可以让页面在搜索结果中获得 Rich Snippet 展示，大幅提升点击率。

七、其他重要的 head 元素

7.1 主题色和 manifest

<!-- Android Chrome 主题色 -->
<meta name="theme-color" content="#4A90E2">

<!-- Web App Manifest（渐进式 Web App）-->
<link rel="manifest" href="/manifest.json">

7.2 移动端优化

<!-- iOS Safari：将网站添加到主屏幕后隐藏浏览器 UI -->
<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">

7.3 搜索引擎爬虫控制

<!-- 禁止抓取（但不一定会阻止索引）-->
<meta name="robots" content="noindex, nofollow">

<!-- 仅禁止特定搜索引擎 -->
<meta name="googlebot" content="noindex, nofollow">

<!-- 不追踪链接（不传递权重）-->
<meta name="robots" content="nofollow">

八、面试高频问题

Q: DOCTYPE html 和 HTML5 是什么关系？

回答要点：DOCTYPE 声明的目的是触发标准渲染模式。<!DOCTYPE html> 是 HTML5 的 DOCTYPE 声明，是有史以来最简单的 DOCTYPE。之前的 HTML 4.01 和 XHTML 1.0 需要引用 DTD（Document Type Definition），而 HTML5 不再基于 SGML，不需要 DTD。写 <!DOCTYPE html> 就是告诉浏览器以现代标准模式渲染。

Q: meta robots 和 robots.txt 的区别？

回答要点：robots.txt 是爬虫访问控制协议（在爬虫请求 robots.txt 时生效），meta robots 是页面内的声明。两者可以配合使用，但 meta robots 更直接——它就在 HTML 文档里，爬虫无论如何都会解析到。

Q: 为什么 favicon 放在不同位置会有不同的显示效果？

回答要点：不同位置对图片格式和尺寸有不同要求。浏览器标签页通常显示 16x16 或 32x32 的图标，书签栏使用 16x16，iOS 主屏幕可能需要 180x180，Windows 磁贴需要各种尺寸。这也是为什么现代 favicon 方案通常提供多个尺寸的文件。