前端seo基礎規範

時間 2019-11-18

原文原文鏈接

基本規範

TDK代碼規範

A: 關鍵詞，通常3~4個最好，要與當前頁面內容相關（根據實際狀況，不適宜過多堆積關鍵詞）；javascript

B: 杜毫不同URL的頁面標題重複現象，做爲搜索結果摘要的重要選擇目標之一，必定不要採用默認形式，用適當的語言對頁面進行進一步描述，對title的進一步補充，可以使用戶更進一步理解你頁面的內容與其需求是否匹配，讓你的目標用戶更快找到你點擊你。；以下：html

 
        主題標題 - 產品中文全稱官網 - 騰訊遊戲

網頁標籤的合理應用

1)：<h1><h2>等標籤的使用應合理，<h1>整個頁面只可出現一次 A: H標籤至關於正文標題，是關鍵詞優化的另外一個頁面元素,重要性僅次於頁面title； B: H標籤按重要性分爲H1-H6，H1最重要，H6重要性最低； C: 在H1和H2融入關鍵詞，有助於提升相關性，H3如下標籤權重性很低了；以下：H1----H2----H3----.依次至H6;html5

 1 <h1>標題1</h1>
 2 <p>內容1內容1內容1內容1內容1內容1內容1內容1</p>
 3 <h2>標題2</h2>
 4 <p>內容2內容2內容2內容2內容2內容2</p>
 5 <h2>標題2</h2>
 6 <p>內容2內容2內容2內容2內容2內容2</p>
 7 <h3>標題3</h3>
 8 <p>內容3內容3內容3內容3內容3內容3內容3內容3內容3內容3</p>
 9 <h3>標題3</h3>
10 <p>內容3內容3內容3內容3內容3內容3內容3內容3內容3內容3</p>
11 <p>....</p>

應用H標籤的時候避免出現，從H1直接跳過H2直接到H3的用法，這些都是不利於優化的作法；以下：(不友好的方式)java

1 <h1>標題1</h1>
2 <p>內容1內容1內容1內容1內容1內容1內容1內容1</p>
3  
4 <h3>標題3</h3>
5 <p>內容3內容3內容3內容3內容3內容3內容3內容3內容3內容3</p>
6 <h4>標題4</h4>
7 <p>內容4內容4內容4內容4內容4內容4</p>
8 <p>....</p>

2):IMG和A標籤應帶上涵蓋主旨的文字web

①ALT文字瀏覽器

A: ALT文字指圖片的替換文字； B: 圖片ALT文字中出現關鍵詞對頁面相關性也有必定影響，在圖片ALT屬性中以簡要文字說明圖片內容，同時包含關鍵詞也是頁面優化的一部分，與頁面title同樣，ALT文字中不要堆積關鍵詞，只要出現一次便可； C: 描述性的替代文字能向用戶提升重要信息；以下：框架

1 <img src="http://ossweb-img.qq.com/images/roco/my/img.jpg" alt="QQ炫舞  炫舞時代  舞蹈  跳舞">

最差方案，要避免，可能會被視爲垃圾網站；ide

不太好；工具

1 <img src="http://ossweb-img.qq.com/images/roco/my/img.jpg" alt="QQ炫舞">

稍微好點；優化

1 <img src="http://ossweb-img.qq.com/images/roco/my/img.jpg" alt="QQ炫舞是最時尚浪漫的舞蹈遊戲">

最佳方案,簡要文字描述圖片內容，並且還帶有「QQ炫舞」關鍵詞；

總結：圖片ALT屬性不要留空，用描述性文字代替最佳：

①A標籤(錨文字)

錨文字是告訴搜索引擎被連接頁面主題內容的重要依據之一，錨文字出現徹底匹配的關鍵詞，有助於提升連接目標頁面的相關度，以及發出連接頁面的相關度，在這方面要避免過分；以下：

1 <a title="QQ炫舞是最浪漫時尚的舞蹈遊戲" href="http://x5.qq.com/" target="_blank">QQ炫舞</a>

頁面中A標籤的title屬性不要留空；

3):重要的文字或關鍵詞可用或標籤包裹

1 <p>這裏是介紹類的說明文字，頁面的<strong>關鍵詞1</strong>和<em>關鍵詞2</em>能夠加相應的標籤增長權重</p>

4):善用有語義性的標籤<dl></dl>或<ul></ul>等

 1 <ul>
 2     <li>項目一</li>
 3      
 4     <li>項目二</li>
 5      
 6     <li>項目三</li>
 7      
 8 </ul>
 9 <dl>
10     <dt>活動規則</dt>
11     <dt></dt>
12     <dd>活動規則的相關解釋</dd>
13     <dd></dd>
14 </dl>

