一个前端知道的 SEO

4,411 阅读16分钟

眼见着移动互联网的时代已从浪潮之巅渐渐归于平淡,5G 技术即将带来的变革乃至颠覆尚未可知;眼见着微信、头条、阿里等越见丰盈的生态闭环不断蚕食某度的搜索市场。但仍有大把各色业务的 2C 网站们,依然不得不面对 SEO 的问题,不得不面对国内的 SEO 问题。为什么要强调国内,因为横亘于我等“生前”的有世界上最大的“中文搜索引擎”啊(手动滑稽)。这让我一度以为 SEO 是个玄学,你不得不忍受它可能对你忽冷忽热的奇妙态度,却又不忍心就此挥手说再见,大步向前不回头。

SEO(Search Engine Optimization):搜索引擎优化。网站维护者依循搜索引擎规则对自身网站进行优化,以期站内内容能在用户的搜索结果中占据尽量靠前的排名。时至今日,它依然是将产品推向用户、获取流量的最经济实惠又行之有效的方法之一。

先来一句“振聋发聩”之言:优质的内容永远都是最好的 SEO。 但如果你就一搞技术的,这就由不得你了。所以,我一搞技术的还能做点啥?

写到这里忽然就想起前两年面试的时候。问:html5标签带来了哪些优势?答:有利于 SEO,balabala……

HTML 标签

最新的 html 标准带来的新的语义化标签确实使得不论是人还是机器都更容易阅读业务代码。像常用的<header> <footer> <main> <section> <aside> <nav> 等标签,我们看一眼就能大体知道,这块内容是要干嘛的。新加入的标签甚至对时间、日期等小语义都有照顾:<time> <data>等。

试想,若能合理使用各种语义化标签,整个 html 业务代码部分看上去该是多么清爽舒适啊。再试想,假如搜索引擎的 spider 们果真如我见到这些标签一般,也清楚地晓得是什么意思,那又该是多么“心有灵犀”的场面。

前一点是可以肯定的,如果能够准确使用各种标签,自当责无旁贷用起来。但后一点却是不太肯定的,毕竟现代浏览器对 html5 的支持程度尚未完全,各家搜索引擎对所谓语义化的支持到了何种程度更是不得而知。而与 web 开发者一路相伴从不缺席的一直都是 <div> <h> <p> <a> 等等这些“其貌不扬”的老兄弟们,所以不论是否能够用好新语义化标签,都不能失去本来的“阵地”。在此基础上,“勇猛精进”。

首先对于 h 标签,从 1 到 6 分别代表了从高到低的权重,所以一个页面仅持有一个 <h1> 标签,代表该页面的主标题,其他的 headline 标签则根据实际的内容层级合理安排。

然后对于 <a> 标签,搜索引擎爬虫将根据其 href 属性提供的路径深入到站内的各个角落。<a> 标签构成了一张四通八达的大网,你要尽量保证 Spider 能在“网”上愉快地玩耍,但是也难免有的地方你并不想让它一探究竟,比如去“个人中心”的链接、出站链接等。这时,可以考虑不使用 <a> 标签,通过给元素绑定 click 等事件达到实际的跳页目的;或者也可以考虑给标签加上一个特殊的属性<a href="/" rel="nofollow">首页</a>,来告诉 Spider “内部道路,游客止步”。

同样别忘了 <img> 标签,依图片内容及页面内容,给 img 一个 alt 属性,描述这张图片表达的含义并适当植入关键词。一来可以在图片加载失败的时候给用户一定的提示,二来可以告诉搜索引擎这张图片啥意思,方便其索引。

最后,页面中出现关键词的地方,不妨使用 <strong> & <em> 标签包裹一下,以期向搜索引擎表达关键词强调的意味。

总之,让搜索引擎“一眼就看到”页面的关键词所在。

以上这些基本都是在 <body> 标签内出现的语义化标签,也即页面的主体,机器能看,人也能看。而在 <head> 标签内还存在许多给机器看的标签,做 SEO 优化的同学们最熟悉的莫过于其中的 “SEO 三剑客” TDK 了。

