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

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

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

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

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

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

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

實際在 Google 搜尋結果中，Breadcrumb 後方還會有庫存或是轉釋連結，建議麵包屑最多設定三筆。

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

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

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

Yahoo 搜尋結果中也能識別導航麵包屑

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

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

文章更新 ( 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'」，即可在「結構化數據測試工具」中正確對應。

「▼」為向下箭頭，「：」為冒號：。

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'」，「<=1」原形為小於等於 1「<=1」。

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

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

使用 Step2 時注意事項

以中、英文分類標籤

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

使用時單篇文章標籤數量最少要三筆

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

相關文章

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

Blogger 標頭判斷標記資料整理

Blogger 搜尋頁面加入分類標籤

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