HTML 头部（head）详解：属性、实例及 SEO 优化

HTML 头部（head）是 HTML 文档中不可或缺的一部分，它包含了关于网页的重要元数据，例如标题、字符集、样式表、脚本等。虽然 head 标签内的内容不会直接显示在页面上，但它对于浏览器的渲染和搜索引擎的理解至关重要。

HTML 头部属性

HTML 头部可以包含以下重要属性：

title： 文档的标题，显示在浏览器标题栏或标签页上。SEO 优化建议： 使用简洁、准确的标题，包含关键词，并控制在 60 个字符以内。
meta： 用于描述文档的元数据，包括字符集、关键词、描述等等。
- charset： 指定文档的字符集，例如 UTF-8。SEO 优化建议： 使用 UTF-8 字符集，支持多种语言。
- keywords： 页面关键词列表，帮助搜索引擎了解页面主题。SEO 优化建议： 使用精准、相关的关键词，并控制在 100 个字符以内。
- description： 网页内容的简短描述，用于搜索结果页面展示。SEO 优化建议： 使用简洁、吸引人的描述，包含关键词，并控制在 160 个字符以内。
link： 用于引入外部资源，如样式表、图标等等。SEO 优化建议： 使用 rel 属性指定链接类型，例如 rel='stylesheet' 用于引入样式表，rel='icon' 用于设置网站图标。
script： 用于引入脚本文件，如 JavaScript。SEO 优化建议： 将 JavaScript 文件放在 body 标签底部，避免阻塞页面渲染。
base： 指定文档中所有相对 URL 的基础 URL。SEO 优化建议： 使用 base 标签统一网站 URL，有利于 SEO 优化。

实例代码

设置文档标题：

<!DOCTYPE html>
<html>
<head>
  <title>HTML 头部详解 - 实例代码</title>
</head>
<body>
  <!-- 文档内容 -->
</body>
</html>

设置文档字符集：

<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8'>
  <title>HTML 头部详解 - 实例代码</title>
</head>
<body>
  <!-- 文档内容 -->
</body>
</html>

引入外部样式表：

<!DOCTYPE html>
<html>
<head>
  <link rel='stylesheet' href='style.css'>
  <title>HTML 头部详解 - 实例代码</title>
</head>
<body>
  <!-- 文档内容 -->
</body>
</html>

引入 JavaScript 文件：

<!DOCTYPE html>
<html>
<head>
  <script src='script.js'></script>
  <title>HTML 头部详解 - 实例代码</title>
</head>
<body>
  <!-- 文档内容 -->
</body>
</html>

总结

合理利用 HTML 头部属性，可以有效优化网页结构和 SEO，提升网站在搜索引擎中的排名和用户体验。记住，每一个细节都可能影响你的网站最终的效果。