前端頁面 SEO 優化

SEO要點：
1.語義化html標籤，用合適的標籤嵌套合適的內容，不可過度依賴div，對瀏覽器更友善就能更容易被抓取。
2.重要的內容html代碼放在前面/左邊。搜索引擎爬蟲是從左往右，從上到下進行抓取的，利用佈局來實現重要的代碼在上面
3.重要內容要寫在html架構裏面，蜘蛛不會抓取js的內容，
4.儘可能減小使用iframe，由於蜘蛛不會抓取iframe的內容。
5.爲圖片img加上alt屬性，加了alt就沒必要加title了，避免搜索引擎認爲咱們惡意優化。alt能讓圖片沒加載時都能有文字提示。
6.須要強調的地方加上title，本頁面內跳轉a標籤內也要加title。
7.重要的地方能夠保留文字，有些地方必須用圖，可是蜘蛛不會爬img，這時應該設置文本，再用縮進隱藏的方法去掉文字，例如logo的優化就是這樣作的。注意隱藏不能用display：none，蜘蛛不會檢索display：none的內容，應用這個方法的標籤通常是logo，標題等重要信息
8.儘可能作到js、css、html的分離，不要在html中寫樣式代碼。
9.註釋的東西能去掉應該去掉，對搜索引擎更加友好
10.css放在頭部，js放在尾部，這樣不會阻塞頁面渲染，讓頁面長時間的空白
11.減小http的請求，使頁面更快加載。
12.使用本地緩存更快地訪問網站，使用cdn網絡，加快用戶訪問速度。

• 一些公共庫可使用第三方提供的靜態資源地址，（好比jquery,Normalize.css），一方面增長併發下載量，另外一方面可以和其餘網站共享緩存。
• 免費的cdn網站 http://www.bootcdn.cn/

13.使用G-ZIP壓縮，瀏覽速度更快，搜索引擎抓取信息量更大，對文本資源很是有效，對圖片資源則沒那麼大的壓縮比率
14.壓縮源碼和圖片 

• JavaScript 文件源代碼能夠採用混淆壓縮（）的方式，css文件源代碼進行普通壓縮，jpg圖片能夠根據質量壓縮爲50%到70%，PNG能夠用一些開源軟件來壓縮，好比24色變成8色，去掉一些PNG格式信息等。
• js代碼混淆壓縮工具  站長工具：http://tool.chinaz.com/js.aspx 
• png格式,壓縮工具 https://tinypng.com/
• 騰訊出品的壓縮工具：智圖 http://zhitu.isux.us/  

15.選擇合適的圖片格式

• 若是圖片顏色比較多就用JPG格式，若是圖片顏色比較多就用JPG格式，較少就用PNG格式，透明的圖片都用PNG格式，若是可以經過服務器判斷瀏覽器支持webP格式，那就用WebP格式和SVG。
• 其中webP格式是谷歌大力推崇的圖片格式，體積比PNG小45%。關於WebP格式的具體請看https://isux.tencent.com/introduction-of-webp.html

16.合併靜態資源

