我们常常可以看到一些面试题中有问【 HTML 语义化的好处是什么】，很多人都可以溜溜地说其中一个好处就是【有利于 SEO 】。那么，什么是 SEO ，大家真的都清楚吗？
搜索引擎优化（英语： Search Engine Optimization ，缩写为 SEO ），根据维基百科的解释是：
它是一种透过了解搜索引擎的运作规则来调整网站，以及提高目的网站在有关搜索引擎内排名的方式。由于不少研究发现，搜索引擎的用户往往只会留意搜索结果最前面的几个条目，所以不少网站都希望透过各种形式来影响搜索引擎的排序，让自己的网站可以有优秀的搜索排名。当中尤以各种依靠广告维生的网站为甚。
也就是说，通过搜索引擎优化，我们的网站可以在搜索结果的排名中靠前。
那么，作为一个前端，我们该如何为搜索引擎优化做出一点贡献呢？
在学习如何优化之后，我们最好了解一下当我们在“百度一下”或者“ Google 搜索”时，搜索引擎都做了一些什么。
https://www.youtube.com/watch?v=BNHR6IQJGZs&feature=youtu.be
这个视频 How Search Works 解释了搜索引擎是如何工作的。需要科学上网才能看得到，当然在这里我也会总结一下这个视频的大意：
当搜索进行时，它会从“蜘蛛”事先抓取到的大量有关联性的索引中，搜索所有包含用户输入的关键字的网页，然后根据算法给出每个网页一个总评分，再根据评分的高低给用户返回搜索结果。而这些包含关键字的内容，可以是文章标题、描述、关键字、内容、甚至是链接等。
由上可以得知，要想优化，我们可以从这些方面入手。
<title> 标记可告诉用户和搜索引擎特定网页的主题是什么。它应放置在 HTML 文档的 <head> 元素中。我们应该为网站上的每个网页创建一个唯一标题，并且尽量避免与网页内容无关或使用默认或模糊的标题。如：
<!-- 正确示范 -->
<title>前端搜索引擎优化的技巧</title>
<!-- 错误示范 -->
<title>我的文档</title>我们可以使用 <meta> 的 keywords 元数据来提炼网页重要关键字，以及 description 元数据准确总结网页内容，而避免在 description 元数据的内容中出现关键词的堆砌，描述过长，或“这是一个网页”这种没有实际性意义的描述等现象。正确示范如下：
<meta name='keywords' content='SEO,title,meta,语义化,alt'>
<meta name='description' content='介绍搜索引擎优化的技巧，如使用创建title标题、meta关键词和描述、语义化标签、img的alt属性等。'>在合适的位置使用合适的元素表达合适的内容，让用户和“蜘蛛”能一目了然文档结构。例如使用 <h1> 可以让“蜘蛛”知道这是很重要的内容。然而，值得注意的是，例如在想要表达强调时，我们不应该滥用标题元素或者 <b> 、 <i> 这种没有实际意义的标签，换而可以使用 <em> 或 <strong> 来表示强调。此外， <h1> 的权重比 <h2> 的大，我们不应该为了增大权重而去滥用 <h1> ，一般来说 <h1> 用于正文的标题。
alt 属性可以在图片未成功显示时候，使用文本来代替图片的呈现，使“蜘蛛”可以抓取到这个信息。此外它还可以解决浏览器禁用图像或屏幕阅读器解析等问题。
如果某个 <a> 的链接不需要跟踪，那么添加 rel='nofollow' 即可通知“蜘蛛”忽略跟踪。因为“蜘蛛”分配到每个页面的权重是一定的，为了集中网页权重并将权重分给其他必要的链接，为不必跟踪的链接添加这个属性就显得很必要了。
我们应尽量让结构（HTML）、表现（CSS）及行为（JavaScript）三者分离。如果在一个 HTML 页面中，编写大量的 CSS 样式或脚本，会拖慢其加载速度，此外，如果不为 <img> 定义宽高，那么会引起页面重新渲染，同样也会影响加载速度。一旦加载超时，“蜘蛛”就会放弃爬取。如果这个 HTML 文档内容比较独特丰富（合理插入图片说明）等，会被认为质量较高符合用户需求，从而提高 SEO 的排名。
一般来说，一个网站的结构层次越少，越有利于“蜘蛛”的爬取。所以目录结构一般不多于 3 级，否则“蜘蛛”很容易不愿意继续往下爬。就像用户在操作一个网页一样，层级大于 3 就很影响用户体验了，“蜘蛛”就是模仿用户的心理。
我们应该将重要内容的 HTML 代码放在最前面，最前面的内容被认为是最重要的，优先让“蜘蛛”读取，进行内容关键词抓取。并且，重要内容不应该由 JavaScript 或 iframe 输出，“蜘蛛”没有办法读取 JavaScript ，一般不会去读取 iframe 中的内容。
本文完。
若文中有错误还请指正与包涵！
原文链接：https://caijialinxx.github.io/2018/07/30/seo-in-front-end/
转载请注明出处。
参考资料：
