1. はじめに
はじめまして！RENOSYプロダクトのフロントエンドの開発をしている犬塚です。
RENOSY ASSETとRENOSY マガジンには構造化データマークアップを導入しています。
今回はその導入背景と実装方法について紹介したいと思います。
2. 導入背景と目的
SEO施策で「Google リッチリザルトを表示させたい」との声があったからでした。
2-1. Google リッチリザルトとは
Google リッチリザルトとは、通常の青色リンクよりも高度な機能を持つ、Google サービス（Google 検索など）での検索結果です。
このリッチリザルトを表示させるためには、構造化データマークアップが必要となります。
2-2. 構造化データマークアップとは
構造化データマークアップを実装すると、検索エンジンやクローラーにサイトの内容を詳しく伝えることができます。
具体的には、schema.org等の規格が定めたボキャブラリから当てはまるものを選んでページ内に埋め込むことで、通常のHTMLだけでは表現できないデータを追加します。
例えば、下記のHTMLは、検索エンジンに何について書かれているページかを理解してもらうことができません。
<div> <h1>アバター</h1> <div> 監督：<span>ジェームズキャメロン</span>（<span>1954年8月16日</span>生まれ） </div> <span>サイエンスフィクション</span> <a href="../movies/avatar-theatrical-trailer.html">予告編</a> </div>
下記のschema.orgのボキャブラリを埋め込むと、「アバターという映画」についてのページだと理解してもらえます。
※後述しますが、実際のプロダクトには下記とは違う埋め込み方をしています。
<div itemscope itemtype="http://schema.org/Movie"> <h1 itemprop="name">アバター</h1> <div itemprop="director" itemscope itemtype="http://schema.org/Person"> 監督：<span itemprop="name">ジェームズキャメロン</span>（<span itemprop="birthDate">1954年8月16日</span>生まれ） </div> <span itemprop="genre">サイエンスフィクション</span> <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">予告編</a> </div>
参考： Getting Started - schema.org
このことにより、検索エンジンが検索結果を「映画」に適した表示（＝リッチリザルト）へと変えられるようになります。
ユーザーに伝えられる情報量が増え、クリック率・流入数の上昇が期待できます！
3. 実装手順
3-1. 設定するタイプを決める
Googleの検索ギャラリーから選んでいます。
3-2. JSON-LDで実装する
Google リッチリザルトでは、JSON-LD、microdata、RDFaの3種類の形式を利用できます。
その中でJSON-LDを選んでいる理由は下記の2点です。
- scriptタグで一括で指定できるため※
- Googleが推奨しているため
※「一括で指定できる」とは、前述のアバターのHTMLのように個々のHTMLタグに手を加える必要がないということです。前述のアバターの埋め込み形式はmicrodataです。
3-1.の詳細ページには、JSON-LDでの実装方法が書かれているので参考にします。
必須プロパティは入れないとリッチリザルトになりませんが、推奨プロパティは入れなくてもリッチリザルトになります。
3-3. 構造化データ テストツールでテストする
Googleが提供している構造化データ テストツールを使ってテストします。
リリース前であれば、「コード スニペット」タブにscriptを貼り付けてテストします。
4. 実装例
4-1. パンくずリスト
{
"@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [
{"@type": "ListItem", "position": 1, "name": "RENOSY ASSET", "item": "https://www.renosy.com/asset"},
{"@type": "ListItem", "position": 2, "name": "マンション投資", "item": "https://www.renosy.com/asset/mansion"},
{"@type": "ListItem", "position": 3, "name": "サービス", "item": "https://www.renosy.com/asset/mansion/service"},
{"@type": "ListItem", "position": 4, "name": "私たちの強み", "item": "https://www.renosy.com/asset/mansion/service/technology"}
]
}
実装したURL： 私たちの強み｜中古マンションの不動産投資ならRENOSY ASSET(リノシーアセット)
4-2. よくある質問
{
"@context": "http://schema.org", "@type": "FAQPage", "description": "マンション投資のリスク、メリット・デメリットに関する疑問にお答えします。",
"mainEntity": [{"@type":"Question","name":"RENOSY ASSETの考えるマンション投資のメリットについて教えてください",
"acceptedAnswer":{"@type":"Answer","text":"\u003cp\u003e\r\n\u003cstyle type=\"text/css\"\u003e\u003c!--td {border: 1px solid #ccc;}br {mso-data-placement:same-cell;}--\u003e\r\n\u003c/style\u003e\r\nRENOSY ASSETが目指すマンション投資は、都市部の中古ワンルームマンションを対象に、長期間にわたって安定的な運用ができる投資です。\u003c/p\u003e\r\n\r\n\u003cp\u003e私たちが考えるマンション投資のメリットは、「入居者さんからの月々の家賃収入」という他人の資本を充当することで、わずかな自己資金で都市部の中古ワンルームマンションを所有し、資産を築けることです。\u003c/p\u003e\r\n\r\n\u003cp\u003eインフレリスクも少なく、不動産投資ローンを組む際に「団体信用生命保険」へも加入していただくことで、生命保険代りにもなり、将来の年金代りにもなるのがメリットです。\u003c/p\u003e\r\n\r\n\u003cp\u003e\u003cem class=\"mgzn-article_bold\"\u003e関連記事\u003c/em\u003e\u003cbr /\u003e\r\n\u003ca class=\"mgzn-article__link\" href=\"https://www.renosy.com/magazine/entries/17\"\u003e不動産投資のメリットとは？デメリットも併せて解説\u003c/a\u003e\u003c/p\u003e\r\n"}
},...略...]
}
実装したURL： マンション投資のリスク、メリット・デメリットに関するQ&A｜中古マンションの不動産投資ならRENOSY ASSET(リノシーアセット)
4-3. モバイルアプリケーション
{
"@context": "http://schema.org", "@type": "MobileApplication", "name": "中古マンション購入アプリ【RENOSY】", "operatingSystem": "iOS 11.0以上, Android 5.0以上",
"applicationCategory": "LifestyleApplication", "image": "https://d2vc0qq5qzt7oz.cloudfront.net/assets/apps/renosy_app/renosy_app_icon-7a2e8edd805948912322a6a114830e6ad3224be89e65b35b4f674251dfffd8a0.png",
"author":{ "@type":"Person", "name":"GA technologies Inc."},
"aggregateRating":{"@type":"AggregateRating","ratingValue":0,"reviewCount":0},
"offers":{"@type":"Offer","category":"free","price":0,"priceCurrency":"JPY"}
}
実装したURL： 中古マンション購入アプリ【RENOSY】売買物件検索
4-4. 商品と総合評価
{
"@context": "http://schema.org",
"@type": "Product",
"name": "RENOSY ASSET マンション投資",
"url": "https://www.renosy.com/asset/mansion/reviews",
"description": "購入者の生の声（評判・口コミ）を掲載しています。実際にRENOSYで中古マンションを購入し、不動産投資を始めたお客様のご意見・ご感想やレビューになります。検討時の参考にお役立てください。",
"brand": "RENOSY ASSET",
"image": "https://www.renosy.com/asset/bundles/images/shared/ogp/ogimage-baf7a4d2a7e52fca0a87555482c01dd9.png",
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.3",
"reviewCount": "135"
},
"review": [
{
"@type": "Review",
"name": "30代後半男性",
"reviewbody": "【よかった点】ダミーダミー【改善してほしい点】ダミーダミー",
"datePublished": "2020年06月01日",
"reviewRating": {
"@type": "Rating",
"bestRating": "5",
"worstRating": "1",
"ratingValue": "5.0"
},
"author": {
"@type": "Person",
"name": "30代後半男性"
}
},
...略...
]
}
実装したURL： GA technologiesのお客様の声（評判・口コミ）｜中古マンションの不動産投資ならRENOSY ASSET(リノシーアセット)
5. 詰まったポイント＆どうしたか
5-1. シングルクォーテーションの入った物件名
手順どおり「構造化データ テストツール」をクリアして無事リリース！
安心していたら、Google Search Consoleからエラー通知を受け取りました。
※サーチコンソールはサイト内の構造化マークアップのエラーを検出してくれるので便利です。
「文字列中に無効なエスケープ シーケンスがあります」
動的に出力していた物件名にシングルクォーテーションがあり、そのエスケープ方法が間違っていたのです（なんて初歩的なミス…）。
下記のようにRailsでエスケープし、エラーは解消されました。
"name": "<%= json_escape(building.name) %>"
5-2. Product vs Service 〜aggregateRatingを使いたい〜
前述の4-4.についてです。
RENOSY ASSETには、オーナー様からのレビュー（口コミ）をまとめたページがあります。
そこで、総合評価のリッチリザルトを表示したいと考えました。
当初、RENOSY ASSETにはschema.orgのタイプ一覧の中では「Service」を当てはめるのが良いと思いました。
しかしGoogle リッチリザルトに対してaggregateRatingプロパティを使用する際、それをネストできる対象となるアイテムに「Service」は含まれません。
Google リッチリザルトを表示するのが今回の目的のため、上の画像のリストからProductを選んで採用することにしました。
※schema.orgを参照したところ、Productはserviceも含んだ意味であるため、間違いではないと判断しました。
6. 課題
6-1. Articleは非AMPではリッチリザルトにならない？
RENOSY マガジンの記事詳細では、構造化データマークアップでArticleを追加しています。
しかしながら、現状、RENOSY マガジンの記事を検索してもリッチリザルトにはなりません。
AMP対応をすれば、リッチリザルトになると思われます。
{
"@context": "http://schema.org", "@type": "Article",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://www.renosy.com/magazine/entries/14"
},
"headline": "不動産投資の利回りを理解しよう！ 計算方法とExcelを活用した表面・実質利回りのシミュレーション【テンプレ有】",
"image": {
"@type": "ImageObject",
"url": "https://www.renosy.com/magazine/entries/3293/hero_image"
},
"datePublished": "2019-07-02 18:00:00 +0900",
"dateModified": "2020-05-15 18:00:00 +0900",
"author": {
"@type": "Person",
"name": "RENOSYマガジン編集部"
},
"publisher": {
"@type": "Organization",
"name": "RENOSY マガジン（リノシー）",
"logo": {
"@type": "ImageObject",
"url": "https://www.renosy.com/magazine/bundles/images/shared/logo_magazine-b92cfccb4bf33c0a142fdba49a76f39b.png",
"width": 500,
"height": 60
}
},
"articleSection": "投資する",
"description": "不動産投資では、修繕費や水道光熱費などの複数の支出も発生するため、どのようなお金の流れになっているのかを管理しておくことが重要です。そこで、そういったデータの管理や計算をするための、エクセルの使い方について紹介します。"
}
実装したURL： 不動産投資の利回り計算方法〜エクセルを活用して実質利回りと表面利回りを確認しよう【テンプレ有】｜RENOSY マガジン（リノシー）
7. その他の参考ページ
リッチリザルト テスト：リッチリザルトの表示をテストできます
Google リッチリザルトの最新情報：新しくリッチリザルトに対応されたタイプやプロパティが確認できます
8. おわりに
今後も、構造化データマークアップを探究し、ユーザーにより良い体験を提供していきたいと思います。
