前端与SEO ①:结构、表现、行为分离

发起“结构、体现、行为,三者别离,互不干与”的WEB页面。

他们各代表这什么?

- 内容:让拜访者浏览的信息
- 结构:使内容具有逻辑性和易用性
- 体现:修饰内容的外在体现使之看起来美观
- 行为:与内容的交互操作

按照W3C规范,编写网页时应先考虑结构,之后再结构的基础上添加样式,终究在加上交互行为。

所以HTML用来保存内容与结构,CSS用来控制整个文档的体现。但在中文页面中,契合这个规范的网页寥寥无几。

那这玩意跟查找引擎有毛线关系呢?先举个栗子:众多网页中常见的一个片段,如下:

 

 

大部分网页这块都怎么写的?

受DIV+CSS盒子模型的影响,前端拿过来设计图,一般直觉的对网页切成N个块。

比如上图:左面先切一个DIV向左浮动,右边再切一个DIV向右浮动,左浮动的DIV里边加一个图片(IMG),右浮动的DIV里边加一个标题(H)和段落(P),如下:

 

 

源码是这样的(demo1):

 

 

看上去是没有任何问题,但实践上嵌套的层比较多。正文 h 和 p 的途径是:

/html/body/div@ >

实践网页,这个片段外面还要嵌套好多层,所以真实途径比这个要长很多。

要进行优化,以减少层级。于是考虑, img 外面底子不需要在加一个div, img 本身可以通过左浮动再设置外边距到固定的方位,于是将代码改成demo2:

 

 

虽然少了图片的DIV,但到正文的途径仍旧没变,于是接着优化,改成demo3:

 

 

至此,抵达正文 p 和 h 和 img 的途径都缩短了1层:

/html/body/div@ >

现已是最短途径。

demo1之所以不契合W3C规范,大多是因为编写时是因为优先考虑的不是文档的全体结构,而是先拆成一个一个块,在想方法靠CSS组合到一块。这当然不是W3C发起的结构样式别离的广州网站建设。

所以上个栗子,从demo1到demo3的两次调整,在广州网站建设上是从 “先将HTML拆成一块块,在用CSS拼到一同” 到 “先看HTML全体,在用CSS体现成一块块” 的演变

 

 

总结一下,带入查找引擎。这玩意有什么优点呢?

1、提高页面加载速度

2、降低改版成本。毕竟html减少的同时,对应的css也会减少,天然需要修正的当地也少了。

3、节省带宽。

4、添加查找引擎对网页的可读性,对主体内容的识别更容易。明明是一个全体的内容,非得切割成一块块,万一查找引擎没看出来这些是有联络的怎么办。

5、利于多种设备的可读性和可拜访性。

一位在海外做google的同学告我,google在排序上是倾向契合W3C规范的网页,比照渣度与google的搜素成果便可看出,但渣度对这个貌似并不伤风,估计国内网页在这点上遍及不如国外,所以也苟且偷生了。

下面,是常规的嘲讽时间。

前端与SEO的关系对错常大的、是紧密连接的,没准因为招一个靠谱的前端,然后流量就涨了,然而一些无知SEO觉得是自己之前做的哪些动作不可思议的导致流量增加,屁颠屁颠的认为自己十分牛逼。

前端好坏直接影响查找流量,但有没太多人注重(其实国平老早现已提过了),大都SEO谈到面向查找引擎的前端优化,想到的都是精简html/css/js(大多是拿第三方东西格局化一下啦再合并一下啦)或者是标记H1、H2等各种标签,然而并没无意识究竟层的东西。

站在查找引擎的角度看网页,看的是html,不是浏览器烘托后的界面。见过一些网页,选用遍及的两列布局,左列占 body 宽度80%,展示主体内容;右列占宽度20%,调用一堆琐细的非必须信息,在浏览器上看主体内容到非必须内容从左到右,十分正常。但打开HTML,右列非必须内容的DIV却放在主体内容DIV的前面,这在查找引擎看来可就完全不一样了。

以上,乃前端与SEO关系中的冰山一角。

 

来历:本文由原创撰写,欢迎分享本文,转载请保留出处和链接!
是一家从事SMT设备的代理,设计、出售及效劳的设备商,深圳三本建立的宗旨是为用户提供先进的设备和技能,既合乎用户现在出产需要且兼顾将来科技开展。此外,本司对用户提供的完善技能支撑,亦是本司成功的重点。

相关阅读