STAFF BLOG スタッフブログ

【phpの動的対応版】リッチスニペット対応サイトやったぞー(・囚・)ノ

現在、Qriptはテレワーク中につき自宅からブログを書いております。
自粛生活で、自粛太りが流行っているようですが、いかがお過ごしでしょうか。
私は、自粛太りにはなりたくないと運動をはじめてみましたが、運動した結果、よくお腹が空き食べてしまう。。。(ダメじゃんw)

すぐ近所に居酒屋があり、個人店なのでいろんな酒の肴がテイクアウト可能なので、この前注文してみましたが、やっぱりお店で食べるのとテイクアウトで食べるのは違いますね。。
鳥貴族のテイクアウト開始の噂、ヘビーユーザなので心待ちにしております。
早くコロナが落ち着くのが待ち遠しいです。生ビール飲みたい。
そんなこんなでリッチスニペットを対応した開発があり、当時はショップ系のリッチスニペットの対応でしたが、気になったので他のリッチスニペットの情報などまとめてみました。

リッチスニペットについて

リッチスニペットとは、ユーザーが検索結果画面からどのページをクリックするか、その判断を助けるための視覚的にページ内容が想像できるような情報のことです。
リッチスニペットを表示させるには構造化データを使用して記述する必要があります。
構造化データとは、各要素がそれぞれ何を意味するのかを検索エンジンに伝えるためのものです。

↓↓↓参考リンク
https://www.sakurasaku-labo.jp/blogs/rich-snippets

リッチスニペットの種類

  • 記事
  • パンくずリスト
  • 企業概要
  • 書籍
  • レストランやショップなどのお店情報
  • イベント
  • 職業
  • 商品
  • Q&Aページ
  • レシピ
  • レビュースニペット
  • 動画

上記以外にも多種ございます。
以下、よくリッチスニペットが対応されているものをピックアップして、Scriptを記述してみました。
パラメータもいろいろございますが、ここではよく使うパラメータのみをピックアップしております。
「microdata」「JSON-LD」とありますが、Google先生自身も「JSON-LD」を推奨しております。
以下、JSON-LDで記述しております。

Schema.org、構造化データの種類

http://schema-ja.appspot.com/docs/full.html

JSON-LDの記述の際、こちらを参考にしていただくとどのschemaのパラメータを設定したらよいのかがわかります。

企業概要のJSOL-LD

先日、Qriptサイトの企業概要ページにJSON-LDを入れてみました。
下記のようになっているかどのような結果になるか、反映待ちです。

項目名 必須 説明
@context 必須 "http://schema.org/"を指定
@type 必須 "Organization"を指定
name 必須 企業名
founder 任意 創業者の名前
foundingDate 任意 設立日
description 必須 企業概要に関する説明
url 必須 トップページのURL
logo 任意 ロゴ画像
image 任意 企業概要のイメージ
telephone 必須 電話番号
faxNumber 任意 FAX番号
address 必須 企業所在地
contactPoint 任意 問合せ電話番号
sameAs 任意 関連サイトやSNS
<script type="application/ld+json">
{
    "@context" : "https://schema.org",
    "@type" : "Organization",
    "name" : "株式会社Qript",
    "foundingDate" : "2000-03-10",
    "description" : "大阪のWeb制作会社",
    "url" : "https://www.qript.co.jp/",
    "logo" : "https://www.qript.co.jp/img/kyoro_logo.gif",
    "image" : "https://www.qript.co.jp/img/company/img_profile.jpg",
    "telephone" : "+81-00-0000-0000",
    "faxNumber" : "+81-00-0000-0000",
    "address" : {
        "@type" : "PostalAddress",
        "addressLocality" : "大阪市中央区",
        "addressRegion" : "大阪府",
        "postalCode" : "542-0081",
        "streetAddress" : "南船場3丁目7番27号 NLC心斎橋7F",
        "addressCountry" : "JP"
    },
    "contactPoint" : [
        {
            "@type" : "ContactPoint",
            "telephone" : "+81-00-0000-0000",
            "contactType" : "customer service"
        }
    ],
    "sameAs" : [
        "https://www.instagram.com/qript.inc/",
        "https://www.facebook.com/Qript/"
    ]
}
</script>

