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

6,212 阅读5分钟

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

搜索引擎优化(SEO)

搜索引擎优化(英语: Search Engine Optimization ,缩写为 SEO ),根据维基百科的解释是:

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

用人话讲,就是通过搜索引擎优化,我们的网站可以在搜索结果的排名中靠前。

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

优化的技巧

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

那搜索引擎是如何工作的呢?

当搜索进行时,搜索引擎用一些网络爬虫,跟踪网页中的链接和内容,通过对抓取的文件的分析,写入数据库。用户输入关键字搜索时,就会通过与数据库的信息比较,然后根据算法给出每个网页一个总评分,再根据评分的高低给用户返回搜索结果来展示相应的网站。也就是说搜索殷勤决定了你的网站排名。而这些包含关键字的内容,可以是文章标题、描述、关键字、内容、甚至是链接等。

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

网页优化3剑客,title、description、keywords

image.png

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

image.png

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

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

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

使用 meta description

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

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

使用 meta keywords

我们可以使用 meta keywords 来提取网页重要关键字,如:

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

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

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

网页优化的小技巧网址logo

搜索引擎是识别文字,而不识别图片的。但是有很多地方,我们为了美观需求,又必须去用图片。所以,我们就说一下两者都兼顾的方式。就拿网站的Logo来举例子

image.png

image.png

使用语义化元素

在合适的位置使用合适的元素表达合适的内容,让用户和“蜘蛛”能一目了然文档结构。例如使用 <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 ,因为“爬虫”一般不会去读取它里面的内容。