文档介绍：从前端角度讲解一下 SEO 的实施方法
SEO(Search Engine Optimization),就是传说中的搜索引擎优化,是指为了增
加网页在搜索引擎自然搜索结果中的收录数量以及提升排序位置而做的优化行
为。我认为这是一门说来简单,但操作起来复杂的技术,只可意会,不可言传。
作为一名前端工程师,不需要精通 SEO,但必须要了解它。SEO 有一条不变的
准则就是它永远都在变,因为没有一沉不变的优化方案可供大家套用。但我们仍
然可以发现一些基础的或是被人们公认的规律来进行网站的 SEO。更重要的是
我们要有自己的实践,不断发现适合自己行之有效的 SEO 方法。
从宏观的角度来说,我认为 SEO 有三条最重要的规律,那就是原创的内容、
高质量的外部链接和持之以恒适度的优化。
前端是构建网站中很重要的一个环节,本篇重点从前端的角度来讲解一下
SEO 的实施方法。前端的工作主要是负责页面的 HTML+CSS+JS,优化好这几个
方面会为 SEO 工作打好一个坚实的基础。突出重要内容可以让搜索引擎判断当
前页面的重点是什么,提升网站访问速度可以让搜索引擎的蜘蛛顺利、快速、大
量的抓取网页内容,所以以下我就着重以突出重要内容和提升网站速度为主来总
结一下。
突出重要内容
合理的 title、description 和 keywords
截图取自于 360 搜索()
虽然现在搜索对这三项的权重慢慢减小,但还是希望能够合理的写好他们,
只写有用的东西,不要在这里写小说,要表达重点。
title:只强调重点即可,重要关键词出现不要超过 2 次,而且要靠前,每个
页面 title 要有所不同,如下图:
description:把网页内容高度概括到这里,长度要合理,不可过分堆砌关键
词,每个页面 description 要有所不同,如下图:
keywords:列举出几个重要关键词即可,也不可过分堆砌。
语义化书写 HTML 代码,符合 W3C 标准。
对于搜索引擎来说,最直接面对的就是网页 HTML 代码,如果代码写的语
义化,搜索引擎就会很容易的读懂该网页要表达的意思。例如文本模块要有大标
题,合理利用 h1-h6,列表形式的代码使用 ul 或 ol,重要的文字使用 strong 等等。
总之就是要充分利用各种 HTML 标签完成他们本职的工作,当然要兼容 IE、火
狐、Chrome 等主流浏览器。
我们来看看著名的禅意花园网站(/),在没有样式
的情况下,代码非常语义化,看起来很工整,加载不同的样式之后可以随心所欲
的改变页面外观。
无样式情况下:
加载样式 1:
加载样式 2:
利用布局,把重要内容 HTML 代码放在最前。
搜索引擎抓取 HTML 内容是从上到下,利用这一特点,可以让主要代码优
先读取,广告等不重要代码放在下边。例如,在左栏和右栏的代码不变的情况下,
只需改一下样式,利用 float:left;和 float:right;就可以随意让两栏在展现上位置互
换,这样就可以保证重要代码在最前,让爬虫最先抓取。同样也适用于多栏的情
况。
重要内容不要用 JS 输出。
蜘蛛不会读取 JS 里的内