前端如何作好SEO優化

1、什麼是SEO？

搜索引擎優化（Search Engine Optimization）,簡稱SEO。是按照搜索引擎給出的優化建議，以加強網站核心價值爲目標，從網站結構、內容建設方案、用戶互動傳播等角度進行合理規劃，以改善網站在搜索引擎中的表現，吸引更多搜索引擎用戶訪問網站。SEO與搜索引擎，互相促進，互利互助。 

2、爲何須要SEO？

作SEO是爲了提升網站的權重，加強搜索引擎友好度，以達到提升排名，增長流量，改善用戶體驗，促進銷售的做用。

3、從前端角度，哪些注意事項有助於SEO？

3.1 提升頁面加載速度

 能用css解決的不用背景圖片，背景圖片也儘可能壓縮大小，能夠幾個icons放在一個圖片上，採用css精靈(css sprite)，使用background-position找到須要的圖片位置。減小HTTP請求數，提升網頁加載速度。 

3.2結構、表現和行爲的分離。

不要把css和js放在同一個頁面，採用外鏈的方式能大大加快網頁加載速度。

3.3 優化網站分級結構

在每一個內頁加麪包屑導航

3.4集中網站權重

因爲蜘蛛分配到每一個頁面的權重是必定的，這些權重也將平均分配到每一個a連接上，那麼爲了集中網站權重，能夠使用」rel=nofollow」屬性，它告訴蜘蛛無需抓取目標頁,能夠將權重分給其餘的連接。

3.5文本強調標籤的使用

使用strong標籤加粗文字

3.6 a標籤的title屬性的使用。

在不影響頁面功能的狀況下，能夠儘可能給a標籤加上title屬性，能夠更有利於蜘蛛抓取信息。 

3.7圖片alt屬性的使用

這個屬性能夠在圖片加載不出來的時候顯示在頁面上相關的文字信息

3.8H標籤的使用。

主要是H1標籤的使用須要特別注意，由於它自帶權重，一個頁面有且最多隻能有一個H1標籤，放在該頁面最重要的標題上面，如首頁的logo上能夠加H1標籤。

3.9 圖片大小聲明。

3.10 頁面佈局調整。

頁面內容儘可能不要作成flash、視頻，

4、前端SEO

1. 對網站的標題、關鍵字、描述精心設置，反映網站的定位，讓搜索引擎明白網站是作什麼的；
2. 網站內容優化：內容與關鍵字的對應，增長關鍵字的密度；
3. 生成針對搜索引擎友好的網站地圖；
4. 增長外部連接，到各個網站上宣傳；
5. 代碼優化

 

HTML：

　1.標籤的有開有合。

　　2.避免冗餘代碼，例如去除空格字符。

　　3.合理利用標籤語義化。

　　4.合理的嵌套規則，避免行元素內嵌套塊元素。

　　5.img標籤內須要添加title屬性和alt屬性。

　　6.a標籤內須要添加title屬性。

　　7.Meta標籤的優化（過去搜索引擎優化的重要手法，如今已經不是關鍵因素，但仍不可忽略）主要包括： Meta description、Meta keywords的設置　　關鍵字密度要適度，一般爲2%-8%，也就是說你的關鍵字必須 在 頁面中出現若干次，或者在搜索引擎容許的範圍內，要避免堆砌關鍵字。

　　8.<title>頁面標題，必須列出信息的標題、網站的名稱以及相關關鍵字，避免堆關鍵字。

　　9.合理使用註釋。

　　10. 儘可能少使用iframe框架,由於「蜘蛛」通常不會讀取其中的內容

　　11. 文本縮進不要使用特殊符號   應當使用CSS進行設置。版權符號不要使用特殊符號 © 能夠直接使用輸入法，拼「banquan」，選擇序號5就能打出版權符號©。

CSS:

1.避免將css代碼寫在標籤內。

　　2.若是css代碼量少，可直接寫在頭部。不然請使用外部引入的方式。

　　3.請不要使用通配符選擇器 *{margin:0;padding:0;} 這不單單由於它是緩慢和低效率的方法，並且還會致使一 些沒必要要的元素也重置了外邊距和內邊距。

　　4.css代碼縮寫能夠提升你寫代碼的速度，精簡你的代碼量，包括margin，padding，border ，font， background和顏色值等。

　　5.利用css繼承，若是一個父元素內有多個子元素擁有相同的樣式，可將相同的樣式定義在元素上。

　　6.若是多個元素擁有相同的樣式，可定義一個通用的class或使用羣組選擇器。

　　7.使用背景圖合併技術。

　　8.適當的代碼註釋。

　　9.謹慎使用 display：none ：對於不想顯示的文字內容，應當設置z-index或設置到瀏覽器顯示器以外。由於搜索引擎會過濾掉display:none其中的內容。

JS

       1採用外部引入的方法。

　　2.合理合併JS代碼，可減小服務器的壓力。

　　3.良好的JS代碼習慣。例如：減小頁面重繪，減小做用域鏈上的查找次數。