對於大多數前端工程師來說，通常都不了解搜索引擎優化，所以代碼會出現一些SEO上需要避免的問題。
前端常見HTML標籤的SEO用法
H標籤
H標籤也叫做Heading標籤，在HTML語言里一共有六種大小的heading標籤，從H1一直到H6。h1-h6標籤一般用來定義標題。
定義最大的標題
定義最小的標題。合理使用H標籤可以讓頁面層級關係更清楚，讓搜索引擎更好地抓取和識別頁面主體內容。
1、每個頁面有且只能有一個H1標籤。
2、H1代表網頁的主題，越靠近標籤越好，方便搜索引擎快速識別頁面主題。對於首頁來說，H1一般用在品牌名上。對於內容頁面，H1就是頁面主標題。重點核心關鍵詞往往需要在H1標籤中出現。
3、H2可以有多個，一般用在段落標題、文章副標題或模塊名標題上，可以部署長尾關鍵詞。
4、H3可以有多個，一般用做段落小節標題或模塊名標題，可以部署長尾關鍵詞。
5、H4-H6標籤很少用，一般用在相對不是特別重要的內容上。（但比一般HTML標籤比如P權重更高）
不加任何樣式的H標籤很醜陋，各個瀏覽器解析也不一致，所以都會重新定義H1標籤的樣式。
國外的SEOer測試：對於Google來說，加樣式的H1標籤比不加的SEO排名效果好。
H標籤不能濫用，否則有副作用。比較常見的用法是：主標題用H1，副標題用H2、模塊名或小節標題用H3。甚至跳過H2，只用H1和H3。
Meta標籤
最常見的Meta是Keywords和Description。
Keywords標籤寫頁面主關鍵詞，一般是5個詞左右，用英文逗號分隔。
Description標籤寫頁面的簡介描述，一般在110字以內。（Google的話120字以內）
除此之外還有一些中國互聯網特有的標籤：
1、國內的主流瀏覽器都是雙核瀏覽器：基於Webkit的內核用於常用網站的高速瀏覽，基於IE的內核主要用於部分網銀、政府、辦公系統等網站的正常使用。
360瀏覽器提供了一個控制瀏覽器內核的Meta標籤。
若頁面需默認用極速核，增加標籤：
若頁面需默認用ie兼容內核，增加標籤：
若頁面需默認用ie標準內核，增加標籤：
對於多數網站來說，為了讓網頁打開更快，用戶體驗更好，應該啟用Webkit內核，代碼如下。
2、當網站沒有對應移動版頁面或百度未能識別適配時，百度會把PC版自動轉碼為移動版，這樣就會損失一些廣告收入，需要在頁面中添加如下代碼禁止百度轉碼。
3、為了更好的讓google識別PC版對應的移動頁面，需要做添加Meta聲明如下：
http://gogoshark.com/">http://m.gogoshark.com/">
4、如果你的頁面有地域屬性，可以添加如下代碼：
5、360搜索（好搜）設計了一套類似Facebook的Open Graph Protocol的Meta標籤，用於搜索格式化展現。詳細內容參考：智能摘要_360搜索使用幫助
標準化的標籤模版支持短視頻，影視，小說，新聞，商品，論壇帖子、部落格等內容類型的數據。
比如對於我們的訊息頁面，計劃添加如下Meta：
注意：添加后需要主動註冊360站長平台提交你的頁面。
Nofollow
一個正常的連結寫法如下：
[gogoshark網頁設計](https://gogoshark.com/)
現在加上nofollow標籤，如下：
[gogoshark網頁設計](https://gogoshark.com/)
這告訴搜索引擎蜘蛛不要對此連結進行跟蹤。當不想把權重輸給某個連結，但又不得不在內容上出現該連結時，就可以使用這樣的方式阻擋掉。
常見的比如：「關於我們」、「聯繫我們」等等，幾乎所有網站底部都有這些連結，這些都需要添加Nofollow標籤。
這些頁面帶來的SEO價值不高，和當前頁面的關聯度一般不大，為避免浪費搜索蜘蛛的抓取爬行，需要通過Nofollow標籤阻擋掉。
當我們知道了原理后，還可以把其他連結都阻擋掉，比如天朝獨有的備案連結：
https://gogoshark.com/" rel="nofollow" target="_blank">gogoshark網頁設計
還有「登錄」、「註冊」，甚至「首頁」都可以根據需要阻擋掉，從而引導蜘蛛抓取更重要、更希望它收錄的內容。
iframe標籤
搜索引擎的蜘蛛不會識別在iframe中被調用的圖片、文本、url等內容的，因為該內容不屬於該頁面，只是訪問的時候被臨時的調用。百度SEO建議中也說過：「frame/frameset/iframe」等標籤,會導致百度spider的抓取困難。
利用這一點我們可以把網站中需要給用戶查看，但不需要搜索引擎抓取的內容用iframe框架進行顯示。
比如一些網站最頂部的Topbar導航欄，往往是註冊、登錄等等，可以寫在iframe框架中。
還有一些贊助商廣告，如果不需要SEO效果，都可以放到獨立的iframe中，只是在頁面中引用。
但是不易過多使用，有可能被認為作弊，而且iframe對頁面載入速度明顯不利。
CSS和JS
最好把CSS和JS放到獨立的外部文件中，這樣可以減少代碼量，讓內容更簡潔，方便搜索引擎識別。
當然，有時為了減少CSS和JS的請求數，有些大型網站會直接在內容頁中輸出CSS和JS。一般網站不這麼做。
搜索引擎雖然現在也能識別JS里的內容，但一般來說，放在JS文件中的內容不會影響頁面的SEO。利用這點，可以把必須要顯示、但和頁面主題內容不關聯的內容放到JS中反寫回頁面，這樣避免降低頁面關鍵詞密度或傳遞連結權重。document.write("XXX")
CSS樣式命名
搜索引擎變得越來越智能，很容易通過你的cSS樣式來識別頁面內容。
合理有序的CSS命名規則可以不僅可以提升代碼質量，而且更加符合搜索引擎的規範。
比如：
頁面主體:main
內容:content
標籤頁:tab
文章列表:list
提示訊息:msg/tips
欄目標題:title
加入:joinus
指南:guide
服務:service
熱點:hot
新聞:news
下載:download
註冊:register
狀態:status
按鈕:btn/button
投票:vote
廣告:ads
合作夥伴:partner
友情連結:friendLink/links
頁腳:footer
版權:copyRight
不一而足，但最好與常規寫法接近，比如有次我們的相關連結模塊使用了ads標籤，對應的SEO效果就下降了很多。（百度有可能識別為廣告，對待可能就不同）
總結
HTML便簽中還有很多需要注意的，比如非裝飾性圖片，都需要添加Alt標籤，便於搜索引擎識別圖片內容，而且這裡的文本會計算到關鍵詞密度中。
還有一些特別的技巧，比如代碼的書寫順序和實際顯示順序，借助CSS相對定位和絕對定位，讓重要的內容主體盡可能的接近body標籤出現。讓頁面中出現在頭部，但不重要的的內容，在代碼靠後的位置出現。
總之，核心目標是引導幫助搜索引擎蜘蛛識別你的頁面主題和內容，把頁面所有重要的訊息信號，用合理的標籤展示出來，在不作弊的前提下，對頁面做降噪處理。
