こんにちは！

川口でWEB屋をやっています、テダスクのSeitoです。

今回は、お客様からよくご依頼をいただくリッチリザルト対応について書き方と実装方法について書こうと思います。

リッチリザルトとは、Google検索時に標準で表示される「タイトル」「説明文」の他に、パンくずリストや更新情報などを表示させるGoogle検索機能の事を言います。

例えば下のような検索結果です。

例１：FAQ（よくある質問）の結果

例２：レシピ

このリッチリザルトというのは、設定すれば確実に表示されるというわけではありません。

構造化データを設定するとランキングに影響するとGoogleは言っているので、設定できる人はするに越したことはありません。↓

WordPressテーマ変更でSEOに影響する5つのポイント【SEO情報まとめ】 | 海外&国内SEO情報ウォッチ

WordPressサイトでテーマ（デザイン）を変えると、SEOにどんな影響があるのか？見た目だけだから関係ない？それとも実はけっこう影響する？グーグルのミューラー氏の解説から学んでおこう。

今回のリッチリザルト対応は、ローカルビジネスです。

ローカルビジネスは、実は直接検索結果に表れるものではありませんが、Googleマイビジネスを設定している人ならやるべき構造化データです。

それでは内容に入っていきます。

構造化データマークアップの簡易生成ツール作成しました！

手っ取り早く作りたい方はこちらにどうぞ↓

簡易構造化データマークアップ生成ツール

このツールはあくまで簡易的な生成ツールのため、より細かい設定や例外の記述についてはこちらでコードを生成した上で、公式サイトを参考に追記するようにお願い致します。また構造化データマークアップに関するご質問については、公式サイトで分かる範囲で

構造化データ（Schema.org）の記述法は3種類
ローカルビジネス用の記述例
作ったJSON-LDを実装
実装したJSON-LDをソースから確認
リッチリザルトテストで最終試験
反映まではしばらく待つ
まとめ

構造化データ（Schema.org）の記述法は3種類

構造化データ（Schema.orgと呼んだりもします）を作成するには3種類記述法があります。

JSON-LD
microdata
RDFa

この3種類ですが、公式サイトのヘルプページを見ると1番のJSON-LDの記述法を推奨しているようです。

何のことやらと言う感じだと思いますが、JSON-LDは<haed>タグ内に<script>タグを用いて記述する方法、microdataとRDFaは、htmlのソースのタグの中に記述する方法と思ってもらえれば良いです。

すでにお使いのWordPressテーマが、構造化データの表示に対応している場合はソースを見ると確認出来るかと思います。

例1：JSON-LDの記法

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "url": "https://web.tedask.jp",
  "logo": "https://web.tedask.jp/wp-content/uploads/2019/02/tedask_logo21.png"
}
</script>

例2：microdataの記法

<div class="date-tags">
  <span class="post-update"><span class="fa fa-history" aria-hidden="true"></span><time class="entry-date date updated" datetime="2022-01-20T15:59:08+09:00" itemprop="dateModified">2022.01.20</time></span>
  <span class="post-date"><span class="fa fa-clock-o" aria-hidden="true"></span> <span class="entry-date date published"><meta itemprop="datePublished" content="2022-01-14T11:57:16+09:00">2022.01.14</span></span>
</div>

例1と例2では記述している内容は異なりますが、どちらの記述法でも実現は可能です。

この記事では、主にJSON-LDの記述法で実装していきます。

もっと詳しく知りたい方は公式サイトをご覧下さい。↓

構造化データマークアップとは | Google 検索セントラル | ドキュメント | Google for Developers

Google 検索がページの理解を高める「構造化データマークアップとは」何か、解説します各機能のマークアップ例は「検索ギャラリー」から確認できます。

ローカルビジネス用の記述例

それでは早速コードを見ていきましょう。