商品のJSOL-LD

自粛中によく食べてたおやつです。
「おにぎりせんべい」「カッパえびせん」と塩系おやつばかりw

5種類のばかうけが楽しめる大袋アソート【特大&アソート】
https://lohaco.jp/product/9725582/
LOHACOの商品詳細のJSON-LDでご説明させていただきます。
項目名 必須 説明
@context 必須 "http://schema.org/"を指定
@type 必須 "Product"を指定
name 必須 商品名
description 必須 商品に関する説明
image 必須 商品のイメージ
"image": [
    "商品画像URL",
    "商品画像URL"
]
で複数の商品イメージを設定可。
単一の場合は
"image": "商品画像URL"
sku 任意 商品のカラーサイズ展開、下記のように商品コード等を設定。

"sku": [
    "sku-blue-s",
    "sku-blue-m",
    "sku-blue-l"
]
brand 任意 企業名やブランド名、下記を設定。

"brand": {
    "@type": "Thing",
    "name": "企業名やブランド名"
}
offers 推奨 価格や在庫等の情報、"aggregateRating"とどちらかが必須です。下記を設定。

"offers": {
    "@type": "Offer",
    "priceCurrency": "JPY",
    "price": "5000", // 価格
    "priceValidUntil": "2025-01-06", //価格の有効期限
    "availability": "InStock", //InStock(在庫あり)OutOfStock(在庫なし)PreOrder(予約)
    "url": "商品の販売URL"
}
aggregateRating 推奨 商品の評価、"offers"とどちらかが必須です。下記を設定。

"aggregateRating": { //商品の評価
    "@type": "AggregateRating",
    "ratingValue": "3.5", //平均点
    "reviewCount": "11" //評価した人数
}
review 任意 商品のレビュー、下記を設定。

"review": [ //商品のレビュー
    {
        "@type": "Review",
        "author": {
        "@type": "Person",
            "name": "レビュアーの名前",
            "sameAs": "https://facebook.com/〇〇〇" //レビュアーのサイトやSNS
        },
        "datePublished": "2019-04-01", //レビューした日時
        "description": "レビュー文章",
        "reviewRating": {
            "@type": "Rating",
            "bestRating": "5", //最高得点
            "worstRating": "1", //最低点
            "ratingValue": "3.5" //平均点数
        }
    },
    {
        "@type": "Review",
        "author": {
            "@type": "Person",
            "name": "レビュアーの名前",
            "sameAs": "https://facebook.com/〇〇〇" //レビュアーのサイトやSNS
        },
        "datePublished": "2019-07-22", //レビューした日時
        "description": "レビュー文章",
        "reviewRating": {
            "@type": "Rating",
            "bestRating": "5", //最高得点
            "worstRating": "1", //最低点
            "ratingValue": "4" //評価した点数
        }
    }
]
<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "Product",
    "description": "5種類のばかうけが楽しめる大袋アソート。【特大&アソート】",
    "name": "栗山米菓 ばかうけアソート 40枚 1袋",
    "image": "https://askul.c.yimg.jp/img/product/3L1/9725582_3L1.jpg",
    "url": "https://lohaco.jp/product/9725582/",
    "aggregateRating": {
        "@type": "AggregateRating",
        "bestRating": "5",
        "ratingValue": "4.3",
        "worstRating": "1",
        "reviewCount": "410"
    },
    "offers": {
        "@type": "Offer",
        "price": "291",
        "priceCurrency": "JPY"
    }
}
</script>

求人のJSON-LD

以前、対応してますので以下のリンクをご参考に。
↓↓↓参考リンク
https://www.qript.co.jp/blog/technique/4039/

