前端搜索引擎优化（SEO）的技巧

我们常常可以看到一些面试题中有问【 HTML 语义化的好处是什么】，很多人都可以溜溜地说其中一个好处就是【有利于 SEO 】。那么，什么是 SEO ，大家真的都清楚吗？

搜索引擎优化（SEO）

搜索引擎优化（英语： Search Engine Optimization ，缩写为 SEO ），根据维基百科的解释是：

它是一种透过了解搜索引擎的运作规则来调整网站，以及提高目的网站在有关搜索引擎内排名的方式。由于不少研究发现，搜索引擎的用户往往只会留意搜索结果最前面的几个条目，所以不少网站都希望透过各种形式来影响搜索引擎的排序，让自己的网站可以有优秀的搜索排名。当中尤以各种依靠广告维生的网站为甚。

也就是说，通过搜索引擎优化，我们的网站可以在搜索结果的排名中靠前。

那么，作为一个前端，我们该如何为搜索引擎优化做出一点贡献呢？

优化的技巧

在学习如何优化之前，我们最好了解一下当我们在“百度一下”或者“ Google 搜索”时，搜索引擎都做了一些什么。

这个视频 How Search Works 解释了搜索引擎是如何工作的。需要科学上网才能看得到，当然在这里我也会总结一下这个视频的大意：

当搜索进行时，它会从“蜘蛛”事先抓取到的大量有关联性的索引中，搜索所有包含用户输入的关键字的网页，然后根据算法给出每个网页一个总评分，再根据评分的高低给用户返回搜索结果。而这些包含关键字的内容，可以是文章标题、描述、关键字、内容、甚至是链接等。

由上可以得知，要想优化，我们可以从这些方面入手。

创建唯一且准确的网页标题 `<title>`

<title> 标记可告诉用户和搜索引擎特定网页的主题是什么。它应放置在 HTML 文档的 <head> 元素中。我们应该为网站上的每个网页创建一个唯一标题，并且尽量避免与网页内容无关或使用默认或模糊的标题。如：

<!-- 正确示范 -->
<title>前端搜索引擎优化的技巧</title>

<!-- 错误示范 -->
<title>我的文档</title>

使用 `meta description`

我们可以使用 meta description 标签来准确概括总结网页内容。我们应避免内容中出现关键词的堆砌、描述过长、描述过于笼统简单，如直接拷贝关键词或正文内容、或“这是一个网页”这种没有实际性意义的描述等现象。正确示范如下：

1	<meta name='description' content='本文主要介绍搜索引擎优化（SEO）的技巧，如使用title、description、keywords、语义化标签、img的alt属性等。'>

使用 `meta keywords`

我们可以使用 meta keywords 来提炼网页重要关键字，如：

1	<meta name='keywords' content='SEO,搜索引擎优化,网页排名优化'>

但有些建站者为了网页能有较好的排名，故意在这个标签中大量堆砌关键字，也就是所谓的“黑帽方法”之一。于是搜索引擎为了为用户提供优质的搜索结果，优化了它们的爬取算法——当出现大量关键字堆砌时，搜索引擎可能会降低这个网站的排名甚至将其列入黑名单。所以我们需慎用或者不用这个标签，使用的话一般设置3-4个关键词即可。

注意： <title> 、 meta description 和 meta keywords 三者的权重依次减小，我们要想网页有好的排名，必须合理使用这三个标签。

使用语义化元素

在合适的位置使用合适的元素表达合适的内容，让用户和“蜘蛛”能一目了然文档结构。例如使用 <h1> 可以让“蜘蛛”知道这是很重要的内容。然而，值得注意的是，例如在想要表达强调时，我们不应该滥用标题元素或者 <b> 、 <i> 这种没有实际意义的标签，换而可以使用 <em> 或 <strong> 来表示强调。此外， <h1> 的权重比 <h2> 的大，我们不应该为了增大权重而去滥用 <h1> ，一般来说 <h1> 用于正文的标题。

利用 `<img>` 中的 `alt` 属性

alt 属性可以在图片未成功显示时候，使用文本来代替图片的呈现，使“蜘蛛”可以抓取到这个信息。此外它还可以解决浏览器禁用图像或屏幕阅读器解析等问题。

设置 `rel='nofollow'` 忽略跟踪

如果某个 <a> 的链接不需要跟踪，那么添加 rel='nofollow' 即可通知“蜘蛛”忽略跟踪。因为“蜘蛛”分配到每个页面的权重是一定的，为了集中网页权重并将权重分给其他必要的链接，为不必跟踪的链接添加这个属性就显得很必要了。

提高加载速度

我们应尽量让结构（HTML）、表现（CSS）及行为（JavaScript）三者分离。如果在一个 HTML 页面中，编写大量的 CSS 样式或脚本，会拖慢其加载速度，此外，如果不为 <img> 定义宽高，那么会引起页面重新渲染，同样也会影响加载速度。一旦加载超时，“蜘蛛”就会放弃爬取。

扁平化网站结构

一般来说，一个网站的结构层次越少，越有利于“蜘蛛”的爬取。所以目录结构一般不多于 3 级，否则“蜘蛛”很容易不愿意继续往下爬。就像用户在操作一个网页一样，层级大于 3 就很影响用户体验了，“蜘蛛”就是模仿用户的心理。

合理安排重要内容的位置

我们应该将含重要内容的 HTML 代码放在最前面，因为“蜘蛛”爬取 HTML 的顺序是从上到下，有的搜索引擎对抓取长度有限制，所以要保证重要内容被优先爬取。并且，重要内容不应该由 JavaScript 输出，因为“蜘蛛”没有办法读取 JavaScript ，同时也要少用 iframe ，因为“蜘蛛”一般不会去读取它里面的内容。

本文完。

若文中有错误还请指正与包涵！

原文链接：https://caijialinxx.github.io/2018/07/30/seo-in-front-end/

转载请注明出处。

参考资料：

搜索引擎优化（SEO）

优化的技巧

创建唯一且准确的网页标题 <title>

使用 meta description

使用 meta keywords