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

この記事を書いた人
Toshi Seito

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

Toshi Seitoをフォローする

コメント

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