イベントのJSOL-LD

【梅田芸術劇場】ミュージカル エリザベート
https://eplus.jp/sf/venue/5300290
※公演中止

こちらのチケット販売サイトのJSON-LDでご説明させていただきます。

項目名 必須 説明
@context 必須 "http://schema.org/"を指定
@type 必須 "Event"を指定
name 必須 イベントのタイトル
description 必須 イベントに関する説明
image 任意 イベントのイメージ
"image": [
    "イベント画像URL",
    "イベント画像URL"
]
で複数のイベントイメージを設定可。
単一の場合は
"image": "イベント画像URL"
startDate 必須 イベント開始時間、"0000-00-00T00:00"形式で設定。
endDate 必須 イベント終了時間、"0000-00-00T00:00"形式で設定。
location 必須 イベントの会場と所在地、下記を設定。

"location": {
    "@type": "Place",
    "name": "イベント会場名",
    "address": {
        "@type": "PostalAddress",
        "addressLocality": "市区町村",
        "addressRegion": "都道府県",
        "postalCode": "123-4567", //郵便番号
        "streetAddress": "以降住所番地",
        "addressCountry": "JP"
    }
}
offers 任意 イベントのチケット販売or予約先、下記を設定。

"offers": {
    "@type": "Offer",
    "url": "チケット購入先、または予約先のURL",
    "priceCurrency": "JPY",
    "price": "2000", //金額
    "validFrom": "2018-02-20T10:00" //チケット販売日時
    "availability": "InStock", // InStock(在庫あり)OutOfStock(在庫なし)PreOrder(予約)
}
performer 任意 出演者情報、下記を設定。

"performer":[
    {
        "@type": "Person", //Person(個人)PerformingGroup(グループ)
        "name": "出演者名",
        "url":"出演者のウェブサイト"
    },
    {
        "@type": "Person", //Person(個人)PerformingGroup(グループ)
        "name": "出演者名"
    }
]
<script type="application/ld+json">
{
    "@context": "http://schema.org/",
    "@type": "Event", 
    "url": "https://eplus.jp/sf/detail/0177820001-P0030087P021025",
    "name": "ミュージカル エリザベート <公演中止>",
    "startDate": "2020-05-20T18:00",
    "endDate": "2020-05-20T23:59",
    "location": {
        "@type":"Place",
        "name": "梅田芸術劇場 メインホール",
        "url": "https://eplus.jp/sf/venue/5300290",
        "address": {
            "@type": "PostalAddress",
            "addressRegion": "大阪府",
            "addressCountry": "日本"
        }
    }
}
</script>

Q&AのJSOL-LD

※【注意】弊社サイトには、FAQページはございません。合成イメージですw

項目名 必須 説明
@context 必須 "http://schema.org/"を指定
@type 必須 "FAQPage"を指定
mainEntity 必須 Question&Answer、下記を設定。

"mainEntity": [
    {
        "@type": "Question",
        "name": "Questionタイトル",
        "acceptedAnswer": {
            "@type": "Answer",
            "text": "Answer内容"
        }
    },
    // ... {}のQ&Aの部分を繰り返し複数設定可。
}
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
        {
            "@type": "Question",
            "name": "Qriptとはどういう意味ですか?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "『Quality Product(クオリティプロダクト=価値あるものづくり)』に由来。"
            }
        },
        {
            "@type": "Question",
            "name": "Qriptはどこにありますか?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "大阪の心斎橋にあります。"
            }
        },
        {
            "@type": "Question",
            "name": "QriptはどのようなWeb制作をおこなっていますか?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "デザイン・マークアップ・システム・運用・保守、いろいろとやっております。"
            }
        },
        {
            "@type": "Question",
            "name": "Qriptのキャラクター、パーンとはなんですか?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "ギリシャ神話のパーンが由来です。"
            }
        }
    ]
}
</script>

レシピのJSOL-LD

