自動外鏈工具 在線排版工具 搜索引擎提交入口 wordpress主題推薦 批量打開網址工具 【老域名購買】 思享SEO導航 【網站合作】

前端與SEO ①:結構、表現、行為分離

340

W3C標準定義WEB包含三個層:

-?結構層(HTML)
-?表現層(CSS)
-?行為層(Javascript)

提倡“結構、表現、行為,三者分離,互不干涉”的WEB頁面。

他們各代表這什么?

-?內容:讓訪問者瀏覽的信息
-?結構:使內容具有邏輯性和易用性
-?表現:修飾內容的外在表現使之看起來美觀
-?行為:與內容的交互操作

按照W3C標準,編寫網頁時應先考慮結構,之后再結構的基礎上添加樣式,最后在加上交互行為。

所以HTML用來保存內容與結構,CSS用來控制整個文檔的表現。但在中文頁面中,符合這個標準的網頁屈指可數。

那這玩意跟搜索引擎有毛線關系呢?先舉個栗子:眾多網頁中常見的一個片段,如下:

 

 

大部分網頁這塊都怎么寫的?

受DIV+CSS盒子模型的影響,前端拿過來設計圖,一般直覺的對網頁切成N個塊。

比如上圖:左邊先切一個DIV向左浮動,右邊再切一個DIV向右浮動,左浮動的DIV里面加一個圖片(IMG),右浮動的DIV里面加一個標題(H)和段落(P),如下:

 

 

源碼是這樣的(demo1):

 

 

看上去是沒有任何問題,但實際上嵌套的層比較多。正文<h>和<p>的路徑是:

/html/body/[email protected]=“dome”/[email protected]=“reght”/p

實際網頁,這個片段外面還要嵌套好多層,所以真實路徑比這個要長很多。

要進行優化,以減少層級。于是思考,<img>外面根本不需要在加一個div,<img>本身可以通過左浮動再設置外邊距到固定的位置,于是將代碼改成demo2:

 

 

雖然少了圖片的DIV,但到正文的路徑依舊沒變,于是接著優化,改成demo3:

 

 

至此,到達正文<p>和<h>和<img>的路徑都縮短了1層:

/html/body/[email protected]=“dome”/p

已經是最短路徑。

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關系中的冰山一角。

 

來源:本文由思享SEO博客原創撰寫,歡迎分享本文,轉載請保留出處和鏈接!
seo培訓評論廣告

搶沙發

昵稱*

郵箱*

網址

七乐彩选号技巧