• 包括CSS,Javascript和小圖片，減小HTTP請求
其中小圖片的優化我我知道的有2種，
• 第一種：使用css精靈圖sprites（也有人稱爲雪碧圖），將小圖標所有放在一張圖片上（可使用這個網站來製做雪碧圖 http://csssprites.com/），經過background-position屬性來偏移圖片。節省了大量的http請求。缺點固然有，須要耐心調整圖片位置。
• 第二種：使用iconfont字體，圖片以字體的形式展示，註明的bootstrap框架就用到了這個技術。國內比較著名的免費開源iconfont是阿里是Iconfont(http://iconfont.cn/),能夠根據本身的需求選擇不一樣的兼容文件，低至IE6.

17.延長靜態資源緩存時間，這樣頻繁訪問網站的訪客就可以更快的訪問，不過這裏要經過修改文件名的方式，確保在資源更新的時候，用戶會拉取到最新的內容。

關鍵一點是頭部的title，description，keyword的設置。
1.title設置不宜過長，要簡短，網站的名字與相關的小內容，通常爲10-20個字。不能重複
2.keywords設置10個關鍵詞，每一個詞不能太長，簡短且符合你網站的特色，不能重複
3.description，50個字內描述你的網站

細說title，keywords，description

一、title（網站標題）

title，就是瀏覽器上顯示的那些內容，不只用戶能看到，也能被搜索引擎檢索到（搜索引擎在抓取網頁時，最早讀取的就是網頁標題，因此title是否正確設置極其重要。）title通常不超過80個字符，並且詞語間要用英文「-」隔開，由於計算機只對英語的敏感性較高，對漢語的敏感性不高。

用法：<title>網站標題</title>

1）首頁title寫法，通常是「網站名稱-主關鍵詞或一句含有主關鍵詞的描述」。小編在作優化時習慣把主關鍵詞放最前面，網站名稱放後面，由於搜索引擎給予標題最前面的詞比後面的高。好比，作「招聘」這個詞，就這樣寫「企業招聘-創業公司招聘技巧-xx招聘」。

2）欄目頁title寫法，通常有2種：「欄目名稱-網站名稱」、「欄目名稱欄目關鍵詞-網站名稱」。小編建議用「欄目名稱-網站名稱」。並且欄目名稱最好用關鍵詞來肯定，好比企業招聘欄目最好就用企業招聘，而不要起個讓人沒法識別的名字如企業來人，企業看看，或企業加上一些特殊符號，這種寫法雖然頗有個性，但會讓你的網站在優化上佔了下風。

3）分類列表頁title寫法，通常是「分類列表頁名稱-欄目名稱-網站名稱」，這個和欄目頁差很少。

4）文章頁title寫法，通常有3種：「文章標題-網站名稱」、「內容標題-欄目名稱」、「內容標題-欄目名稱-網站名稱」。其中，「內容標題-欄目名稱-網站名稱」的寫法最爲規範，但也相對複雜，它能給用戶很好的提示，讓用戶知道他在訪問哪篇文章，而且是在哪一個網站的哪一個欄目下。

 

二、keywords（關鍵詞）

keywords，是用戶不查看源代碼看不到的。主要做用是告訴搜索引擎本頁內容是圍繞哪些詞展開的。所以keywords的每一個詞都要能在內容中找到相應匹配，纔有利於排名。keywords通常不超過3個，每一個關鍵詞不宜過長，並且詞語間要用英文「,」隔開。爲何用英文上文已經說過。並且，儘可能將重要的關鍵字靠前放，由於靠後的關鍵字排名較差，除非你站有很高的權重。

小道消息稱keywords曾被百度、谷歌、雅虎等搜索引擎剔除，將不會再影響搜索引擎的排序結果，小編認爲設置一下總沒壞處，仍是有一些搜索引擎比較重視keywords標籤的。

用法：<meta name=」Keywords」 Content=」關鍵詞1,關鍵詞2,關鍵詞3,關鍵詞4″>

1）首頁keywords寫法，通常是「網站名稱,主要欄目名,主要關鍵詞」。

2）欄目頁keywords寫法，通常是「欄目名稱,欄目關鍵字,欄目分類列表名稱」。

3）分類列表頁keywords寫法，這個就比較簡單了，只要將你這個欄目中的主要關鍵字寫入便可。

4）文章頁keywords寫法，建議你們提取文章中的關鍵詞，好比此文章主要是講SEO優化的，那麼關鍵詞確定是SEO優化，若是以爲提取關鍵詞的能力較差，也能夠選擇文章中出現比較多的詞來做爲關鍵詞，好比如今寫的內容是關於title、keywords、description的，那此文章頁關鍵詞就是這3個。

 

三、description（內容摘要）

description，和上面的keywords同樣，是用戶不查看源代碼看不到的，並且也是對於一個網頁的簡要內容概況。不一樣的是，keywords是由幾個詞語的組成的，而description則是完整的一句話。description通常不超過150個字符，描述內容要和頁面內容相關。

用法：<meta name=」Description」 Content=」你網頁的簡述」>

1）首頁description寫法，通常是將首頁的標題、關鍵詞和一些特殊欄目的內容融合到裏面，寫成簡單的介紹。

2）欄目頁description寫法，通常是將欄目的標題、關鍵字、分類列表名稱融合到裏面，寫成簡單的介紹。

3）分類列表頁description，這個就比較簡單了，通常只須要把分類列表的標題、關鍵詞融合在一塊兒，寫成簡單的介紹。

4）文章頁description寫法，通常有2種寫法，標準寫法就和前面的同樣，將文章標題、文章中的重要內容和關鍵詞融合在一塊兒，寫成簡單的介紹。這是最好最標準的寫法。可是這樣寫比較麻煩，還有一種偷懶的方法，你能夠在文章首段和標題中加入關鍵詞，好比這篇文章是講title、keywords、description的，那麼在文章首段和標題中就加入這些內容，而後直接將文章首段的內容複製到description中便可。

 

PS：3個標籤按重要性來分：title＞description＞keywords，你們在設置時要注意