SEO祥子博客

深圳SEO顾问|SEO专家|SEO外包服务|深圳SEO优化|搜索引擎优化SEO|网站SEO数据分析。

什么是瀑布流布局

瀑布流名词解释:瀑布流,又称瀑布流式布局、瀑布墙。是目前比较流行的一种网站页面布局方式,视觉表现为参差不齐的多栏布局,随着瀑布流效果页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest,逐渐在国内流行开来。国内大多数清新站基本为这类风格。

瀑布流应用:瀑布流对于图片的展现,是高效而具有吸引力的,用户一眼扫过的快速阅读模式可以在短时间内获得更多的信息量,而瀑布流里懒加载模式又避免了用户鼠标点击的翻页操作,瀑布流的主要特性便是错落有致,定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式,巧妙的利用视觉层级,视线的任意流动又缓解了视觉疲劳。国内类Pinterest网站也如雨后春笋般出现,目前已知网站超40家,类Pinterest网站有三种,一是电商导购,如蘑菇街和美丽说、好享说,依托于淘宝平台;二是兴趣图谱分享,如知美、花瓣等;三是在细分垂直领域,如针对吃货的零食控、针对家居行业的他部落、综合性中文网络社交平台的海内论坛等。

瀑布流页面性能优化(绝对定位实现方式)

最近几年瀑布流成了一种潮流。自Pinterest.com开创这种页面布局方式后,类似的布局,似乎一夜之间出现在国内外大大小小的网站上,比如蘑菇街 ,点点网 ,以及淘宝最新上线的"哇哦 " 等等,估计越来越多的社交网站、图片网站都将采用瀑布流布局方式。

瀑布流目前已知有三种实现方式,本文针对绝对定位的方式进行瀑布流布局分享一下瀑布流布局对性能的优化。  

性能优化点1:在瀑布墙指定图片高度:

   对于瀑布流式图片布局性能起决定性作用的是img标签必须指定height(width在瀑布流式布局中一般是固定的):  
   网页的加载顺序是dom会优先加载完成,然后加载远程文件包括图片。绝对定位方式在dom加载完成后会进行计算,然而此时如果没有为img标签指定width与height,会等到图片加载完成浏览器才会渲染出整个元素的高度。所以在dom加载完成之后计算的元素高度是不正确的,确切的说是没有图片的高度的。  

瀑布流网站虽酷,但需考虑搜索引擎收录问题

如果你去SEO交流论坛发帖“瀑布流网站对SEO有没有影响”, 得到的答案多数是:“超过125K以后的内容基本上是抓取不到了。具体你可以查看你的快照。但是瀑布对用户体验很好,所以这个还是需要坚持的。SEO的影响就是内部入口引导会减少。” 但是SEO祥子在这里强调一下,这绝对是个误区。目前搜索引擎尤其是百度是不能解析Ajax输出内容的!

SEO祥子关于瀑布流SEO作法是:

   1. 瀑布墙TOP N条记录(比如前20-50条)采用HTML的方式,是用户打开页面就默认加载的内容;
2. TOP N +1 条记录开始使用Ajax瀑布流加载,即在用户滑动鼠标到页面底部时才加载;
3. 建立HTML地图,引导搜索引擎爬虫收录文章页面。

瀑布流网站如何做搜索引擎优化有利于SEO

瀑布流网站布局众所周知,其最大的优点是用户体验极好。用户不需要点击链接,仅需滑动鼠标就可以浏览网站或栏目最新内容,尤其被广泛应用于社交、社区类网站。但是,瀑布流一般使用Ajax技术,要命的是目前多数搜索引擎包括百度并不能解析Ajax。那瀑布流网站如何优化才能使其利于SEO,实现搜索引擎友好?在SEO与用户体验之间取得平衡,SEO与用户体验兼顾? SEO祥子最近接到的一个网站优化案子就遇到此类问题,所以不得不认真研究一下瀑布流网站的SEO问题,也许这是一个新课题。客户的网站想保留现有的瀑布流布局,以这种潮流的页面布局来吸引用户,保持对用户的吸引力;同时,也需要解决瀑布流页面的搜索引擎收录、搜索引擎排名,也就是更有利于SEO。做为一名专业SEO顾问,对于用户提出来的问题,当然义不容辞的去分析、去解决。

«1»
最近发表
本月最热文章
最新留言
控制面板
Tags列表
关于瀑布流栏目:
SEO祥子是深圳知名SEO专家,SEO祥子博客瀑布流栏目分享瀑布流相关的知识、技术与经验,瀑布流网站布局,瀑布流风格,瀑布流网站优化,欢迎圈内同仁点评互动。

Powered By Z-Blog 2.1 Phoenix Build 130128

SEO祥子博客: 是一个分享SEO经验,关注搜索引擎算法、网站分析、WEB趋势、建站与运营的博客。是一个值得搞网站的人关注的原创SEO博客。
SEO祥子是知名的深圳SEO顾问与搜索引擎优化专家,曾任职于日IP超十万级网站的SEO总监,现承接深圳SEO外包项目与深圳SEO顾问服务。祥子SEO博客是一个分享深圳SEO技术、深圳SEO优化技巧、SEO数据分析技术的SEO博客。
滕讯微博:SEO祥子 | 新浪微博:SEO祥子 | QQ:50208986 | 微信:seoxiangzi | SEO祥子 在G+订阅 RSS 2.0粤ICP备15051338号-1