目次
Laravelで作られたWebアプリケーションに構造化マークアップ(JSON-LD)を導入します
JSON-LDはどこに書くのか?
HTML内ならどこでも良いが、head内に書くのが一般的。
JSON-LDの種類は?
以下に一覧がある。
https://developers.google.com/search/docs/data-types/article

JSON-LDの書き方は?
前述の一覧ページから目的の形式を選ぶと詳細な書き方が解説されている。
今回はQ&A形式を使うので詳細を見ていく。
https://developers.google.com/search/docs/data-types/qapage
必須プロパティなども上記のページに記載されている。
正しく記述できると検索結果が以下の画像に表示される様になるらしい。

以下がJSON-LDのサンプル
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "QAPage",
"mainEntity": {
"@type": "Question",
"name": "How many ounces are there in a pound?",
"text": "I have taken up a new interest in",
"answerCount": 3,
"upvoteCount": 26,
"dateCreated": "2016-07-23T21:11Z",
"author": {
"@type": "Person",
"name": "New Baking User"
},
"acceptedAnswer": {
"@type": "Answer",
"text": "1 pound (lb) is equal to 16 ounces (oz).",
"dateCreated": "2016-11-02T21:11Z",
"upvoteCount": 1337,
"url": "https://example.com/question1#acceptedAnswer",
"author": {
"@type": "Person",
"name": "SomeUser"
}
},
"suggestedAnswer": [
{
"@type": "Answer",
"text": "Are you looking f.",
"dateCreated": "2016-11-02T21:11Z",
"upvoteCount": 42,
"url": "https://example.com/question1#suggestedAnswer1",
"author": {
"@type": "Person",
"name": "AnotherUser"
}
}, {
"@type": "Answer",
"text": " I can't remember exactly, but I think 18 ounces in a lb. You might want to double check that.",
"dateCreated": "2016-11-06T21:11Z",
"upvoteCount": 0,
"url": "https://example.com/question1#suggestedAnswer2",
"author": {
"@type": "Person",
"name": "ConfusedUser"
}
}
]
}
}
</script>
JSON-LDを書いていく
今回のWebアプリケーションはLaravelのSEOに関するライブラリとしてseotoolsが導入されていて、JSON-LDにも対応しているのでこれを活用する。
JsonLd::addValues([
"@context" => "https://schema.org",
"@type" => "QAPage",
...
]);

JSON-LDが正しく設定されているか確認するには?
以下にURLを入力する事で動作確認できる様です。
https://search.google.com/structured-data/testing-tool/u/0/

問題がない場合は以下の様にエラーが表示されないほか、プレビューが出来る様です。

プレビューするとこんな感じ。検索結果がどんな風に表示されるかが確認できる模様。
実際に動いている絵を見れるとワクワクしますね〜〜!

以上!
json-ldの設定終わり!
参考資料
以下の本を参考にして作業しました。
Webエンジニアをやっています
UX/UIデザインからプログラミング、DB設計、SEO、インフラ構築など幅広く対応してます
PHP/PHPUnit/Laravel/Vue/Nuxt/Docker/Terraform
ご連絡はTwitterのDMまで。