HTML 文档之 Head 最佳实践

story

01-10 阅读 353 收藏 0

收藏

这篇文章整理了作者认可的一些最佳实践，写在这里与各位分享

阅读原文折叠收起

HTML 文档之 Head 最佳实践

来源：laozhu.me

每一个标准的 HTML 文档都包含一个 <head> 头部分，除了声明文档类型，编码方式和文档标题，引入外部资源这些基本功能外， 头还能做很多非常有用的事情，这篇文章整理了作者认可的一些最佳实践，写在这里与各位分享。

语言

在 html 标签中通过 lang 属性进行明确的语言声明，将会有助于翻译，英文、简体中文和繁体中文网页所属性值如下：

<html lang="en">

<html lang="zh-Hans">

<html lang="zh-Hant">

编码

请在 <head> 中第一行统一使用 utf-8 编码声明。

<meta charset="utf-8">

Base 元素

尽量不使用 <base> 元素，绝对地址和 URL 对于开发者和用户来说都更好。

<!-- Bad -->

<base href="/blog/">

<link href="hello-world" rel="canonical">

<!-- Good -->

<link href="/blog/hello-world" rel="canonical">

Viewport

设置 viewport 的宽度为设备宽度，默认缩放比为 1（允许用户缩放），设置 viewport-fit=cover 以兼容 iPhone X 全面屏“刘海”的显示。

<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">

DNS 预读取

DNS 预读取是一项使浏览器主动去执行域名解析的功能，其范围包括当前文档内的所有链接，这能够减少用户点击链接时的延迟。

<meta http-equiv="x-dns-prefetch-control" content="on">

<link rel="dns-prefetch" href="//www.google-analytics.com">

<link rel="dns-prefetch" href="//fonts.googleapis.com">

预加载

指示浏览器预先请求当前页面所需要的关键性资源。

<link rel="preload" href="/css/main.css" as="style">

<link rel="preload" href="/js/main.js" as="script">

预请求

指示浏览器预先请求用户即将浏览页面所需要的关键性资源。

<link rel="prefetch" href="/img/css-sprite.png">

<link rel="prefetch" href="/fonts/icons.woff2">

渲染偏好

对于国内各种双核浏览器，通过设置 renderer 头要求它们使用 webkit 内核；对于 IE 浏览器，通过设置 IE=edge 要求它使用最新的版本；对于百度搜索强制转码的流氓做法，通过 no-transform 禁止其自动转码；指示浏览器对类似电话、邮箱或地址的内容不要自作聪明的瞎识别（移动端）。

<meta name="renderer" content="webkit"> <!-- 用在360中 -->

<meta name="force-rendering" content="webkit"> <!-- 用在其它 -->

<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 针对 IE 浏览器 -->

<meta http-equiv="Cache-Control" content="no-transform"> <!-- 针对百度搜索 -->

<meta name="format-detection" content="telephone=no,email=no,adress=no">

文档信息

HTML 文档的一些元数据，包括：作者、描述、关键词和生成工具；设置 robots 为 index,follow 指示搜索引擎爬虫该页面需要进入索引，并且页面内的所有链接都要继续跟踪；设置 referrer 为 origin-when-cross-origin 指示浏览器在进行跨域跳转时，其 referrer 值将统一为域名，而非具体的 URL 地址。

<meta name="author" content="米老朱">

<meta name="description" content="米老朱的个人博客">

<meta name="keywords" content="米老朱,极客,博客,WEB,开发,产品设计">

<meta name="generator" content="Hugo 0.32">

<meta name="robots" content="index,follow">

<meta name="referrer" content="origin-when-cross-origin">

Icons

虽说所有浏览器都还支持过时的 favicon.ico 格式，但在 HTML5 时代，我们应该使用更好的 PNG icon with sizes 方案。同时为了兼容老旧浏览器，我们可以将生成好的 favicon.ico 文件放在网站的根目录下面，通常浏览器会自动请求并加载它，并不需要额外通过 link 标签引入。

