Blogger 製作 Breadcrumb 文章標籤導航麵包屑

最近發現除了 Google 搜尋結果中,能夠辨識 Breadcrumb 文章標籤導覽,奇摩搜尋結果中也開始能夠識別,我們為網站設置的導航麵包屑了。

Blogger 網站中設定 Breadcrumb ( 麵包屑 ),藉由文章標籤建立麵包屑路徑,能讓訪客經由一層層的目錄結構,來識別瀏覽文章所屬的路徑痕跡。

如果要讓搜尋引擎抓取網站中的麵包屑路徑,就必須建立「結構化數據標記」信息,讓搜尋引擎藉由 Microdata 微數據、RDFa 標記、JSON-LD 等標籤,識別層次結構的屬性。

Blogger 製作 Breadcrumb 文章標籤導航麵包屑_001


而 Blogger 網誌的範本結構,由於是一次性部署 HTML 資料,所以需藉由判斷式的調用,來設置 Breadcrumb 導航麵包屑結構化數據信息。

Blogger 的網頁結構擁有獨立文章頁面的資料區段,為文章頁面 ( /2015/10/page.html ) 與靜態網址頁面 ( /p/static_page.html )。而靜態網址頁面,由於不俱備標籤的路徑設定,直接從網誌首頁即可連結 ( 只有一層 )。

所以在設置 Breadcrumb 的時候,我們可以藉由文章頁面的標籤建立路徑,當作規劃需求。

Blogger 製作 Breadcrumb 文章標籤導航麵包屑_003
實際在 Google 搜尋結果中,Breadcrumb 後方還會有庫存或是轉釋連結,建議麵包屑最多設定三筆。


不過,一篇文章如果分配了大量的標籤,那麵包屑的路徑指向就變得不明確,再加上 Blogger 的標籤排列,我們無法自行設置前後順序,所以在幫文章建立標籤時,建議大類別標籤使用中文,小類別標籤使用英文。

構想這種方法設定文章標籤,是因為 Blogger 文章的預設英文標籤會顯示在中文標籤之前,所以我們可以利用這種前後排列的關係,再運用「小工具標記 - loop 迴圈」最大化的,幫文章建立指向路徑。

Blogger 網誌文章中的 Label 標籤,由於無法完全使用「loop 迴圈」指定挑選某一標籤 ( 大量標籤的情形下 ),套用在單篇文章中使用。所以在規劃設定 Breadcrumb 的時候,我們可以運用 loop 迴圈屬性加上標籤的中、英文排列關係幫標籤建立規則。

Blogger 製作 Breadcrumb 文章標籤導航麵包屑_003
Yahoo 搜尋結果中也能識別導航麵包屑


「Step1.」的方法是運用 loop 迴圈屬性,挑選文章中的最後一個中文標籤,做為文章的指向路徑。「Step2.」的範例則是運用「Step1.」再加上 loop 迴圈的數值屬性,挑選出英文標籤中的前兩個標籤製作出三層式的麵包屑。

以下是「Step1」實際設置完成的 Breadcrumb 標籤導航。除了麵包屑製作,也增加了除了網誌首頁以外的各個頁面導覽。

Blogger 製作 Breadcrumb 文章標籤導航麵包屑_004



文章更新 ( 2017/01/25 ):
由於 Blogger 系統更改了標籤前後排序。預設標籤初始值,改為中文在前英文在後的方式呈現。所以,如果要使用本篇的設定方式,以「STEP 2」的方式幫網站部署「Breadcroumb」,需使用以下設定值。

前往 Blogger 後台的「設定→語言和格式→語言」,改變網站整體語言佈局為『英文 ( 美國 ) -English(United States)』。

在設定了以上步驟的網站語系變更後,本篇所做的代碼設定即可正常運作。不過,後遺症就是,網站中的留言板、日期或是訪客留言的留言信件,有部份語言會因此而變成英文的狀態。



溫馨提示:
本文「STEP 1」設置過後,「Breadcrumb 文章標籤導航麵包屑」即可正確運作,於搜尋引擎中自己網址的後方,即會出現一筆「Breadcrumb」。預設會抽取 Blogger 文章中的最後一個標籤當作「Breadcrumb」。且已加入『結構化資料』。

一般情形下,不需要使用「STEP 2」設置方式。「STEP 2」完成後,在搜尋引擎中自己網址的後方,會出現三筆「Breadcrumb」。有特殊需求的話,再擇取使用。



相關連結

關於麵包屑「https://developers.google.com/structured-data/breadcrumbs

版面配置的小工具標記「https://support.google.com/blogger/answer/46995

結構化數據測試工具「https://developers.google.com/structured-data/testing-tool/


範例 DEMO 頁面|電腦版網頁:「電腦版

範例 DEMO 頁面|行動版網頁:「行動版