こちらのレシピいつも、お世話になってます。
「☆栄養士のれしぴ☆」さんのレシピは、美味しいレシピしかありません。

☆豚こまのスタミナ炒め☆
https://cookpad.com/recipe/3003417

こちらのレシピのJSON-LDを参考に説明させていただきます。

項目名 必須 説明
@context 必須 "http://schema.org/"を指定
@type 必須 "Recipe"を指定
name 必須 料理タイトル
headline 任意 料理ヘッドライン(見出し)
author 任意 料理考案者、下記を設定。

"author": {
    "@type": "Person",
    "name":"考案者氏名",
    "url":"考案者詳細URL"
}
publisher 任意 公開サイト情報、下記を設定。

"publisher": {
    "@type": "Organization",
    "name":"サイト名",
    "url":"サイトトップURL",
    "logo": {
        "@type": "ImageObject",
        "url":"サイトロゴ画像URL"
        "width":"サイトロゴ画像幅"
        "height":"サイトロゴ画像高さ"
    }
}
mainEntityOfPage 任意 レシピ紹介詳細URL、下記を設定。

"mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "レシピ紹介詳細URL"
}
image 必須 料理のイメージ
"image": [
    "料理画像URL",
    "料理画像URL"
]
で複数の料理イメージを設定可。
単一の場合は
"image": "料理画像URL"
datePublished 任意 レシピ公開日、"0000-00-00"で設定。
description 必須 料理の説明
recipeYield 任意 料理で出来上がる人数分や個数を設定。
recipeIngredient 必須 料理に必要な材料、下記を設定。

"recipeIngredient": [
    "材料と分量",
    "材料と分量",
    // ... {}の材料と分量の部分を繰り返し複数設定可。
}
recipeInstructions 任意 料理する手順、下記を設定。

"recipeInstructions": [
    {
        "@type": "HowToStep",
        "text": "料理手順内容"
    },
    {
        "@type": "HowToStep",
        "text": "料理手順内容"
    },
    // ... {}の料理手順の部分を繰り返し複数設定可。
]
cookTime 推奨 料理ができるまでにかかる時間、"0H"は時単位・"0M"は分単位の設定をする。。
dateModified 任意 レシピ更新日、"0000-00-00"で設定。
recipeCategory 推奨 レシピカテゴリ名。
keywords 推奨 レシピキーワード。
<script type="application/ld+json">
{
    "@context":"https://schema.org",
    "@type":"Recipe",
    "name":"豚こまのスタミナ炒め",
    "headline":"「☆豚こまのスタミナ炒め☆」の作り方・レシピ",
    "author": {
        "@type": "Person",
        "name":"☆栄養士のれしぴ☆",
        "url":"https://cookpad.com/kitchen/1843442"
    },
    "publisher": {
        "@type": "Organization",
        "name":"クックパッド",
        "url":"https://cookpad.com/",
        "logo": {
            "@type": "ImageObject",
            "url":"https://cookpad.com/assets/logo_cookpad_square.png"
        }
    },
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://cookpad.com/recipe/3003417"
    },
    "image": [
        "https://img.cpcdn.com/recipes/3003417/640x360c0_60_320_180_320/cba77ea8164818cf35512288c02868d6?u=1843442\u0026p=1428542192",
        "https://img.cpcdn.com/recipes/3003417/640x640c0_40_320_320_320/5ef3ce1781b92b2dbdb9438880a2ba7b?u=1843442\u0026p=1428542192",
        "https://img.cpcdn.com/recipes/3003417/640x480c0_57_320_240_320/182f3b388fc1c008d3944c658474ec19?u=1843442\u0026p=1428542192"
    ],
    "datePublished": "2015-04-09",
    "description": "炒めのレシピです。 ★★★殿堂入りレシピ★★★つくれぽ4500件ご飯がすすむスタミナ炒め☆タレを絡めてザッと炒めるだけ! お弁当にも*",
    "recipeYield": "",
    "recipeIngredient": [
        "豚こま 300g",
        "玉ねぎ 1/2個",
        "●しょうゆ 大さじ2と1/2",
        "●酒 大さじ1",
        "●酢 大さじ1",
        "●みりん 大さじ1",
        "●さとう 大さじ1",
        "●にんにくすりおろし 少々",
        "●しょうがすりおろし 少々",
        "サラダ油 大さじ1"
    ],
    "recipeInstructions": [
        {
            "@type": "HowToStep",
            "text": "●の調味料を合わせてタレを作っておく♪"
        },
        {
            "@type": "HowToStep",
            "text": "サラダ油をひいたフライパンで、くし形に切った玉ねぎを炒めて♪"
        },
        {
            "@type": "HowToStep",
            "text": "豚肉も加えて炒める♪"
        },
        {
            "@type": "HowToStep",
            "text": "豚肉に火が通ったら、①のタレを入れて♪"
        },
        {
            "@type": "HowToStep",
            "text": "全体にタレが馴染み、煮詰まったら出来上がり♪\n(水分が多く出たら水溶き片栗粉でとろみをつけてもOK)"
        }
    ],
    "cookTime": "PT20M",
    "dateModified": "2020-05-05",
    "recipeCategory": "炒め",
    "keywords": "豚こま切れ肉"
}
</script>