<meta name="theme-color" content="#db5945"> <!-- 主题颜色 -->

<meta name="application-name" content="米老朱的博客"> <!-- 应用名称 -->

<meta name="apple-mobile-web-app-capable" content="yes"> <!-- 隐藏状态栏 -->

<meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 状态栏颜色 -->

<meta name="apple-mobile-web-app-title" content="米老朱的博客"> <!-- iOS 下的应用名称 -->

<meta name="msapplication-tooltip" content="米老朱的博客"> <!-- Hover 的提示信息 -->

<meta name="msapplication-TileColor" content="#db5945"> <!-- 磁贴背景颜色 -->

<meta name="msapplication-TileImage" content="/img/logo-144.png"> <!-- 磁贴图标 -->

<meta name="msapplication-config" content="/browserconfig.xml"> <!-- 磁贴配置文件 -->

<link rel="icon" type="image/png" href="/img/logo-16.png" sizes="16x16"> <!-- Browser Favicon -->

<link rel="icon" type="image/png" href="/img/logo-32.png" sizes="32x32"> <!-- Taskbar Shortcut -->

<link rel="icon" type="image/png" href="/img/logo-96.png" sizes="96x96"> <!-- Desktop Shortcut -->

<link rel="icon" type="image/png" href="/img/logo-128.png" sizes="128x128"> <!-- Chrome Web Store -->

<link rel="icon" type="image/png" href="/img/logo-196.png" sizes="196x196"> <!-- Chrome for Android Home Screen -->

<link rel="icon" type="image/png" href="/img/logo-228.png" sizes="228x228"> <!-- Opera Coast Icon -->

<link rel="apple-touch-icon" href="/img/logo-120.png"> <!-- iPhone -->

<link rel="apple-touch-icon" href="/img/logo-152.png" sizes="152x152"> <!-- iPad -->

<link rel="apple-touch-icon" href="/img/logo-180.png" sizes="180x180"> <!-- iPhone Plus -->

<link rel="apple-touch-icon" href="/img/logo-167.png" sizes="167x167"> <!-- iPad Pro -->

<link rel="mask-icon" href="/img/logo.svg" color="green"> <!-- Safari Pinned Tab Icon -->

微软为了让 Metro UI 更好看，引入了 browserconfig.xml 文件，主要用于定制网站固定磁铁的图标和背景颜色，其格式如下所示：

<?xml version="1.0" encoding="utf-8"?>

<browserconfig>

   <msapplication>

     <tile>

        <square70x70logo src="/img/logo-70.png"/>

        <square150x150logo src="/img/logo-150.png"/>

        <wide310x150logo src="/img/logo-310x150.png"/>

        <square310x310logo src="/img/logo-310.png"/>

        <TileImage src="/img/logo-144.png"/>

        <TileColor>#db5945</TileColor>

     </tile>

   </msapplication>

</browserconfig>

favicon.ico 实际上是一个图片容器，里面至少应该包含 16x16，32x32，48x48 三个尺寸的 png 图片，我们可以使用 ImageMagick 工具在本地直接生成（生成之前需要对 png 图片进行压缩以减小尺寸）。

$ convert favicon-16.png favicon-32.png favicon-64.png favicon.ico

注意：apple-mobile-web-app-status-bar-style 值默认状态栏为白色，可设置为 black（黑色） 或者 black-translucent（灰色半透明）；mask-icon 引入的 svg 文件必须只有一个图层，并且 viewBox 属性应该为 “0 0 16 16”。

Twitter 卡片用于将网站内容以更加优雅漂亮的方式分享到 twitter.com 网站，从形式上说，分为：summary, summary_large_image, app, player 四种形式，通常我们的站点只需要 summary 这种形式。

<meta name="twitter:card" content="summary">

<meta name="twitter:site" content="@melaozhu">