SEO 三剑客:TDK

何谓 TDK?做前端的同学也都应该对它们熟稔于心: <title> 标签、<meta name="description"> 标签和 <meta name="keywords"> 标签。顾名思义,它们分别代表当前页面的标题、内容摘要和关键词,对于 SEO 来说,title 是其中最重要的一员。

首先来看 <title> 标签

从用户的角度来看,它的值即用户在搜索引擎搜索结果中以及浏览器标签页中看到的标题,如下图:

seo-title-inpage

seo-title-inenginee

title 通常由当前页面的标题加几个关键词组成,同时力求简洁明了。总之,用最少的字让别人知道你接下来要说啥,控制在 40 字以内。通常,对于首页,一般会用连字符 - 连接站名和几个关键词作为 title,比如:<title>w3cschool - 编程狮,随时随地学编程</title>;而对于其他页面,则是短下划线 _ 连接页面标题、关键词和站名的形式,比如:<title>Web入门微课_编程实战微课_w3cschool</title>

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

然后来看 description

它通常不参与搜索引擎的收录及排名,但它会成为搜索引擎在搜索结果页中展示网页摘要的备选目标之一,当然也可能选取其他内容,比如网页正文开头部分的内容。以 title 部分的示例图对应的页面为例,它的 description 对应的内容是这样的: <meta name="description" content="Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发。完成客户端程序(也就是浏览器端)的开发,开发JavaScript以及Flash模块,同时结合后台开发技术模拟整体效果,进行丰富互联网的Web开发,致力于通过技术改善用户体验。">。可以看到,正是搜索结果摘要显示的内容。

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

最后是 keywords

<meta name="keywords" content="w3cschool,编程狮,web前端开发,菜鸟教程,编程入门教程,w3school,W3C,HTML,HTML5,CSS,Javascript,jQuery,Bootstrap,PHP,Java,Sql">。它主要为搜索引擎提供当前页面的关键词信息,关键词之间用英文逗号间隔,通常建议三五个词就足够了,表达清楚该页面的关键信息,建议控制在 50 字以内。切忌大量堆砌关键词,毕竟在技术日新月异的今天,搜索引擎如果发现你的 title 信息文不对题都有可能主动帮你修改了,更不必说发现你想在越发无足轻重的关键词身上花的小心思了(似乎没有什么因果关系,手动狗头~)。

以上介绍了 SEO 中最重要的三个标签,它们都存在于 head 标签中。接下来再来看看其他存在于 <head> 标签中,并与 SEO 相关的标签们吧。

元信息标签及其他的标签们

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

1. meta:robots 标签

撇开 TDK,其中与 SEO 相关的有一个 <meta name="robots"> 标签(通常含有 name 属性的 meta 标签都会有一个 content 属性相伴,这我们已经在 D 和 K “剑客”身上领略过了)。默认的,有这样的标签属性设置:<meta name="robots" content="index,follow,archive">。它跟上文中提到的带有 rel 属性的 a 标签略有相似。

这时,假如页面是个妹子,将告诉前来搭讪的搜索引擎:你可以留我联系方式(抓取页面),并且我还给你介绍我的亲戚朋友叔伯阿姨兄弟姐妹们(继续爬站内其他页面),最后还允许你为我拍照留念(生成当前页面快照)。

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

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

2. canoncial 和 alternate 标签

还有一组标签是含有 rel 属性的 <link rel="" href=""> 标签,它们分别是:

  • <link rel="canoncial" href="https://www.xxx.com" />
  • <link rel="alternate" href="https://m.xxx.com" />

先来看 canoncial 标签。当站内存在多个内容相同或相似的页面时,可以使用该标签来指向其中一个作为规范页面。要知道,不只是主路由不同,即便是 http 协议不同(http/https)、查询字符串的微小差异,搜索引擎都会视为完全不同的页面/链接。(莫名想起了浏览器同源策略~)

