前端開發中的SEO
什么是SEO
SEO由英文Search Engine Optimization縮寫而來，
中文意譯為“搜索引擎優化”。SEO是指從自然搜索結果獲得網站流量的技術和過程，是在了解搜索引擎自然排名機制的基礎上，
對網站進行內部及外部的調整優化，?改進網站在搜索引擎中的關鍵詞自然排名， 獲得更多流量， 從而達成網站銷售及品牌建設的目標。
SEO的分類
- 白帽SEO：改良和規范網站設計，使之對搜索引擎和用戶更加友好，是一種搜索引擎推薦的做法。
- 黑帽SEO：利用或者放大搜索引擎的缺陷，使用不正當競爭獲取更多的訪問量。（例如最近花千骨電視劇熱播，馬上有一些網站使用這個標題標題，但是內容卻是推銷廣告的，給廣大網名造成很大困擾）。
SEO的主要方面
- 網站標題、關鍵字、描述
- 網站內容優化
- 合理設置Robot.txt文件
- 生成對搜索引擎友好的網站地圖
- 增加外鏈引用
其中最重要的是以下2個方面： - 網站結構布局優化
- 網頁代碼優化
網站結構布局優化
推薦使用扁平化結構。網站的目錄層級要盡可能少，中小型網站不要超過3級。做到扁平化結構需要注意以下的3個方面：
- 控制首頁的鏈接數量（網站首頁的權重最高）。首頁應該有有效的鏈接，爬蟲通過首頁的連接到達內頁，如果沒有有效的鏈接就會直接影響網站的收錄數量。當然首頁也不能有過多的鏈接，內頁的鏈接不要放在首頁，鏈接過多會影響用戶體驗。中小企業網站首頁的鏈接數量應該在100個以內。鏈接的性質可以是頁面導航、錨鏈。
- 扁平化的目錄層次。盡量讓Spider跳轉3次就可以到達網站的任意一個內頁。例如網站的設計可以使用以下的3級：主頁、欄目、內容頁扁平鋪開的結構，而不能是縱深的結構。例如我們要做一個關于植物的網站可以采用以下的層級結構：
- 導航SEO優化。導航可以分為主導航和父導航。導航應該使用文字，如果為了用戶體驗采用圖片導航，則應該為圖片設置必要的
alt和title屬性。其次在導航的設計上應該使用面包屑導航。它能夠讓用戶了解到當前的位置，了解網站內容的組織方式。 - 頁面的大小控制在100k以下。
代碼SEO優化
<head>標簽放網頁的標題，各個頁面不同。<meta keywords>列舉出幾個重要的關鍵詞。<meta description>網頁內容的高度概括。<br />標記應該放在文本中間，即使用<p><br /></p>替代突兀的<br />標記。- html語義化。例如我們要做一個導航，可以使用
div+span標記：
<div class="nav"><span>課程</span> <span>|</span> <span>問答</span> <span>|</span> <span>社區</span> </div> 但是以上的代碼絲毫沒有語義化（div和span標記是html中語義化最低的標簽），推薦的做法是使用ul和li標記，再通過合適的CSS樣式來實現同樣的效果：
<ul class="nav"><li>課程</li> <li>問答</li> <li>社區</li> </ul> .nav li{float: left;list-style: none;display: block;margin: 0 5px;border-right: 1px solid #000;
}
<a>標記要加上說明（title屬性），對于指向外部網站的鏈接要使用rel="nofollow"屬性告訴爬蟲不要去爬其他的頁面。<h1>正文標題要使用<h1>標記，副標題要使用<h2>。可以使用CSS樣式進行顯式風格的設置。切記：不重要的地方不要隨便使用<h1>標記。<table>標記的優化。使用<caption>標記為表格指定標題。
<table><caption>表格標題</caption> <tr> <th>季度</th> <th>銷售額</th> </tr> <tr> <td>1</td> <td>33665.25</td> </tr> <tr> <td>2</td> <td>21215.99</td> </tr> </table> - 強調網頁中的重要內容應該使用
<strong>標記，避免使用<b>標記（對搜索引擎不友好）。<em>的權重僅次于<strong>。如果僅僅使顯示的效果發生變化就使用<b>標記和<i>標記。
Tips
- 將重要html代碼放在最前面，廣告等不重要的部分放在整個文檔的最后，然后利用CSS樣式控制廣告div左右浮動。
- 重要內容不要使用js輸出。
- 盡量少使用
iframe框架。 - 對于暫時不需要顯示的元素應該使用
z-index屬性而不是display:none;這樣的代碼，因為Spider會過濾display屬性為none的內容。 - 盡量精簡代碼。
posted on 2016-11-23 20:11 玲兒靈 閱讀(...) 評論(...) 編輯 收藏
