【HTML】実際に構造化データを追加してみました

目次

こんにちはKOです。
https://tech.pla-cole.co/structured-data/
前回は構造化データと呼ばれる、グーグルにより
的確な情報を与えるための方法についてお話しさせて頂ました。

今回は実際の記述方法、
またwordpressで動的に記述する方法についてまとめていきます。

いざ、マークアップ

今回はJSON-LDが主流のため、ここではJSON-LDでのマークアップについて解説します。

今回はworpdressで動的に出力する部分を
埋め込みタグに置き換えてみました。

うまく表示できなかったので画像のリンクを貼ります!

https://tech.pla-cole.co/wp-content/uploads/2021/06/スクリーンショット-2021-06-07-9.16.36.png

JSON-LDで記述するという合図になります。
JSON-LDではスクリプトタグの中にjsonデータを記述するような形でマークアップします。

記事のサムネイル写真の情報も構造化に必要となりますので、あらかじめ変数に代入しています。

テストツールで確認する

こちらのテストツールを使用します。
https://search.google.com/structured-data/testing-tool/u/0/?hl=ja

僕らの場合はテスト環境がありますので、
テスト環境に表示されたソースを直接貼り付ける形で検証を行います。

何か変わった??

特に変わった様子がないので
「そもそもやる意味ってあるのか..?」って思ったのですが、
実際にちょっとだけ出力に変化がありました!!

本来だったらいないはずのところに画像やurlなどの情報が追加されました(笑)

まだ大きな変化はないですが、
構造化データを駆使したらより検索結果が目に止まりやすくなって、クリック率も上がりそうですね!

おしまい

参考
amp用の構造化データに関して
https://developers.google.com/search/docs/guides/about-amp

いろいろなタイプにあった構造化データ
https://developers.google.com/search/docs/advanced/appearance/search-result-features

JSON-LDでの書き方
https://webtan.impress.co.jp/e/2019/08/05/33500

Back to Top