說說前端開發中的SEO

　　SEO（Search Engine Optimization），就是傳說中的搜索引擎優化，是指爲了增長網頁在搜索引擎天然搜索結果中的收錄數量以及提高排序位置而作的優化行爲。我認爲這是一門說來簡單，但操做起來複雜的技術，只可意會，不可言傳。做爲一名前端工程師，不須要精通SEO，但必需要了解它。SEO有一條不變的準則就是它永遠都在變，由於沒有一沉不變的優化方案可供你們套用。但咱們仍然能夠發現一些基礎的或是被人們公認的規律來進行網站的SEO。更重要的是咱們要有本身的實踐，不斷髮現適合本身行之有效的SEO方法。

　　從宏觀的角度來講，我認爲SEO有三條最重要的規律，那就是原創的內容、高質量的外部連接和鍥而不捨適度的優化。

　　前端是構建網站中很重要的一個環節，本篇重點從前端的角度來說解一下SEO的實施方法。前端的工做主要是負責頁面的HTML+CSS+JS，優化好這幾個方面會爲SEO工做打好一個堅實的基礎。突出重要內容可讓搜索引擎判斷當前頁面的重點是什麼，提高網站訪問速度可讓搜索引擎的蜘蛛順利、快速、大量的抓取網頁內容，因此如下我就着重以突出重要內容和提高網站速度爲主來總結一下。

突出重要內容

合理的title、description和keywords

　　
截圖取自於360搜索（so.com）

　　雖然如今搜索對這三項的權重慢慢減少，但仍是但願可以合理的寫好他們，只寫有用的東西，不要在這裏寫小說，要表達重點。

　　title：只強調重點便可，重要關鍵詞出現不要超過2次，並且要靠前，每一個頁面title要有所不一樣，以下圖：

　　description：把網頁內容高度歸納到這裏，長度要合理，不可過度堆砌關鍵詞，每一個頁面description要有所不一樣，以下圖：
　　

　　keywords：列舉出幾個重要關鍵詞便可，也不可過度堆砌。

語義化書寫HTML代碼，符合W3C標準。

　　對於搜索引擎來講，最直接面對的就是網頁HTML代碼，若是代碼寫的語義化，搜索引擎就會很容易的讀懂該網頁要表達的意思。例如文本模塊要有大標題，合理利用h1-h6，列表形式的代碼使用ul或ol，重要的文字使用strong等等。總之就是要充分利用各類HTML標籤完成他們本職的工做，固然要兼容IE、火狐、Chrome等主流瀏覽器。
咱們來看看著名的禪意花園網站（http://www.csszengarden.com/），在沒有樣式的狀況下，代碼很是語義化，看起來很工整，加載不一樣的樣式以後能夠爲所欲爲的改變頁面外觀。

　　無樣式狀況下：

加載樣式1：

加載樣式2：

利用佈局，把重要內容HTML代碼放在最前。

　　搜索引擎抓取HTML內容是從上到下，利用這一特色，可讓主要代碼優先讀取，廣告等不重要代碼放在下邊。例如，在左欄和右欄的代碼不變的狀況下，只需改一下樣式，利用float:left;和float:right;就能夠隨意讓兩欄在展示上位置互換，這樣就能夠保證重要代碼在最前，讓爬蟲最早抓取。一樣也適用於多欄的狀況。

　　

重要內容不要用JS輸出。

　　蜘蛛不會讀取JS裏的內容，因此重要內容必須放在HTML裏。

盡少使用iframe框架。

　　搜索引擎不會抓取到iframe裏的內容，重要內容不要放在框架中。

爲圖片加上alt屬性。

　　
　　當網絡速度很慢，或者圖片地址失效的時候，就能夠體現出alt屬性的做用，他可讓用戶在圖片沒有顯示的時候知道這個圖片的做用。

能夠顯示圖片時：
　　

不能顯示圖片時：
　　

須要強調的地方能夠加上title屬性。

　　

保留文字效果。

　　若是須要兼顧用戶體驗和SEO效果，在必須用圖片的地方，例如個性字體的標題，咱們能夠利用樣式控制，讓文本文字不會出如今瀏覽器上，但在網頁代碼中是有該標題的。
　　例如這裏的「電視劇分類」，爲了完美還原設計圖，前端工程師能夠把文字作成背景圖，以後用樣式讓html中的文字的縮進設置成足夠大的負數，偏離出瀏覽器以外，也能夠利用設置行高的方法讓文字隱藏。注意：不可以使用display:none;的方法讓文字隱藏，由於搜索引擎會過濾掉display:none;裏邊的內容，就不會被蜘蛛檢索了。
　　

HTML代碼：
　　

CSS代碼：
　　
或
　　

利用CSS截取字符。

　　若是文字長度過長，能夠用樣式截取，設置高度，超出的部分隱藏便可。這樣作的好處是讓文字完整呈現給搜索引擎，同時在表現上也保證了美觀。
　　

提高網站速度

儘可能外鏈CSS和JS，保證網頁代碼的整潔，也有利於往後維護。

　　
　　
　　這樣的好處是能夠把內容、表現和行爲分離開，保證代碼整潔的同時也方便維護。

CSS放在文件頭部，JS放在文件尾部，可以使用工具對CSS和JS文件進行壓縮。

CSS Sprites。

　　減小HTTP請求。利用CSS Sprites技術能夠把網頁用到的切片合成到一張圖上，這樣作既減小了HTTP請求數，又使得樣式圖片一次加載，避免網頁「白」的尷尬。
360官網首頁（http://www.360.cn）主要前端圖片2張：

圖片1：
　　

圖片2：
　　

爲圖片設置高度和寬度，可提升頁面的加載速度。

爲靜態資源文件增長過時時間，讓用戶經過本地緩存來更快的訪問網站。

減小大改版的頻率。

壓縮、格式化代碼。

　　能夠在上線前，使用一些工具，把HTML、CSS和JS都壓縮、格式化一下，能夠減小頁面大小。

不使用CSS表達式，會影響效率。

使用CDN網絡，可加快用戶訪問速度。

啓用GZIP壓縮，瀏覽速度變快，搜索引擎的蜘蛛抓取信息量也會增大。

善於利用瀏覽器插件。

　　例如火狐的YSlow就頗有用，能夠查看該頁面代碼、樣式、JS、圖片等加載狀況，爲進一步優化頁面起到了指導做用。

僞靜態設置。

　　若是是動態網頁，能夠開啓僞靜態功能，讓蜘蛛「誤覺得」這是靜態網頁，由於靜態網頁比較合蜘蛛的胃口，若是url中帶有關鍵詞效果更好。
　　動態地址：
　　http://www.360.cn/index.php

　　僞靜態地址：
　　http://www.360.cn/index.html

篇後語

　　不要耍小聰明，利用已掌握的技術千方百計欺騙搜索引擎，可能會在短期內有明顯的效果，排名提高等，但搜索引擎發現後會果斷降權你的網頁或直接封殺，得不償失。

　　但願本文能讓你們正確認識SEO，SEO要適度，網站仍是要以「內容爲王」，有好的內容網站纔會有發展。

 

　　轉載本來地址：http://uxc.360.cn/archives/984.html

　　你們多多互相學習