每个网络开发者都曾遇到过这种情况：你正在开始一个新项目，面对着一个名为 index.html的空文件。你努力 回忆，哪些标签应该放在 <head> 中？哪些 meta 标签是最佳实践，哪些是过时的？
最近，我发现自己正处在这种情况中。我的第一反应是从之前的项目中复制头部分，但当我审查代码时，我意识到 有些标签已经过时或根本不需要。于是，我深入研究了 HTML 头标签——哪些是必要的，哪些是可选的，哪些只是代 码的累赘。
如果你时间紧迫，只想看模板：你可以在 GitHub 上找到我的完整起始模板。该仓库包含两个主要文件：
index.html：一个干净、极简的模板，只包含你需要的内容，没有不必要的额外内容。index-commented.html：同一个模板，但带有详细注释，解释如何以及为什么要使用每个标签。
本文本质上是对 index-commented.html 文件中的注释进行深入探讨，为模板中的每一个决策提供更多的背景和 解释。
这个模板代表了我在研究当前最佳实践后形成的观点。它旨在为大多数网络项目提供坚实的基础，同时保持良好的 性能、可访问性和搜索引擎优化。
让我们深入探讨一个结构良好的 HTML 头的关键组成部分。
必须包含的标签
这些标签应该出现在你几乎每一个 HTML 文档中。它们对于正确的渲染、SEO 和可访问性都是至关重要的。
<!DOCTYPE html> 和 lang="en"：设置文档类型和语言
<!DOCTYPE html> <html lang="en"></html>
总是从 HTML 文档的 doctype 声明开始。这告诉浏览器你使用的是哪个版本的 HTML（在这个例子中是 HTML5）， 并有助于确保一致的渲染。<html> 标签上的 lang 属性指定页面的语言——这对于屏幕阅读器、搜索引擎和浏 览器来说至关重要。如果您的内容是其他语言，请相应地更改代码（例如，lang="es" 用于西班牙语）。
<title>：页面标题
<title>Hello world!</title>
每个 HTML 文档都必须有一个标题标签。这个文本出现在浏览器标签页、书签和搜索引擎结果中。让你的标题既描 述性又简洁，理想情况下不超过 60 个字符。一个好标题既能告知用户页面内容，又能包含 SEO 的相关关键词。
<meta name="viewport">：配置视口以适应响应式设计
<meta
name="viewport"
content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
/>
在今天以移动设备为主的世界上，这个 meta 标签是必不可少的。它告诉移动浏览器如何控制页面的尺寸和缩放。 让我们分解一下每个参数的作用：
viewport-fit=cover：确保内容延伸到显示的边缘（对于有缺口的手机尤其重要）width=device-width：将页面的宽度设置为设备屏幕的宽度initial-scale=1.0：设置页面首次加载时的初始缩放级别minimum-scale=1.0：防止用户缩放到太小maximum-scale=5.0：允许用户缩放到最多 5 倍（完全限制这可能会损害可访问性）
没有这个标签，移动设备将以典型的桌面屏幕宽度渲染页面，然后缩放，导致文字太小，难以阅读，并迫使用户进 行缩放和平移。
<meta name="description">、<meta name="keywords">、<meta name="author">：基本的元信息
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
这些 meta 标签提供了关于你页面的重要信息：
description：你页面内容的简洁摘要（理想情况下 150-160 个字符）。这通常出现在搜索结果中，位于你的 标题下方。keywords：你页面内容的相关关键词。虽然现在对 Google 来说不那么重要，但其他搜索引擎和网络爬虫可能 仍然使用这些信息。author：创建页面的个人或组织的姓名。
虽然这些标签不会直接影响页面渲染，但它们对 SEO 和内容分类很有价值。
<link rel="canonical">：避免重复索引
<link rel="canonical" href="" />
这个标签帮助搜索引擎避免当内容可以通过不同 URL 访问时重复索引。例如，如果您的页面可以通过多个 URL 访 问（如 example.com/page 和 example.com/page/index.html），canonical 标签告诉搜索引擎哪个 URL 是 要索引的“官方”版本，防止重复索引，这可能会损害您的搜索排名。
在 href 属性中填入您希望搜索引擎与该内容关联的主要 URL。
CSS 加载策略：关键内联 CSS 与外部样式表
<style>
body {
background: #fefefe;
color: #222;
font-family: 'Roboto', sans-serif;
padding: 1rem;
line-height: 1.8;
}
</style>
<link rel="preload" href="main.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />
<noscript><link rel="stylesheet" href="main.css" /></noscript>
这种 CSS 加载策略通过以下两种方式优化性能：
内联关键 CSS：通过将关键样式直接嵌入 HTML 文档中，您可以避免加载样式表的额外网络请求，这会阻 止渲染。这使得关键样式加载得非常快，并防止内容在样式加载后出现的无样式内容闪现（FOUC）。 非关键 CSS 的异步加载：带有 onload 处理程序的预加载技术允许主样式表加载而不会阻止渲染。这意 味着您的页面可以开始显示，而其余的样式仍在加载中，从而创建更好的用户体验。 noscript标签为禁用 JavaScript 的用户提供了一个回退。
或者，如果您在页面加载时不需要大量的样式，您可以使用更简单的方法：
<link href="main.css" rel="stylesheet" />
这更直接，但可能会减慢初始渲染，因为浏览器必须下载和解析 CSS 才能显示内容。
<script>：脚本加载最佳实践
<script type="module" src="app.js"></script>
对于 JavaScript，type="module" 属性提供了几个优点：
自动延迟脚本加载直到 DOM 准备好 通过 ECMAScript 模块实现更好的代码组织 默认采用严格模式 允许更清晰的依赖管理
对于不依赖于 DOM 元素并且应该尽快运行的脚本，考虑添加 async 属性：
<script type="module" async src="analytics.js"></script>
另外，为离线功能注册服务工作者是一个好习惯：
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js');
});
}
</script>
这个脚本没有 defer 或 async 属性，因此它会尽快加载和执行，使离线功能在页面加载过程的早期可用。服 务工作者在后台独立于您的网页运行，允许它处理网络请求和缓存，即使用户导航离开您的网站。
也许应该包含的标签
这些标签并非每个项目都需要，但在特定情况下可能有价值。根据您的项目需求来包含它们。
<meta charset="utf-8">：字符编码
<meta charset="utf-8" />
这个 meta 标签指定 HTML 文档的字符编码。UTF-8 已经是 HTML5 的默认字符编码，所以在许多情况下这个标签 并不是严格必要的。然而，显式地包含它确保了在所有浏览器中的一致性，并防止潜在的字符渲染问题，特别是对 于特殊字符或非拉丁字母。
<base href="/">：定义基本 URL
<base href="/" />
base 标签指定文档中所有相对 URL 的基本 URL。如果您的所有网站 URL 已经相对于根路径 ("/")，那么您不需 要包含这个标签。它主要在您的网站托管在子目录中，但您希望路径相对于域根，或者在开发带有客户端路由的单 页应用程序时有用。
<meta name="application-name">：应用程序细节
<meta name="application-name" content="" />
如果您的渐进式 Web 应用程序 (PWA) 的名称与标题标签中指定的名称不同，请使用这个 meta 标签。它定义了当 您的网络应用程序安装在设备上或固定在用户的开始菜单或任务栏上时显示的名称。
<meta name="theme-color">：浏览器 UI 主题颜色
<meta name="theme-color" content="#33d" />
这个 meta 标签定义了用户代理在页面周围 UI 元素中使用的颜色，如移动浏览器的地址栏或某些桌面浏览器的标 题栏。选择一个反映您品牌身份的颜色，以创建更一体化的视觉体验。
<meta name="color-scheme">：支持浅色和深色模式
<meta name="color-scheme" content="light dark" />
这个标签通知浏览器您的网站支持浅色模式、深色模式或两者。值 "light dark" 表示两种方案都支持，浅色是 首选。这有助于浏览器渲染表单控件、滚动条和其他 UI 元素的适当颜色方案，从而创建一个尊重系统偏好的更好 的用户体验。
<meta property="og:">：使用 Open Graph 进行社交媒体整合
<meta property="og:title" content="" />
<meta property="og:type" content="website" />
<meta property="og:url" content="" />
<meta property="og:image" content="" />
Open Graph meta 标签优化了您的内容在 Facebook、LinkedIn 和 X（以前的 Twitter）等社交媒体平台上共享时 的显示方式。虽然它们不是基本功能所必需的，但当您的内容被共享时，它们显著提高了内容的外观和参与度。
关键的 Open Graph 标签包括：
og:title：您的页面/内容的标题（可以与您的 HTML 标题不同）og:type：内容的类型（网站、文章、产品等）og:url：您的页面的规范 URLog:image：代表您内容的图像的 URL
如果您网站的内容可能会在社交媒体平台上共享，用适当的内容填充这些标签可以显著提高点击率和参与度。
<link rel="manifest"> 和 <link rel="icon">：PWA 支持和 favicon
<link rel="manifest" href="manifest.json" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
对于渐进式 Web 应用程序，使用清单链接指向一个包含您的应用元数据的 JSON 文件，包括图标。清单应包括您 的应用图标在各种尺寸和设备及上下文中的图标。
对于不是 PWA 的常规网站，使用图标链接定义您的网站的 favicon。虽然从技术上讲是可选的，但 favicon 有助 于品牌识别和用户体验，因此大多数网站都应该包含一个。
<link rel="alternate">：网站的替代内容类型
<link rel="alternate" type="application/rss+xml" href="/feed.xml" />
<link rel="alternate" type="text/markdown" href="/llms.txt" />
这个 link 标签有多个用途：
它帮助 RSS 阅读器和其他 feed 聚合器发现您的网站的 RSS feed。如果您提供 RSS feed（常见于博客、新 闻网站或定期更新的内容集合），请包括它。 它还可以用于指定一个 llms.txt文件作为您的网站的type="text/markdown"替代链接。此文件以易于 大型语言模型扫描您的网站的格式提供您的网站内容。注意：这个想法来自 Giles Thomas。
如果您网站没有这些功能，您可以安全地省略这些标签。
<link rel="preload">、<link rel="preconnect">、<link rel="prefetch">：资源优化
<link
rel="preload"
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
as="style"
onload="this.onload=null;this.rel='stylesheet'"
/>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link rel="prefetch" href="/next-page.html" />
这些 link 标签帮助优化资源加载：
preload：告诉浏览器尽快下载和缓存一个资源。对于渲染过程早期需要的关键资源，如字体或重要图像，这 很有用。preconnect：提前与您稍后将从中获取资源的外部域建立连接。这通过在需要时准备好连接来节省时间。prefetch：建议浏览器未来导航可能需要一个资源。浏览器将在空闲时下载它，使后续页面加载更快。
根据您的性能需求有选择地使用它们。过度使用它们会浪费带宽，所以只关注真正关键的资源。
结论
这个模板为您提供了任何网络项目的坚实起点。当然，这个模板是完全基于观点的，您可能需要的最佳设置可能会 有所不同。如果我在模板中遗漏了一些常见的标签，那可能是因为它们不需要，至少在大多数情况下不需要。
我欢迎您的反馈！如果您认为我遗漏了重要的内容，请在 GitHub 仓库 上打开一个问题或提交一个拉取请求。
此外，如果您想要一个不仅仅包含 index.html 文件的起始模板，您可能想要查看 HTML5 Boilerplate。这是一个很好的资源，可以帮助您快速开始构建渐进式 Web 应用程序。
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。
公安局备案号：
专属顾问
