標籤：
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關係中的冰山一角。
【GoGo闖】前端與SEO(1)：結構、表現、行為分離
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