假如有很多这种雷同页面,其权重便被无情稀释了。比如文章列表页有很多个,比如同一个商品页面的链接含有不同的业务参数等。以后者为例,假设有如下链接:

此时我们可以为后两者在 head 中添加 link 标签:<link rel="canoncial" href="www.shop.com/goods/xxxx" />,以此彰显第一个链接的正统地位,告诉搜索引擎,其他那俩都是“庶出”,不必在意。假如搜索引擎遵守该标签的约定,则会很大程度避免页面权重的分散,不至影响搜索引擎的收录及排名情况。它的含义与 http 301 永久重定向相似,不同之处在于,用户访问标记了 canonical 标签的页面并不会真的重定向到其他页面。

canoncial 标签最初由 Google 等国外公司提出并投入实践,百度则在2013年官宣支持该标签,详情可见百度搜索资源平台的文章:百度已支持 Canonical标签

再来看 alternate 标签。文初也提到了立于浪潮之巅的移动互联网时代已初显落寞之态,但不管怎么说,它依然在山巅上。所以,假如你为移动端和 pc 端设备分别提供了单独的站点,这个标签或许能派上用场。来看这一小节开头的示例,有两个链接如下:

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

  • <link rel="canoncial" href="https://www.xxx.com" />
  • <link rel="alternate" href="https://m.xxx.com" media="only screen and (max-width: 750px)"/>

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

关于路由

假如你负责整站的路由设计工作,那么这个重任就落在了你的肩膀上。一旦网站上线,并且体量越来越大,到时再想调整路由结构将困难重重。所以一开始的时候就应该考虑清楚,合理安排。

假设我们现在要做一个果蔬类的网站,所有的下级页面从首页开始往下分发。于是首页有了一个简单的分类:水果 和 蔬菜。然后从水果出发又有更加细分的类别:热带水果、时令水果、反季水果等。在首页的其他板块还可能有热销果蔬、猜你喜欢等等更加个性化的分类。分类之下则对应属于这一类的列表结果,从列表结果又进入了某一个果蔬的详情页面。

|
|-- home
|    |-- classify|list
|    |     |-- list|detail 
|    |     |    |-- detail
|    |     |    |

以上,基本上至多经过四级页面就可以从首页抵达产品详情页面。在路由设计的时候应保证用尽量少的路由层级使用户抵达最终的目标页面,不应该无节制地深入,使用户迷失在深似海的站内链接之中;同样的道理,搜索引擎分配在某个网站的资源是有限的,这也保障了搜索引擎能高效爬取到有用的页面。

另外要注意的是,不要产出孤立的页面。(这跟路由设计没什么太大关系)

依然是果蔬网站,假设我们新加入了一个板块,售卖果蔬的周边产品,比如锅碗瓢盆洗涤剂等等,然而不论是首页还是其他任何页面,都没有指向这个板块的入口。于是,这个板块就变成了汪洋之中的“一座孤岛”,谁也不知道抵达这里的“航线”。搜索引擎自然也不知道。(除非有高质量外链~)

这时,既可以在首页加入一个新的板块分类入口,也可以在原有的果蔬详情页面加入跟这种果蔬相关的周边产品入口,比如苹果和削皮器。以及其他合理的做法……

总之,啰嗦了这么多废话就是想表达,用尽可能少的层级组织路由并表义清晰;构建合理的分类,使具有相同属性的商品(或其他的东西比如博文)归属于同一级路由之下;任何想要被搜索引擎发现的页面都要加入抵达页面的“航线”,避免“孤岛”形成。

终于,内链安排妥当了,网站开发也差不多了,要准备正式上线了。此时就要面对两个新的“朋友”:robots.txt 和 sitemap(网站地图)。

robots.txt

robots.txt, Robots Exclusion Protocol(REP),它与上篇中提到的元信息标签 <meta name="robots"> 算是“本家”。元信息标签存在于单个页面之中,并作用于它存在的那个页面;而 robots 协议则存在于网站根目录( www.xxx.com/robots.txt可… ),作用于整站。

