FORMA

Head

<head> 存放元数据：字符编码、标题、样式与脚本引用、SEO 与社交分享标签等；内容一般不在页面正文中直接显示（<title> 显示在浏览器标签栏）。HTML 基础见 简介，可见结构见 标签。

<head> 内常见子元素：<title>、<meta>、<link>、<style>、<script>、<noscript>、<base>（少用）。

各标签职责

<title>（必需）

  • 浏览器标签页标题、书签默认名称。
  • 搜索引擎结果中的可点击标题（与 meta description 配合）。

<meta>

提供文档级元信息，常见属性：

写法作用
<meta charset="UTF-8">字符编码；应尽早出现，避免乱码
<meta name="viewport" content="width=device-width, initial-scale=1">移动端布局视口；详见 响应式 viewport
<meta name="description" content="...">搜索结果摘要（不保证原样展示）
<meta name="robots" content="noindex, nofollow">爬虫索引提示
<meta name="theme-color" content="#3367d6">移动端浏览器 UI 主题色
<meta http-equiv="Content-Security-Policy" content="...">内容安全策略（CSP）
property="og:*"Open Graph 社交分享
name="twitter:*"Twitter / X Card

meta name="keywords"：主流搜索引擎已不再依赖该字段排名；可省略，勿堆砌关键词。

其他常见 meta：

写法作用
<meta name="author" content="Jane Doe">标注作者，供部分工具与 CMS 读取
<meta name="generator" content="Nuxt">标注生成该页面的框架/工具，多为自动注入
<meta name="color-scheme" content="light dark">提示浏览器该页面同时支持亮/暗色配色，配合 CSS prefers-color-scheme
<meta name="referrer" content="strict-origin-when-cross-origin">控制跳转外链时携带的 Referrer 信息，兼顾统计与隐私

<link>

关联外部资源，通过 rel 区分关系：

rel用途
stylesheet外部 CSS
icon站点图标（favicon）
canonical规范 URL，避免重复内容
alternate备用资源（如 hreflang 多语言、type="application/rss+xml"）
preload / prefetch / preconnect / dns-prefetch资源提示（见下文）
manifestWeb App Manifest（PWA）

字体预加载须加 crossorigin，与 字体优化 一致。

<style>

文档内嵌 CSS。大型项目更推荐外部样式表，便于缓存。

<script>

加载或内联 JavaScript。

属性行为
（默认，位于 <head>）下载并阻塞 HTML 解析直至执行完毕
defer异步下载，DOM 解析完成后按顺序执行
defer + type="module"ES 模块默认 defer
async下载完成后尽快执行，顺序不保证

实践：非关键脚本用 defer 放 </body> 前或 head 带 defer；第三方统计等可用 async。

<noscript>

在脚本未执行时展示替代内容（如提示启用 JavaScript）；不能替代无障碍设计。

<base>（谨慎）

为页内所有相对 URL 指定基准 URL 与默认 target。每文档最多一个，且应放在 head 靠前；误用会导致链接全部指向错误域名。

推荐最小 head

html
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>页面标题</title>
        <meta name="description" content="一句话描述本页内容" />
        <link rel="stylesheet" href="/assets/main.css" />
        <link rel="icon" href="/favicon.ico" sizes="any" />
        <script src="/assets/app.js" defer></script>
    </head>
    <body></body>
</html>

完整示例（SEO、社交、性能）

html
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>HTML Head 元素示例</title>
    <meta name="description" content="演示 head 中编码、视口、样式、脚本与 Open Graph 的写法。" />
    <link rel="canonical" href="https://www.example.com/demo" />
    <link rel="stylesheet" href="styles.css" />
    <link rel="icon" href="/favicon.ico" />
    <link rel="preload" href="/fonts/ui.woff2" as="font" type="font/woff2" crossorigin />

    <meta property="og:title" content="HTML Head 元素示例" />
    <meta property="og:description" content="演示 head 常用标签。" />
    <meta property="og:image" content="https://www.example.com/og.png" />
    <meta property="og:url" content="https://www.example.com/demo" />
    <meta property="og:type" content="website" />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="theme-color" content="#4285f4" />

    <script src="app.js" defer></script>