設置流程

  1. Blogger 範本設定 Breadcrumb 標籤
  2. loop 迴圈的數值用法,取樣三筆標籤資料

設置前準備

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



設定教學

Step 1

Blogger 範本設定 Breadcrumb 標籤

運用「data:label.isLast == "true"」抽取標籤中的最後一筆資料,製作出單筆 Breadcrumb 標籤。

Step1-1. 首先搜尋 HTML 範本中的「<b:includable id='comment-form' var='post'>」並在上方加入以下代碼。


      <b:includable id='breadcrumb' var='posts'>
<!-- 標籤導航 breadcrumb 開始 -->
  <b:if cond='data:blog.homepageUrl != data:blog.url'> 
     <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <div class='breadcrumb'>
            <ul class='crumb-tag'>
                <span><li class='first'><a expr:title='data:blog.title' href='/'><span> <data:homeMsg/></span></a></li></span>
                    <li><span>&#9660;</span> <data:blog.pageName/></li>
            </ul>
        </div>
      <b:else/>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:loop values='data:posts' var='post'>
            <b:if cond='data:post.labels'>
        <div class='breadcrumb'>
            <ul class='crumb-tag'>
                <span itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><li class='first'><a expr:title='data:blog.title' href='/' itemprop='url'><span itemprop='title'> <data:homeMsg/></span></a></li></span>  
                    <li><span itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
          <b:loop values='data:post.labels' var='label'>
                    <b:if cond='data:label.isLast == &quot;true&quot;'>
                        <a expr:href='data:label.url' expr:title='data:label.name + &quot; 標籤的全部文章&quot;' itemprop='url'><span itemprop='title'> <data:label.name/></span></a>
                    </b:if>
          </b:loop></span></li><span>&#9660; <data:post.title/></span>
            </ul>
        </div>
      <b:else/>
        <div class='breadcrumb'>
            <ul class='crumb-tag'>
                <span><li class='first'><a expr:title='data:blog.title' href='/'><span> <data:homeMsg/></span></a></li></span>
                   <li> 未分類文章 </li><li><span>&#9660;</span> <data:post.title/></li>
            </ul>
        </div>
            </b:if>
          </b:loop>
            <b:else/>
        <b:if cond='data:blog.pageType == &quot;archive&quot;'>
        <div class='breadcrumb'>
            <ul class='crumb-tag'>
                <span><li class='first'><a expr:title='data:blog.title' href='/'><span> <data:homeMsg/></span></a></li></span>
                    <li><span>&#9660;</span> 歸檔&#65306; <data:blog.pageName/></li>
            </ul>
        </div>
      <b:else/>
        <b:if cond='data:blog.searchQuery'>
        <div class='breadcrumb'>
            <ul class='crumb-tag'>
                <span><li class='first'><a expr:title='data:blog.title' href='/'><span> <data:homeMsg/></span></a></li></span>
                    <li><span>&#9660;</span> 站內搜尋&#65306; <data:blog.pageName/></li>
            </ul>
        </div>
      <b:else/>
        <b:if cond='data:blog.pageType == &quot;index&quot;'> 
        <div class='breadcrumb'>
            <b:if cond='data:blog.pageName == &quot;&quot;'>
            <ul class='crumb-tag'>
                <span><li class='first'><a expr:title='data:blog.title' href='/'><span> <data:homeMsg/></span></a></li></span>
                    <li><span>&#9660;</span> 文章列表&#65306; 所有文章</li>
            </ul>
      <b:else/>
            <ul class='crumb-tag'>
                <span><li class='first'><a expr:title='data:blog.title' href='/'><span> <data:homeMsg/></span></a></li></span>
                    <li><span>&#9660;</span> 分類標籤&#65306; <data:blog.pageName/></li>
            </ul>
            </b:if>
        </div>
        </b:if>
        </b:if>
        </b:if>
        </b:if>
     </b:if>
  </b:if>
<!-- 標籤導航 breadcrumb 結束 -->
</b:includable>



Step1-2. 接著搜尋「<b:includable id='main' var='top'>」並在下方加入以下代碼。


<b:include data='posts' name='breadcrumb'/>



Step1-3. 最後搜尋「]]></b:skin>」在上方加入以下代碼,儲存範本後即可完成設定。