あと個人的には「syunkonカフェごはん」のレシピがおすすめです。
1巻発売時から愛読者です。

動画のJSOL-LD

GYAOサイトでタグを見つけましたので、こちらの動画のJSON-LDを参考に説明させていただきます。
アニメ「あたしンち」です。

https://gyao.yahoo.co.jp/p/00836/v09740/

YouTubeのチャンネル開設と期間限定無料公開で話題になってます。
こちらの作品面白いですが、6月から「青の祓魔師」の配信楽しみです。(※隠れオタクです)
項目名 必須 説明
@context 必須 "http://schema.org/"を指定
@type 必須 "VideoObject"を指定
@id 必須 動画の再生URL
name 必須 動画タイトル
description 必須 動画の説明。
actor 任意 動画の俳優や声優などの出演者情報。
caption 任意 動画のキャプション。見出し。
director 任意 動画の監督氏名などの情報。
musicBy 任意 動画のサウンドトラックの作曲家。
thumbnailUrl 必須 動画のサムネイル。
image 任意 動画のイメージ
"image": [
    "動画画像URL",
    "動画画像URL"
]
で複数の動画イメージを設定可。
単一の場合は
"image": "動画画像URL"
uploadDate 必須 動画のアップロード日、"0000-00-00T00:00:00+00:00"の形式で設定。
duration 任意 動画の再生時間、"0H"は時単位・"0M"は分単位・"0S"は秒単位の設定をする。
publisher 任意 公開サイト情報、下記を設定。

"publisher": {
    "@type": "Organization",
    "name":"サイト名",
    "url":"サイトトップURL",
    "logo": {
        "@type": "ImageObject",
        "url":"サイトロゴ画像URL"
        "width":"サイトロゴ画像幅"
        "height":"サイトロゴ画像高さ"
    }
}
expires 任意 動画の有効期限、"0000-00-00T00:00:00+00:00"の形式で設定。
aggregateRating 任意 動画の評価。下記を設定。