这个协议并不是一个正式的规范,仅仅是在互联网长期发展过程中约定俗成的,它被大多数的搜索引擎所遵守,也被无数的网站使用并依赖着。虽然如此,不遵守“潜规则”的“虫子”依然让人防不胜防,就算你的 robots.txt 编写如下:

User-agent: *
Disallow: /

无视规则者依然会潜入你的网站横行无忌,像前些年(可能现在依然是)臭名昭著的YisouSpider。所以 robots 协议仅能作为指导 Spider “良民”在站内活动的行为准则,就像"请勿践踏草坪"一样,不要指望用它来保护站内隐私。想要拒绝流氓爬虫的骚扰,还是要在服务端依赖自身的技术手段。

好消息是,19年7月份,谷歌宣布将推动 robots 协议成为一项新的互联网标准。但这让我想起了 http 协议,协议很好,但是不遵守协议的开发者还是大有人在,毕竟就算不完全遵循协议,业务开发依然可以顺利进行。毕竟不遵守协议,才能顺利拿到想要采集的数据hahah~

下面来看一下 robots 协议规范。

首先,文件要求为 UTF-8 格式的纯文本。然后,文中协议格式为 <field>:<optional space><value><optionalspace><#optional-comment>,即字段、空格、值、空格、注释。其中,空格和注释是可选的,仅仅是为了增加文本可读性。

其中,字段值一般有 User-agent | Disallow | Allow 三个,还有一个额外的 Sitemap 项,用来指向该站的网站地图所在的地方,是否支持视具体搜索引擎而定。我们通过前三个字段组合来制定一组规则,规则可以有多组。一组规则中,可以由一到多个 User-agent 开头,然后通过 Allow|Disallow 字段指定具体规则,至少有一条。组与组之间通过空行间隔,举个栗子:

# first group
User-agent: Baiduspider
User-agent: Googlebot
Disallow: /article/

# second group
User-agent: *
Disallow: /

Sitemap: https://www.xxx.com/sitemap.xml

以上:

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

假如你允许整站都可以被访问,则可以不在根目录添加 robots 文件。更详细的使用规范可以来看一下谷歌 robots 规范以及百度资源平台的文章 什么是 robots 文件

sitemap

sitemap 文件是另一个辅助搜索引擎访问网站的工具(协议),有了它并不代表页面一定被收录,但它可以让搜索引擎更快的、更有目的的访问你的网站,从而更有利于搜索引擎的收录工作。

sitemap 文档中罗列了你想让搜索引擎访问到的站内的所有页面对应的链接,里面会包含页面链接(url)以及页面的上次更新时间(lastmod)、更新频率(changefreq)、权重(priority)等信息,其中 url 是必须的,后三者可选。文档一般为 xml 格式,当然也可以是 txt 格式或 html 格式,这里以 xml 格式为例。

首先,sitemap 文档和 robots 一样,文件格式为 UTF-8,并且所有在文件内的数据必须经过转译。看个栗子:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
      <loc>http://www.xxx.com/</loc>
      <lastmod>2019-12-17</lastmod>
      <changefreq>weekly</changefreq>
      <priority>0.5</priority>
   </url>
   <url>
      <loc>http://www.xxx.com/detail/xxx</loc>
      <lastmod>2019-12-17</lastmod>
   </url>
</urlset>

  • 文档开头,声明 xml 版本和字符编码格式
  • <urlset> 标签作为顶级标签,并指定 xml 命名空间
  • 每一个页面的 url 用一个 <url> 父级标签包裹
  • 包含一个必选<loc> 子标签包裹页面链接
  • 剩下的 <lastmod> | <changefreq> | <priority> 三个子标签作为可选项

然后,上文中提到了 url 必须经过 “转译”,它的意思是,假如 url 中含有下表中的字符,则必须替换为对应的字符实体。

