リッチリザルトへの BlogPosting での対応

最終更新日:2022年04月25日公開日:2021年1月13日 2021年01月

1. リッチリザルトとは
2. WordPress でのリッチリザルトへの BlogPosting での対応

リッチリザルトとは

リッチリザルトは、通常の青色リンクよりも高度な機能を持つ、Google サービス（Google 検索など）での検索結果です。

つまり，より情報量の多い豊かな検索結果を出せるようになるということだろう．

何がよいかというと他のマッチしたページよりも情報量が豊か(リッチ)なのでリッチな結果が表示されるのがよいのだろう．

ちなみに今回は「ブログ投稿」(記事)を取り上げているが「記事」の説明ページには
「Google 検索結果での表示を強化することができます。」
と書いてある．

以下の Google のページ
https://developers.google.com/search/docs/guides/search-gallery
には，ブログ投稿(BlogPosting)は存在していないが，
BlogPosting - Schema.org Type
のページにある
Thing > CreativeWork > Article > SocialMediaPosting > BlogPosting
というパンくずリストからも BlogPosting は Article のサブカテゴリ SocialMediaPosting の一つなので「記事」ということが分かる．

とにかく，例えば以下のページをテストしてみる．
https://www.rectus.co.jp/archives/358

上記ページをリッチリザルトテストにかけてみると分かるが，以下のように「このページはリッチリザルトの対象です」と言われる．
つまり，BlogPosting もリッチリザルトの対象になる．

WordPress でのリッチリザルトへの BlogPosting での対応

wordpress で作ったページはある程度自動的にこのリッチリザルトに対応できるので，その方法を紹介する．

「パンくずリスト」の書き方については今後ここでも取り上げる可能性があるが，ここではスルーして「ブログ投稿」の方に言及する．

ブログ記事の場合，構造(スキーマ)は以下のページに準じて書く必要がある．
BlogPosting - Schema.org Type

どこに書くかというと，Wordpress の場合，「個別投稿 (single.php)」というページが各ページに当たるので，ここを変更する必要がある．
左側のメニューから「外観」→「テーマエディター」で single.php を編集する画面になる．

ブログ記事全体

記事全体を囲むタグに
itemscope itemtype="https://schema.org/BlogPosting"
を入れる．

headline

h1 タグの itemtype 属性に headline を入れる．

そこまでを行うと例えば以下のようになる．

<div itemscope itemtype="https://schema.org/BlogPosting">
  <h1 itemprop="headline"><?php the_title(); ?></h1>
  <p>
    <?php the_content(); ?> <!-- 記事本文を表示 -->
  </p>
</div>

最初にスキーマを宣言して，中のタグに itemprop 属性を使って書いていく．

headline 以外には image (画像) や dateModified (更新日) datePublished (公開日) を入れると良いだろう．
いずれも BlogPosting のスキーマに存在しているプロパティである．

datePublished と dateModified

single.php に以下のように php で書いておけば自動的に最終更新日や公開日が定義される．

最終更新日:<time datetime="<?php the_modified_date('c') ?>" itemprop="dateModified"><?php the_modified_date('Y年m月d日') ?></time>

公開日:<time datetime="<?php echo get_the_date('c'); ?>" itemprop="datePublished"><?php echo get_the_date(); ?></time>

Google の検索結果としては特にどっちというわけでもなく，更新日か公開日のどちらかが採用されている．
採用のアルゴリズムは謎だが日付を一つにして公開日を更新日にしてしまうのは違うと思うのでお勧めしない．

image

画像 (image) を指定していないと

項目「image」がありません（任意）

という警告がされる．(任意なのに．．．)

image に関してはメディアから挿入する際に自動で追加する方法があるので紹介する．

※参考サイト

私は前に入れたい派なので前に挿入するようにした．
以下のスクリプトを functions.php に入れればよい．
functions.php も「外観」→「テーマエディター」で編集できる．

// imgタグにitemprop属性, loading属性を追加
function img_add_tags($html, $id, $alt, $title, $align, $size) {
  return str_replace('<img ','<img itemprop="image" loading="lazy" ',$html);
}
add_filter('get_image_tag','img_add_tags', 10, 6);

これにより，記事を書いている最中に「メディアを追加」ボタンを押して画像を挿入する際に自動で loading="lazy" と itemprop="image" が挿入されるようになる．

リッチリザルト への BlogPosting での対応