来点 SEO 知识学学

　　之前有同学在前端技术分享时提到了SEO，另一同学问我SEO是什么，我当时非常诧异，作为前端应该对SEO很了解才对，不过仔细想想，现在前后端分离的大趋势下，SPA单页WEB应用也随之兴起，现在的前端新生对SEO不了解也是有原因的，所以本次就带着大家重识SEO！

　　SEO（SearchEngineOptimization），中文翻译成搜索引擎优化，是指通过采用易于搜索引擎索引的合理手段，使网站各项基本要素适合搜索引擎的检索原则并且对用户更友好，从而更容易被搜索引擎收录及优先排序

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

　　2003年初到2004年底，Google刚进入中国不久，SEO在国内刚刚起步2004年底到2005年上半年,全国涌现出上百家SEO公司2005年下半年至2006年9月，SEO作弊泛滥成灾，严重破坏了市场秩序，威胁到搜索引擎的利益，SEO一度成为作弊的代名词，引起一些主流搜索引擎的大量清理2006年9月至今，随着SEO培训的兴起，SEO技术越来越普及化也更加正规合理化成本低利用SEO来给网站做优化，不仅提升网站的排名，还能增加搜索引擎的友好度。企业除支付相关人员的费用外，一般不需要投入其它费用，所以成本很低。通用性强SEO人员通过对网站机构、布局、内容、关键词等要素的合理设计，让网站符合搜索引擎的规则。虽然有很多搜索引擎，但你只要做好百度所搜引擎优化，其它的搜索引擎排名也会跟着提高。稳定性好正常情况下，只要是正规方法优化的网站，排名都会比较稳定。只有搜索引擎算法更改或者竞争对手更有优势，才会让网站出现比较大的变化。公平性在搜索引擎中，所有网站展示机会都是均等的，需要企业公平的竞争排名。搜索引擎不是根据网站的规模、知名度来作为排名的依据，而是综合多方面的因素，这样就给网站提供了一个公平竞争的环境。有效规避无效点击有些企业为了增加知名度而选择付费推广，这种点击收费的推广方式，会遭到同行业的恶意点击，让你的费用迅速用完。而利用SEO技术优化的网站就不会出现这种问题，同行业点击的越多，对网站越有利，可以增加搜索引擎的友好度，进而提升网站的排名。见效慢SEO需要人工来做的，不会立刻收到效果的。一般来说，从开始优化到关键词有排名需要1至3个月左右，如果是竞争激烈的关键词，可能需要更长的时间。被动性网站和搜索引擎是一种被动排名关系。网站的优化需要符合搜索引擎规则，这样才能让网站的排名靠前。搜索引擎的规则不是一成不变的，它会不定期的修改算法，将更好的内容展示给用户。因此，需要对网站的优化进行相对应的调整，以应对各种变化。不确定性SEO人员无法掌控搜索引擎运行规则的细节，只能通过经验来对网站进行优化，无法保证重要性的关键词需要多久能排在首页。另外，网站在搜索引擎的排名受到多种因素的综合影响，有可能出现优化后排名没有提升的情况。

　　通过总结搜索引擎的收录和排名规律，对网站进行合理优化，使你的网站在百度及其他搜索引擎网站的搜索结果排名提高。

　　爬行抓取，网络爬虫通过特定规则跟踪网页的链接，从一个链接爬到另一个链接，把爬行的数据存入本地数据库使用索引器对数据库中重要信息进行处理，如标题、关键字、摘要，或者进行全文索引，在索引数据库中，网页文字内容，关键词出现的位置、字体、颜色、加粗、斜体等相关信息都有相应记录。索引器将用户提交的搜索词与数据中的信息进行匹配，从索引数据库中找出所有包含搜索词的网页，并且根据排名算法计算出哪些网页应该排在前面，然后按照一定格式返回给用户将检索的结果返回给用户，这就有一个先后顺序，搜索引擎的排序主要由以下方面共同确定：

　　何谓TDK？做前端的同学也都应该对它们熟稔于心：

　　好的title不仅让用户知道该页面要讲什么东西，提前判断有没有我需要的内容，对于搜索引擎也同样如此。所以，设置title时不但要注意以上几点，更重要的是，不要重复！

