標籤：style blog color io os 使用 ar strong for
相信大部分的前端開發人員應該深知seo對我們的重要性，所以個人認為平台在開發初期就應該要考慮好seo最佳化的問題，不然做出來的頁面，就算是效果很炫，功能很強，但是對搜尋引擎也不友善。如果等到成熟時期再來調整這個問題，既費時又費力。
最近被seo工作人員教育一番後，本人秉著學習的態度，好好補了一補seo和技術相關的知識。
1、簡化代碼結構，更利於搜尋引擎抓取頁面內容。相信現在大部分的前端開發人員都已經脫離了table布局的方式，而採用了div+css的方式布局。不過在表格的表現模式下面，用table還是要比div方便簡潔一些。同樣，讓頁面上的源於盡量精簡，css,js都採用外鏈模式。例如：如下的代碼
<!DOCTYPE HTML><html><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>快遞選擇控制項_demo</title><link href="dist/css/bootstrap.css" rel="stylesheet" media="screen"><link href="css/express-picker.css" rel="stylesheet" media="screen"></head><body><div class="container" style="min-height: 500px;"> <h1>Express Picker</h1> <label for="expressPicker">快遞公司</label> <div id="renderTo" style="position:relative;"> <input id="expressPicker" type="text"> </div></div></body></html><script src="jquery-1.10.2.min.js"></script><script src="dist/js/bootstrap.js"></script><script src="js/express-picker.js"></script>
2、盡量使html得結構語義化。雖然語義化的HTML屬於WEB標準化範疇，但對於一個全面的SEO來說，使用標準化的網頁結構，對SEO是有百利而無一害的，而WEB標準化就必須談到語義化的HTML。具體標籤的語義化對SEO的最佳化，下一篇繼續。例如：
＜em＞、＜strong＞這兩個標籤對SEO有著較大影響效果，適當使用它們，可使你的網頁增色不少。＜em＞、＜strong＞與Hx一樣，其區別也 在於重要性不 一樣。＜em＞ 表示強調，而＜strong＞意為重點強調，較em更重一些。在SEO時，我們可以將最重要的關鍵詞用strong標記，對第二重要的用em標記。
3、連結最好加上title，根據需要加上rel的nofllow值。連結一定要加上href屬性。對
於重要的導航連結，不可用onclick事件來代替href，做過SEO最佳化的人員都知道，蜘蛛目前對於js的支援很差，基本無法讀取裡面的連結地址。
4、圖片應該加上alt說明，蜘蛛不認識圖片上的內容，只能通過alt屬性來判斷，而對於具有說明意義的圖片，不應用作背景圖，應該用img標籤。例如：<img src=”okdi/bg-name.png” alt=”****網站名稱”/>
5、每個頁面只能出現一次H1標籤，H2標籤可以多次：H1權重很高，普遍認為僅次於title，一般資訊詳情頁的標題、商品詳情頁的標題，都放在H1裡。
6、重要的內容要優先載入，通過css的樣式來控制相應的樣式。文檔的順序讀取優先放重要內容。例如：navigation視覺上是在前面，而content才是優先載入的。
<html><head><style>#navigation {position: absolute;top: 10px;left: 50%;width: 800px;margin-left: −400px;text-align: left;}#content {position: absolute;top: 150px;left: 50%;width: 800px;margin-left: −400px;text-align: left;}body { text-align: center; min-width: 600px;}</style></head><body><div id="content">content<!-- SEO optimized content text goes here.--></div><div id="navigation">navigation<!-- navigational elements, ads go here--></div></body></html>
7、除首頁外別的頁面最好要加上麵包屑型導航，導航結構一定要清晰。
8、做好404頁面，一般會加首頁連結及錯誤提示，並測試其返回狀態代碼為404：1、使用者體驗友好，可以留住使用者，不至於直接關閉頁面;2、蜘蛛友好，可以返回抓取其他頁面。
9、網站結構呈扁平狀樹型，目錄結構不宜過深，每個頁面離首頁最多點擊不超過3次，過深不利於搜尋引擎的抓取。
10、有一些SEO作弊的技巧，比如display:none,position:absolute;以及overflow:hidden等。
前端相關的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
