浅论前端页面优化对SEO的重要性

“前端开发”，即“HTML、CSS、JS”的统称。用户在浏览器，可视化屏幕上浏览到的数据布局格式，即为前端的控制效果。一份高质量的前端代码，不仅可以让用户赏心悦目，留住客户，还会有利于“蜘蛛”的爬取和收录。

性能角度优化：

网页的性能主要体现在“加载速度”和“浏览流畅度”两个方面，主要方法有：**减少页面请求、CDN加速、精简代码（一个页面最好不要超过100k）、压缩传输（js css压缩）、引用新框架等、合理设置http缓存、图标处理成雪碧图、图片懒加载、流加载页面、减少cookie传输 **

结构角度优化：

TDK是页面优化最重要的部分

SEO网站优化从小白到专业小编的这篇博客有对TDK的详情介绍，以及如何编写优质的TKD.

巧用meta适配提升用户体验

前端常用meta标签属性总结大全小编的这篇博客有对meta标签的详细总结，请自行查询学习，不足之处还请多多指出。

采用HTNL5 语义化标签

1. header 标签定义文档的页眉（介绍信息）。一般放置网站的站点名称以及LOGO和导航栏。搜索引擎更容易识别站点的类型。

2. nav标签定义导航链接的部分。也就是栏目或者频道的链接。搜索引擎可以更好了解网站的信息架构，分类等。良好的信息架构，更有利于蜘蛛的爬行和权重的分布。

3. footer标签定义文档或节的页脚。放置页脚导航，一些比如公司介绍，联系我们之类的信息。一般来说对网站比较不重要，有可能搜索引擎会降低其位置的权重。

4. section该元素用来表示网页中不同的分区。优势体现在每个部分都可以有其独立的HTML标题。这可以让搜索引擎更好的了解网页的结构是如何划分的。搜索引擎可能会根据网页中的section标签找出其信息架构。（同左撇子）

5. article定义文章区域，可以更有利于搜索引擎识别网页的内容以及判断相关性。，

6. aside定义页面内容之外的内容，在左侧或右侧边栏。比如知乎右侧的“相关问题”就属于aside区域。aside标签的文字信息与article标签区域的文字信息最好是相关。可能会影响到该页面和目标页面的排名（没有article与之对应，最好不用）。

7. 还有一些小标签SEO也会·识别：tag标签顾名思义就是文章标签词、time标签顾名思义就是页面发布时间（该标签不会在任何浏览器中呈现任何特殊效果）、audio定义音频 、video定义视频 等等 …

Flash不利于SEO优化

通过小编查询多个文档资料，汲取前辈经验得出结论Flash不利于SEO优化。

少用iframe

搜索引擎不会抓取iframe中的内容。

巧用h1-h6标签

页面中h1标签权重是比较高度，仅次于title,所有页面中h1标签应该有且仅有一个，可以包裹logo强调品牌，文章段落二级标题最好加上h2,其他 H标签，适宜使用。

面包屑

网站添加“面包屑”导航也有利于搜索引擎的爬行，更利于页面的抓取和索引效率。

导航优化

导航应该尽量采用文字方式，也可以搭配图片导航，但是图片代码一定要进行优化，标签必须添加“alt”和“title”属性，告诉搜索引擎导航的定位，做到即使图片未能正常显示时，用户也能看到提示文字。

图片的Alt属性

页面配图（非背景图）的时候记得加“Alt”属性，有利于站内图片被搜索引擎的检索，对提升网站的曝光度有一定作用，同时也对页面的seo排名有一定影响。

a标签的title属性

a标签页类链接，需要加title属性加以说明，让访客和“蜘蛛”知道。

a标签的rel="nofollow"属性

a标签往非友情链接的外链跳转时，需加 rel=“nofollow” 属性，因为蜘蛛爬到其他网站后就不会再回到本网站。

内链小技巧

内链应采用绝对路径，以减少服务器的相应时间

<a href="www.huanghepiao.com.com">黄河票务网</a>

// 不宜采用
<a href="/index.html">首页</a>

img标签需要设置大小

前景图片 要定义大小、不然会造成页面重新渲染，影响加载速度

<img src="" width=" "  height="" />

b标签和strong标签起强调作用

内容关键词加黑标签请用b标签(strong标签可以用来强调具体页面内容)。B标签往往用在关键词上，一个页面只要加2-5次就差不多了，具体还要根据页面大小而定。

div标签的真实作用

div和span是容器标签，无语义，不要什么都用div、span，尽量合理的使用ul、ol、li、table等

首页链接数量优化

网站首页是权重最高的地方，如果首页链接太少，没有“桥”，“蜘蛛”不能继续往下爬到内容页，直接影响网站收录数量。但是首页链接也不能太多，一旦太多，没有实质性的链接，很容易影响用户体验，也会降低网站首页的权重，收录效果也不好。因此对于中小型企业网站，建议首页链接在100个以内，链接的性质可以包含页面导航、底部导航、锚文字链接等等，注意链接要建立在用户的良好体验和引导用户获取信息的基础之上。

文本特殊符号

文本缩进不要使用特殊符号  应当使用CSS进行设置。版权符号不要使用特殊符号 © 可以直接使用输入法，拼“banquan”，选择序号5就能打出版权符号©。

巧用CSS布局

页面布局的原则是越重要的内容越靠前，巧妙利用CSS布局，将重要内容的HTML代码放在最前面，最前面的内容被认为是最重要的，优先让“蜘蛛”读取，进行内容关键词抓取。

论display:none;的重要性

谨慎使用display：none ：对于不想显示的文字内容，应当设置z-index或设置到浏览器显示器之外。因为搜索引擎会过滤掉display:none其中的内容。

JS对优化的误区

1. 页面中重要的内容不要用JS输出，因为蜘蛛不识别
2. js代码进行DOM操作，应尽量放在body结束标签之前，html结束标签之后。