什么是SEO（SearchEngineOptimizationOptimization），不要重复！

之前有同学在分享前端技术时提到了SEO。 另一位同学问我什么是SEO。 我当时非常惊讶。 作为一个前端，我应该了解很多关于SEO的知识。 但仔细想想，在目前前后端分离的趋势下，SPA单页WEB应用也应运而生。 现在的前端新生不懂SEO是有原因的，所以这次我就带大家重新认识SEO！

什么是搜索引擎优化

SEO（Search Engine Optimization），翻译成中文为搜索引擎优化，是指采用易于被搜索引擎索引的合理手段，使网站的基本要素适合搜索引擎的检索原理和更多的用户。 -友好，从而更容易被搜索引擎索引。 收集和优先级排序

发展历程

SEO在中国起步较晚，主要经历了四个发展阶段：

优缺点原理

通过总结搜索引擎的收录和排名规则，我们可以合理优化网站，提高您的网站在百度等搜索引擎网站的搜索结果排名。

三剑客：TDK

什么是TDK？ 从事前端工作的同学应该也比较熟悉：标签，标签，标签。 顾名思义，它们分别代表当前页面的标题、内容摘要和关键词。 对于SEO来说，标题是最重要的。

标签

从用户的角度来看，它的值是用户在搜索引擎搜索结果和浏览器选项卡中看到的标题，如下所示：

标题通常由当前页面的标题加上几个关键词组成，力求简洁明了。 总之，用最少的字数让别人知道你接下来要说什么，控制在40字以内。 例如：

一个好的标题不仅可以让用户知道页面是关于什么的，提前判断是否有自己需要的内容，而且也适用于搜索引擎。 因此，在设置标题时，不仅要注意以上几点，更重要的是不要重复！

描述

它通常不参与搜索引擎的收录和排名，但它将成为搜索引擎在搜索结果页面中显示网页摘要的替代目标之一。 当然，也可以选择其他内容，例如网页正文开头的内容。 以标题部分示例图片对应的页面为例，其描述对应的内容如下：

正如您所看到的，这正是搜索结果摘要所显示的内容。

鉴于此，描述的价值应该尽可能清楚地表达页面的内容，以便用户能够更清楚地了解他即将访问的页面对他是否有价值。 同时字数最好控制在80-100字以内，并且不要每页重复！

关键词

主要为搜索引擎提供当前页面的关键词信息。 关键字之间用英文逗号分隔。 通常建议三到五个单词就足以清楚地表达页面的关键信息。 建议控制在50字以内。 关键词不要过多！

其他元信息标签

SEO三剑客“TDK”都属于元信息标签。元信息标签是用来描述当前页面的HTML文档信息的标签。 与语义标签相反，它们通常不会出现在用户的视野中。 因此，它们只是机器的信息，例如浏览器、搜索引擎等。

元：机器人标签

抛开“TDK”不谈，还有一个与SEO相关的标签（通常包含name属性的meta标签会附有content属性，这一点我们在D、K《剑侠情缘》中已经体验过）。 默认情况下，有一个这样的标签属性设置： 。 和上面提到的带有rel属性的a标签有点类似。

CONTENT 含义 INDEX 允许抓取当前页面 NOINDEX 不允许抓取当前页面 FOLLOW 允许从当前页面的链接向下抓取 NOFOLLOW 不允许从当前页面的链接向下抓取 ARCHIVE 允许生成快照 NOARCHIVE 不允许生成快照

通过以上三组值的相互组合，可以向搜索引擎表达很多有用的信息。 例如，对于一个博客网站来说，它的文章列表页对于搜索引擎收录来说其实是没有意义的，但是它却要通过列表页来抓取并收录具体的文章页面，所以你可以尝试以下操作：

规范标签和替代标签

还有一组包含rel属性的标签，它们是：

让我们首先看一下规范标签。 当网站上存在多个具有相同或相似内容的页面时，您可以使用此标签将其中之一指向作为规范页面。 要知道，不仅主要路由不同，即使http协议不同（http/https）并且查询字符串略有不同，搜索引擎也会将其视为完全不同的页面/链接。 如果这样的相似页面很多，它们的权重就会被无情地稀释。 例如，文章列表页面较多，同一产品页面的链接包含不同的业务参数。 以后者为例，假设有以下链接：

此时我们可以在后两者的头部添加链接标签：

这显示了第一个链接的正统地位，并告诉搜索引擎其他两个是“公用的”，不需要关心。 如果搜索引擎遵守这个标签的约定，将很大程度上避免页面权重的分散，不会影响搜索引擎的收录和排名。 它的含义与http``301永久重定向类似，只不过用户访问标有canonical标签的页面实际上不会被重定向到其他页面。

让我们再看看备用标签。 如果您有针对移动设备和 PC 设备的单独网站，则此标签可能会派上用场。 下面有两个链接：

它们分别是转转网站首页的PC端和移动端，因此可以在它们的head标签中提供以下标签来标记它们的对应关系：

前者放在移动页面，说明PC页面的老大哥在跟风； 后者放在PC对应的页面上，说明当屏幕尺寸小于750px的时候，就到了我的移动页面小哥上场服务的时候了！

机器人.txt

robots.txt 文件由一个或多个规则组成。 每个规则都会阻止（或允许）特定爬网程序爬网站点中的指定文件路径。 通俗地说，就是一个协议，告诉爬虫你在我的网站上可以看到什么，不能看到什么。

为什么使用robots.txt

搜索引擎（爬虫）访问一个网站时，首先要检查当前网站根目录下的robots.txt，然后根据里面的规则抓取网站页面。 也就是说，robots.txt起着基调的作用，也可以说是爬虫抓取当前网站的行为准则。 使用robots.txt的目的非常明确。

robots.txt 示例

如下：

# first group
User-agent: Baiduspider
User-agent: Googlebot
Disallow: /article/
# second group
User-agent: *
Disallow: /
Sitemap: https://www.xxx.com/sitemap.xml

多于：

如果允许访问整个站点，则不能将robots文件添加到根目录

文件规范 文件格式和命名文件格式为标准 ASCII 或 UTF-8。 该文件必须命名为 robots.txt。 只能有 1 个 robots.txt 文件。 文件位置必须位于应用它的网站主机的根目录中。 常用关键字 User-agent：网络爬虫的名称 Disallow：不应该爬取的目录或网页 Allow：应该爬取的目录或网页 Sitemap：网站 React & Vue 服务器渲染 SEO 的站点地图位置- 友好的SSR框架

反应（Next.js）：

Vue（Nuxt.js）：

结论

正确认识SEO，不要过度追求SEO。 网站仍应注重内容。

提供了常用的SEO综合查询地址()，有兴趣的可以查看一下。

参考文章