CharacterEscape Code
Ampersand - &&amp;
Single Quote - '&apos;
Double Quote - "&quot;
Greater Than - >&gt;
Less Than - <&lt;

更多关于 sitemap 的知识点可以来看一下 sitemap 协议

基于以上,我结合 nodejs、axios 和 cheerio 以及 javascript 的模版字符串编写了一个生成 sitemap 文件的“小玩具”,可以设置过滤条件排除那些不想加入 sitemap 的页面链接,但目前仅支持生成包含 loc 标签的网站地图文件。如果有幸被你见到,或许可以把玩一二。

另外,有一个网上流传甚广的免费 sitemap 生成工具可以一用,搜索 老虎 sitemap 应该就可以找到资源,它是 伶俐虎 很早之前的一个免费版。如果你需要在某些条件下(比如文章更新)自动地生成并更新 sitemap 文件,就需要结合项目本身定制自己的 sitemap 生成程序了。

编写好了文件,就可以把它与 robots 文件一同放到网站的根目录下等待搜索引擎前来“临幸”了。当然也可以主动一点,主流的搜索引擎都提供了 sitemap 文件提交通道,以便让搜索引擎更快更有目的地前来网站。

有主动推送,自然也有被动的方式,比如众多面向国内市场的网站们需要仰仗的百度搜索引擎,便提供了自动推动代码。

百度自动推送代码

只要将下面这段 js 脚本插入当前页面,当用户访问时,就会把这个页面的链接推送给搜索引擎。

(function() {
  let bp = document.createElement('script');
  const curProtocol = window.location.protocol.split(':')[0];
  if (curProtocol === 'https') {
    bp.src = `https://zz.bdstatic.com/linksubmit/push.js`;
  }else {
    bp.src = `http://push.zhanzhang.baidu.com/push.js`;
  }
  let s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(bp, s);
})();

通常为了省事,会把它直接扔到公共代码块中全局加载,但这样也带来了一些问题:

  • 一些页面并不想被推送,然而因为全局公用,还是被推送了
  • 一些页面可能早就被收录了,但是一旦页面被访问,链接依然会一遍又一遍被推送

遗憾的是这么些年过来了,也没见百度对相关代码有明面上的更新或者说明(谨防打脸,难道是我没注意到?:))。没办法,第二个问题实在不知道应该如何规避,但第一个问题还是可以做一定规避的,于是我写了一个方法来判断是否加载这段自动推送脚本,大致如下(Vue 下):

function canSubmit(toObj) {
  const toPath = toObj.path;
  let canSubmit = false;
  let isInScope = false;

  if(
    toPath === '/' // 首页
    || (/\/search/u.test(toPath) && Number(toObj.query.page) === 1) // 搜索第一页
    || /\/detail\/(article|news)/u.test(toPath) // 详情页
    // ...
  ) {
    isInScope = true;
  }
  
  if(isInScope && process.env.TEST_ENV === 'prod') {
    canSubmit = true;
  }
  
  return canSubmit;
}

在几年前,百度曾在 百度统计贴吧 发帖称,百度统计代码同样带有自动推送的功能。

贴吧声明

于是,这就悲剧了。若果真如此,一旦使用了百度统计,对于上面两个问题的任何规避将毫无卵用……

最后,

关于重定向的问题

在上一篇中提到了 canonical 标签,它的作用便与重定向(301)类似,只是用户依然可以访问页面。而在实际场景中,也有很多确实需要真正进行重定向的场景,依然举俩栗子:

  • 页面改版了并启用了新的链接,原先的页面已经不存在(404)
  • 网站同时支持 http 和 https 访问,需要将 http 重定向到 https

这时,都需要在服务器配置文件中做好处理,通常采用 301 永久重定向。虽然听说 302 、 307 等也被搜索引擎认可,但是,求稳……:(


以上。它们仅仅是我知道的一些,茫茫知识海洋,大概还有许多我不知道的细节等待着继续探索~~~

原文链接举起你的小手,点赞关注交流批评……啦~