美文网首页
前端页面结构布局优化指南:

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

作者: 啾咪啾咪啾 | 来源:发表于2019-02-22 09:31 被阅读0次

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以下已经没有多少权重,同普通文字差不多。

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

相关文章

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

    1、链接优化: 一般而言,建立的网站结构层次越少,越容易被“蜘蛛”抓取,也就容易被收录。 示例:首页-->产品中心...

  • 前端页面优化指南

    1.TTFB 全称:首字节时间 (Time To First Byte) 是指从客户端开始和服务端交互到服务端开始...

  • 前端

    前端页面布局前端页面布局——三栏布局 - magi的博客 - CSDN博客 页面高度,位置简述前端页面内的高度、位...

  • seo

    优化哪些方面 网站标题、关键字、描述( ) 网站内容优化(布局优化,内容优化)(1)扁平化结构,跳转的页面...

  • 网站优化

    1、网站结构优化网站导航、页面布局优化 2、网页标签优化网页TITIEL关键词标签、网页简介标签,图片注释、等方面...

  • 关于前端性能优化问题详解

    关于前端性能优化问题详解 出处:http://segmentfault.com/blogs 前端性能优化指南 AJ...

  • CSS 如何布局

    布局在前端开发中非常重要,布局是骨架是结构,就像房子的地基框架,设计优良的结构对整个页面的可维护性和扩展性都有很好...

  • Android性能优化

    一、布局优化 标签 标签,一般和 标签同时使用,降低层级结构 标签页面初始加载减...

  • 面试成功锦囊之页面布局

    说起前端开发,首先会想到页面布局,作为资深前端来说,用页面布局来谈前端可能会认为太浅显,但作为前端开发中最基础的技...

  • 页面布局

    作为前端,静态页面很考验一个css的功底,看一些大牛视频书写基础静态页面的时候,非常舒服,因为整个页面布局的结构非...

网友评论

      本文标题:前端页面结构布局优化指南:

      本文链接:https://www.haomeiwen.com/subject/wmdsyqtx.html