<script type="application/ld+json">
{
  "@context" : "http://schema.org",
  "@type" : "LocalBusiness",
  "name" : "TEDASK｜WordPress専門ホームページ制作事務所",
  "description": "川口市の川口駅東口より徒歩2分！高品質で集客にも強く初心者にも使いやすいWordPress専門でホームページ制作を行っています。分かりやすさをモットーにコミュニケーションを大切にしています。お問い合わせはこちら→050-7119-8050",
  "image" : "https://web.tedask.jp/wp-content/uploads/2020/08/tedaskweb_main.jpg",
  "url" : "https://web.tedask.jp",
  "priceRange": "￥4,000～",
  "telephone" : "050-7119-8050",
  "address": {
        "@type": "PostalAddress",
        "postalCode": "332-0012",
        "addressRegion": "埼玉県",
        "addressLocality": "川口市",
        "streetAddress": "本町4丁目3-14 小峰第一ビル5階-K3"
      },
  "openingHoursSpecification":
  {
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": [
      "Monday",
      "Tuesday",
      "Wednesday",
      "Thursday",
      "Friday",
      "Saturday"
    ],
    "opens": "10:00",
    "closes": "19:00"
  }
}
</script>

これは実際にこのサイトに実装している構造化データのコードになります。

先に出典元のGoogleの公式サイトをURLで貼りますので、こちらをざっと見ると理解しやすいです。

ローカルビジネス（LocalBusiness）の構造化データ | Google 検索セントラル | ドキュメント | Google for Developers

ローカルビジネス（Localbusiness）の構造化データ（schema.org）のマークアップ例と実装方法をご紹介します。Google がビジネスの営業時間や価格帯などを理解するのに役立ちます。

一つずつ説明していきます。

“@context” : “http://schema.org”
“@type” : “LocalBusiness”

この二つの@の項目は必須でcontentはお決まりのフレーズ、typeは何の構造化データタイプかを指定します。今回はローカルビジネスのため、LocalBusinessと入力しています。

それ以降については、各プロパティを見ながら記述します。

name：Googleマイビジネスで設定している事業者名
description：事業内容などの説明文章
image：Googleマイビジネスで設定している画像等
url：サイトのURL
priceRange：料金
address：住所（必須）
openingHoursSpecification：営業曜日、時間

という感じです。

公式サイトでは、上記以外もあるので事業内容に合わせて追記してください。

作ったJSON-LDを実装

さて、コードを用意したのは良いですが、どうやって実装するかです。

直接テーマエディタから記述することになれている方でしたら、それでもいいのですが、元に戻せなくなるリスクを考えると個人的にはエディタから編集することはおすすめしません。

ということで、プラグインを使いたいと思います。

プラグインの検索画面から、「Header Footer Code Manager」と検索します。

Header Footer Code Managerが出てきたら、インストールして有効化します。

左メニューに現れた「HSCM」というメニューをクリックして、「All Snippets」をクリックするとこの画面になります。

「Add New Snippet」をクリック。

「Snippet Name」：スニペット（コード）名（自分が分かる名前ならなんでもOK）
「Snippet Type」：スニペットの種類（HTML、CSS、JavaScriptから選択）
「Site Display」：どのページで表示するか（Site Wideは全てのページ、Postは投稿記事、Pageは固定ページから指定。ローカルビジネスはトップページまたは会社情報のどちらかが推奨*）
「Exclude Pages」：除外する固定ページ
「Exclude Posts」：除外する投稿記事
「Location」：表示する位置（wp-haed()で表示するか、wp-footer()で表示するか）
「Device Display」：表示するデバイス（全て、PC、スマホから選択）
「Status」：表示の有効・無効設定

今回のJSON-LDでは<script>タグを使いますので、「Snippet Type」はJavaScriptになります。

*Googleの鈴木謙一さんのコメントより。（https://bit.ly/3qNcXkm）

コードを書く時は、Snippet/Codeで直接記述するとリッチリザルトテストでエラーになることがあるので、メモ帳やテキストエディタなどで一度コードを書いてからSnippet/Codeに貼り付けるようにすると上手くいきます。