/* 標籤導航 */
.breadcrumb {
    font-family:Microsoft JhengHei; /* 微軟正黑體 */
    font-size:12px; /* 文字大小12px */
    font-weight:700; /* 文字粗度700 */
    margin:0px; /* 邊界:0px */
}
ul.crumb-tag {
    padding:0px; /* 留白:0px */
    text-transform:uppercase; /* 字母以大寫顯現 */
}
ul.crumb-tag li {
    display:inline-block; /* 不換行 */
    padding:0px; /* 留白:0px */
}
ul.crumb-tag li.first:after{
    content:"\25B6"; /* 標籤之後放入向右箭頭代碼 */
 color:#4BAFEF; /* 顏色 */
 padding:0px 0px 0px 3px; /* 留白:上 右 下 左3px */
}
ul.crumb-tag li a:link {
    color:#51ADED; /* 未連結前的顏色 */
}
ul.crumb-tag li a:visited{
    color:#51ADED; /* 已連結過的文字顏色 */
}
ul.crumb-tag li a:hover {
    color:#00A2E8; /* 滑鼠移至連結顏色 */
}



代碼說明

CSS 與頁面判斷式的部份就不再贅述,這邊補充說明「b:includable、b:include」與運用 Breadcrumb 時「item」內容中的「b:loop」用法。

CSS 配色時可以運用「Chrome 擴充:ColorPick Eyedropper 網頁色碼擷取器」,抓取網誌版型週遭相符色彩,做文字箭頭上色的搭配安排。


b:includable 與 b:include
b:includable 中可以放入固定的代碼,並於 b:include 中重複的在小工具中使用。例如「Step1-1 與 Step1-2」中代碼的放置位置就是在「網誌文章」小工具的「id='main'」中。早前介紹「Blogger 標頭判斷標記資料整理」中的「網誌說明」,也是這個原理。

放置 b:include 的位置在「網誌文章」小工具的「id='main'」的下方,即文章內容的第一筆資料,所以導覽麵包屑出現的位置,會在文章的最上方。

<b:includable id='breadcrumb' var='posts'>」中的「id='breadcrumb'」應對著「<b:include data='posts' name='breadcrumb'/>」中的「name='breadcrumb'」。b:includable 中的「var='posts'」則可用來參照區段中的資料,可填入數字或任意字母當作記錄。

b:include 中的「data='posts'」則參照對應 b:includable 內容物的資料,例如 b:loop 迴圈運用的「values='data:posts'」則與 b:include 中的「data='posts'」相呼應。「data='posts'」中的 posts 即為網誌文章小工具中的一份清單。


b:loop
b:loop 中的「var='label'」用來參照被 b:loop 包起來含有「data:label」的資料。例如,可以將「var='label'」更改為「var='c'」,在 b:loop 包起來的 data 資料,即可更換為「data:c」使用。

b:loop 中的「values='data:post.labels'」則是將需要迴圈的部份,應用到文章標籤 ( data:post.labels ) 中。

<b:if cond='data:label.isLast == &quot;true&quot;'>」用法,之前在「Blogger 文章頁面製作分類與標籤」已做過介紹,這邊則不再做贅述。


Breadcrumb
在設定 Breadcrumb 時參考了「結構化數據:麵包屑」中的 Microdata。測試後發現直接以直觀的方式設定資料,搜尋引擎在撈網站資料時,即可正確抓取。

例如「Step1-1」代碼中「<ul class='crumb-tag'>」下方開始的第一個 span 使用「itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'」標記,接著 a 連結使用「itemprop='url'」,a 連結指向的文字使用「itemprop='title'」,即可在「結構化數據測試工具」中正確對應。

&#9660;」為向下箭頭,「&#65306;」為冒號:。



Step 2

loop 迴圈的數值用法,取樣三筆標籤資料

運用 b:loop 的數值屬性,抽取 Blogger 標籤中自然排列的前兩筆固定數值,再加上原本在「Step1」中的最後一筆標籤資料。

搜尋 HTML 範本中的「<b:includable id='comment-form' var='post'>」並在上方加入以下代碼,接著再執行「Step1-2 及 Step1-3」即可完成設定。


      <b:includable id='breadcrumb' var='posts'>
