推一波《前端开发清单》收益大众

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 2404 天前的主题，其中的信息可能已经有所发展或是发生改变。

前端开发清单

由于字数限制，部分内容未展示，请原文地址

前端开发清单是一份在站点 /HTML 页面发布到生产环境之前需要测试的所有元素的详尽列表。

![Front ‑ End_Checklist followed]( https://img.shields.io/badge/Front ‑ End_Checklist-followed-brightgreen.svg)

它基于前端开发人员多年的经验沉淀，以及其他优秀的开源清单。

How to use?

前端开发清单中的所列出的点是大部分前端项目所必需的关注的, 但某些元素可以省略或者并不是这么重要 (在管理 Web 应用程序的情况下，你可能并不需要 RSS 订阅源)。我们选择使用一下 3 级区分:

推荐，但在某些特定情况下可以省略。
强烈推荐，但是可能在某些特殊情况下能被省略。某些元素，如果省略将会对性能或 SEO 方面产生不良影响。
不能被任何理由忽略。忽略可能会导致你的页面部分功能障碍或者产生可访问性以及 SEO 等问题。测试优先级需要首先考虑这些元素。

某些资源拥有特定的标识符，帮助你去理解清单上不同类型的内容或帮助。

📖: 文档或文章
🛠: 在线工具 /测试工具
📹: 媒体或视频内容

Head

注意: 你能在HEAD 列表中找到 HTML 文档<head>标签内所有可配置的属性。

Meta 标签

[ ] Doctype: Doctype 标签声明 HTML5，需要写在 HTML 文件的顶部。

<!-- Doctype HTML5 -->
<!doctype html>

📖 Determining the character encoding - HTML5 W3C

接下来三个 meta 标签 (Charset, X-UA Compatible, Viewport) 需要首先在 head 中声明

[ ] Charset （字符类型）: 正确声明Charset meta (UTF-8)。

<!-- 设置文档的字符编码 -->
<meta charset="utf-8">

[ ] X-UA-Compatible （ IE 相关设定）: 正确声明X-UA-Compatible meta。

<!-- 指示 Internet Explorer 使用其最新的渲染引擎 -->
<meta http-equiv="x-ua-compatible" content="ie=edge">

📖 指定旧文档模式(Internet Explorer)

[ ] Viewport （视口）: 正确声明viewport meta。

<!-- 响应式网页设计 viewpoint 声明 -->
<meta name="viewport" content="width=device-width, initial-scale=1">

[ ] Title （标题）: 所有页面都必须使用title标签(SEO:Google 会计算标题中使用的字符的像素宽度，范围在 472 和 482 像素之间，所以平均字符数限制大约在 55 个字符左右)。

<!-- 文档标题 -->
<title>网站标题不超过 55 个字符</title>

📖 Title - HTML - MDN

🛠 SERP Snippet Generator

[ ] Description （描述）: 提供description标签，它是唯一的同时内容不能超过 150 个字符。

<!-- Meta Description -->
<meta name="description" content="Description of the page less than 150 characters">

📖Meta Description - HTML - MDN

[ ] Favicons: 每个favicon都被创建并正确显示，如果你只有一个favicon.ico，把它放在你网站的根目录下。通常来说你不需要做任何操作他就能正常显示。然而, 使用一下示例中的方法是比较好的做法。不过现在我们推荐使用PNG格式，相比.ico格式有较好的优势(推荐尺寸: 32x32px)。

<!-- 标准 favicon -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- 推荐 favicon 格式 -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">

🛠 Favicon 生成器

🛠 RealFaviconGenerator

📖 Favicon Cheat Sheet

📖 Favicons, Touch Icons, Tile Icons, etc. Which Do You Need? - CSS 技巧

📖 PNG favicons - caniuse

[ ] Apple Touch Icon: 苹果设备 favicon 适配。 (创建至少 200x200 像素尺寸的 Apple 图标文件以支持你可能需要的用到的所有尺寸)

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/custom-icon.png">

📖 配置 Web 应用程序

[ ] Windows Tiles: Windows tiles are present and linked.

<!-- Microsoft Tiles -->
<meta name="msapplication-config" content="browserconfig.xml" />

browserconfig.xml 文件的最小所需 xml 标记如下所示:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
   <msapplication>
     <tile>
        <square70x70logo src="small.png"/>
        <square150x150logo src="medium.png"/>
        <wide310x150logo src="wide.png"/>
        <square310x310logo src="large.png"/>
     </tile>
   </msapplication>
</browserconfig>

📖 浏览器配置模式参考

[ ] Canonical: 使用rel="canonical"以避免重复的内容。

<!-- 帮助防止重复内容出现 -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">

📖 Use canonical URLs - Search Console Help - Google Support

📖 5 common mistakes with rel=canonical - Google Webmaster Blog

HTML 标签

[ ] Language tag （语言标签）: 指定你网站的语言标签并与当前页面语言相关联。

<html lang="zh_cn">

[ ] Direction tag （方向标签）: direction属性规定元素内容的文本方向。(可以在另一个 HTML 标签上使用)

<html dir="rtl">

📖 dir - HTML - MDN

[ ] Alternate language （备用语言）: 指定网站的语言标签并与当前页面的语言相关联。

<link rel="alternate" href="https://es.example.com/" hreflang="es">

[ ] Alternate language （条件注释）: 如有需要，可针对 IE 添加条件注释。

📖 关于条件注释(Internet Explorer) - MSDN - Microsoft

[ ] RSS feed （ RSS 订阅）: 如果你的项目是一个博客或者有大量的文章，可以添加一个 RSS 链接。
[ ] Inline critical CSS （最小 CSS 合集）: CSS critical收集并呈现当前页面可见部分的核心 CSS。在主要的 CSS 调用渲染之前以单行(最小化)在<style></style>中嵌入。

🛠 Critical by Addy Osmani on GitHub

[ ] CSS order （加载顺序）: 所有 CSS 文件都需要在 JavaScript 文件加载之前加载完成(除了有时 JS 文件异步加载到页面之外的情况)。

Social meta

强烈推荐***Facebook OG*** and Twitter Cards。如果你针对某些特定的存在并希望确保显示，也可以考虑其他社交媒体的 meta。

[ ] Facebook Open Graph: 所有 Facebook Open Graph （ OG ）都经过测试并且没有任何错误。图片至少需要 600 x 315 像素，建议使用 1200 x 630 像素。

注意: 使用 og:image:width 和 og:image:height 将会爬取制定尺寸的图像，以便图像能够快速呈现，无需进行异步下载和处理。

<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<!-- Next tags are optional but recommended -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

📖 A Guide to Sharing for Webmasters

🛠 使用Facebook OG testing测试你的页面。

📖 Best Practices - Sharing

🛠 Test your page with the Facebook OG testing

[ ] Twitter Card:

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">

📖 Getting started with cards — Twitter Developers

🛠 使用Twitter card validator测试你的页面。

⬆ 返回顶部