html如何進行seo（圖文教程）

seo工作類似于寫文章，不同的詞語，語句組合達成最終的目的。html代碼是網站的基礎，是網站的構件，對html代碼進行seo角度的操作，從搜索引擎的角度來講，這個分值就會拿到，網站在搜索引擎眼中的總體分值就會提升，網站s […]

seo工作類似于寫文章，不同的詞語，語句組合達成最終的目的。html代碼是網站的基礎，是網站的構件，對html代碼進行seo角度的操作，從搜索引擎的角度來講，這個分值就會拿到，網站在搜索引擎眼中的總體分值就會提升，網站seo排名的概率就會增大。

以seo教程自學網首頁為例，簡單說明一下html相關的seo設置。

一：html代碼頭部即head標簽的seo設置。

1：<meta charset=”UTF-8″>：指明網站編碼。

2：<title>SEO教程自學網_網站SEO優化教程學習『武漢小明SEO』</title>：網站標題設置，標題里面的語句字字千金，需著重把握。

3：<meta name=”description” content=”SEO教程自學網,解答seo是什么,武漢小明專業研究搜索引擎優化,致力網站SEO優化教程學習以及seo技術教程培訓,提供自學seo視頻教程免費觀看。” />：網站描述設置，描述也能影響目標關鍵詞排名。

4：

<meta http-equiv=”Cache-Control” content=”no-transform” />

<meta http-equiv=”Cache-Control” content=”no-siteapp” />

<meta name=”applicable-device” content=”pc,mobile”>

<meta name=”MobileOptimized” content=”width”/>

<meta name=”HandheldFriendly” content=”true”/>

移動禁止轉碼聲明。

5：<script src=”//msite.baidu.com/sdk/c.js?appid=1567888488359210″></script>：百度熊掌號ID聲明。現目前熊掌號是大勢所趨，很有必要。

6：<link rel=”canonical” href=””/>：百度明文規定支持的一種標簽，目的是給搜索引擎傳達信息：來抓取網站管理者想要呈現的重要內容。

7：其他方面的設置，如301重定向，404頁面等。

二：html代碼其余部分進行seo設置。

1：<h1><span class=”yusi-mono”>SEO教程自學網</span></h1>。

h1標簽是權重標簽，建議一個頁面使用一次即可。

2：<strong class=”text-success”></strong>。

個人認為，strong標簽有強調作用，比B標簽效用更好。

3：<a target=”_blank” href=”https://www.xminseo.com/2390.html” title=”seo經驗案例分享”><img src=”https://www.xminseo.com/wp-content/uploads/2017/09/2-2.png” title=”seo經驗案例分享” alt=”seo經驗案例分享” /></a>。

圖片必須添加alt標簽，搜索引擎根據alt標簽中的內容來識別圖片。

4：

<script type=”application/ld+json”>

{

“@context”: “https://zhanzhang.baidu.com/contexts/cambrian.jsonld”,

“@id”: “https://www.xminseo.com/2747.html”,

“title”:”有關Canonical標簽的一些說明”,

“images”: [

“https://www.xminseo.com/wp-content/uploads/2017/10/1-10.jpg” ],

“description”: “&nbsp; 如果網站中有大量網址形式不同而內容相同的頁面，那么從網站seo優化的角度來看，是有問題的。不同的網址都可以訪問同樣內容的頁面，會給有可能引起搜索引擎的誤判。Canonical標簽的出現，”,

“pubDate”: “2017-10-22T12:57:35”,

“isOriginal”: “0”

}

</script>

熊掌號頁面改造代碼，經過相關代碼設置，能讓頁面符合熊掌號規范。

5：

<script>

(function(){

var bp = document.createElement(‘script’);

var curProtocol = window.location.protocol.split(‘:’)[0];

if (curProtocol === ‘https’) {

bp.src = ‘https://zz.bdstatic.com/linksubmit/push.js’;

}

else {

bp.src = ‘’;

}

var s = document.getElementsByTagName(“script”)[0];

s.parentNode.insertBefore(bp, s);

})();

</script>

主動推送相關代碼，借助用戶行為，點擊之后自動推送給百度搜索引擎。

三：以上是seo教程自學網html代碼進行seo操作的部分說明，除此開外，還有一點必要的教程需了解，包括但不限于以下方面。

1、靜態頁面 將信息頁面和頻道、網站首頁改為靜態頁面，有利于搜索引擎更快更好的收錄。

2、頁面標題（Page Title）的關鍵詞優化 必須列出信息的標題、網站的名稱以及相關關鍵字。

3、Meta標簽的優化（過去搜索引擎優化的重要手法，現在已經不是關鍵因素，但仍不可忽略） 主要包括：Meta description、Meta keywords的設置。關鍵字密度要適度，通常為2%-8%，也就是說你的關鍵字必須在頁面中出現若干次，或者在搜索引擎允許的范圍內，要避免堆砌關鍵字。

4、針對Google制作Sitemaps Google的sitemaps是對原來robots.txt的擴展，它使用 XML格式來記錄整個網站的信息并供Google讀取，使搜索引擎能更快更全面的收錄網站的內容。

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一般出現較少。

seo教程自學網點評：

細化來講，html代碼部分的seo操作點是較多的，理想狀態下是每個細化的點都操作到位。seo是綜合得分，每一個細化的點上面發力，最終的seo優化結果才是相對完美的。

當前位置：主頁 > SEO教程和培訓 > html如何進行seo（圖文教程）