[unboxing][hrads]

熱門標籤

☆重要訊息:Blogger 官方近期推出的「RWD 自適應範本主題」沒有『行動服務』的設定選項,如果您是觀察「技研可樂」裡的文章做自己網站的設計,使用「自適應範本主題」的使用者可以直接依「技研可樂」文章裡的『電腦版』方式做設定即可完成佈置,不需要開啟『行動服務』。☆

  Blogger 自訂網址應用 CloudFlare HTTPS 系列文章:「CloudFlare

  Blogger HTTPS 相關文章列表:「HTTPS

  Blogger AdSense 廣告放置與相關自適應廣告佈屬文章列表:「AdSense

  Blogger 常用頁面判斷式用法一列表:「Blogger 常用頁面判斷式用法一覽表

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



分享

共有 4 則留言

留言迴響
Wang Henry
管理員
1/20/2017 3:34 PM ×

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

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

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

2.CSS

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

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

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

回覆
avatar
coke tech
管理員
1/20/2017 3:59 PM ×

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

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 區塊,可以先使用上面的版型做練習,自然會找到位置。

回覆
avatar
Wang Henry
管理員
1/20/2017 4:05 PM ×

謝謝。

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

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

========

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

謝謝~

回覆
avatar
coke tech
管理員
1/20/2017 4:22 PM ×

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

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

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

☆記得,先備份。

回覆
avatar

加入代碼加入代碼

若您在閱覽文章時,於文章頁面找不到相關的應用主題,歡迎移駕到『站內留言』一起研究討論,謝謝!

使用超連結:<a href="https://www.techcoke.com/">技研可樂</a> =『技研可樂

加入圖片 ( https ):支援 HTTPS 網址型式的 .jpg .png 格式圖檔,直接貼入 HTTPS 圖片網址即可在留言時顯示!

支援非嵌入 Youtube 視頻:https://www.youtube.com/watch?v=hdfSISI24Xk (* 瀏覽器網址列中的 Youtube 網址 )

&&amp;'&#039;"&quot;<&lt;>&gt;
技研可樂 © 2013 - 2017

Contact Form

Name

Email *

Message *