こんにちは!
川口でWEB屋をやっています、テダスクのSeitoです。
今回は、お客様からよくご依頼をいただくリッチリザルト対応について書き方と実装方法について書こうと思います。
リッチリザルトとは、Google検索時に標準で表示される「タイトル」「説明文」の他に、パンくずリストや更新情報などを表示させるGoogle検索機能の事を言います。
例えば下のような検索結果です。
例1:FAQ(よくある質問)の結果
例2:レシピ
このリッチリザルトというのは、設定すれば確実に表示されるというわけではありません。
構造化データを設定するとランキングに影響するとGoogleは言っているので、設定できる人はするに越したことはありません。↓

今回のリッチリザルト対応は、ローカルビジネスです。
ローカルビジネスは、実は直接検索結果に表れるものではありませんが、Googleマイビジネスを設定している人ならやるべき構造化データです。
それでは内容に入っていきます。
構造化データマークアップの簡易生成ツール作成しました!
手っ取り早く作りたい方はこちらにどうぞ↓

構造化データ(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の記述法で実装していきます。
もっと詳しく知りたい方は公式サイトをご覧下さい。↓

ローカルビジネス用の記述例
それでは早速コードを見ていきましょう。
<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で貼りますので、こちらをざっと見ると理解しやすいです。

一つずつ説明していきます。
“@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)
下の段にスクロールすると、コードを入れる所がありますので、先程準備したコードを、<script>の所から閉じの</script>までまるっと貼り付けます。
貼り付けが完了したら、「Update」をクリックして作業を終了します。
実装したJSON-LDをソースから確認
実装したコードが問題なく実装出来るかをホームページのソースから確認します。
WEBブラウザによっても表示の名前が変わりますが、ホームページが表示されている画像以外のところで、「マウス右クリック」、「ページのソースを表示」*をクリックします。
*お使いのブラウザがChrome、Firefoxの場合「ページのソースを表示」、Microsoft Edgeの場合は「ページのソース表示」という項目名になっていると思います。
表示すると沢山コードが出てくるのですが、先程作ったスニペットの名前を検索するとすぐに見つかります。
上の例は実際にホームページに実装している物ですが、このように先程登録した内容がコードとして表示されれば問題なく登録ができています。
もしこのとき表示されていない場合は、いくつか原因がありますが、スニペットの表示ページの指定が間違っている、もしくはWordPressテーマを自作しており、テーマのhaed.phpファイルなどにwp_head()というWordPressの必須のテンプレートタグが実装されていないなどが考えられます。
リッチリザルトテストで最終試験
コードは無事表示されましたが、それがGoogleの規約に合っているかどうか文法のチェックする必要があります。
そのために、Googleはリッチリザルトテストというページを用意していますので、そこで試験をします。
URLには構造化データを実装したサイトの先ずは、トップページURLを入力
検査方法として、「スマートフォン用Googlebot」と「パソコン用Googlebot」とありますが、対象のサイトが個人のお客さん向けならスマートフォン用、対象のサイトが企業向けであればパソコン用を選ぶと良いかなと思います。
設定が完了したら、「URLテスト」をクリックします。
試験が始まりますので、しばらく待ちます。
そうするとこのように結果が表示されます。
問題が無ければ緑色のチェックマークで表示されますが、不備があると黄色いマーク、エラーがあると赤い警告エラーマークが表示されます。
ローカルビジネスの設定は「地域やお店やサービス」という項目で表示されます。
「地域やお店やサービス」をクリックしてもう少し詳しく見てみましょう。
コードで設定した内容が反映されているのが分かりますね。
これで問題なく、構造化データのローカルビジネスの設定ができました。
反映まではしばらく待つ
設定したからといってすぐに反映されるわけではありませんし、いつと明言もできません。
目安として1週間~といつも私は伝えていますが、そうならないこともあります。
まとめ
今回はリッチリザルト対応として構造化データのローカルビジネスのコードの実装についてお伝えしました。
今後はこのリッチリザルト対応のシリーズとして、他の構造化データにも触れていこうと思いますので、ぜひフォローしてください。
もし構造化データについて実装をお願いしたいなどご相談があれば、WordPressカスタマイズサービスからご依いただけます。
以上、「【リッチリザルト対応】構造化データのマークアップの実装方法(ローカルビジネス編)」でした!

構造化データ企業ロゴ編はこちら

コメント