一个前端知道的 SEO

时间  2019-12-28
标签 一个 前端 知道 seo 栏目 网站开发 繁體版
原文   原文链接

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

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

先来一句“振聋发聩”之言：优质的内容永远都是最好的 SEO。 但若是你就一搞技术的，这就由不得你了。因此，我一搞技术的还能作点啥？html

写到这里突然就想起前两年面试的时候。问：html5标签带来了哪些优点？答：有利于 SEO，balabala……前端

HTML 标签

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

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

前一点是能够确定的，若是可以准确使用各类标签，自当义不容辞用起来。但后一点倒是不太确定的，毕竟现代浏览器对 html5 的支持程度还没有彻底，各家搜索引擎对所谓语义化的支持到了何种程度更是不得而知。而与 web 开发者一路相伴从不缺席的一直都是 <div> <h> <p> <a> 等等这些“其貌不扬”的老兄弟们，因此不管是否可以用好新语义化标签，都不能失去原本的“阵地”。在此基础上，“勇猛精进”。node

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

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

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

最后，页面中出现关键词的地方，不妨使用 <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 中含有下表中的字符，则必须替换为对应的字符实体。

Character Escape 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 等也被搜索引擎承认，可是，求稳……:(

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

原文连接举起你的小手，点赞关注交流批评……啦～

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程