Kodokon kodokon.com

让你的页面为上线做好准备

打磨页面的 head：标题、描述、favicon 以及安全的外部链接。

9 分钟 · 3 题

在 Kodokon 中打开本课

甚至在访问你的页面之前，人们就已在别处看到它：在浏览器标签页里、在搜索结果中、在分享的链接里。这一切都发生在 head 中。一个精心打造的 head，是业余网站和专业网站之间的差别。

HTML
<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">
  <title>Quick Recipes | Lea's Kitchen</title>
  <meta
    name="description"
    content="30 recipes ready in 20 minutes flat,
             tested by our readers."
  >
</head>
一个准备上线的页面的最小 head。

title 会出现在标签页、书签和搜索结果中：让它每个页面唯一、有描述性、主题在前、大约 60 个字符。meta description 是搜索引擎中标题下方显示的文字：目标是用 150 个字符让人产生点击的欲望。

favicon 是显示在标签页和书签中的小图标。现代做法：在站点根目录放一个作为兜底的 favicon.ico，一个在任何尺寸下都保持清晰的 SVG 版本，以及一个专供 Apple 主屏使用的图标。

HTML
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-icon.png">
三条声明，覆盖每一种场景。

最后一个专业习惯：外部链接。用 target="_blank" 在新标签页打开链接，会让被打开的页面有可能访问 window.opener，从而访问到你的页面。加上 rel="noopener noreferrer" 来切断这个联系，并避免把来源地址一并传出去。

HTML
<a
  href="https://developer.mozilla.org"
  target="_blank"
  rel="noopener noreferrer"
>
  MDN documentation (new tab)
</a>
一个在新标签页打开、已做好安全防护的外部链接。

知识检测

确认你已牢记本课的重点内容。

  1. meta description 的作用是什么？
    • 直接提升页面在搜索引擎中的排名
    • 提供搜索结果中标题下方显示的文字
    • 定义文档的主要语言
  2. 为什么要给带 target="_blank" 的链接加上 rel="noopener"？
    • 为了阻止被打开的页面通过 window.opener 访问你的页面
    • 为了强制链接在同一标签页打开
    • 为了加速目标页面的加载
    • 为了对搜索引擎隐藏该链接
  3. 什么才算一个好的页面标题？
    • 每个页面都完全相同，以强化品牌
    • 尽可能长，好塞进尽可能多的关键词
    • 每个页面唯一、有描述性、主题在前、大约 60 个字符