schema.orgを使って構造化マークアップしよう
前回の記事 では、構造化マークアップのメリットから簡単な実装方法の紹介をしました。
しかし、Google以外には反映されなかったり、利用できるタイプが限られているなどデメリットも存在します。
HTMLを触れる環境にある場合は、直接schema.orgを使ってマークアップする方が良いでしょう。
schema.orgの記述方法
schema.orgの記述方法は3種類あり、JSON-LD、RDFa Lite、microdataどれを使っても問題ありません。今回はGoogleが推奨しているJSON-LDでの記述方法について見ていきましょう。
参考:Introduction to Structured Data(英語)
JSON-LDの記述方法
JSON-LDは、W3Cの勧告を受けたシンタックス(記述方法)で、Googleも推奨しています。JSON-LDで構造化データマークアップをするメリットとして大きいのは
- 既存HTMLソースコードへの影響が少ない
- HTMLに依存しない
- ソースコードのどこにでも記載ができるので見やすい
があります。他のシンタックスよりシンプルかつ運用しやすいのがJSON-LDです。
JSON-LDの実装
JSON-LDは前述したとおり、ソースコードの中のどこにでも記述可能ですが、一般的にはhead要素内に記述します。では、順々に見ていきましょう。
JSON-LDフォーマットの宣言
<head>
<script type=”application/ld+json”>
</script>
</head>
まず必要なのが、JSON-LDを記述する宣言をhead要素内に記述することです。scriptの間に内容(JSONオブジェクト)を書いていきます。
JSONオブジェクト
<head>
<script type=”application/ld+json”>
{
“@context” : “http://schema.org”,
“@type” : “Recipe”,
“recipeCuisine” : “和食”,
“name” : “料理名”,
“image” : “/image/recipe.jpg”
}
</script>
</head>
JSONオブジェクトとは、「script」の宣言の間に波括弧{}で挟まれたブロックを指します。
「:」より左の部分をKey、右の部分をValueと呼びます。このペアで構成されていて、それぞれをダブルクオーテーションで囲みます。複数のペアを繋げる場合はカンマを文末に付け、最後のペアにはカンマを付けません。
JSONオブジェクト内に記載するKeyとValueは以下のように分けられます。
Key | Value |
---|---|
@context | http://schema.org |
@type | 利用するschema.orgのタイプを指定 |
@無し | 指定したタイプのプロパティを選択 |
「@type」は、schema.orgが定義するタイプから選択します。
http://schema-ja.appspot.com/docs/full.html
「@無し」部分は、上で選択したタイプのプロパティを選択します。上記リンクのプロパティのリンクを選択すると利用できるプロパティが表示されます。
実装したら構造化データテストツールで検証
構造化マークアップが終わったら、必ず構造化データテストツール(https://search.google.com/structured-data/testing-tool?hl=ja )で検証しましょう。
URLを入力するか、該当箇所のコードを貼り付けることで確認できます。
使用例
パンくずリスト
{
“@context” : “http://schema.org”,
“@type” : “BreadcrumbList”,
“itemListElement” : [
{
“@type : “ListItem”,
“position” : 1,
“item” : {
“@id” : “リンクURL”,
“name” : “1階層目”
}
},{
“@type : “ListItem”,
“position” : 2,
“item” : {
“@id” : “リンクURL”,
“name” : “2階層目”
}
},{
“@type : “ListItem”,
“position” : 3,
“item” : {
“@id” : “リンクURL”,
“name” : “3階層目”
}
}
]
}
まとめ
構造化マークアップはメリットが多く、可能ならば実装するほうが良いでしょう。そんな中でも、今回紹介したJSON-LDは既存ソースコードを汚すこと無く実装できるのでおすすめです。ぜひ取り組んでみてください。
- Googleとは、世界最大の検索エンジンであるGoogleを展開する米国の企業です。1998年に創業され急激に成長しました。その検索エンジンであるGoogleは、現在日本でも展開していて、日本のYahoo!Japanにも検索結果のデータを提供するなど、検索市場において圧倒的な地位を築いています。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- Googleとは、世界最大の検索エンジンであるGoogleを展開する米国の企業です。1998年に創業され急激に成長しました。その検索エンジンであるGoogleは、現在日本でも展開していて、日本のYahoo!Japanにも検索結果のデータを提供するなど、検索市場において圧倒的な地位を築いています。
- W3C
- W3Cは、World Wide Web Consortiumの略称で、ダブリュー・スリー・シーと呼ばれています。WWWコンソーシアム、またはワールドワイドウェブコンソーシアムと表記されることが多く、国際的な非営利団体です。主に、WWWと呼ばれるウェブ上で利用される技術の標準化を進めています。
- Googleとは、世界最大の検索エンジンであるGoogleを展開する米国の企業です。1998年に創業され急激に成長しました。その検索エンジンであるGoogleは、現在日本でも展開していて、日本のYahoo!Japanにも検索結果のデータを提供するなど、検索市場において圧倒的な地位を築いています。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- リンク
- リンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。
- URL
- URLとは、「Uniform Resource Locator」の略称です。情報がどこにあるのかを示すインターネット上の住所のようなものだと考えるとわかりやすいでしょう。各ページのURLは、インターネットブラウザの上部に文字列として表示されています。日本語では「統一資源位置指定子」という名称がついていますが、実際には日本でもURLという語が使われています。
おすすめ記事
おすすめエントリー
カテゴリから記事をさがす
●Webマーケティング手法
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析・広告効果測定
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
●課題
●その他
