为网站面包屑导航添加结构化数据

　　昨天给同事做内部培训，讲搜索引擎优化，提到面包屑导航的时候，有人问为什么叫“面包屑”，我记忆中是有个故事：小孩在森林中迷路了，为了能找到回去的路就沿途洒下面包屑，网站中的导航栏也是起到让浏览者不迷糊的作用，因此叫着面包屑导航，英文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实施了，过些天看看搜索引擎中是否会出现导航结构化数据的显示。👌

• 添加新评论