<meta name="twitter:title" content="此处为分享标题">

<meta name="twitter:description" content="此处为分享描述">

<meta name="twitter:image" content="此处为分享配图">

配置上线后，你可以通过这个 Card validator 工具检查是否正确显示。

Facebook Open Graph

Open Graph 是一套开放的网页标注协议，通过 meta 标签标注网页的类型，主要由 Facebook 推动，已经成为社交分享领域的事实标准。如果你希望明确告诉社交网络或搜索引擎你的网页类型，你应该添加这些 meta 标签。

<meta property="og:type" content="article">

<meta property="og:title" content="此处为分享标题">

<meta property="og:description" content="此处为分享描述">

<meta property="og:image" content="此处为分享配图">

<meta property="og:url" content="此处为分享的链接地址">

固定链接

对于一份文档存在多个 URL 的情况，通过 rel="canonical" 指定唯一的固定链接。

<link rel="canonical" href="https://laozhu.me/">

对于支持 RSS 订阅的页面，可针对 RSS 阅读器提供可订阅的源文件。

<link rel="alternative" href="/index.xml" title="米老朱的博客" type="application/atom+xml">

Polyfill

可以专门为老旧的 IE 浏览器引入 Polyfill 方案，举个例子，为了让 IE6-IE8 浏览器能够使用 HTML5 标签和 Media Query 特性，我们需要引入 html5shiv 和 response.js 这两个库。

<!--[if lt IE 9]>

<script src="//cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

<![endif]-->

其他的 Polyfill 方案写法类似。

打印样式表

对于可打印的页面（如文章页面），可提供针对打印机的样式表，使得网站用户可以将文章打印下来阅读。

<link rel="stylesheet" href="/css/print.css" media="print">

交替样式表

定义交替样式表的时候，指定其 title 属性，以方便用户在浏览器中根据名称选择替代样式，交替样式表多用于多主题切换的站点。

<link href="default.css" rel="stylesheet">

<link href="high-contrast.css" rel="alternate stylesheet" title="High contrast">

参考资料

  1. HTML Best Practices
  2. Favicon Cheatsheet
  3. DNS 预读取
  4. Prefetching, preloading, prebrowsing
  5. Favicons, Touch Icons, Tile Icons, etc. Which Do You Need?
  6. Here’s Everything You Need to Know About Favicons in 2017
  7. Configuring Web Applications
  8. Creating Pinned Tab Icons
  9. “The Notch” and CSS
  10. Alternative style sheets

HTML 文档之 Head 最佳实践--摘抄的更多相关文章

  1. HTML 文档之 Head 最佳实践

    语言 在 html 标签中通过 lang 属性进行明确的语言声明,将会有助于翻译,英文.简体中文和繁体中文网页所属性值如下: <html lang="en"> < ...

  2. OPEN(SAP) UI5 学习入门系列之二： 最佳实践练习（上）

    这篇博文难产了很久,原来是打算一周更新一篇的,上周原计划写MVC,但是写了一半,发现带入了太多的细节,不太符合这个入门系列的主题. 当我们学习一个新的技能的时候,如果一开始就面对大量的细节,很容易陷入 ...

  3. Oh my God, Swagger API文档竟然可以这样写？

    最好的总会在不经意间出现. 作为后端程序员,免不了与前端同事对接API, 一个书写良好的API设计文档可有效提高与前端对接的效率. 为避免联调时来回撕逼,今天我们聊一聊正确使用Swaager的姿势. ...

  4. Windows Azure 安全最佳实践 - 第 3 部分：确定安全框架

    构建云应用程序时,安全始终是计划和执行Windows Azure的首要核心因素.第 1 部分提出安全是一项共同责任,Windows Azure为您的应用程序提供超出内部部署应用程序需求的强大安全功能. ...

  5. MongoDB最佳实践中文手册

    背景:查阅了一下MongoDB的相关文档,发现中文文档还是比较少的,工作中需要用到MongoDB,而这本<MongoDB最佳实践>是很好的选择,所以就把这本手册翻译了一下,其中生涩的专业用 ...

  6. 推荐个开源在线文档，助道友领悟 Django 之“道”

    本文面向有手(需要一点点 Python Django 基础)的小伙伴,急需文档管理者食用最佳. 作者:HelloGitHub-吱吱(首发于 HelloGitHub 公众号) 嗷嗷待哺的小白:" ...

  7. ELK学习总结（2-4）bulk 批量操作-实现多个文档的创建、索引、更新和删除

    bulk 批量操作-实现多个文档的创建.索引.更新和删除 ----------------------------------------------------------------------- ...

  8. 完美CSS文档的8个最佳实践

      在css的世界,文档没有被得到充分的利用.由于文档对终端用户不可见,因此它的价值常常被忽视.另外,如果你第一次为css编写文档,可能很难确定哪些内容值得记录,以及如何能够高效完成编写. 然而,为C ...

  9. 测试驱动开发实践4————testSave之新增文档分类

    [内容指引] 1.确定"新增文档分类"的流程及所需的参数 2.根据业务规则设计测试用例 3.为测试用例赋值并驱动开发 一.确定"新增文档分类"的流程及所需的参数 ...

