元数据、SEO 和社交
两个访问者来到你的页面，都没有像人一样查看它的方式。一个是搜索引擎，决定是否列出该页面以及如何描述它。另一个是社交平台，构建在某人分享链接时出现的小预览卡。两者都读取 <head> 中的一小块标签，而不是屏幕上的可见内容。本章是关于编写这块标签，以便你的页面在搜索结果、浏览器标签页和分享链接中正确显示。
标题和描述
每个页面都需要一个 <title>。这是浏览器标签页、书签和搜索结果列表中显示的文本。它在 head 中，是一行短代码：
<title>面包制作初学者：你的第一条面包，逐步说明</title>搜索结果中该标题下方通常有一句描述页面的句子。这来自 元描述，另一个你放在 head 中的标签：
<meta name="description" content="简单的面包配方，从混合你的第一块面团到酥脆的金色外壳，包括每个步骤的时间。" />想象一本书在书架上。标题印在书脊上，这样你就能找到它，描述是背面的宣传文字，帮助你决定是否打开它。
<title> 是你的标签页标签和人们在搜索结果中点击的标题，所以要清晰。<meta name="description"> 是下面的宣传文字。两者都在 head 中，给每个页面分配自己的对比我预期的要求少得多的工作量，但能帮助很多。 字符集和视口，再访
你的第一个 HTML 页面中的骨架以两个快速粘贴和忘记的 meta 标签开头。值得再看一眼，因为两者都改变了如何在任何内容出现之前读取和呈现页面。
第一个标签是字符编码：
<meta charset="UTF-8" />它告诉浏览器字母是用哪种字母表写的，所以带重音符号的字符、卷曲引号和表情符号正确显示，而不是变成奇怪的符号。总是使用 UTF-8；它涵盖每种语言和每个表情符号。
第二个标签是 视口，它使页面适合手机屏幕：
<meta name="viewport" content="width=device-width, initial-scale=1" />没有它，手机假设页面是为宽桌面构建的，并将整个内容缩小到文本太小而无法阅读。有了它，页面就匹配设备的宽度。把它想象成告诉浏览器它要打印的纸张的真实大小。
<meta charset="UTF-8"> 使带重音符号的字母和表情符号不会变成乱码，所以总是包括它。视口线使页面适应手机，而不是缩小到微小的桌面。两个标签你复制一次，很少再碰，但跳过它们会很快显示出来。 Open Graph 和社交卡
当你把链接粘贴到聊天或社交帖子中时，小预览卡通常会出现，其中包含图片、标题和一行文本。该卡不是平台在猜测。页面使用称为 head 中的 Open Graph 的一组标签向其提供图片和单词：
<meta property="og:title" content="面包制作初学者" />
<meta property="og:description" content="你的第一条面包，逐步说明。" />
<meta property="og:image" content="https://breadschool.example/loaf.jpg" />注意这些使用 property，而前面的描述标签使用 name。那就是 Open Graph 标签采用的形式；复制模式并更改单词和图像地址。把它想象成将小预览打包到页面中，随时准备在某人分享它时使用。
og:title、og:description 和 og:image。它们使用 property 而不是 name，这一开始看起来很奇怪，但就是这样写的。设置它们，你的链接就不会赤裸地显示。 Favicon 和其他链接标签
浏览器标签页中的小图标，在页面标题旁边，是 favicon。它是某人在十几个其他标签中找到你的标签页的方式。你用 head 中的 <link> 标签添加一个：
<link rel="icon" href="/favicon.png" />rel="icon" 部分告诉浏览器这个文件是页面的图标，href 指向图像。一个小方形图像，大约 32 乘 32 像素，已经足够。这是一个小触摸，它使网站看起来完成了。
<link rel="icon"> 和小方形图像添加。这是一个使网站感觉完成的小东西。head 中的 <link> 标签是你如何将页面指向额外文件如此的方式。 可爬取性基础
搜索引擎发送程序来访问网页，读取它们，并将它们添加到一个大列表中，以便人们稍后可以找到它们。该程序是 爬虫，大多数情况下你希望它完成工作，你不做任何特殊操作。如果你有一个你宁愿保留在搜索之外的页面，一个粗略的草稿或私人感谢页面，你用 robots meta 标签说明这一点：
<meta name="robots" content="noindex" />noindex 意思是"请不要在搜索结果中列出此页面。"想象爬虫是一个图书管理员在书架上走，为每本书编目；这个标签是一个请求图书管理员跳过这本书的便条。
<meta name="robots" content="noindex">。那是在这个阶段你会到达的主要旋钮，所以不需要对其余的过度思考。