输入关键字 抓取所有网页(什么是SEO（SearchEngineOptimizationOptimization），你知道吗？ )

　　输入关键字 抓取所有网页(什么是SEO（SearchEngineOptimizationOptimization），你知道吗？

)

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

　　什么是搜索引擎优化

　　

　　SEO（Search Engine Optimization），中文译为搜索引擎优化，是指采用合理的手段，便于搜索引擎索引，使网站的基本元素符合搜索引擎的检索原则，更加人性化，以便更容易被搜索引擎搜索到。包容和优先排序

　　发展历程

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

　　优缺点原则

　　

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

　　三剑客：TDK

　　什么是TDK？做前端的同学也应该很熟悉：tags，tags，tags。顾名思义，它们分别代表当前页面的标题、内容摘要和关键词。对于SEO，标题是最重要的。

　　标签

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

　　

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

　　【转转】二手交易网,二手手机交易网,58闲置交易APP,转转客服

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

　　描述

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

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

　　有鉴于此，描述的价值应该尽可能清楚地表达页面的内容，让用户更清楚地认识到他要去的页面对自己是否有价值。同时字数最好控制在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永久重定向。不同的是，用户访问标有规范标签的页面，不会被重定向到其他页面。

　　让我们再次看一下备用标签。如果您为移动设备和 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。robots.txt 只能有一个。文件位置必须位于应用它的网站主机的根目录中。常用关键字 User-agent：网络爬虫名称 Disallow：不应该爬取的目录或网页 Allow：应该爬取的目录或网页 Sitemap：站点站点地图的位置 React & Vue 服务器渲染一个SEO友好的SSR框架

　　反应（Next.js）：

　　Vue (Nuxt.js)：

　　结束语

　　正确认识SEO，但不要过分追求SEO，网站还是以内容为主。

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

　　参考文章