<!-- 標籤導航 breadcrumb 開始 -->
  <b:if cond='data:blog.homepageUrl != data:blog.url'> 
     <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <div class='breadcrumb'>
            <ul class='crumb-tag'>
                <span><li class='first'><a expr:title='data:blog.title' href='/'><span> <data:homeMsg/></span></a></li></span>
                    <li><span>&#9660;</span> <data:blog.pageName/></li>
            </ul>
        </div>
      <b:else/>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:loop values='data:posts' var='post'>
            <b:if cond='data:post.labels'>
        <div class='breadcrumb'>
            <ul class='crumb-tag'>
                <span itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><li class='first'><a expr:title='data:blog.title' href='/' itemprop='url'><span itemprop='title'> <data:homeMsg/></span></a></li></span>
                    <span itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><li>
          <b:loop values='data:post.labels' var='label'>
                    <b:if cond='data:label.isLast == &quot;true&quot;'>
                <li class='first'><a expr:href='data:label.url' expr:title='data:label.name + &quot; 分類的全部文章&quot;' itemprop='url'><span itemprop='title'> <data:label.name/></span></a></li>
                    </b:if>
          </b:loop></li></span>
                    <span itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><li>
          <b:loop index='x' values='data:post.labels' var='label'>
                    <b:if cond='data:x &lt;=1'>
                <li class='first'><a expr:href='data:label.url' expr:title='data:label.name + &quot; 標籤的全部文章&quot;' itemprop='url'><span itemprop='title'> <data:label.name/></span></a></li>                
                    </b:if>
          </b:loop></li></span><span>&#9660; <data:post.title/></span>
            </ul>
        </div>
      <b:else/>
        <div class='breadcrumb'>
            <ul class='crumb-tag'>
                <span><li class='first'><a expr:title='data:blog.title' href='/'><span> <data:homeMsg/></span></a></li></span>
                   <li> 未分類文章 </li><li><span>&#9660;</span> <data:post.title/></li>
            </ul>
        </div>
            </b:if>
          </b:loop>
            <b:else/>
        <b:if cond='data:blog.pageType == &quot;archive&quot;'>
        <div class='breadcrumb'>
            <ul class='crumb-tag'>
                <span><li class='first'><a expr:title='data:blog.title' href='/'><span> <data:homeMsg/></span></a></li></span>
                    <li><span>&#9660;</span> 歸檔&#65306; <data:blog.pageName/></li>
            </ul>
        </div>
      <b:else/>
        <b:if cond='data:blog.searchQuery'>
        <div class='breadcrumb'>
            <ul class='crumb-tag'>
                <span><li class='first'><a expr:title='data:blog.title' href='/'><span> <data:homeMsg/></span></a></li></span>
                    <li><span>&#9660;</span> 站內搜尋&#65306; <data:blog.pageName/></li>
            </ul>
        </div>
      <b:else/>
        <b:if cond='data:blog.pageType == &quot;index&quot;'> 
        <div class='breadcrumb'>
            <b:if cond='data:blog.pageName == &quot;&quot;'>
            <ul class='crumb-tag'>
                <span><li class='first'><a expr:title='data:blog.title' href='/'><span> <data:homeMsg/></span></a></li></span>
                    <li><span>&#9660;</span> 文章列表&#65306; 所有文章</li>
            </ul>
      <b:else/>
            <ul class='crumb-tag'>
                <span><li class='first'><a expr:title='data:blog.title' href='/'><span> <data:homeMsg/></span></a></li></span>
                    <li><span>&#9660;</span> 分類標籤&#65306; <data:blog.pageName/></li>
            </ul>
            </b:if>
        </div>
        </b:if>
        </b:if>
        </b:if>
        </b:if>
     </b:if>
  </b:if>
<!-- 標籤導航 breadcrumb 結束 -->
</b:includable>



代碼說明

「Step2」代碼中 item 新增的「b:loop index='x'」,使用搭配「<b:if cond='data:x &lt;=1'>」時;「data:x」當中的 x 呼應「index='x'」,「&lt;=1」原形為小於等於 1「<=1」。

&lt;=1」的值為取樣 b:if 內容區段的「0 到 1」,也就是抽取標籤中的前兩筆資料,若「&lt;=1」變更為「&lt;=3」,那麼 b:if 內容區段取樣的數值則為「0 到 3」,抽取前四筆標籤資料。

如果有需求不抽取前兩筆標籤,則可以使用「&gt;=1」(「>=1」) 反向處理。



使用 Step2 時注意事項

以中、英文分類標籤
如果以「Step2」的方式設置 Breadcrumb 導航標籤,建議在撰寫文章建立標籤的時候,以中、英文的排列方式做標籤部署。中文標籤以大類別項目當作分類品項,英文標籤則以小類別項目當作標籤品項。

Blogger 製作 Breadcrumb 文章標籤導航麵包屑_201

使用時單篇文章標籤數量最少要三筆
另外,從上圖的綠框中可以觀察到,由於我們在 HTML 範本中設定抽取三筆標籤,所以在撰寫文章時設定超過三筆以上的標籤, Breadcrumb 導航標籤皆能正確顯示。如果是使用一筆 ( 第一個紅框 ) 或兩筆 ( 第二個紅框 ) 標籤,則會有出錯的情形,這個部份應該可以使用其他方式解決,目前研究中容後補充。

Blogger 製作 Breadcrumb 文章標籤導航麵包屑_202




相關文章

[教學] Blogger 文章頁面製作分類與標籤

Blogger 標頭判斷標記資料整理

Blogger 搜尋頁面加入分類標籤

Blogger 標籤頁面加入分類小標籤


留言

繼續閱讀:

這個網誌中的熱門文章

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

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

[教學] 使用 PuTTYgen 產生 SSH 連線 RSA、DSA 公鑰與私鑰

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

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

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

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

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

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

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