分析个人能力的时候发现自己对HTML 的SEO优化了解的还不是很多,所以花了些时间学习了一下,并且和大家分享一下所学内容与总结。

1. 标签优化

1. Title 标签

title标签是搜索引擎抓取的重点,搜索引擎抓取title标签作为搜索结果的展示信息。title标签通常有较高的关键词匹配要求。一个好的title可以让网站能被更多的关键词匹配到。而且,关键词的匹配程度又极大影响到了网页在搜索引擎中的排名。因此,title标签对SEO优化来说极为重要。

// 可以参考的书写方式
<title>关键词1_关键词2_关键词3</title>
// 关键词1 - 最主要的关键词,是对页面内容的高度概括与说明
// 关键词2 - 可以使父页面的标题,也可以是当前页面所属的归类名
// 关键词3 - 网站名

2. Keywords 和 Description

虽然现在的爬虫对这两个标签的权重有所降低,但实际上还是有对其优化的点。
Keywords是页面关键词的列表,列出主要关键词,使用英文逗号隔开。切忌不要过分堆砌关键词。可以适当摘录title中的词语作为关键词。
Description是对页面的描述,是对Keywords和Title的进一步扩展。每个页面都应该有Description标签,其内要有对页面的简短描述,要与网页内容有相关性。

3. H标签

h标签是搜索引擎识别页面的重要标记。合理使用h1、h2、h3标签能使页面结构更加清晰、层次更加完备。
一般一个页面按照需求程度适当添加h标签,从h1开始逐级往下添加。但不可过多使用h标签,以免适得其反。

2. HTML语义化优化

对于搜索引擎来说,最直接面对的就是网页HTML代码,如果代码写的语义化,搜索引擎就会很容易的读懂该网页要表达的意思。
之前说到的h标签优化也算是HTML语义化的一种。当然,其中还有以下规则:
1. 列表使用ul / ol
2. 重要的文字使用strong突出
3. 为图片加上alt属性
4. 合理使用h1-h6
5. 合理使用h5新增标签sectionarticlemain等分隔页面区块
6. 等等

著名的CSS Zen Garden: The Beauty of CSS Design网站,在不加载样式的情况下非常语义化,它看起来十分工整。从而也可以通过加载不同的样式来起到随心所欲更换皮肤的效果。

搜索引擎抓取HTML页面的顺序是按照源代码从上往下读取,权重逐渐降低。因此可以利用这一特点,将含有重要信息的数据文本代码置于上方,将辅助内容与广告代码置于下方。

3. 异步获取数据

随着现在技术日新月异,动态页面SEO优化的重要性也不可同日而语。然而现在流行的很多前端框架都在js中动态生成DOM元素,这对搜索引擎爬虫很不友好。稍微弱一些的搜索引擎爬虫可能只能获取到一个基本的DOM骨架而获取不到内部的详细内容。
因此,将框架转移到服务端渲染,或者在当前的前后端分离架构下使用node层来渲染数据能部分解决这个问题。当然了,不推荐给用户的页面使用服务端渲染技术,我们应该将服务端渲染技术主要用于需要SEO的页面,给用户实际使用的页面还是应该使用框架来进行DOM渲染,这样能避免很多错误,也能避免服务端渲染给用户带来的一些不友好交互。
除了以上两种解决方案之外,我们也可以主动给搜索引擎提交sitemap以至于让搜索引擎主动收录网页,也可以利用<noscript>标签,在其内输出一些和网站相关的关键词以及关键信息点。

总结

当然了,基于前端页面的SEO优化只是SEO优化里很小的一个点。页面只要相关关键词的访问量达到某个基数之后,自然会被搜索引擎提高权重。所以更多的是我们需要为用户提供更好的服务,用户流量大了,搜索引擎的权重也会加大,这会是一个非常好的良性循环过程。

****

Thanks for Reading

Jiahao.Zhang
NetEase Inc. Hangzhou 
        Front-End Developer