浅谈前端所能做的SEO

SEO, 就是搜索引擎优化(Search Engine Optimization)的缩写, SEO优化是专门利用搜索引擎的搜索规则来提高网站在搜索引擎内的自然排名的一种方式. 能对搜索引擎的小蜘蛛更加友好. 那么前端能做哪些SEO的优化呢?

SEO基础三要素

我们进入某个网页打开调试工具, 在<head>标签里我们能的看到<title>标签, keywords和description的<meta>标签. 就是最基础的SEO三要素.

其中<title>标签代表着页面的标题, <meta keywords>是网站的关键字, <meta Description>则是网页的描述, 即对这些关联字进行了扩展.
昂, 现在我们知道了这三要素可以SEO优化, 那我们就疯狂的在关键字里加一堆上去, 越多越好?当然, 并不是这样的.这些都有限制的, 内容不可过长, 也不能过分的堆砌关键字, 每个页面的description也应该不同. 比如下方张老师的博客为例.

网站构造布局优化

对网站布局进行SEO优化, 控制首页链接数量, 扁平化的目录层次(最多三层目录层次), 然后对导航SEO优化.

编写语义化代码

我们常说, 要养成编写语义化代码的习惯. 那什么是语义化呢? 就是既要人看得懂, 也要机器能理解你的代码.
其实我们常用的HTML标签很多都是带语义化的. 如:

H1 ~ H6都是用于表示标题
UL标签多用于无序列表
Ol标签用于有序列表
DL标签用于定义数据列表
Em, strong表示强调等

站内优化

<a> - 标签优化, 外链上加上rel=”nofollow”, 让小蜘蛛别往外面爬
<h1> - 正文标题使用h1
<img> - 标签使用alt说明, alt对图片起着一个注释的作用
``与``标签
是权重标签的代表, 在搜索引擎中能够得到高度的重视, 他能突出关键词, 与的效果是一样的, 但是在SEO中并不会起到很好的效果, 因此不推荐使用.
表示斜体, 权重标签的重要度仅次于.

一些布局小技巧

重要内容HTML代码放在最前面, 小蜘蛛抓取HTML内容是按照文档流从上往下抓取的. 利用这个特点, 我们可以将重要的HTML放在上面, 然后可以通过CSS来进行布局.
重要的内容尽量不要用JS输出, 小蜘蛛看不懂JavaScript~
尽少使用iframe框架. 小蜘蛛是不会读取里面的网页的
谨慎使用display: none; 小蜘蛛会过滤掉display: none里的内容
不断的精简代码, 能使用一个标签就不要用两个标签

扩展阅读

Chrome - 搜索引擎优化 (SEO) 入门指南

总结

SEO其实面对的是搜索引擎, 然后搜索引擎再将搜索的结果, 根据权重展现给用户. 文中讲的只是一些基础的知识, 除此之外还有robots.txt, 站外友链等, 这里就不详谈了. 平时前端er日常工作中应该培养好的编程习惯, 了解了SEO的规则, 可以隐性给自己页面提升质量呢~