WEB集客

【リッチリザルト対応】構造化データのマークアップの書き方・実装方法(ローカルビジネス編)

リッチリザルト対応 WEB集客

こんにちは!

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

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

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

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

例1:FAQ(よくある質問)の結果

リッチリザルト対応

例2:レシピ

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

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

WordPressテーマ変更でSEOに影響する5つのポイント【SEO情報まとめ】 | 海外&国内SEO情報ウォッチ
WordPressサイトでテーマ(デザイン)を変えると、SEOにどんな影響があるのか? 見た目だけだから関係ない? それとも実はけっこう影響する? グーグルのミューラー氏の解説から学んでおこう。

 

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

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

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

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

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

  1. JSON-LD
  2. microdata
  3. 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

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

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

Header Footer Code Manager

「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に貼り付けるようにすると上手くいきます。

Header Footer Code Manager

下の段にスクロールすると、コードを入れる所がありますので、先程準備したコードを、<script>の所から閉じの</script>までまるっと貼り付けます。

貼り付けが完了したら、「Update」をクリックして作業を終了します。

 

実装したJSON-LDをソースから確認

実装したコードが問題なく実装出来るかをホームページのソースから確認します。

WEBブラウザによっても表示の名前が変わりますが、ホームページが表示されている画像以外のところで、「マウス右クリック」、「ページのソースを表示」*をクリックします。

*お使いのブラウザがChrome、Firefoxの場合「ページのソースを表示」、Microsoft Edgeの場合は「ページのソース表示」という項目名になっていると思います。

表示すると沢山コードが出てくるのですが、先程作ったスニペットの名前を検索するとすぐに見つかります。

Header Footer Code Manager

上の例は実際にホームページに実装している物ですが、このように先程登録した内容がコードとして表示されれば問題なく登録ができています。

もしこのとき表示されていない場合は、いくつか原因がありますが、スニペットの表示ページの指定が間違っている、もしくはWordPressテーマを自作しており、テーマのhaed.phpファイルなどにwp_head()というWordPressの必須のテンプレートタグが実装されていないなどが考えられます。

 

リッチリザルトテストで最終試験

コードは無事表示されましたが、それがGoogleの規約に合っているかどうか文法のチェックする必要があります。

そのために、Googleはリッチリザルトテストというページを用意していますので、そこで試験をします。

リッチリザルト テスト - Google Search Console

リッチリザルト対応

URLには構造化データを実装したサイトの先ずは、トップページURLを入力

検査方法として、「スマートフォン用Googlebot」と「パソコン用Googlebot」とありますが、対象のサイトが個人のお客さん向けならスマートフォン用、対象のサイトが企業向けであればパソコン用を選ぶと良いかなと思います。

設定が完了したら、「URLテスト」をクリックします。

リッチリザルト対応

試験が始まりますので、しばらく待ちます。

リッチリザルト対応

そうするとこのように結果が表示されます。

問題が無ければ緑色のチェックマークで表示されますが、不備があると黄色いマーク、エラーがあると赤い警告エラーマークが表示されます。

ローカルビジネスの設定は「地域やお店やサービス」という項目で表示されます。

地域やお店やサービス」をクリックしてもう少し詳しく見てみましょう。

リッチリザルト対応

コードで設定した内容が反映されているのが分かりますね。

これで問題なく、構造化データのローカルビジネスの設定ができました。

 

反映まではしばらく待つ

設定したからといってすぐに反映されるわけではありませんし、いつと明言もできません。

目安として1週間~といつも私は伝えていますが、そうならないこともあります。

 

まとめ

今回はリッチリザルト対応として構造化データのローカルビジネスのコードの実装についてお伝えしました。

今後はこのリッチリザルト対応のシリーズとして、他の構造化データにも触れていこうと思いますので、ぜひフォローしてください。

もし構造化データについて実装をお願いしたいなどご相談があれば、WordPressカスタマイズサービスからご依いただけます。

以上、「【リッチリザルト対応】構造化データのマークアップの実装方法(ローカルビジネス編)」でした!

WordPressカスタマイズサービス
WordPressカスタマイズサービスでは、WordPressのカスタマイズをリーズナブルな価格で承るサービスです。 WordPressのカスタマイズや機能追加、デザインの変更、壊れてしまったデザインの修復などWordPressに関する事で

 

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

【リッチリザルト対応】構造化データのマークアップの書き方・実装方法(企業ロゴ編)
今回はリッチリザルト対応でも企業ロゴを設定する方法を説明します。このロゴはいわゆる指名検索(企業名、会社名を検索すること)の場合に、企業ロゴを検索結果に表示させるための構造化データになります。
この記事を書いた人
Toshi Seito

TEDASK代表
WordPressに関する相談実績のべ300件以上、タイムチケットでのWordPressの立ち上げお手伝いのチケット販実績240件以上!WordPressのカスタマイズから、WEBサービス制作、ホームページ制作のご相談はお任せ下さい。

Toshi Seitoをフォローする

コメント

タイトルとURLをコピーしました