</head>

以下项仅面向需兼容旧版 IE 的遗留系统，现代项目可删除：

html
<!-- 已废弃的 IE 文档模式提示 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

资源提示（性能）

html
<link rel="preconnect" href="https://cdn.example.com" crossorigin />
<link rel="dns-prefetch" href="https://cdn.example.com" />
<link rel="preload" href="/critical.css" as="style" />
<link rel="preload" href="/hero.webp" as="image" />
<link rel="modulepreload" href="/chunks/vendor.js" />
<link rel="prefetch" href="/next-page-data.json" />
rel说明
preconnect提前完成 DNS + TCP + TLS
dns-prefetch仅 DNS 解析（代价低于 preconnect）
preload当前导航很快需要的资源
prefetch后续导航可能用到的低优先级资源

安全与 PWA

html
<meta
    http-equiv="Content-Security-Policy"
    content="default-src 'self'; img-src 'self' https:; script-src 'self'"
/>
<link rel="manifest" href="/manifest.webmanifest" />

CSP 宜由服务端响应头统一配置；meta 方式适合静态页演示。

移动端补充

html
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#4285f4" />
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
  • 勿使用 user-scalable=no 或 maximum-scale=1 阻止缩放（违背 WCAG 对放大阅读的要求）。
  • format-detection 可关闭 iOS 对电话号码的自动链接：content="telephone=no"。

SEO 要点（准确预期）

手段说明
唯一、准确的 <title>影响最大之一
meta description可能被用作摘要，非排名直接因素
link rel="canonical"合并重复 URL
hreflang + alternate多语言版本互指
语义 HTML 与可访问标题结构见 标签

meta refresh 跳转不利于 SEO 与可用性，优先使用 HTTP 重定向或正常链接。

多语言站点：hreflang

多语言/多地区站点应在每个语言版本的 head 中互相声明所有语言变体，帮助搜索引擎向用户展示匹配语言的版本：

html
<link rel="alternate" hreflang="zh-CN" href="https://www.example.com/zh/" />
<link rel="alternate" hreflang="en" href="https://www.example.com/en/" />
<link rel="alternate" hreflang="x-default" href="https://www.example.com/" />
  • hreflang 值使用 BCP 47 语言标签（如 zh-CN、en-US）。
  • 每个语言版本页面都要包含完整的一组 hreflang 链接（包括指向自身），互相缺失会导致搜索引擎判定不一致。
  • x-default 用于声明找不到匹配语言时的默认回退页面。

结构化数据（JSON-LD）

除 Open Graph / Twitter Card 外，搜索引擎还支持通过 Schema.org 词汇的 JSON-LD 描述页面内容，可能获得富媒体搜索结果（如文章卡片、面包屑、FAQ）：

html
<script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Article",
        "headline": "HTML Head 元素完全指南",
        "datePublished": "2026-07-23",
        "author": { "@type": "Person", "name": "Jane Doe" }
    }
</script>
  • 放在 <head> 或 <body> 均可，通常放在 <head> 便于统一管理。
  • 内容需与页面实际展示一致，虚假标注可能被搜索引擎处罚。
  • 可用 Rich Results Test 校验是否能被正确解析。

总结

  • charset 与 viewport 优先；标题与描述服务用户与搜索摘要。
  • 脚本默认阻塞解析：用 defer / async 控制加载。
  • preload / preconnect 用于关键路径；prefetch 用于下一页。
  • 社交分享用 Open Graph / Twitter Card；关键词 meta 可省略。
  • 多语言站点用 hreflang 互相声明；结构化数据用 JSON-LD 争取富媒体搜索结果。

参考文献

以下链接在编写时均可正常访问：

资料说明
MDN：<head>head 元素
MDN：<meta>meta 属性
MDN：<link>rel 与资源提示
MDN：script 加载策略defer、async、module
MDN：Viewport meta视口
MDN：rel=preload预加载
Open Graph Protocolog:* 元数据
Google Search Central：元描述description 说明（英文）

相关文章

Series

html

1 / 3

简介