FrontendJSON-LD

[JSON-LD]schemaのPlaceとLocalBusinessの構造化データを作ってみた覚書

ヴェニスアップデートで重要度が高まるとされている「位置情報」。schema.orgを利用して位置情報を構造化データにしたサンプルと、JSON-LDの簡単な解説をまとめました。

広告ここから
広告ここまで

海外SEO情報ブログの「ヴェニスアップデート後に必ず実行したい7つローカルSEO施策」に「「6.構造化データ」だけで1記事書けそうな予感」とコメントを残しました。



するとまさかの鈴木さんから「ぜひ!」とコメントを頂いたので、「これはやるしかないだろう」ということでまとめてみました。

JSON-LDで実装する

使用できるschemaを調べる

位置情報系のschemaとして「Place」といういかにもなものがあります。

ドキュメントには

Entities that have a somewhat fixed, physical extension.

という説明がありますので、「Place」を使えるものは「固定的かつ物理的な存在」であれば大体OKの様子です。

反対に移動型店舗やイベント情報で使うのはNGの可能性があります。

今回はひとまず「住所を持っているものなら大体OK」だろうとして進めます。

Placeを使った基本的なマークアップ

Placeにはサンプルコードも色々と用意されていますので、その中からシンプルなものを1つピックアップしてみました。

[js]
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Place",
"name": "Empire State Building",
"geo": {
"@type": "GeoCoordinates",
"latitude": "40.75",
"longitude": "73.98"
}
}
</script>
[/js]

・・・これだけ見ても「何のことやら?」ですよね。

先ほどのコードに補足を入れてみました。
[js]
<script type="application/ld+json">
{
"@context": "https://schema.org", // schema.orgをコンテキストを使用します
"@type": "Place", // schema.orgのPlaceという語彙を使用します。
"name": "Empire State Building", // 名前は「エンパイアステートビル」です。
"geo": { // ここに位置情報があります。
"@type": "GeoCoordinates", // schema.orgのGeoCoordinatesという語彙を使用します。
"latitude": "40.75", // 緯度は40.75です。
"longitude": "73.98" // 経度は73.98です。
}
}
</script>
[/js]

どうでしょうか?

先ほどのJSON-LDには「エンパイアステートビルの緯度は40.75、経度は73.98です。」という情報が記録されていたということになります。

「なんで@typeが2つあるの?」

「@contextってなに?」

「なるほど、わからん」

などの疑問を持たれるかもしれませんが、その辺りについては一旦【徹底解説】JSON-LDを使ったschema.orgの記述方法 | 海外SEO情報ブログを見て頂ければと思います。

Placeでよく使いそうなデータ10選

schemaでは@typeで指定したものに応じて様々なデータ(語彙)を定義付けすることができます。

Placeでも独自の語彙を扱うことが可能で、使用頻度の高そうなものをピックアップすると以下の様なJSON-LDが作れます。

[js]
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Place",
"name": "場所の名前",
"description":"説明文",
"address": "住所",
"url": "サイトURL",
"telephone": "電話番号",
"photo":[
"画像URL1",
"画像URL2",
"画像URL3"],
"geo": {
"@type": "GeoCoordinates",
"latitude": "緯度",
"longitude":"経度"
},
"hasMap": "地図URL"
}
</script>
[/js]

GoogleのテストツールでOKが出ていますので、このまま日本語部分を書き換えて使用しても大丈夫です。

Placeを拡張する7つのtype

更にschemaでは「より詳細な位置情報」を定義することができます。

Placeには「More specific Types」として以下の7typeが定義付けされています。

AdministrativeArea
行政区画
CivicStructure
シビック構造(都市区画?)
Landform
地形
LandmarksOrHistoricalBuildings
ランドマークまたは歴史的建造物
LocalBusiness
ローカルビジネス
Residence
住宅
TouristAttraction
観光の名所

全部を紹介すると記事の量が大変なことになってしまいますので、今回は「ローカルビジネス」だけピックアップします。

残りはまた後日別記事としてまとめますので、今しばらくお待ちください・・・

