為網站面包屑導航添加結構化數據

　　昨天給同事做内部培訓，講搜索引擎優化，提到面包屑導航的時候，有人問為什麼叫“面包屑”，我記憶中是有個故事：小孩在森林中迷路了，為了能找到回去的路就沿途灑下面包屑，網站中的導航欄也是起到讓浏覽者不迷糊的作用，因此叫着面包屑導航，英文Breadcrumb Navigation，例如本篇博客文章的上級導航是：

　　首頁 » 博客 » James Qi的博客

　　Drupal網站中是可以自動生成面包屑導航的，而在MediaWiki網站中我們是自己寫的，反正隻要實現這種多級鍊接讓浏覽者明白自己在網站中的位置就可以。

　　我們也很多年前就了解和重視結構化數據，Schema.org這個站中好些種結構化數據我們都在網站中應用，但把面包屑導航也做成結構化數據沒有嘗試。

　　前些天在和同事一起分析競争性網站的時候，發現一個國外的網站在Google搜索結果中的鍊接就是以面包屑導航的方式呈現的，與普通網站在Google搜索結果中隻是顯示一個URL鍊接有所不同，這樣這個站給浏覽者的印象更好、更方便點擊不同鍊接到不同的層級。

　　昨天晚上花了幾個小時時間來了解、嘗試，先看看資料：Schema.org: BreadcrumbList，這裡面列出了4種格式例子：Without Markup、Microdata、RDFa、JSON-LD。我們習慣用Microdata，也用過JSON-LD和RDFa，這次就嘗試Microdata。

　　我先找Drupal 7的Theme API，應該也是可以實現的，但稍顯複雜。有幾個現成的第三方模塊，例如Crumbs, the Breadcrumbs suite，也說可以實現，但也覺得能不添加模塊盡量不添加。

　　後來查看page.tpl.php，裡面有輸出$breadcrumb變量的語句，就改這個地方吧，簡單明了，下面是我用的PHP程序片段：

<?php 
  //print $breadcrumb;
  $breadcrumb_display = $breadcrumb;
  $breadcrumb_display = str_replace('</h2>','</h2>'."\n",$breadcrumb_display);
  $breadcrumb_display = str_replace('<div class="breadcrumb">','<div class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">'."\n",$breadcrumb_display);
  $breadcrumb_display = str_replace('</div>',"\n".'</div>',$breadcrumb_display);
  $breadcrumb_display = str_replace(' » ',"\n".' » '."\n",$breadcrumb_display);
  $breadcrumb_display = str_replace('">','">'."\n".'    <span itemprop="name">',$breadcrumb_display);
  $breadcrumb_display = str_replace('<h2 class="element-invisible">'."\n".'    <span itemprop="name">','<h2 class="element-invisible">',$breadcrumb_display);
  $breadcrumb_display = str_replace('<div class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">'."\n".'    <span itemprop="name">','<div class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">',$breadcrumb_display);
  $breadcrumb_display = str_replace('<a href="','  <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">'."\n".'    <a itemprop="item" href="',$breadcrumb_display);
  $breadcrumb_display = str_replace('</a>','</span></a>'."\n".'    <meta itemprop="position" content="1" />'."\n".'  </span>',$breadcrumb_display);
  $breadcrumb_display_array = explode('"1"',$breadcrumb_display);
  $breadcrumb_display_1 = '';
  foreach ($breadcrumb_display_array as $key=>$value) {
    $key_1 = $key + 1;
    $breadcrumb_display_1 .= $value."\"$key_1\"";
  }
  $len = strlen("\"$key_1\"");
  $breadcrumb_display_1 = substr($breadcrumb_display_1,0,-$len);
  print $breadcrumb_display_1;
?>

　　這段程序對原來的$breadcrumb變量進行了一些替換，新輸出的面包屑導航源HTML代碼類似這樣：

<h2 class="element-invisible">當前位置</h2>
<div class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
  <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="/">
    <span itemprop="name">首頁</span></a>
    <meta itemprop="position" content="1" />
  </span>
»
  <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="/%E5%8D%9A%E5%AE%A2">
    <span itemprop="name">博客</span></a>
    <meta itemprop="position" content="2" />
  </span>
»
  <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="/%E5%8D%9A%E5%AE%A2/James_Qi">
    <span itemprop="name">James Qi的博客</span></a>
    <meta itemprop="position" content="3" />
  </span>
</div>

　　再用結構化數據校驗工具（Google提供，需要翻牆使用）檢查，可以檢測到BreadcrumbList結構化數據并且沒有報錯，就大功告成了，這個Drupal網站所有帶有面包屑導航的頁面就都有了這種結構化數據。

　　這個辦法也很容易實施到其它使用Drupal搭建的網站中，我在一個系列站的Web和AMP版本都修改page.tpl.php實施了，過些天看看搜索引擎中是否會出現導航結構化數據的顯示。👌

• 發表新回應