はじめに

2020年1月ごろにWordpressで運営しているサイトにGoogle Search Consoleから『「パンくずリスト」の問題が新たに検出されました』というメールが来ていました。なになに?とSearchConsoleを覗くと『data-vocabulary.org スキーマのサポートは終了します』とあります。何それ、と思われる方も一定数いらっしゃるのではないかと思いますが、意味がわかれば簡単に対策できるのでご紹介します。

結論

WordPressテーマのphpファイルの中でパンくずリストを構成しているパーツを直接編集して対応します。
パンくずリストの描画が以下のようなHTML構造と属性の記述がされるようになればよいです。

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="<<パンくずのリンク>>">
    <span itemprop="name">パンくずのタイトル1</span></a>
    <meta itemprop="position" content="1" /> <!-- パンくずリスト1から連番 -->
  </li>
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="<<パンくずのリンク2>>">
    <span itemprop="name">パンくずのタイトル2</span></a>
    <meta itemprop="position" content="2" />
  </li>
</ol>

ざっくり何が起きている?

ざっくり説明なのでSEOの専門家から見るとツッコミどころがあるかもしれませんが。パンくずリストのHTML構造かくあるべし、という定義があり、これに則ったパンくずリストのマークアップをしておくことでGoogleさんにここがパンくずですよー、と伝えることができます。その定義にもさらに種類があるのですが、「data-vocabulary.org」定義はもうGoogleがサポートしないので別の定義に変更してねー、と言われています。

どうすればよい?

WordPressのテーマによってはdata-vocaburaly.orgの構造でパンくずリストが作られているので、自分で別の定義の構造になるようにプログラムを修正してあげると解決できます。Googleさんの公式ドキュメントを参照するとこういう風にしてね、とあるのでドキュメントに書いてある「schema.org」という定義の構造にします。
Google検索デベロッパーガイド(パンくずリスト)

確認したWordpressテーマ

  • LionMedia
    • もしかしたらテーマのアップデートとかで最新を使えば再現しないのかもしれませんがそこは検証してません
  • 他のテーマで同様の問題が出ている場合も同じ手順で対応できると思います

対応手順

  1. WordPressをホストしているWebサーバに接続します
    • FTPでもsshでもなんでもいいです
    • 私はsshで接続
  2. テーマの中からdata-vocabrary.orgスキーマを記述している箇所を探す
// 以下のディレクトリに移動
$ cd /<<Wordpressへのパス>>/wp-content/themes/lionmedia
// data-vocabulary.orgの記述があるファイルを探す
$ grep -r data-vocabulary.org ./
  1. grepされたファイルにパンくずリストの記述があるのでschema.orgの定義に合うように修正する
    • 修正仕様は以下(ページ下部のExample1->microdataタブが参考になります)
    • before(function.php)
$str.= '<ul class="breadcrumb__list">';
$str.= '<li class="breadcrumb__item" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. home_url() .'/" itemprop="url"><span class="icon-home" itemprop="title">'. $home .'</span></a></li>';
  • after(function.php)
function fit_breadcrumb( $args = array() ){
$meta_positon = 1; // metaタグ用に追加
//
// 略
//
$str.= '<ul class="breadcrumb__list" itemscope itemtype="http://schema.org/BreadcrumbList">';
$str.= '<li class="breadcrumb__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'. home_url() .'/" itemprop="item"><span class="icon-home" itemprop="name">'. $home .'</span></a><meta itemprop="position" content="' . $meta_position++ .  '" /></li>';
  • data-vocabrary.orgが記載されているところを上記のように置き換えていきます。
  • LionMediaというテーマの場合以下が修正のポイントです
    • ul要素にitemscope属性とitemtype=”http://schema.org/BreadcrumbList”追加
    • li要素属性をitemprop=”itemListElement” itemscope itemtype=”http://schema.org/ListItem”に
    • a要素のitempropをitemに
    • span要素のitempropをnameに
    • li要素終了直前にmetaタグを追加しitemprop=”position”属性付与、content属性にパンくずの描画順で1から連番が入るように

(念の為)注意事項

phpファイルの修正をミスするとサイトが動かなくなるなど問題が起きる可能性もありますので、バックアップを取るなどお気をつけて。またテーマのアップデートをしたり入れなおしたりするとこの修正が無効になってしまうこともあり得るのでお気をつけて。

Tags
No Tag

No responses yet

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です