5):少用例如iframe等標籤引入內容，能夠不用盡可能不用，由於搜索引擎沒法搜索到框架裏面的內容；

6):經常使用標籤的語義：

 1 <table>
 2     <tbody><tr>
 3         <th>標籤</th>
 4         <th>語義</th>
 5     </tr>
 6     <tr>
 7         <td>h1~h6</td>
 8         <td>table的header</td>
 9     </tr>
10     <tr>
11         <td>p</td>
12         <td>段落</td>
13     </tr>
14     <tr>
15         <td>ul</td>
16         <td>無序列表</td>
17     </tr>
18     <tr>
19         <td>ol</td>
20         <td>排序列表</td>
21     </tr>
22     <tr>
23         <td>dl</td>
24         <td>definition list，定義列表</td>
25     </tr>
26     <tr>
27         <td>dt</td>
28         <td>definition title，定義名稱</td>
29     </tr>
30     <tr>
31         <td>dd</td>
32         <td>definition description定義描述</td>
33     </tr>
34     <tr>
35         <td>em</td>
36         <td>emphasized，局部強調,段落內強調</td>
37     </tr>
38     <tr>
39         <td>strong</td>
40         <td>更強烈的強調，全文強調</td>
41     </tr>
42     </tbody>
43 </table>

PC端與移動端規範差別化

移動端

終端適配

可在頁面中中添加針對百度的meta標籤來適配PC端頁面和移動端頁面的對應關係

其中上述代碼中的[wml|xhtml|html5]可根據手機頁面的協議語言，選擇其中的一種同時若是該網頁只適合在電腦上進行瀏覽，可添加以下meta標籤

同時若是該網頁只適合在移動設備上進行瀏覽，可添加以下meta標籤

若是網頁採用了響應式網頁設計，例如(http://tgideas.qq.com/)不須要通過url自適配跳轉就能夠根據瀏覽器的屏幕大小自適應的展示合適的效果，同時適合在移動設備和電腦上進行瀏覽，在html中加入以下meta：

網頁可讀性

與PC spider同樣，百度經過一個叫Baiduspider2.0的程序抓取移動互聯網上的網頁，通過處理後建入移動索引中。當前Baiduspider只能讀懂文本內容，對flash、圖片等非文本內容暫時支持的都很差，放置在flash、圖片中的文字，百度只能簡單識別。

A: 頁面的URL應具備可讀性

如：http://xxx.qq.com/mobile/ vs URL：http://xxx.qq.com/m/

第一個URL不管是對於用戶仍是對於spider來講都明顯更具有可讀性。

URL優化應具有如下幾點：

1)：帶有明顯辨識讀的英文做爲關鍵詞

2)：詳情頁的URL儘可能短，減小無效參數，例如統計參數等，保證同一頁面只有一套URL地址，不一樣形式的URL301跳轉到正常URL上

加載速度

因爲移動端網速相比PC端有較大的差距，若是用戶在3秒內都沒有打開頁面，基本會直接流失，形成頁面PV和UV的減小。移動端頁面若是作了預加載的，能夠在預加載的頁面提供用戶一下良好的引導，良性的引導用戶完成預加載過程若是沒有作預加載的頁面，頁面打開速度必須控制在3秒之內打開

腳本放置

因爲搜索引擎對javascript腳本支持的很是很差，因此外鏈的腳本和寫在頁面中的腳本應放置在前

1 <div>...</div>
2 <div>...</div>
3 <div>...</div>
4 <script src="/wiki/xxx.js">
5 <script>

PC端

合理應用flash

頁面上，由於在視覺上要求更高不得不用到flash，但又因爲搜索引擎沒法讀取flash文件中的文字內容和連接，這就是這裏要說的要合理應用flash；

建議： A：頁面主要部分不建議用flash，如頁面導航，左側欄等頁面主要框架部分； B：頁面上某一小部分使用flash（用於加強頁面的視覺衝擊力）； C：頁面上連接儘可能不要作在flash中； D：經過腳本去插入標籤；

產品側SEO要點

網站規劃

理想的網站結構是樹型扁平，從首頁到內容頁的層級儘可能少，這樣更有利於搜索引擎進行處理。同時，網站內的連接也應該採用網狀結構，網站上每一個網頁都要有指向上、下級網頁以及相關內容的連接，避免出現連接孤島：首頁有到頻道頁的連接，頻道頁有到首頁和普通內容頁的連接、普通內容頁有到上級頻道以及首頁的連接、內容相關的網頁間互相有連接。網站中每個網頁，都應該是網站結構的一部分，都應該能經過其餘網頁連接到，這樣才能使baiduspider 儘量全地遍歷網站內容。同時，重要內容應該距離首頁更近，有利於價值傳遞。

理想的網站結構應以下圖：