基於Html的SEO(很基礎,更是前端必須掌握之點)
阿新 • • 發佈：2018-12-10
文章來源：百度文庫
Html程式碼seo優化最佳佈局，例項講解
眾所周知，搜尋引擎對html程式碼是非常優化的，所以html的優化是做好推廣的第一步。一個符合seo規則的程式碼大體如下介面所示。
1、<!–聚酯多元醇）–> 這個東西是些頁面註釋的，可以在這裡加我的“聚酯多元醇”，但過多關鍵字可能被搜尋引擎懲罰哦！
2、<html> 這個是程式碼開頭 結尾時和</html>對應。
3、<head> 頭標記結尾用</head>
4、<title>（聚酯多元醇、熱塑性聚氨酯樹脂）</title>兵家必爭之地，很重要，字字值千金啊，各位站長狠抓，注意關鍵字放置，不要堆砌關鍵字，不然後果夠你吃的。
5、<meta http-equiv=Content-Language content=zh-cn>
6、<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
7、<meta name=”keywords” content=” 聚酯多元醇|熱塑性聚氨酯樹脂”> 這個現在權重不太高了，但是隻要有輕重我們也要利用。
8、<meta name=”description” content=” 聚酯多元醇|熱塑性聚氨酯樹脂生產基地，山東華鑫有限公司！”>這個東西是你百度搜索時候網站下面的那個所用簡介，有一定作用哦！
9、<link href=”style/css.css” type=”text/css” rel=”stylesheet”>
10、</head>
11、<body>
12、<div>
13、<h1>聚酯多元醇</h1>很重要，如果不寫，你比丟錢了損失還大。
14、<h2>聚酯多元醇|熱塑性聚氨酯樹脂</h2>
15、<h3>聚酯多元醇系列1</h3>
16、<h4>聚酯多元醇系列2</h4>
17、<h5>聚酯多元醇系列3</h5>
18、<h6>聚酯多元醇系列4</h6> 上面這些標題都是很重要的，對沒有小版塊的內容都要淡定哦！
19、<img src=”xxx.jpg” alt=” 聚酯多元醇生產基地”>可以增加網站的相關度。
20、<a href=”/” title=” 聚酯多元醇塑料製品必須的原料哦”>聚酯多元醇</a>可以藉助超連結來增加關鍵詞出現的次數，這個詞最好做成網站關鍵詞，這樣助於排名。
21、<strong>聚酯多元醇</strong>權重次於<H1>的，高於很確定的是它比<b>、<u>、<i>等標籤。
22、<b>關鍵詞強調</b><u>關鍵詞強調</u><i>關鍵詞強調</i>權重次於上面的
23、</div>
25、<div>
26、版權部分關鍵詞強調，這樣可以增加關鍵字佈局，更加合理。而且這個地方放置會得到不錯的權重。
27、</div>
28、</body>
29、</html>
SEO最常用的HTML標籤
如果你想要成為一名SEOER，就必須瞭解部分重要的HTML程式碼。其實，學習HTML很簡單，下面我來說一說，SEO最常用的HTML標籤有哪些：
1、H1-H6標籤，這些標籤在頁面中佔據著重要的位置，其中H1標籤可以說是除TITLE外網頁的最重要的另一個標籤。這裡需要注意的是要慎用H1，不要過多使用，否則被搜尋引擎處罰就得不值得了。如果是頻道頁，大類的欄目名稱使用H標籤是合適的，當然，這裡最大、最重要的分類才能使用H1，再按照欄目重要性，依次使用H2、H3等等H標籤。這樣合理的安排，讓主導層次分明，也可以引導搜尋引擎查詢本頁面的重要部分。如果是文章頁，就要根據文章頁的優化方法來使用H2，若按照最普通的頁面佈局，只有文章標題及正文內容，沒有其他與正文同等級的資訊，那麼就可以對文章標題使用H2修飾，可以很清楚的告訴搜尋引擎在文章頁，我的文章標題就是頁面的核心，所以文章頁面的H2也只能出現一次。其他H標籤可以根據網頁欄目適當新增，但注意要合理使用，否則適得其反。
2、網頁關鍵詞加黑標籤請用B標籤(本人覺得B標籤比strong標籤質量更好)。B標籤往往用在關鍵詞上，一個頁面只要加2-5次就差不多了，具體還要根據頁面大小而定。
3、<a href=”網址” title=”連結說明”>網頁資訊</a> 對於網頁中非常重要的連結採用TITLE說明，有助於幫助搜尋引擎找到網頁的重點URL。
4、Alt標籤《img src=“XXX.jpg” alt=“圖片說明”》網頁中的ALT標籤是用來對圖片進行說明的，這裡有兩方面的作用，一個是告訴搜尋引擎圖片的資訊，另一個是在圖片載入不出來或圖片路徑出問題的時候告訴使用者，這是什麼樣的圖片。在一個網頁中，所有圖片都用ALT標籤肯定是不好的，最好的辦法還是在網頁中重點圖片(大多數情況下是和網站突出目標關鍵詞相關的圖片)使用ALT標識，這樣對搜尋引擎爬行網頁重要圖片很有幫助，對於提高網站關鍵詞權重也會很有好處的。
HTML的不同標籤在SEO優化中的權重分數
一、HTML標籤權重分值排列
內部連結文字：10分
標題title：10分
域名：7分
H1，H2字號標題：5分
每段首句：5分
路徑或檔名：4分
相似度（關鍵詞堆積）：4分
每句開頭：1.5分
加粗或斜體：1分
文字用法（內容）：1分
title屬性：1分 （注意不是<title>， 是title屬性， 比如a href=… title=”）
alt標記：0.5分
Meta描述（Description屬性）：0.5分
Meta關鍵詞（Keywords屬性）：0.05分
二、SEO優化
1、靜態頁面
將資訊頁面和頻道、網站首頁改為靜態頁面，有利於搜尋引擎更快更好的收錄。
2、頁面標題（Page Title）的關鍵詞優化
必須列出資訊的標題、網站的名稱以及相關關鍵字。
3、Meta標籤的優化（過去搜索引擎優化的重要手法，現在已經不是關鍵因素，但仍不可忽略）
主要包括：Meta description、Meta keywords的設定。關鍵字密度要適度，通常為2%-8%，也就是說你的關鍵字必須在頁面中出現若干次，或者在搜尋引擎允許的範圍內，要避免堆砌關鍵字。
4、針對Google製作Sitemaps
Google的sitemaps是對原來robots.txt的擴充套件，它使用 XML格式來記錄整個網站的資訊並供Google讀取，使搜尋引擎能更快更全面的收錄網站的內容。 可以使用Google提供的Sitemap生成器製作（需要技術人員製作）： ？hl=zh-CN也可以由技術部人員製作更全面的Sitemaps。
5、圖片的關鍵詞優化
圖片的替代關鍵詞也不要忽略，其另外一方面的作用是，當圖片不能顯示的時候，可以給訪問者一個替代解釋語句。
6、避免表格的巢狀
目前本站的表格巢狀太多，搜尋引擎通常只讀取3個<table>的巢狀，如果太多，會造成部分有用資訊沒有被檢測到。
7、採用web標準進行網站重構
儘量使網站的程式碼符合W3C的HTML 4.0或XHTML 1.0規範。通過XML＋CSS技術進行網站重構，減少不表格及冗餘程式碼，提高網站頁面的擴充套件性，相容性，可以使更多瀏覽器支援。
8、網站結構的扁平化規劃
目錄和內容結構最好不要超過3層，如果有超過三層的，最好通過子域名來調整和簡化結構層數。另外目錄命名的規範做法是使用英文而不是拼音字母
9、頁面容量的合理化
合理的頁面容量會提升網頁的顯示速度，增加對搜尋引擎蜘蛛程式的友好度。同時建議js指令碼和css指令碼儘量用連結檔案
10、外部檔案策略
把javascript檔案和css檔案分別放在js和css外部檔案中。這樣做的好處是把重要的頁面內容放到頁面頂部，同時能縮小檔案大小。有利於搜尋引擎快速準確地抓取頁面的重要內容。其他的字型<FONT>和格式化標籤也儘量少用，建議採用CSS定義。
11、外部連結
儘可能多地讓其他跟你主題相關的網站連結本站，同時儘量同PR值更高的網站進行相互連結。如果網站提供與主題相關的匯出連結，被搜尋引擎認為有豐富的與主題相關的內容，也有利於排名，例如各類招商網站、投融資網站的概念。另外避免連結不顧質量的大面積撒網，對搜尋引擎而言寧缺勿濫。
12、網站地圖
網站自身的網站地圖是搜尋引擎更全面索引收錄你的網站的重要因素。建議製作基於文字的網站地圖，內含網站所有欄目、子欄目。網站地圖的三大因素：文字、連結、關鍵詞，都極其有利於搜尋引擎抓取主要頁面內容。特別是動態生成目錄網站尤其需要 建立網站地圖。
13、影象熱點
除AltaVista、Google明確支援影象熱點連結外，其他引擎暫不支援。當“蜘蛛” 程式遇到這種結構時，就會無法辨別。因此儘量不要設定影象熱點（Image Map）連結。
14、FLASH應用
FLASH由於不含文字資訊，應儘量用於功能展示和廣告，少用於網站欄目和頁面。
15、JS指令碼
在不支援JS腳步的瀏覽器裡<NOSCRIPT>標籤會起到重要提示作用，對搜尋引擎的Spider搜尋也會有幫助。
16、Frame框架
Frame標籤會被搜尋忽略，儘量少用，如果一定要用，則應正確使用Noframe標籤， 在<Noframe></Noframe>區域中包含指向frame頁的連結或帶有關鍵詞的描述文字，同 時在框架以外的區域也出現關鍵詞文字。
17、資訊的內部連結
有助提高網站排名和PR值，例如相關資訊、推薦資訊等
如何SEO一個網站的文字和HTML程式碼比
其實對於搜尋引擎來說，最友好的，當屬文字了，雖然現在圖片的抓取不斷在改進，但是任何一位有經驗的老手都會告訴你，SEO，文字最合適。也正因為此，比方說網站建設部落格裡，圖雖有，但仍是文字居多。
這裡給大家舉個簡單的例子，說明如何增加網站的文字與HTML程式碼比：
如：
很多人喜歡這樣寫H1：<h1 class=”title”>這裡是標題</h1>
眾所周知，一個頁面不會出現兩個H1，如果有兩個，那好比一個人身上長著兩個腦袋一樣很難看。這不僅是常識，也是標準。所以給h1加上這些那些class或id是畫蛇添足。
應這樣寫：<h1>這裡是標題</h1>
然後樣式需要在CSS中定義。
這是很簡單，那頁面中有圓倒角如何做？網上有N多辦法，其中最典型的就是HTML+CSS實現圓角矩形，HTML程式碼部分如下：
<div class=”panel”>
<DIV class=”t-o b1”></DIV>
<DIV class=”t-o b2”></DIV>
<DIV class=”t-o b3”></DIV>
<DIV class=”t-o b4”></DIV>
<DIV class=”content”>
<!– 這裡放內容 –>
<DIV class=”clear”></DIV>
</DIV>
<DIV class=”b-o b4”></DIV>
<DIV class=”b-o b3”></DIV>
<DIV class=”b-o b2”></DIV>
<DIV class=”b-o b1”></DIV>
<DIV class=”break”></DIV>
</div>
其實，我們完全不必用這些程式碼，可以簡化到：
<div class=”panel”>
<!– 這裡放內容 –>
</div>
毫無疑問，這樣可以很明顯的減少HTML程式碼，當然，光這樣寫是失去了圓角效果，效果我們可以藉助JS加上。
我們完全可以用純粹的JavaScript程式碼來寫，為了方便，我們採用jQuery來寫：
jQuery(function($){
$(‘.panel’).prepend(‘
‘).append(’
‘);
})
需要注意的是，這個JavaScript程式碼要寫到一個獨立的js檔案中。
如果頁面中，用到多個圓角，則只管設定class為panel即可。
這樣，我們可以減少HTML程式碼，實現了增加內容和HTML程式碼比的目的。
在不犧牲使用者視覺效果的情況下，給爬蟲看一個乾淨的頁面程式碼，並且在網速相等的條件下，一定的減少抓取時間，有利於抓取，毫無疑問，也將有利於搜尋引擎的排名。
除了這個圓角外，滑動門等，完全可以用jQuery進行程式碼優化，說點不客氣的話，國內常用的那些滑動門實在是噁心，還得加一大堆沒用的id，其實滑動門可以做的更簡單。
這裡是HTML程式碼:
<dl>
<dt>滑動門標題1</dt>
<dd>滑動門1對應的內容</dd>
<dt>滑動門標題2</dt>
<dd>滑動門2對應的內容</dd>
……
</dl>
H標籤全透視
h1一級標題
代表重中之重，它的地位在頁面中跟關鍵字的地位一樣重要。一般運用於網站標題或者頭條新聞上，一些大型網站也運用在LOGO上，雖然h1程式碼可以寫多個，但實際語義上有唯一性，h1標題在一個頁面裡面最好只出現1次或者沒有。
h2二級標題
主要出現在頁面的主體內容的文章標題和欄目標題上，三列結構一般在中間，二列結構一般在重要的一邊。可與h3搭配使用。
h3三級標題
一般主打頁面的邊側欄。h4是它的輔助，出現頻率不高。
頁面層級關係不能太深，所以h4，h5，h6一般出現較少。