網站優化從網站建設前端開始
做網站優化不只是單把一個方面做極致就好了，而是每個環節都需要做好，這樣才能更好的把網站做好。所以我們做網站優化就要從網站建設時就開始，如果前端的優化，后期站內的優化，再站外的優化，等各各環節，逐一做好。這樣我們的網站排名才能更好，更加穩定。今北京SEO公司在這里主要來講講網站優化從網站建設前端開始。
網站優化
前端開發如何做好SEO優化的工作
一、簡化代碼結構，更利于搜索引擎分析抓取有用內容：頁面盡量采用DIV+CSS，當然，表格展現模式用table還是比div方便很多的；所有js、css采用外聯方式，圖片采用css精靈，減少請求次數?？聪孪旅嫱瑯拥膬热?，用div和talbe布局的代碼比較，顯而易見用div簡便的多。
二、重要內容優先加載（第一個鏈接好是網站主關鍵詞，不刻意要求），可以用css來處理，索引一篇文章的長度也是有限制的，一定要把重要的內容，優先展現給蜘蛛，這方面你可以通過查看一些比較大的網頁快照來求證。
三、每個頁面只能出現一次H1標簽，H2標簽可以多次：H1權重很高，普遍認為僅次于title，一般資訊詳情頁的標題、商品詳情頁的標題，都放在H1里。
四、圖片一定要添加alt屬性，title屬性可選：蜘蛛不認識圖片上的內容，只能通過alt屬性來判斷，如果是商品列表頁，所有商品都加了alt和title的話，容易造成堆砌關鍵詞，所以我一般是只加alt屬性。
五、圖片大小聲明：如果圖片大小不做定義的話，頁面需要重新渲染，就會影響到速度。
六、鏈接可根據實際需求添加title屬性以及nofllow值；非特殊性鏈接，鏈接地址一定要寫入herf屬性，有些前端開發人員為了省事，直接用div加個click事件當鏈接，在視覺上和使用上確實是實現了鏈接效果，但是做過SEO優化的人員都知道，蜘蛛目前對于js的支持很差，基本無法讀取里面的鏈接地址。所以說用click事件是絕對不允許的，特別是一些重要的導航鏈接。
七、頁面內容盡量不要做成flash、圖片、視頻，這些東西蜘蛛是抓不到的，就算是必須的，也要生成相應的靜態頁面。有很多企業站看著很炫，全站flash，老板看著是爽了，做SEO優化的人員就要抓狂了，全站沒一個鏈接。
八、除首頁外別的頁面好要加上面包屑型導航，導航結構一定要清晰。
九、做好404頁面，一般會加首頁鏈接及錯誤提示，并測試其返回狀態碼為404：1、用戶體驗友好，可以留住用戶，不至于直接關閉頁面；2、蜘蛛友好，可以返回抓取其他頁面。
十、網站結構呈扁平狀樹型，目錄結構不宜過深，每個頁面離首頁多點擊不超過3次，過深不利于搜索引擎的抓取。
前端SEO技巧
通過網站的結構布局設計和網頁代碼優化，使前端頁面既能讓瀏覽器用戶能夠看懂，也能讓“蜘蛛”看懂。
一、網站結構布局優化：盡量簡單、開門見山，提倡扁平化結構。
一般而言，建立的網站結構層次越少，越容易被“蜘蛛”抓取，也就容易被收錄。一般中小型網站目錄結構超過三級，“蜘蛛”便不愿意往下爬，“萬一天黑迷路了怎么辦”。并且根據相關調查：訪客如果經過跳轉3次還沒找到需要的信息，很可能離開。因此，三層目錄結構也是體驗的需要。為此我們需要做到：
1、 控制首頁鏈接數量
網站首頁是權重高的地方，如果首頁鏈接太少，沒有“橋”，“蜘蛛”不能繼續往下爬到內頁，直接影響網站收錄數量。但是首頁鏈接也不能太多，一旦太多，沒有實質性的鏈接，很容易影響用戶體驗，也會降低網站首頁的權重，收錄效果也不好。
因此對于中小型企業網站，建議首頁鏈接在100個以內，鏈接的性質可以包含頁面導航、底部導航、錨文字鏈接等等，注意鏈接要建立在用戶的良好體驗和引導用戶獲取信息的基礎之上。
2、扁平化的目錄層次，盡量讓“蜘蛛”只要跳轉3次，就能到達網站內的任何一個內頁。扁平化的目錄結構，比如：“植物”--> "水果" --> "蘋果"、“桔子”、“香蕉”，通過3級就能找到香蕉了。
3、導航優化
導航應該盡量采用文字方式，也可以搭配圖片導航，但是圖片代碼一定要進行優化，<img>標簽必須添加“alt”和“title”屬性，告訴搜索引擎導航的定位，做到即使圖片未能正常顯示時，用戶也能看到提示文字。
其次，在每一個網頁上應該加上面包屑導航，好處：從用戶體驗方面來說，可以讓用戶了解當前所處的位置以及當前頁面在整個網站中的位置，幫助用戶很快了解網站組織形式，從而形成更好的位置感，同時提供了返回各個頁面的接口，方便用戶操作；對“蜘蛛”而言，能夠清楚的了解網站結構，同時還增加了大量的內部鏈接，方便抓取，降低跳出率。
4、 網站的結構布局--不可忽略的細節
頁面頭部：logo及主導航，以及用戶的信息。
頁面主體：左邊正文，包括面包屑導航及正文；右邊放熱門文章及相關文章，好處：留住訪客，讓訪客多停留，對“蜘蛛”而言，這些文章屬于相關鏈接，增強了頁面相關性，也能增強頁面的權重。
頁面底部：版權信息和友情鏈接。
特別注意：分頁導航寫法，推薦寫法：“首頁 1 2 3 4 5 6 7 8 9 下拉框”，這樣“蜘蛛”能夠根據相應頁碼直接跳轉，下拉框直接選擇頁面跳轉。而下面的寫法是不推薦的，“首頁 下一頁 尾頁”，特別是當分頁數量特別多時，“蜘蛛”需要經過很多次往下爬，才能抓取，會很累、會容易放棄。
5、控制頁面的大小，減少http請求，提高網站的加載速度。
一個頁面好不要超過100k，太大，頁面加載速度慢。當速度很慢時，用戶體驗不好，留不住訪客，并且一旦超時，“蜘蛛”也會離開。
二、網頁代碼優化
1、<title>標題：只強調重點即可，盡量把重要的關鍵詞放在前面，關鍵詞不要重復出現，盡量做到每個頁面的<title>標題中不要設置相同的內容。
2、<meta keywords>標簽：關鍵詞，列舉出幾個頁面的重要關鍵字即可，切記過分堆砌。
3、<meta description>標簽：網頁描述，需要高度概括網頁內容，切記不能太長，過分堆砌關鍵詞，每個頁面也要有所不同。
4、<body>中的標簽：盡量讓代碼語義化，在適當的位置使用適當的標簽，用正確的標簽做正確的事。讓閱讀源碼者和“蜘蛛”都一目了然。比如：h1-h6 是用于標題類的，<nav>標簽是用來設置頁面主導航的等。
5、<a>標簽：頁內鏈接，要加 “title” 屬性加以說明，讓訪客和 “蜘蛛” 知道。而外部鏈接，鏈接到其他網站的，則需要加上 el="nofollow" 屬性, 告訴 “蜘蛛” 不要爬，因為一旦“蜘蛛”爬了外部鏈接之后，就不會再回來了。
6、正文標題要用<h1>標簽：“蜘蛛” 認為它重要，若不喜歡<h1>的默認樣式可以通過CSS設置。盡量做到正文標題用<h1>標簽，副標題用<h2>標簽, 而其它地方不應該隨便亂用 h 標題標簽。
7、<br>標簽：只用于文本內容的換行，比如:
<p>
第一行文字內容<br/>
第二行文字內容<br/>
第三行文字內容
</p>
8、表格應該使用<caption>表格標題標簽
9、<img>應使用 "alt" 屬性加以說明
10、<strong>、<em>標簽 : 需要強調時使用。<strong>標簽在搜索引擎中能夠得到高度的重視，它能突出關鍵詞，表現重要的內容，<em>標簽強調效果僅次于<strong>標簽。
<b>、<i>標簽: 只是用于顯示效果時使用，在SEO中不會起任何效果。
11、文本縮進不要使用特殊符號 應當使用CSS進行設置。版權符號不要使用特殊符號 © 可以直接使用輸入法，拼“banquan”，選擇序號5就能打出版權符號?。
12、巧妙利用CSS布局，將重要內容的HTML代碼放在前面，前面的內容被認為是重要的，優先讓“蜘蛛”讀取，進行內容關鍵詞抓取。
13、重要內容不要用JS輸出，因為“蜘蛛”不認識
14、盡量少使用iframe框架,因為“蜘蛛”一般不會讀取其中的內容
15、謹慎使用 display：none ：對于不想顯示的文字內容，應當設置z-index或設置到瀏覽器顯示器之外。因為搜索引擎會過濾掉display:none其中的內容。
16、 不斷精簡代碼
17、js代碼如果是操作DOM操作，應盡量放在body結束標簽之前，html代碼之后。
前端SEO優化方法及建議
一、啟用GZIP壓縮網頁。
什么是GZIP壓縮？GZIP早由Jean-loup Gailly和Mark Adler創建，用于UNⅨ系統的文件壓縮。我們在Linux中經常會用到后綴為.gz的文件，它們就是GZIP格式的?，F今已經成為Internet 上使用非常普遍的一種數據壓縮格式，或者說一種文件格式。
GZIP壓縮網頁與什么用？
HTTP協議上的GZIP編碼是一種用來改進WEB應用程序性能的技術。
大流量的WEB站點常常使用GZIP壓縮技術來讓用戶感受更快的速度。
這一般是指WWW服務器中安裝的一個功能，當有人來訪問這個服務器中的網站時，服務器中的這個功能就將網頁內容壓縮后傳輸到來訪的電腦瀏覽器中顯示出來.一般對純文本內容可壓縮到原大小的40%.這樣傳輸就快了，效果就是你點擊網址后會很快的顯示出來.當然這也會增加服務器的負載。
二、網頁（前端）支持瀏覽器緩存以達到速度優化效果。
瀏覽器緩存有什么用？瀏覽器緩存（Browser Caching）是為了節約網絡的資源加速瀏覽，瀏覽器在用戶磁盤上對近請求過的文檔進行存儲，當訪問者再次請求這個頁面時，瀏覽器就可以從本地磁盤顯示文檔，這樣就可以加速頁面的閱覽。
瀏覽器緩存放在什么地方？
可放到文件，內存中（如session），還有cache（高速緩存），還有 cookie，session，viewstate，這些是我們經常用到的，但可以認為他們是緩存數據。其實cache跟session有相似功能，但 cache可在代碼中設置過期時間，依賴項。所謂依賴項（例如：微軟的類cachedependcy sqlCacheDependency）當依賴項變動了，系統會通知cache過期，無效。緩存可是有服務器緩存，客戶端緩存。
舉例如何使用瀏覽器緩存以優化網頁（前端）。
使用瀏覽器緩存以優化網頁（前端）
對于SEO優化人員來講，不必掌握如何使用瀏覽器緩存代碼，但需要知曉相關原理。
三、利用內容分發網絡（CDN）優化網站加載速度。
網站頁面（前端）優化方法及建議-內容分發網絡（cdn）
內容分發網絡（CDN）概念：CDN是構建在網絡之上的內容分發網絡，依靠部署在各地的邊緣服務器，通過中心平臺的負載均衡、內容分發、調度等功能模塊，使用戶就近獲取所需內容，降低網絡擁塞，提高用戶訪問響應速度和命中率。CDN的關鍵技術主要有內容存儲和分發技術。
內容分發網絡（CDN）原理：CDN的基本原理是廣泛采用各種緩存服務器，將這些緩存服務器分布到用戶訪問相對集中的地區或網絡中，在用戶訪問網站時，利用全局負載技術將用戶的訪問指向距離近的工作正常的緩存服務器上，由緩存服務器直接響應用戶請求。
內容分發網絡（CDN）目的：使用戶可就近取得所需內容，解決 Internet網絡擁擠的狀況，提高用戶訪問網站的響應速度。
內容分發網絡（CDN）的主體是空間商而非網站管理員本身。
四、刪除多余代碼。
很多時候，一個網站的網頁中存在很多多余的代碼。如首頁用到的js，列表頁就用不到，如果全站使用頭部調用，就讓某些本不需要相關代碼的網頁也無故添加了許多代碼，這些代碼的精簡，是有利于前端的打開速度的。也就是說：網站中的每一個頁面，都無需多余代碼。
五、充分利用css控制樣式。
網站頁面（前端）優化方法及建議-css樣式
一個前端代碼精簡的網站，其css代碼與div是分離的，無需在前端對某些代碼使用style定義樣式，一切以css控制即可。如：某一個網頁中即使用了style定義樣式，又使用了css定義樣式，這樣就重復了代碼，也會造成網站前端加載速度的慢化。
六、CSS代碼的優化與控制。
小明SEO教程所提供的一切網站頁面（前端）優化方法及建議，其終目的都是加快網站打開速度，這些方法和建議的落地點在于精簡代碼，給網頁前端進行減肥，css代碼優化的點包括但不限于：縮寫css代碼；排列css代碼；同屬性提取共用css選擇器；分離網頁顏色和背景設置樣式（較大站點需要注意）；條理化css代碼等。
七、前端js代碼優化。
與css代碼類似，前端js代碼優化方法包括但不限于：
避免全局查找：在一個函數中會用到全局對象存儲為局部變量來減少全局查找，因為訪問局部變量的速度要比訪問全局變量的速度更快些；
定時器：如果針對的是不斷運行的代碼，不應該使用setTimeout，而應該是用setInterval，因為setTimeout每一次都會初始化一個定時器，而setInterval只會在開始的時候初始化一個定時器；
字符串連接：如果要連接多個字符串，應該少使用+=；如果是收集字符串，比如多次對同一個字符串進行+=操作的話，好使用一個緩存，使用JavaScript數組來收集，后使用join方法連接起來；
避免with語句：和函數類似 ，with語句會創建自己的作用域，因此會增加其中執行的代碼的作用域鏈的長度，由于額外的作用域鏈的查找，在with語句中執行的代碼肯定會比外面執行的代碼要慢，在能不使用with語句的時候盡量不要使用with語句；
數字轉換成字符串：般好用”” + 1來將數字轉換成字符串，雖然看起來比較丑一點，但事實上這個效率是高的；
浮點數轉換成整型：很多人喜歡使用parseInt()，其實parseInt()是用于將字符串轉換成數字，而不是浮點數和整型之間的轉換，我們應該使用Math.floor()或者Math.round()；如果定義了toString()方法來進行類型轉換的話，推薦顯式調用toString()，因為內部的操作在嘗試所有可能性之后，會嘗試對象的toString()方法嘗試能否轉化為String，所以直接調用這個方法效率會更高；
多個類型聲明：在JavaScript中所有變量都可以使用單個var語句來聲明，這樣就是組合在一起的語句，以減少整個腳本的執行時間，就如上面代碼一樣，上面代碼格式也挺規范，讓人一看就明了。
插入迭代器：如var name=values[i]; i++;前面兩條語句可以寫成var name=values[i++]；
使用DocumentFragment優化多次append；
使用一次innerHTML賦值代替構建dom元素；
通過模板元素clone，替代createElement；
使用firstChild和nextSibling代替childNodes遍歷dom元素；
刪除DOM節點；
使用事件代理；
重復使用的調用結果，事先保存到局部變量；
有關前端js代碼優化的其他說明，可以查閱：http://www.cnblogs.com/liyunhua/p/4529086.html，有細致的說明。
注：SEO優化人員不必要求掌握前端js代碼優化的具體代碼，這是前端人員的工作。
八、tab表格的使用建議。
tab表格布局網頁是較過時的技術，現目前效果更好的是div。對于tab表格的使用建議如下：盡量少使用tab表格，杜絕在嵌套條件下的表格使用。
九、網站圖片SEO優化。
網站圖片優化是加快整站打開，加載速度的重要一環，對于網站來講，我們需要使用正確的圖片尺寸與格式，并在不損害圖片質量的情況下壓縮圖片。
首先，使用正確的圖片格式如jpg格式的圖片。
其次，使用合理的圖片尺寸。圖片尺寸越大，對加載的速度影響越大。有相關統計，圖片減少50%，其網站整體頁面會減少75%。對于圖片尺寸的處理，其基本要求是在滿足用戶需求的基礎上使用相應大小的圖片。
再次，使用工具壓縮圖片。圖片變小有利于網站打開速度的提升，使用壓縮工具可以讓圖面所占的空間更小。
十、刪除多余的字體和網頁注釋。
從字體方面分析，如果使用字體過多，勢必會造成網站加載速度變慢，從而不利于網站前端的打開速度的提升；
從網頁注釋分析，網頁注釋有利于前端開發人員對于網站的維護，但另外一方面，這些注釋對搜索引擎是無用的，是多余的“噪聲”。
前端開發過程中SEO優化的注意點
html語義化
剛接觸web前端開發的時候很奇怪，既然html標簽可以通過css進行更改它的內置屬性，為什么還有這么多的標簽存在
<div>,<h1>,<span>,<strong>....
而現在，隨著對前端的不斷深入，才逐漸明白它的用處
語義化的html可以讓開發者更容易看懂每一塊代碼的含義及其側重點，同時，對于SEO優化也有幫助
網絡爬蟲在搜索的過程中會按著html語義去側重搜索，
標準的符合W3C規范html能讓網絡爬蟲更好的理解，從而提高網站的SEO優化水平。
在http://www.w3school.com.cn/html篇中，有對每一個標簽的語義都做了說明，需要的同學可以注意看下。
ifame
對于前端開發來說，ifame已經是很久之前的技術了，現階段應該很少有前端開發者使用ifame（當然，在后臺框架搭建中還是會使用到）
ifame退出前端舞臺的理由我想應該就有一點，web中使用ifame，ifame中的內容網絡爬蟲是搜索不到的，所以對于ifame頁面來說基本不存在SEO優化
建議前端開發中少用，（后臺開發對這點到不在意，后臺系統對于SEO優化沒這需求吧）
js輸出
對于網站中一些重要的文字或內容好不要使用js輸出生成html展現，因為網絡爬蟲對web中的js只會視而不見，所以用js輸出過多的內容
會讓網站的SEO優化水平降低，建議重要的信息不要用js輸出（我還是挺喜歡用js去輸出html的，被限制住~~~~）
alt屬性
alt屬性一般應用在<img>標簽里，當圖片無法正常加載時，alt屬性設置的值就會顯示出來作為解釋文本
對于前端開發人員來說總感覺這個屬性有點雞肋，因為在開發過程中基本看不到這個屬性的效果（PS：開發過程中一般情況都不會有加載圖片失敗的情況）
不過要注意，該加的屬性還是要加上去的，網絡爬蟲是識別不了圖片的，不管你的圖片怎么炫怎么酷，在網絡爬蟲眼里終究只是一段code而已，而<img>
標簽的alt屬性在網絡爬蟲眼里就是圖片的標志
<title>
<meta name="description" content="...">
<meta name="keywords" content="...">
合理的使用這三個對SEO也有很大的幫助，具體使用方法這里就不多說了，有興趣的可以網上搜下。
上一篇：原創文章網站排名的硬性條件
下一篇：網站優化該怎么做一目了然
掃一掃關注 備案號： 蘇ICP備17045419號-3 版權所有：蘇州獵搜網絡科技有限公司｜ 
蘇公網安備 32058302002566號
獵優云收費模式：
1、按不同的關鍵詞、不同的排名位置、每24小時展現，三項確定收費標準，后臺進行自動扣費結算；
2、本公司只針對排名在搜索引擎首頁的關鍵詞進行扣費，不在首頁不扣費；
3、客戶先預存，然后根據關鍵詞的單價按效果按天收費，即哪個關鍵詞上線有排名就扣哪個關鍵詞的費用，直到預存扣完為止。
蘇公網安備 32058302002566號
獵優云收費模式：
1、按不同的關鍵詞、不同的排名位置、每24小時展現，三項確定收費標準，后臺進行自動扣費結算；
2、本公司只針對排名在搜索引擎首頁的關鍵詞進行扣費，不在首頁不扣費；
3、客戶先預存，然后根據關鍵詞的單價按效果按天收費，即哪個關鍵詞上線有排名就扣哪個關鍵詞的費用，直到預存扣完為止。
