Blogger 範本：版面配置「小工具標題」HTML 標籤 SEO 優化

Blogger SEO：我們每一次在 Blogger 網誌後台版面配置裡新增「小工具」時，於範本 HTML「小工具標題」標籤的部份，系統預設會自動分配小工具的 HTML「標題 tag」為「h2 標籤」。

在幫網站做 SEO ( 搜尋引擎最佳化 ) 時，網頁「h1、h2 標籤」於 HTML 做部署，盡量都會將「h1、h2 標籤」讓給標頭或是文章標題做使用。因為「h1、h2 標籤」所佔的「搜尋權重比」較高。

如果放了一個「最新文章」或是「熱門文章」的小工具在網站上，若是不做「標題 tag」的變更的話，標籤就會以「h2 標籤」的型式，讓搜尋機器人撈取。

設置 h2 標籤在「最新文章、熱門文章」小工具標題，本身在 SEO 搜尋上無太多實質的幫助。比較建議的做法是將 Blogger 中「小工具標題」的 HTML 標籤，更改為「h3、h4 或 h5」標籤。

由於 Blogger 中安裝小工具的動作相當頻繁，所以在 Blogger 每安裝一次小工具，就必須做一次「h2 標籤」的更改。



文章中的範例，僅以下列打勾的官方版型做示例，其他官方版型可如法泡製。如果使用本文做練習，也可應用以下模板試作，出問題的機率會比較低。

設置流程

1. 更改小工具標題標籤為 h3
2. 更改 CSS 讓「範本設計工具」正常運作

設置前準備

若對編譯 Blogger 的 HTML 模板還不太熟悉，建議先執行『備份 Blogger 模板 (範本)』的動作，以防原始模板資料遺失。

設定教學

Step 1

更改小工具標題標籤為 h3

這裡，我們將標題標籤改為「h3」作為示例。前往 Blogger 後台「範本 〉編輯 HTML」，搜尋『<b:widget』。

找到的「<b:widget」會有好幾筆資料，將除了「id='Header1' title='網誌名稱 (標頭)'」與「id='Blog1' title='網誌文章'」之外的其他「<b:widget」下面的「h2 title」全部更改為「h3 title」。

如果是 Blogger 官方版型，找到的小工具「h2 title」大致分為以下這兩類：

<h2 class='title'><data:title/></h2>

<h2><data:title/></h2>

以一般「HTML / JavaScript」小工具「標題 tag」來觀察，就是改成：

  <b:widget id='HTML1' locked='false' title='小工具標題' type='HTML' visible='true'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h3 class='title'><data:title/></h3><!-- 改為 h3 的 title tag -->
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
  </b:widget>

Step 2

更改 CSS 讓「範本設計工具」正常運作

如果你是使用 Blogger 預設模板，還需對範本中的 CSS 做重新調整，這樣才能讓 Blogger 後台「版面配置」右上角的「範本設計工具」正常運作。

在範本中搜尋「<Group description="Gadgets" selector="h2">」將「selector="h2"」改為「selector="h3"」。

整體代碼如下：

   <Group description="Gadgets" selector="h3">
     <Variable name="widget.title.font" description="Title Font" type="font"
         default="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="widget.title.text.color" description="Title Color" type="color" default="#000000" value="#000000"/>
     <Variable name="widget.alternate.text.color" description="Alternate Color" type="color" default="#999999" value="#999999"/>
   </Group>

接著在範本中搜尋「widget.title.font」，整個範本會搜尋到兩筆。第一筆被包在上面的「Group」代碼中。第二筆，則被包覆在如下代碼，將下面代碼中的「h2」改為「h3」，即可完成設定。

div.widget > h3,
div.widget h3.title {
  margin: 0 0 1em 0;

  font: $(widget.title.font);
  color: $(widget.title.text.color);
}

小結

以上就是變更 Blogger 當前範本中，所有小工具「標題  h2 tag」的方法。如果你的範本不是官方提供的，CSS 的部份就得自行調整了。(* 請記得，是每一次安裝新的小工具，都要做「STEP 1」的步驟變更。)

本文小工具標題 h2、h3 的部署，僅以操作教學而做編排，SEO 可能隨著時間，而會有所不同。知道如何修改，這比較重要。

相關文章

Blogger 範本：文章日期 HTML 標籤 SEO 優化

Blogger 範本：網誌標題、文章標題「h1、h2、h3」標籤 SEO 最佳化

[教學] Blogger 範本：文章標題及網誌名稱 SEO 優化教學