　　它通常不参与搜索引擎的收录及排名，但它会成为搜索引擎在搜索结果页中展示网页摘要的备选目标之一，当然也可能选取其他内容，比如网页正文开头部分的内容。以title部分的示例图对应的页面为例，它的description对应的内容是这样的：

　　

　　可以看到，正是搜索结果摘要显示的内容。

　　有鉴于此，description的值要尽可能表述清楚页面的内容，从而让用户更清楚的认识到即将前往的页面是否对他有价值。同时字数最好控制在80-100字以内，各页面间不要重复！

　　它主要为搜索引擎提供当前页面的关键词信息，关键词之间用英文逗号间隔，通常建议三五个词就足够了，表达清楚该页面的关键信息，建议控制在50字以内。切忌大量堆砌关键词！

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

　　撇开“TDK”，其中与SEO相关的有一个标签（通常含有name属性的meta标签都会有一个content属性相伴，这我们已经在D和K“剑客”身上领略过了）。默认的，有这样的标签属性设置：。它跟上文中提到的带有rel属性的a标签略有相似。

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

　　通过以上三组值的相互组合，可以向搜索引擎表达很多有用的信息。比如，对于一个博客站来说，其文章列表页其实对于搜索引擎收录来说没什么意义，但又不得不通过列表页去爬取收录具体的文章页面，于是可以作如下尝试：

　　

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

　　

　　先来看canoncial标签。当站内存在多个内容相同或相似的页面时，可以使用该标签来指向其中一个作为规范页面。要知道，不只是主路由不同，即便是http协议不同（http/https）、查询字符串的微小差异，搜索引擎都会视为完全不同的页面/链接。假如有很多这种雷同页面，其权重便被无情稀释了。比如文章列表页有很多个，比如同一个商品页面的链接含有不同的业务参数等。以后者为例，假设有如下链接：

　　

　　此时我们可以为后两者在head中添加link标签：

　　

　　以此彰显第一个链接的正统地位，告诉搜索引擎，其他那俩都是“庶出”，不必在意。假如搜索引擎遵守该标签的约定，则会很大程度避免页面权重的分散，不至影响搜索引擎的收录及排名情况。它的含义与http``301永久重定向相似，不同之处在于，用户访问标记了canonical标签的页面并不会真的重定向到其他页面。

　　再来看alternate标签。假如你为移动端和pc端设备分别提供了单独的站点，这个标签或许能派上用场。有两个链接如下：

　　

　　它们分别是转转网站首页的pc端和移动端，于是就可以在它们的head标签中提供如下标签，标志其互相对应的关系：

　　

　　前者放在移动端的页面中，表示pc端页面大哥马首是瞻；后者则放在pc端对应的页面中，表示当屏幕尺寸小于750px的时候，就应该我移动端页面小弟上场服务了！

　　robots.txt文件由一条或多条规则组成。每条规则可禁止（或允许）特定抓取工具抓取相应网站中的指定文件路径。通俗一点的说法就是：告诉爬虫，我这个网站，你哪些能看，哪些不能看的一个协议。

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

　　更好地做定向SEO优化，重点曝光有价值的链接给爬虫将敏感文件保护起来，避免爬虫爬取收录

　　如下：

　　#firstgroupUser-agent:BaiduspiderUser-agent:GooglebotDisallow:/article/#secondgroupUser-agent:*Disallow:/Sitemap:

　　以上：

　　允许百度和谷歌的搜索引擎访问站内除article目录下的所有文件/页面（eg:article.html可以，article/index.html不可以）；不允许其他搜索引擎访问网站；指定网站地图所在。

　　假如你允许整站都可以被访问，则可以不在根目录添加robots文件

　　文件格式和命名文件格式为标准ASCII或UTF-8文件必须命名为robots.txt只能有1个robots.txt文件文件位置必须位于它所应用到的网站主机的根目录下常用的关键字User-agent：网页抓取工具的名称Disallow：不应抓取的目录或网页Allow：应抓取的目录或网页Sitemap：网站的站点地图的位置

　　React（Next.js）：

　　

　　Vue（Nuxt.js）：

　　

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

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