前言

通常在“HTML语义的好处”，这样一个问题，有一点是“对SEO有好处”，那么什么是SEO？

搜索引擎优化 (SEO)

SEO，全称，翻译为搜索引擎优化

我想在这里谈谈一个误解。我在很多地方都看到过这种写法：“SEO优化”，这是不恰当的。字母 O 已经包含了“优化”的含义。

SEO是通过了解搜索引擎的运行规律，提高目标网站在相关搜索引擎中的排名来调整网站的一种方式。由于很多研究发现搜索引擎用户往往只关注搜索结果中的前几项，因此很多网站希望通过各种形式影响搜索引擎的排名，从而让自己的网站获得优秀的搜索结果。排行。其中，有各种靠广告为生的网站。

简单地说，就是通过搜索引擎优化，网页才能在搜索结果中排名靠前。

搜索引擎如何搜索

在搜索过程中，搜索引擎会使用一些网络爬虫来跟踪网页中的链接和内容，并通过对爬取文件的分析将其写入数据库。当用户输入关键字进行搜索时，它会与数据库中的信息进行比较，然后根据算法给每个网页一个总分，然后根据得分将搜索结果返回给用户，以显示相应的网站. 也就是说，搜索勤奋决定了你的网站排名。包含关键字的内容可以是文章标题、描述、关键字、内容，甚至是链接。

标题，

创建独特和关键的页面标题

以京东为例，标签可以告诉用户和搜索引擎特定页面的主题是什么。我们应该为网站上的每个页面创建一个唯一的标题，并避免使用与页面内容无关的默认、模糊的标题，例如：

<title>前端搜索引擎优化的技巧title>

<title>我的文档title>

元

我们可以使用元标记来准确地概括网页的内容。避免在内容中堆砌关键词，描述过长，描述过于笼统和简单，如直接复制关键词或正文内容，或“这是一个网页”没有描述实际含义等。正确的例子如下：

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

元

使用meta从网页中提取重要的关键词，比如

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

一些前端为了给网页有更好的排名，故意在这个标签里堆放很多关键词，这就是所谓的“黑帽方法”之一，所以搜索引擎优化爬取就是为了给用户提供高质量的搜索结果。算法——当关键词堆砌较多时，搜索引擎可能会降低本网站的排名，甚至将其列入黑名单，所以我们需要谨慎使用这个标签。如果我们使用它，我们通常设置3-4个关键词。

注意

、meta 和 meta 的权重依次减小。如果我们想让我们的网页排名很好，就必须合理使用这三个标签。

网页标志

搜索引擎识别文本，而不是图像。但是有很多地方我们必须使用图片来满足审美需求，所以有一种方法可以同时做到这一点。以京东logo为例

logo以背景图片的形式插入到标签中，同时带有关键词内容，有利于搜索引擎抓取内容。

使用语义标签

在正确的地方使用正确的标签来表达正确的内容，让用户一目了然地了解文档的结构。例如，使用它可以让爬虫知道这是重要的内容。但是，值得注意的是，我们不应该滥用标题元素或这种无意义的标签，例如，当我们想要表达强调时。您可以使用 , 来表示强调。此外， 的权重大于权重的权重。我们不应该滥用它来增加重量。一般来说，它用于文本的标题。

利用

alt 属性

alt 属性可以在图片没有成功展示的时候，用文字代替图片的呈现方式，让爬虫抓取到这个信息。此外，它还可以解决浏览器禁用图像或屏幕阅读器解析等问题。

设置 rel="" 忽略跟踪

如果某个连接不需要跟踪，添加 rel="" 会通知爬虫忽略跟踪。因为爬虫给每个页面分配的权重是确定的，为了集中页面权重并将权重分配给其他必要的链接，需要在不需要关注的链接上添加这个属性。

HTML、CSS、分隔

为了提高加载速度，HTML、CSS、三者应该尽量分开。如果您在 HTML 页面中编写大量 CSS 样式或脚本，则会降低加载速度。

定义宽度和高度会导致页面重新渲染（），这也会影响加载速度。一旦加载超时搜索引擎优化，爬虫就会放弃阅读。

扁平化网站结构

一般来说，一个网站的结构层次越少，越有利于爬虫爬取，所以目录结构一般不超过3级搜索引擎优化，否则爬虫很容易不愿意继续爬取。就像用户在操作一个网页一样，大于3的级别会极大地影响用户体验，爬虫会模仿用户的心理。

合理安排重要内容的位置

我们应该把有重要内容的HTML代码放在最前面，因为爬取HTML的顺序是从上到下的，而且有些搜索引擎对爬取的长度有限制，所以一定要保证重要内容优先被爬取

重要内容不要使用 JS 输出

爬虫没有办法读取，所以重要的内容不应该通过JS输出

尽量不要

搜索引擎不会抓取的内容

参考文档

前端搜索引擎优化 (SEO) 技巧