在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

thedaviddias/Front-End-Checklist

菜单

HTML 和文档头部

相关源文件

目的与范围

本文档根据前端清单，详细介绍了 HTML 文档的 <head> 部分应包含的元素和元数据。文档头部包含影响 SEO、浏览器渲染、设备兼容性和社交媒体分享功能的关键元数据。正确实现这些元素可确保在不同平台和浏览器上的最佳功能和性能。

有关 HTML 主体结构和语义元素的信息，请参阅 HTML。有关性能优化策略，请参阅 性能优化。

文档头部结构

HTML 文档头部是元数据（关于文档的数据）的容器，这些元数据不会显示在页面上，但会向浏览器、搜索引擎和其他 Web 服务提供关键信息。

头部组件概述

来源： README.md47-194

优先级分类系统

前端清单使用三个优先级级别来指示每个元素的重要性

来源： README.md35-39

  • 高优先级：无论如何都不能省略的元素。删除这些元素可能会导致页面功能故障或严重的无障碍/SEO 问题。
  • 中优先级：强烈推荐的元素，在特定情况下可能可以省略。省略可能会对性能或 SEO 产生负面影响。
  • 低优先级：推荐的元素，可根据项目需求在特定情况下省略。

必备元标签

文档类型声明

Doctype 声明必须是 HTML5，并且应放置在所有 HTML 页面的顶部。这是一个高优先级要求。

来源： README.md56-62

字符编码

charset 元标签应使用 UTF-8 编码正确声明。这应该是 head 部分的第一个元素之一。

来源： README.md69-76

视口配置

视口元标签对于响应式网页设计至关重要，应正确配置。这是一个高优先级要求。

来源： README.md78-85

标题

每页都必须有一个唯一的标题。出于 SEO 目的，Google 会计算标题的像素宽度，通常在 472 到 482 像素之间截断，约合 55 个字符。

来源： README.md87-95

元描述

每页都应提供一个不超过 150 个字符的唯一元描述。

来源： README.md97-108

元标签类别和关系

下图展示了文档头部中不同元素与不同目的之间的关系

来源： README.md47-294

优先级总结

下表根据前端清单总结了文档头部中每个元素的优先级

元素优先级目的
文档类型高定义 HTML 版本
字符集高设置字符编码
视口高控制页面缩放以实现响应式设计
标题高浏览器标签和搜索结果中显示的页面标题
元描述高对搜索结果的简要页面摘要
Favicons中等浏览器标签和书签中的视觉标识符
Apple Web App 元信息低优化在 Apple 设备上的显示
Windows 磁贴低优化在 Windows 设备上的显示
Canonical 链接中等防止重复内容问题
语言属性高指定页面语言
方向属性中等指定文本方向（LTR/RTL）
替代语言低指示可用的翻译
X-Default低指定默认语言页面
Facebook Open Graph低优化在 Facebook 上的分享
Twitter Card低优化在 Twitter 上的分享
关键 CSS中等提高初始页面渲染速度

来源： README.md35-39 README.md47-294

代码中的 HTML Head 结构

以下图表说明了各种 Head 元素在实际 HTML 代码中的显示方式

来源： README.md47-245

Favicon 实现

Favicon 应正确实现，以便在不同的浏览器和平台上都能正常显示。现在推荐使用 PNG 格式而非传统的 .ico 格式。

为了实现全面的 Favicon 实现，可能需要各种尺寸来支持不同的平台和设备。RealFaviconGenerator 等工具可以帮助创建一套完整的 Favicon 文件。

来源： README.md110-131

平台专用元标签

Apple Web App 元信息

为了在 Apple 设备上获得最佳显示效果，请包含以下元标签

来源： README.md132-149

Windows 磁贴

为了在 Windows 设备上正常显示，请包含 Microsoft Tile 配置

并附带相应的 browserconfig.xml 文件

来源： README.md151-178

为避免重复内容问题，请使用 canonical 链接元素

这有助于搜索引擎了解，当多个页面具有相似或相同的内​​容时，哪个 URL 是主要版本。

来源： README.md180-192

HTML 语言和方向属性

语言属性

使用 lang 属性指定页面的主要语言

来源： README.md196-201

方向属性

对于从右到左阅读的语言（如阿拉伯语或希伯来语），请指定方向

来源： README.md203-212

替代语言

对于多语言网站，请指定替代语言版本

来源： README.md214-221

X-Default 语言

适用于国际登陆页面

来源： README.md223-229

条件注释

为了支持旧版本的 Internet Explorer，可以使用条件注释。但是，这通常只对遗留项目是必需的，因为现代开发通常使用特性检测和渐进增强。

来源： README.md231-234

RSS 源

如果您的网站是博客或定期发布文章，则应在 head 部分包含 RSS feed 链接

这使用户能够通过 RSS 阅读器订阅内容更新。

来源： README.md236

社交媒体元数据

Facebook Open Graph

包含 Open Graph 元标签，以便在 Facebook 和使用 OG 协议的其他平台上更好地分享。图片尺寸至少应为 600 x 315 像素，建议使用 1200 x 630 像素以获得最佳显示效果。

通过 og:image:width 和 og:image:height 指定图片尺寸，可让爬虫立即渲染图片，而无需异步下载和处理。

来源： README.md249-280

Twitter Card

为最佳的 Twitter 分享效果

来源： README.md282-298

文档头部 CSS

CSS 关键路径

为了获得更好的性能，请在文档头部内联关键 CSS

这有助于呈现页面可见部分（“折叠以上”内容），而无需等待外部 CSS 文件加载。

来源： README.md238-242

CSS 加载顺序

确保所有 CSS 文件在头部加载，早于任何 JavaScript 文件（异步加载的 JS 除外）。

来源： README.md244-245

头部元素实现流程

来源： README.md47-245

清单中的优先级指示器

前端清单使用视觉指示器来表示优先级级别。这些指示器是作为变量在 markdown 中引用的 SVG 图像实现的。

来源： README.md35-39 README.md851-853

最佳实践和建议

  1. 保持头部部分尽可能轻量
  2. 优先包含必需的 meta 标签（doctype、charset、viewport）
  3. 通过适当的 viewport 设置确保移动设备兼容性
  4. 使用合适的 meta 标签优化社交分享
  5. 使用工具生成和验证 favicons 和社交媒体图片
  6. 在不同浏览器和平台上进行测试
  7. 遵循前端清单中的优先级指南
  8. 以逻辑顺序放置 meta 标签，charset 和 viewport 优先
  9. 仅包含与您的项目特定要求相关的元数据

来源： README.md35-295