前端页面结构布局优化指南：

1、链接优化：

一般而言，建立的网站结构层次越少，越容易被“蜘蛛”抓取，也就容易被收录。

示例：首页-->产品中心-->立刷POS，随行付POS，瑞和宝POS，

扁平化的目录层次，尽量让“蜘蛛”只要跳转3次，就能到达网站内的任何一个内页

2、导航优化：

导航尽量采用文字，也可以搭配图片，注意img图片alt描述文字，a标签title描述，告诉搜索引擎导航的定位。

其次，在每一个网页上应该加上面包屑导航，好处：从用户体验方面来说，可以让用户了解当前所处的位置以及当前页面在整个网站中的位置，帮助用户很快了解网站组织形式，从而形成更好的位置感，同时提供了返回各个页面的接口，方便用户操作，

对“蜘蛛”而言，能够清楚的了解网站结构，同时还增加了大量的内部链接，方便抓取，降低跳出率。

3、控制页面的大小，减少http请求，提高网站的加载速度。

一个页面最好不要超过100k，太大，页面加载速度慢。当速度很慢时，用户体验不好，留不住访客，并且一旦超时，“蜘蛛”也会离开。

常见优化做法是：

剔除空标签，无用代码，压缩CSSJShtml代码，推荐使用iconfont字体图标，整合背景图片制作CSS精灵图，图片懒加载处理，设置浏览器缓存等等。

4、巧妙利用CSS布局

将重要内容的HTML代码放在最前面，最前面的内容被认为是最重要的，优先让“蜘蛛”读取，进行内容关键词抓取。

5、避免使用iframe框架,因为“蜘蛛”一般不会读取其中的内容

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

7、页面标签使用

<h1-6><strong>、<em>标签 : 需要强调时使用。

<strong>标签在搜索引擎中能够得到高度的重视，它能突出关键词，表现重要的内容，

<em>标签强调效果仅次于<strong>标签。

<b>、<i>标签: 只是用于显示效果时使用，在SEO中不会起任何效果。

慎用h标签。不可滥用，造成页面结构过于发杂，常用做法是：只在每个模块的标题部分使用H标签，h3以下标签尽量不使用，因为H3以下已经没有多少权重，同普通文字差不多。

查看更多前端优化知识请点这里：孙鲁意前端博客