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 範本:版面配置「小工具標題」HTML 標籤 SEO 優化_001

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



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

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



設置流程

  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 優化教學


留言

  1. 這篇我還沒有動手,因為有幾個問題想請教。

    1.第一步驟的小工具標題改成H3。

    我有些小工具把標題給移除,所以沒有H2,這樣移除的行為對部落格來說有壞處嗎??

    2.CSS

    找不到 Group description="Gadgets" selector="h2" ,有很多Group description就是沒有"Gadgets"

    我是用官方範本為底,接著才加入許多功能,這樣應該會找的到才對@@ 但不明原因找不到關鍵字!0.0

    接下來也就不能改第二步驟的第二個CSS了。

    回覆刪除
    回覆
    1. 這篇我還沒有動手,因為有幾個問題想請教。

      1.第一步驟的小工具標題改成H3。

      我有些小工具把標題給移除,所以沒有H2,這樣移除的行為對部落格來說有壞處嗎??

      ---

      不會。

      =================================

      2.CSS

      找不到 Group description="Gadgets" selector="h2" ,有很多Group description就是沒有"Gadgets"

      我是用官方範本為底,接著才加入許多功能,這樣應該會找的到才對@@ 但不明原因找不到關鍵字!0.0

      接下來也就不能改第二步驟的第二個CSS了。

      ---

      忘了補充,等下會在文章中補充說明。

      文章中的範例,是使用以下這個版型:

      https://4.bp.blogspot.com/-TMfR6P7lz7s/WH_EGcQQbII/AAAAAAAAI1I/YMsZ7GZc3LEQXPMk1px99ixcPRL-iA7ZwCLcB/s1600/blogger-h1-h2-h3-tag-seo_003.jpg


      基本要依你的版型而做操作,模板很多,沒辦法每一個模板都寫一篇文章。

      如果找不到你的板型 css 區塊,可以先使用上面的版型做練習,自然會找到位置。

      刪除
    2. 謝謝。

      如果我現在改變版型,印象中是不是部落格(電腦版)的比例會需要重新做調整?

      甚至包含了字體的顏色之類也要調整?

      ========

      我目前好像是選擇頂尖企業為底,是否會建議直接在後台變換版型後按照教學做調整?
      或是,建議乾脆等之後從做版型時在記得整理會比較好?

      謝謝~

      刪除
    3. 文章剛才有補充說明。可以建立一個新版型依文章中的步驟做練習。

      知道如何改之後,再將你正在寫作的模版做「備份網站」調校。

      如果,「備份網站」調校都正確了,再運用至你現在的正式網站模板中。

      ☆記得,先備份。

      刪除
◎ 留言板中提問「代碼」問題,可至『留言代碼轉換器』轉換代碼。

張貼留言

繼續閱讀:

這個網誌中的熱門文章

[密技] Windows OneDrive Dropbox 移至 SD 卡,讓 SSD 使用壽命更長久

[外掛] Chrome 擴充:ColorPick Eyedropper 網頁色碼擷取器

[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰

[教學] Google Compute Engine ( GCE ) 使用 PuTTY SSH 登入實例

[教學] Twitter 手機簡訊、APP 兩步驟驗證設定

Line 分享按鈕:文章分享語法相容網頁版、行動裝置、APP

[教學] LINE 電腦版行動條碼登入設定

[外掛] Chrome 擴充:Window Resizer 瀏覽器視窗大小調整比例

[教學] Blogger 自訂網址綁定自有域名

Blogger 文章底部自動加入版權宣告