Google Search ConsoleによるSeesaaブログの「パンくずリスト問題」を修正した話

先月Google Search Consoleから警告メールを受け取って,しばらく放置していた問題を解決しました。
具体的には「パンくずリストで問題が検出されました」というものです。

Google Search Consoleパンくずリスト問題
▲ Google Search Consoleから届いたメール

メールに記載されていたエラー理由の「data-vocabulary.org スキーマのサポートは終了します」を,ちょこちょこっとGoogle先生で調べてみると。
リッチリザルトを表示するための data-vocabulary.org 構造化データの利用が,2020年4月6日をもってGoogleは終了。
だから今のうちに修正しといてね。。。という感じらしいです。

パンくずリストって,この記事タイトルの上にある「HOME>カテゴリ>記事タイトル」みたいに,「ユーザーが今WEBサイト上のどこにいるのかを伝える階層順のリスト」のこと。
Seesaaブログでは標準で出てこないので,いろいろなサイトを参考にhtmlをカスタマイズして表示させているわけです。

今回も同様に解決方法を調べてみましたが,大抵はワードプレスでの説明ばかり。
私は未だに?Seesaaの無料blogを利用しているので,ピッタリ該当するものがない。
ということで,ワードプレスによるhtmlの記述を参考にし,Seesaaの変数を当てはめて直しました。

Seesaaブログで新しいパンくずリストを表示する際の参考になれば幸いです。

スポンサーリンク








これまでのパンくずリスト記述


こちらのblogエントリを参考に,以下の様に記述していました。

【Seesaaブログ新デザインシステム】パンくずリストを付ける|ブログカスタマイズの雑談BLOG
<!-- ********** hierarchical menu *********** -->
<% if:page_name eq 'article' -%>
<div class="crumb">
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="<% blog.page_url %>" itemprop="url">
<span itemprop="title"><% blog.title %> TOP</span>
</a> > <% loop:list_article -%>
<a href="<% article_category.page_url %>" itemprop="url">
<span itemprop="title"><% article_category.name %></span>
</a> >
<span itemprop="title"><% extra_title %></span>
</span><% /loop -%>
</div>
<% /if %>
<!-- ********** /hierarchical menu *********** -->
この赤字になっている「%〜%」がSeesaa独自の変数な訳です。
この場合のパンくずリストは,このように表示されていました。(イメージです)

くうねるあそぶ TOPカテゴリ名> 記事タイトル

最初の「div class="crumb"」で呼びだしているスタイルは無視していただくとして。
このままでも問題なく表示はされているのですが。。。
なるほど,記述中にdata-vocabulary.orgを利用していますね。
ここがGoogleボットに引っかかったようです。

かといって,ここだけを今後対応されるschema.orgに変えるだけではダメっぽい。
itemprop(アイテムのプロパティ)の要素名称なんかも変わるようです。
またGoogle先生でいろんな解説サイトを巡ることになります。

schema.orgの書き方にしたSeesaaパンくずリスト記述


結論,schema.orgに沿った記述方法として,このhtmlでいけました。
ちなみにこのblogエントリのschema.orgの書き方を参考にしています。

パンくずリストとは?作り方とCSSデザインサンプル12選
<!-- ********** hierarchical menu *********** -->
<% if:page_name eq 'article' -%>
<div itemscope itemtype="https://schema.org/BreadcrumbList">
<!-- 1.blog.title -->
<span itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<a itemprop="item" href="<% blog.page_url %>">
<span itemprop="name"><% blog.title %> TOP</span>
</a>
<meta itemprop="position" content="1" />
</span>

<!-- 2.category.name -->
<% loop:list_article -%>
<span itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<a itemprop="item" href="<% article_category.page_url %>">
<span itemprop="name"><% article_category.name %></span>
</a>
<meta itemprop="position" content="2" />
</span>

<!-- 3.article.title -->
<span itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<span itemprop="name"><% extra_title %></span>
</a>
<meta itemprop="position" content="3" />
</span><% /loop -%>
</div>
<% /if %>
<!-- ********** /hierarchical menu *********** -->
同じく,赤字になっている「%〜%」なSeesaa独自の変数を入れている訳です。
この場合のパンくずリストも,次のように表示されます。(これもイメージです)

くうねるあそぶ TOPカテゴリ名> 記事タイトル

この形でSeesaaブログのデザイン>html編集にて古いパンくずリストの記述を修正し,その後Google Search Consoleにて修正を検証すれば完了です。

さらにカスタマイズ


Seesaaブログでもschema.orgにてパンくずリストを表示することができました。

でも,ページの頭に持ってきたパンくずリストって,このデザインテーマだと記事のタイトルが2重に表示されている感じになります。
かといって,ページの下だとSEO的に問題はないそうですが,やはり見にくい。

くうねるあそぶの場合,先の参考にしたサイトにて細かくカスタマイズしています。
こんな感じ。↓↓

元々記載されていたサンプル通りに,「ol」「li」といった箇条書きのタグにて。
あとはスタイルシートにて吹き出しのような動くデザインをつけています。
長過ぎる記事タイトルは,Seesaaの変数を使って18バイトまで表示させ被らないように。

なんて,この辺の話はまた別の機会に。

これにてパンくず問題,そしてデザイン問題も解決です!

この記事へのコメント