"aggregateRating": { //動画の評価
    "@type": "AggregateRating",
    "reviewCount": "11" //評価した人数
    "worstRating": "1", //最低得点
    "bestRating": "5", //最高得点
    "ratingValue": "3.5", //平均点
}
<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "VideoObject",
    "@id": "https://gyao.yahoo.co.jp/player/00836/v09740/v0968700000000549263/",
    "name": "あたしンち 第571話 江戸時代のあたしンち~おみよと浮世絵~(前編)",
    "description": "“タチバナ家”は日本のどこにでも存在し、誰でもが共感できる、等身大の幸せな家庭。料理がヘタでなまけものの母、トイレのドアを開けっ放しにする父、ちょっとマヌケな女子高生の娘・みかん、一見クールな中学生の息子・ユズヒコ。家族みんなで楽しむことのできるアニメの決定版をお届けします。",
    "thumbnailUrl": "https://gyao.c.yimg.jp/im_sigg5YArV7HdVacxnattnnpc8w---x640-y480-q80/rio/v/1f99414a91b7bb0f917aa0e429ede6f4.jpg",
    "uploadDate": "2020-05-12T00:00:00+09:00",
    "duration": "PT6M59S",
    "publisher": {
        "@type": "Organization",
        "name": "GYAO!",
        "logo": {
            "@type": "ImageObject",
            "url": "https://resource-gyao.c.yimg.jp/images/logo/gyao-publisher-logo.png",
            "width": 192,
            "height": 60
        }
    },
    "expires": "2020-05-18T23:59:59+09:00",
    "aggregateRating": {
        "@type": "AggregateRating",
        "reviewCount": 754,
        "worstRating": 1,
        "bestRating": 5,
        "ratingValue": "4.2"
    }
}
</script>

phpの動的出力に対応する

JSOL-LDは、連想配列で構造化データ出力してますので、php側も連想配列でデータを準備して、json_encodeで出力するのみです。
サンプルのJSON-LDを、phpで出力のサンプルコードは以下です。
配列値にDBのデータ内容をセットする等、動的対応をお願いします。

<script type="application/ld+json">
<?php

echo json_encode(
    array(
        "@context"      => "https://schema.org",
        "@type"         => "Organization",
        "name"          => "株式会社Qript",
        "foundingDate"  => "2000-03-10",
        "description"   => "大阪のWeb制作会社",
        "url"           => "https://www.qript.co.jp/",
        "logo"          => "https://www.qript.co.jp/img/kyoro_logo.gif",
        "image"         => "https://www.qript.co.jp/img/company/img_profile.jpg",
        "telephone"     => "+81-00-0000-0000",
        "faxNumber"     => "+81-00-0000-0000",
        "address" => array(
            "@type"            => "PostalAddress",
            "addressLocality"  => "大阪市中央区",
            "addressRegion"    => "大阪府",
            "postalCode"       => "542-0081",
            "streetAddress"    => "南船場3丁目7番27号 NLC心斎橋7F",
            "addressCountry"   => "JP",
        ),
        "contactPoint" => array(
            array(
                "@type"        => "ContactPoint",
                "telephone"    => "+81-00-0000-0000",
                "contactType"  => "customer service",
            )
        ),
        "sameAs" => array(
            "https://www.instagram.com/qript.inc/",
            "https://www.facebook.com/Qript/"
        ),
    ),
    JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT
);

?>
</script>

JSON-LDは複数設定可能なので、以下のように違うschema.orgタイプを組み合わせることも可。

<script type="application/ld+json">
<?php

echo json_encode(
    array(
        array(
            "@context"      => "https://schema.org",
            "@type"         => "BreadcrumbList",
        ),
        array(
            "@context"      => "https://schema.org",
            "@type"         => "Product",
        ),
    ),
    JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT
);

?>
</script>

設定する場所に関して、特にここにおくべきとの推奨はないですが、htmlのhead内が望ましいかと思います。

構造化データ検証

https://search.google.com/structured-data/testing-tool/u/0/?hl=ja
こちらの検証URLにて、構造化データのhtmlかもしくはURLが正しいか確認願います。

まとめ

対応して、エラーチェックを行ってみても問題なしであっても、Google先生次第で反映されない可能性もありますし、ディスクリプション等のSEO対策はきちんとしましょね。
リッチスニペットにimageを設定していても表示されないとかあっても、それもGoogle先生によるものでーす。

ご参考までにーーー(・囚・)ノ

相談・お問い合わせしてみる

※お問合せ、お待ちしております。m(_ _)m

INDEXブログ一覧へ
CONTACTお問い合わせはこちら