schemaの「LocalBusiness」を使ってみる

「LocalBusiness」を追加すると、先ほどのデータがこのように変化します。
[js]
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": "場所の名前",
"description":"説明文",
"address": "住所",
"url": "サイトURL",
"telephone": "電話番号",
"photo":[
"画像URL1",
"画像URL2",
"画像URL3"],
"geo": {
"@type": "GeoCoordinates",
"latitude": "緯度",
"longitude":"経度"
},
"hasMap": "地図URL",
"openingHours":"Mo-Su 7:00-11:00",
"paymentAccepted":["Cach","creditcard"]
}
</script>
[/js]

「@type」が「LocalBusiness」に変わり、新しく「openingHours」「paymentAccepted」の2つが追加されました。

追加された2つの意味はおおよそで次のとおりです。

語彙 意味 書き方
openingHours 営業時間 曜日は「Mo, Tu, We, Th, Fr, Sa, Su.」を組み合わせて、
時間は「15:00-20:00」のように書く。
paymentAccepted 利用可能決済 テキストで決済名を記述する

ちなみに「LocalBusiness」には更に以下の様なtypeが定義されており、かなり詳細な位置情報を設定することが可能です。

  • AnimalShelter
  • AutomotiveBusiness
  • ChildCare
  • DryCleaningOrLaundry
  • EmergencyService
  • EmploymentAgency
  • EntertainmentBusiness
  • FinancialService
  • FoodEstablishment
  • GovernmentOffice
  • HealthAndBeautyBusiness
  • HomeAndConstructionBusiness
  • InternetCafe
  • Library
  • LodgingBusiness
  • MedicalOrganization
  • ProfessionalService
  • RadioStation
  • RealEstateAgent
  • RecyclingCenter
  • SelfStorage
  • ShoppingCenter
  • SportsActivityLocation
  • Store
  • TelevisionStation
  • TouristInformationCenter
  • TravelAgency

それぞれには更に拡張するtypeがありますので、「schema.orgの使い方」だけで1サイト作れそうな勢いです。

というかこんなに細かいのを使いこなせる人はどれくらいいるのでしょうか・・・

また業種別のサンプルなどのストックが溜まったタイミングで語彙サンプルをまとめようと思いますので、「JSON-LDの構造化データを使いこなしたい!」という方は是非RSSの登録かFacebookページに「いいね!」をお願いしますm(_ _)m

余談

記事を書いている間に出てきた諸々を余談としてまとめてみました。

余談その1:body内に「直接埋め込んで」使う

JSON-LDはであればどこに埋め込んでも認識してもらえるので、「Structured Data Testing Tool」でテストしてからそのまま埋め込むだけでも大丈夫そうです。

つまり「この記事に書かれているサンプルコードをそのままWordPressの記事に貼り付けて公開する」という荒業も理論上OKみたいです。

流石に動作は保証できませんが・・・

余談その2:リッチスニペットとの整合性

リッチスニペットに使用できるschemaの種類は「人物」「イベント」「レビュー」「商品」「レシピ」「パンくずリスト」です。

これらでは「イベント」くらいでしか位置情報を扱えないのですが、Googleのドキュメントには

Google は、機能性の拡張と、検索結果の精度および表示の改善に努めているため、schema.org には今後 Google が使用する可能性のあるタイプが多く追加されています。

schema.org に関するよくある質問 – ウェブマスター ツール ヘルプ

と「今後増やすこと」が示唆されていますので今回はそれ以外も使っていきます。

ブックマークや限定記事(予定)など

WP Kyotoサポーター募集中

WordPressやフロントエンドアプリのホスティング、Algolia・AWSなどのサービス利用料を支援する「WP Kyotoサポーター」を募集しています。
月額または年額の有料プランを契約すると、ブックマーク機能などのサポーター限定機能がご利用いただけます。

14日間のトライアルも用意しておりますので、「このサイトよく見るな」という方はぜひご検討ください。

広告ここから
広告ここまで

Related Category posts