構造化データについて導入した方が良いメリットと実装方法を解説

#構造化データ

update:2022.9.18　873view

構造化データについて導入した方が良いメリットと実装方法を解説

構造化データについてマスターしたく、色々と調べつつ学んだことをまとめてみました。

記事のもくじ

構造化データとは
構造化データを設定するメリット
構造化データの記述方法
JSON-LD形式とは
@contextについて
@typeについて
属性について
構造化データをphpで一括実装
構造化データを設置する位置
正しく実装できたか確認する方法

構造化データとは

構造化データとは定義されている属性と値を直接HTMLにマークアップすることです。
ページの情報が検索エンジンにいち早く、そして正確に認識させるめの手段です。

例えば「トマト」とテキスト内にあってもそのページがレシピのページなのか、店舗のページなのか、農家のページなのか、、、ページの内容を理解するには読まないとわからないけれども構造化データをマークアップすることで、検索エンジンにレシピのページだということがあっという間に理解させることができるんです！

属性は決まっているので、、、
決まった形式で記述し、値を当てはめていけばいいんです！

詳しい説明は後述ですが、こういった形式です。！

{
  "@type": "タイプ情報",
  "属性": "値"
}

値を当てはめるとこんな感じです。

{
  "@type": "Person",
  "name":"nobee",
  "image": "https://kanpee.org/common/img/snow.jpg"
}

構造化データを設定するメリット

決まった形式で構造化データを記述することで、検索結果にリッチリザルトとして多くの情報を表示がされます。
きちんと記述しても表示されない場合もあるようですが・・・。

そのため自然検索からの流入が見込める率が上がるわけです！

SEO対策では検索結果で上位表示を目指しますが、構造化データは検索結果でより多くの情報を表示させることができるのでクリックされやすくなるわけです！

構造化データの記述方法

それでは構造化データの記述方法をみていきましょう！

形式は代表的なものが3つあります。

JSON-LD
microdata
RDFa

Googleが推奨しているJSON-LD形式を採用いたします。

JSON-LD形式とは

前述でこんな感じと見せたものにscriptタグで囲みます。

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Person",
  "name":"nobee",
  "image": "https://kanpee.org/common/img/snow.jpg"
}
</script>

@contextについて

@contextの属性はschema.orgの宣言のため必須になります。

@typeについて

@typeの属性はデータタイプを指定します。タイプとは、何についてのページかを表すものになります。

記事ページであれば「Article」です。

他にあるデータタイプをまとめてみました！

WEBサイト トップページ: WebSite
会社: Corporation
学校、NGO、企業などの組織: Organization
住所: PostalAddress
人: Person
記事: Article
商品、HowTo: HowTo
料理や飲み物: Recipe
よくある質問: QAPage
地域のお店やサービス: LocalBusiness
書評: Book
データセット: Dataset
ソフトウェア アプリケーション: SoftwareApplication
イベント: Event
レストラン: Restaurant
クチコミ: Review

いっぱいありますねー－

他にもいろいろな種類がありますので、もっと知りたい方はschema.orgから調べてみてください！

属性について

属性: 説明
name: 名前
headline: タイトル
description: 説明文
address: アドレス
url: URL
image: 画像のURL
email: メールアドレス
telephone: 電話番号
datePublished: 公開日
dateModified: 最終更新日

ほんの一部ですが、、、他にもたくさんあります。
詳細はschema.orgから！

構造化データをphpで一括実装

それではページごとに構造化データを直書きするのではなく、phpでページに組み込む方法をお伝えします。

サイトの構造にもよりますが、、、下記をincludeさせるだけです。
実際に当サイトでも実装しているものなのでブログ用ですね。

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Article",
  "headline": "<?php echo $title; ?>",
  "description": "<?php echo $description; ?>",
  "author": {
    "@type": "Person",
    "name": "nobee"
  },
  "datePublished": "<?php echo $date; ?>",
  "image": "<?php echo $img; ?>",
  "url": "<?php echo $url; ?>"
}
</script>

タイトルや画像、公開日等は取得して出力させています。