網站設計的時候前端如何與SEO結合

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

– 結構層（HTML）
– 表現層（CSS）
– 行為層（Javascript）

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

他們各代表這什么？

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

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

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

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，不是瀏覽器渲染后的界面。見過一些網頁，采用普遍的兩列布局，左列占

寬度80%，展示主體內容；右列占寬度20%，調用一堆零碎的次要信息，在瀏覽器上看主體內容到次要內容從左到右，非常正常。但打開HTML，右列次要內容的DIV卻放在主體內容DIV的前面，這在搜索引擎看來可就完全不一樣了。

以上，乃前端與SEO關系中的冰山一角。