標籤：
前幾天在慕課網上學習了“SEO在網頁製作中的應用”，覺得挺好、挺有用的，今天，特此做了一個小小的筆記，也算是對學習過後的一個總結。
一、搜尋引擎工作原理當我們在輸入框中輸入關鍵詞，點擊搜尋或查詢時，然後得到結果。深究其背後的故事，搜尋引擎做了很多事情。
在搜尋引擎網站，比如百度，在其後台有一個非常龐大的資料庫，裡面儲存了海量的關鍵詞，而每個關鍵詞又對應著很多網址，這些網址是百度程式從茫茫的互連網上一點一點下載收集而來的，這些程式稱之為“搜尋引擎蜘蛛”或“網路爬蟲”。這些勤勞的“蜘蛛”每天在互連網上爬行，從一個連結到另一個連結，下載其中的內容，進行分析提煉，找到其中的關鍵詞，如果“蜘蛛”認為關鍵詞在資料庫中沒有而對使用者是有用的便存入資料庫。反之，如果“蜘蛛”認為是垃圾資訊或重複資訊，就捨棄不要，繼續爬行，尋找最新的、有用的資訊儲存起來提供使用者搜尋。當使用者搜尋時，就能檢索出與關鍵字相關的網址顯示給訪客。
一個關鍵詞對用多個網址，因此就出現了排序的問題，相應的當與關鍵詞最吻合的網址就會排在前面了。在“蜘蛛”抓取網頁內容，提煉關鍵詞的這個過程中，就存在一個問題：“蜘蛛”能否看懂。如果網站內容是flash和js，那麼它是看不懂的，會犯迷糊，即使關鍵字再貼切也沒用。相應的，如果網站內容是它的語言，那麼它便能看懂，它的語言即SEO。
二、SEO簡介
全稱：Search English Optimization，搜尋引擎最佳化。自從有了搜尋引擎，SEO便誕生了。
存在的意義：為了提升網頁在搜尋引擎自然搜尋結果中的收錄數量以及排序位置而做的最佳化行為。簡言之，就是希望百度等搜尋引擎能多多我們收錄精心製作後的網站，並且在別人訪問時網站能排在前面。
分類：白帽SEO和黑帽SEO。白帽SEO，起到了改良和規範網站設計的作用，使網站對搜尋引擎和使用者更加友好，並且網站也能從搜尋引擎中擷取合理的流量，這是搜尋引擎鼓勵和支援的。黑帽SEO，利用和放大搜尋引擎政策缺陷來擷取更多使用者的訪問量，這類行為大多是欺騙搜尋引擎，一般搜尋引擎公司是不支援與鼓勵的。本文針對白帽SEO，那麼白帽SEO能做什麼呢？
1. 對網站的標題、關鍵字、描述精心設定，反映網站的定位，讓搜尋引擎明白網站是做什麼的；
2. 網站內容最佳化：內容與關鍵字的對應，增加關鍵字的密度；
3. 在網站上合理設定Robot.txt檔案；
4. 產生針對搜尋引擎友好的網站地圖；
5. 增加外部連結，到各個網站上宣傳；
三、前端SEO通過網站的結構布局設計和網頁代碼最佳化，使前端頁面既能讓瀏覽器使用者能夠看懂，也能讓“蜘蛛”看懂。
(1)網站結構布局最佳化：盡量簡單、開門見山，提倡扁平化結構。一般而言，建立的網站結構層次越少，越容易被“蜘蛛”抓取，也就容易被收錄。一般中小型網站目錄結構超過三級，“蜘蛛”便不願意往下爬，“萬一天黑迷路了怎麼辦”。並且根據相關調查：訪客如果經過跳轉3次還沒找到需要的資訊，很可能離開。因此，三層目錄結構也是體驗的需要。為此我們需要做到：
1. 控制首頁連結數量
網站首頁是權重最高的地方，如果首頁連結太少，沒有“橋”，“蜘蛛”不能繼續往下爬到內頁，直接影響網站收錄數量。但是首頁連結也不能太多，一旦太多，沒有實質性的連結，很容易影響使用者體驗，也會降低網站首頁的權重，收錄效果也不好。
因此對於中小型企業網站，建議首頁連結在100個以內，連結的性質可以包含頁面導航、底部導航、錨文字連結等等，注意連結要建立在使用者的良好體驗和引導使用者擷取資訊的基礎之上。
2.扁平化的目錄層次，盡量讓“蜘蛛”只要跳轉3次，就能到達網站內的任何一個內頁。扁平化的目錄結構，比如：“植物”--> "水果" --> "蘋果"、“桔子”、“香蕉”，通過3級就能找到香蕉了。
3.導航最佳化
導航應該盡量採用文字方式，也可以搭配圖片導航，但是圖片代碼一定要進行最佳化，<img>標籤必須添加“alt”和“title”屬性，告訴搜尋引擎導航的定位，做到即使圖片未能正常顯示時，使用者也能看到提示文字。
其次，在每一個網頁上應該加上麵包屑導航，好處：從使用者體驗方面來說，可以讓使用者瞭解當前所處的位置以及當前頁面在整個網站中的位置，協助使用者很快瞭解網站組織形式，從而形成更好的位置感，同時提供了返回各個頁面的介面，方便使用者操作；對“蜘蛛”而言，能夠清楚的瞭解網站結構，同時還增加了大量的內部連結，方便抓取，降低跳出率。
4. 網站的結構布局--不可忽略的細節
頁面頭部：logo及主導航，以及使用者的資訊。
頁面主體：左邊本文，包括麵包屑導航及本文；右邊放熱門文章及相關文章，好處：留住訪客，讓訪客多停留，對“蜘蛛”而言，這些文章屬於相關連結，增強了頁面相關性，也能增強頁面的權重。
頁面底部：著作權資訊和友情連結。
特別注意：分頁導航寫法，推薦寫法：“首頁 1 2 3 4 5 6 7 8 9 下拉框”，這樣“蜘蛛”能夠根據相應頁碼直接跳轉，下拉框直接選擇頁面跳轉。而下面的寫法是不推薦的，“首頁 下一頁 尾頁”，特別是當分頁數量特別多時，“蜘蛛”需要經過很多次往下爬，才能抓取，會很累、會容易放棄。
5.控制頁面的大小，減少http請求，提高網站的載入速度。
一個頁面最好不要超過100k，太大，頁面載入速度慢。當速度很慢時，使用者體驗不好，留不住訪客，並且一旦逾時，“蜘蛛”也會離開。
(2)網頁代碼最佳化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中不會起任何效果。
10、文本縮排不要使用特殊符號 應當使用CSS進行設定。著作權符號不要使用特殊符號 © 可以直接使用IME，拼“banquan”，選擇序號5就能打出著作權符號©。
12、巧妙利用CSS布局，將重要內容的HTML代碼放在最前面，最前面的內容被認為是最重要的，優先讓“蜘蛛”讀取，進行內容關鍵詞抓取。
13.重要內容不要用JS輸出，因為“蜘蛛”不認識
14.盡量少使用iframe架構,因為“蜘蛛”一般不會讀取其中的內容
15.謹慎使用 display：none ：對於不想顯示的文字內容，應當設定z-index或設定到瀏覽器顯示器之外。因為搜尋引擎會過濾掉display:none其中的內容。
16. 不斷精簡代碼
17.js代碼如果是操作DOM操作，應盡量放在body結束標籤之前，html代碼之後。
前端SEO技巧
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
