SEO優化 - 內容代碼比

前言

最近ITseer正在做SEO的優化，因此筆者希望將這一系列的改良寫成文章與大家分享，在
這一系列的文章中也會帶來實際的改善紀錄。這次主要改良的是『內容代碼比』，什麼是內容代碼比呢?內容代碼比就是HTML程式碼與實際內容的比值，這跟SEO又有甚麼關係呢，讓我們趕緊接下去看看吧!!

內容代碼比

一般來說，內容代碼比就是人眼看到的內容與實際HTML的比值，也就是

內容代碼比 = 文字 / HTML

這個值越大越好(最大為1)，雖然這個比值對使用者觀看網頁一點也不相干，但是如果對象是給搜尋引擎那就有很不一樣的結果了，搜尋引擎的爬蟲會抓取網站HTML的內容，接著會去除一些與該內容不相干的內容。得到網頁主要內容區塊後，爬蟲必須把內容上所有的HTML標籤刪除，只留下純文字的部分，那些被刪除的對爬蟲來講是垃圾，你讓它多做了很多事情，也相對讓搜尋引擎變得更難。有個想法是很重要的，就是搜尋引擎喜歡處理簡單又乾淨的網站並且會給與這樣的網站更高的排名權重。

輕巧的網站

一般來說，內容代碼比越高的網站，HTML檔案會越小，為什麼呢?大家可以觀察下面兩個一樣效果的HTML，可以看出端倪

乾淨的內容


<p class="itseer-post-paragraph">
文章內容
</p>
<p class="itseer-post-paragraph">
文章內容
</p>
<p class="itseer-post-paragraph">
文章內容
</p>
<p class="itseer-post-paragraph">
文章內容
</p>
<p class="itseer-post-paragraph">
文章內容
</p>


不乾淨的內容


<p style="margin: 0 0 1.5em;color: #333;font-size: 1.1em;line-height: 1.9em;">
文章內容
</p>
<p style="margin: 0 0 1.5em;color: #333;font-size: 1.1em;line-height: 1.9em;">
文章內容
</p>
<p style="margin: 0 0 1.5em;color: #333;font-size: 1.1em;line-height: 1.9em;">
文章內容
</p>
<p style="margin: 0 0 1.5em;color: #333;font-size: 1.1em;line-height: 1.9em;">
文章內容
</p>
<p style="margin: 0 0 1.5em;color: #333;font-size: 1.1em;line-height: 1.9em;">
文章內容
</p>


當然一般網頁設計者不能可這樣的設計網頁，但是如果你使用的是Blogger這樣部落格系統時，就必須特別注意，Blogger文字編輯器修改字體顏色、大小、對其或是字體時，都是直接對HTML增加style屬性的，你別無選擇，最後就會產生以上極為不乾淨的內容，對於用戶相對的也下載了較大的HTML檔案。下一篇文章中我們也會討論Blogger如何避免這樣的情形。

ITseer目前文章改善的成果

當然使用Blogger的我們也必須拿出更有力的證據證明作這些事是真的有用的，所以可以參考截圖 :

改善前

改善後

總結乾淨的HTML的好處

• 讓搜尋引擎對你的網頁更有好感
• 網頁的檔案大小更小，用戶下載更快
• 當網頁內容格式改版時，只須對對應的css檔案做修改