nobee

update: 491view

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

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

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

構造化データとは

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

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

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

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

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

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

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

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

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

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

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

構造化データの記述方法

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

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

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>
    

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

構造化データを設置する位置

構造化データの設置場所は</body>タグの直前が良いそうですが、headタグやbodyタグ内でも問題はないようです。

Googleの構造化データに関する一般的なガイドラインでは<title>タグの直後に配置しております。

構造化データの設置場所

正しく実装できたか確認する方法

構造化データを組み込んだら、Googleが提供しているオンラインのテストツールがありますので、チェックしてみましょう!

リッチリザルトテストです!

URLもしくはコードを貼り付けて、1~2分程度でチェックが完了します!
「有効なアイテムを検出」となれば大成功!!です!!

リッチリザルトテスト結果

構造化データは奥が深そうですねー-
色々と覚えたてのため、誤った認識や違った情報がありましたらご指摘くださいませ。。。

share

人気記事