随机推荐

  1. Thread源码分析-java8

    1.Thread特性分析 守护线程Daemon 定性:支持性线程,主要用于程序中后台调度以及支持性工作. 当JVM中不存在Daemon线程时,JVM将会退出. 将一个线程设定为Daemon的方法: 调 ...

  2. python hdfs初体验

    新建目录 chr 新建文件hdfstest1.txt并写入内容 复制hdfstest1.txt的内容到hdfstest2.txt

  3. hibernate4+spring3+struts2搭建框架实例

    1.所需要的JAR包 2.web.xml配置文件,这个和平时的配置是一样的 <?xml version="1.0" encoding="UTF-8"?&g ...

  4. tp5 -- 微信公众号支付

    近来期间比较忙, 忙完之后发现最近有挺多的东西没有整理,于是乎.就将以前用到的一些小东西整理了一下. 如果对您有帮助,则是我最大的幸运. 本篇主要是说了一下整合TP5的微信公众号支付. 不过由于最近T ...

  5. NSLayoutConstraint.constraintsWithVisualFormat详解，以及AlignAllCenterY

    NSLayoutConstraint.constraintsWithVisualFormat详解,以及AlignAllCenterY 转载2015-07-08 18:02:02 鉴于苹果官方文档的解释 ...

  6. 十：MYSQL中的事务

    前言: 因为没有多少时间和精力,目前无法深入研究数据库中的事务,比如 但是,对于事务的一些基本知识,还是需要牢牢掌握的,做到了解事务的基本常识,在实际开发中能够理解各个持久层框架对事务的处理 一:是么 ...

  7. ST3使用

    创建新的构建系统 Tools -> Build System -> New Build System... 输入类似的构建指令(首先清除当前的运行程序后再重新运行): { "sh ...

  8. 【php】子类覆盖超类方法，在超类里调用此方法会出现何种现象

    <?php class A { public function getName() { echo $this->name(); } function name () { return 'l ...

  9. 【转】4w+1h 教你如何做用户画像

    记得14年开始做用户画像的时候,对于用户画像完全没有概念,以为是要画一幅幅图画,经过两年多的学习和理解,渐渐的总结出了一些方法和技巧,在这里就通过4个W英文字母开头和1个H英文字母开头的单词和大家分享 ...

  10. H.264分层结构与码流结构

    H.264分层结构 H.264编码器输出的Bit流中,每个Bit都隶属于某个句法元素.句法元素被组织成有层次的结构,分别描述各个层次的信息. 在H.264 中,句法元素共被组织成  序列.图像.片.宏 ...