2016.11.06SEO記事一覧

構造化マークアップの設定方法を徹底解説!一歩進んだSEOを行うために必要なこと

  • このエントリーをはてなブックマークに追加

22_structured-markup

構造化マークアップについては、良くご質問をいただくSEO施策のひとつです。

それなりの知識がないと実装がなかなか難しいことが、施策の敷居を上げている要因かと思われます。今回は、構造化マークアップの概要から、具体的な実装方法まで構造化マークアップを知るために必要な情報を徹底解説させていただきます。

構造化マークアップとは

構造化マークアップは、言い換えれば「セマンティックWebを実現する為に、テキスト情報をマークアップすることで意味を持たせ、コンピュータに対して効率よくデータの収集・解釈を行えるようにする」施策です。

この「セマンティックWeb」というのは、簡単にまとめると、「コンピュータがWebサイトの構造や意味をきちんと理解できるようにする取り組み」のことです。

検索エンジンは、私たちとは異なり、テキスト情報の中で「これは企業名だ」「ここは営業時間だ」と一目で認識することが出来ないのです。つまり、検索エンジンはテキスト情報であることは認識が出来ても、そのテキスト情報ひとつひとつの意味を細かく認識することが難しいのが現状です。

通常のHTMLの例

<div>ディーエムソリューションズ株式会社</div>

マークアップを実装したHTMLの例

<div itemscope itemtype=”http://schema.org/Corporation”>
<span itemprop=”name”>ディーエムソリューションズ株式会社</span>
</div>

 

「株式会社」という文字から、それが企業名であることを私たちは想像できますが、コンピュータ(検索エンジン)はそれが理解できません。マークアップを実装したHTMLの例のように、マークアップを実装して初めてそれが企業名であることを認識することが可能となるのです。

この隙間(ギャップ)を埋める為に取られる手法のひとつが「セマンティックWebを実現する為にテキスト情報をマークアップする」構造化マークアップになります。

コンピュータ(検索エンジン)側でテキストの意味を読み取るのが苦手であれば、テキスト情報の意味を読み取りやすいようにマークアップさせることで、よりページの内容を理解させ情報の収集などを向上させるのが構造化マークアップ施策の狙いになります。

構造化マークアップとリッチスニペットの関係

構造化マークアップをきちんと実装すると、副次的効果として検索結果の表示が変化することがあります。
商品のレビューやパンくずリストを検索結果に表示することができ、ページの内容が検索ユーザーに伝わりやすくなるため、クリック率が上がります。

こういった、検索結果で表示される情報(スニペット)の情報を豊か(リッチ)にすることをリッチスニペットというのですが、リッチスニペットの詳しい内容については、別の記事でご紹介しておりますので、そちらを御覧ください。

構造化マークアップの実装方法は2種類

構造化マークアップの実装方法は大きく分けて2種類あります。「HTMLにマークアップを追加する方法」と、「Googleの力を借りて実装する方法」です。

前者の「HTMLに直接マークアップを追加する方法」は言葉の通り、自ら現状のWebサイトに対して構造化マークアップを実現する為のコーディング作業を実施します。後者の「Googleの力を借りて実装する方法」は、Googleが無償で提供しているツールを利用して構造化マークアップを実装する方法です。

それぞれの方法についてメリット・デメリットを挙げるとすると、以下の通りです。

Googleの力を借りて実装する方法のメリット

HTMLファイルの知識がなくても作業可能。とにかく簡単で、すぐに作業が完了する。

Googleの力を借りて実装する方法のデメリット

あくまでも認識(学習)させるのはGoogleに委ねられるので、全てが問題なく認識されるとは限らない。

HTMLに直接マークアップを追加する方法のメリット

ソースコードに直接構造化マークアップを実装するので、ほとんど完璧に施策を行うことが可能。

HTMLに直接マークアップを追加する方法のデメリット

コーディング作業が必要なため、それなりの知識を持っていないと作業を行うのが難しい。構造化マークアップを初めて実装する場合、Googleの力を借りて実装する方法の方が敷居は低いと思います。

しかし、細部まできちんと施策を行いたいと考えるなら、直接マークアップを実装する方法の方がおすすめです。HTMLファイルの編集作業の経験がある方は、直接マークアップを実装する方法にチャレンジするのも良いかもしれません。

構造化マークアップを実装してみましょう

それでは、ここからは実際にどのように実装するのかについて詳しくご紹介させていただきます。

これから先はGoogleアカウントを保有していることと、Search Consoleアカウントを保持していることを前提にご説明しますので、あらかじめご了承ください。

Googleの力を借りて実装する方法

まずは、Googleの力を借りて実装する方法からご紹介していきます。

今回使用するツールは「データハイライター」と呼ばれるものです。

データハイライターはウェブマスターツールのひとつで、ウェブサイトの構造化データのパターンをGoogleに伝えるものです。

データ ハイライターを使用すると、マウスで簡単にサイトのデータ フィールドをタグ付けできます。
データをタグ付けすると、Google がそのデータをより効果的に、また新しい方法で、検索結果や Google ナレッジグラフなどの他の Google サービスに表示できるようになります。

引用元:Search Consoleヘルプ データ ハイライターについて
 
まず、Search Consoleと連動しているGoogleアカウントでログインを行ってください。
それからデータハイライターツールを開き「ハイライト表示を開始する」を選択します。

structured-markup-01

次に、構造化データを設定したいURLを入力し、そのページの属性を選択します。
今回は自社HPに対して設定を行うので「地域のお店やサービス」を選択しました。

また、「このページをタグ付けし、他ページも同様にタグ付けする」については、Googleが類似ページに対しても設定内容を自動的に認識するのを許容するのか、「このページだけをタグ付けする」のように、ひとつひとつのページに対して構造化データを設定するのかの違いになります。

structured-markup-02

ページが選択されたら、構造化データを実装したい箇所を選択し右クリックすると、選択範囲がどのタグに該当するかを選択出来るウィンドウが表示されますので、それぞれの選択部分についてタグ付けを行ってください。設定が完了したものについては右側にそれぞれ表示されます。

上の画像では、郵便番号からはじまる弊社の住所が選択され、「住所」にタグ付けされています。

タグ付けが終わったら「公開」ボタンを押せば完了です。ソースコードをまったく修正しなくてもツール上から構造化マークアップを実装することが出来ました。

構造化マークアップの設定が完了したら、次は設定が正しく完了しているかを確認してみましょう。ここでも、Googleから無償でツールが用意されていますので、そちらを使用します。

構造化マークアップテストツール」にログインし、先ほど構造化データを設定したURLを入力後、テストを実行ボタンを押してみてください。

structured-markup-03

なお、構造化マークアップテストツールでのプレビューが、必ず通常の検索結果に表示される訳ではないことに注意してください。特に、レビュー機能は表示されにくいため、頭の片隅で覚えていてください。

HTMLに直接マークアップを追加する方法

次は、上級編。HTMLに直接マークアップを追加する方法についてです。

こちらで使用するツールは「構造化データマークアップ」ツールです。

structured-markup-04

構造化データマークアップ支援ツールの手順に沿ってサイトを更新すると、Google(場合によっては他社のサービス)がサイトに含まれるデータを認識できるようになります。Google がサイト上のデータを認識すると、データをより魅力的に、斬新な方法で表示できるようになります。さらに、HTML 形式のメールを顧客に送信する場合は、マークアップ支援ツールの手順に沿ってメール テンプレートを変更するとことで Gmail でメール内のデータを新しく役立つ方法で表示できるようになります。

引用元:Search Consoleヘルプ 構造化データ マークアップ支援ツール
 
まずは、サイトにアクセスした後に、ソースコードを出力したいページURLを入力します。
今回は所在地情報のマークアップを行う為に「地域のお店やサービス」を選択しています。

「タグ付けを開始」ボタンを押すと、指定したURLを読み込み先ほどご紹介した「データハイライター」と同様にどの部分をマークアップするか選択する画面となります。

マークアップしたい情報を選択し、「HTMLの作成」ボタンを押してください。また、うまく選択が出来なかったとしても、後でソースコードを修正することは可能ですのでご安心ください。

structured-markup-06

マークアップ前のソースコードの差分が黄色のラインで選択されているのが分かると思います。サンプルの画像では郵便番号をマークアップしましたが、ソースコードに構造化された内容が反映されているのが分かると思います。

あとは「ダウンロード」ボタンを押せば、マークアップしたファイルを手に入れることが可能になります。

Googleは構造化マークアップのランキング要素採用している?

2015年9月11日、GoogleのJohn Mueller氏は構造化マークアップの有無が今後ランキング要素になる可能性について示唆しました。過去にたびたび「構造化マークアップの有無は順位に影響しない」と発言してきたGoogleの、一つの方針転換が伺い取れます。

長期的に見れば、ウェブサイト上に施された適切なマークアップを(ランキング要素に)利用するのは道理に合っているだろう。
だが、“マークアップしておけば順位が跳ね上がる”などというものにはならないと思う。「技術的にしっかりしているサイト」と「良いコンテンツのあるサイト」は区別しようとするからだ。
「技術的に良いサイト」だからといって「技術的にはしっかりしていないコンテンツ」よりも関連性が高いとはいえない。

引用元:Google オフィスアワー 2015年9月11日
 
上記に関しては様々な見方があるとは思いますが、個人的には構造化マークアップを実装しているサイトが、構造化マークアップを実装していないサイトより評価されるのはあり得ると思います。

というのも、検索エンジンに対してWebサイト・各ページの内容を分かりやすく伝えることで狙ったキーワードの順位を上昇させることがSEO施策だとしたら、構造化マークアップはなくてはならない技術です。

スマートフォンが普及し、位置情報から検索結果を変えるようなアルゴリズムがありますが、もし検索エンジンがあなたのウェブサイトの所在地を正しく認識出来ない・もしくは読み取れなかった際は大きな機会損失を生み出すことでしょう。

そのようなことがないためにも「検索ユーザーだけでなく検索エンジンに対してもウェブサイトの内容を分かりやすく伝える」技術である、構造化マークアップは非常に重要な施策といえるのではないでしょうか。

構造化マークアップは、失敗しても順位が急落するなどの影響はほとんどありませんので、まずはこの記事に書いてある2種類のうちどちらかを試しに実施してみてください。また、わからないことがあれば、ぜひお気軽にご相談いただければ幸いです。
 

毎月5社限定!無料Web診断でここまでわかる!

無料Web診断資料内容

あの競合他社がWebマーケティングで成功しているのも
皆さんのWebマーケティングがなかなかうまくいかないのも
すべて理由があります。
まずは理由を可視化する無料Webサイト診断をお試しください。

診断内容

  • 流入元分析
  • 検索流入分析
  • コンテンツ分析
  • デバイス分析
  • SEO分析

  • このエントリーをはてなブックマークに追加
The following two tabs change content below.
犬塚 啓明

犬塚 啓明

ディーエムソリューションズ株式会社 インターネット事業部 シニアコンサルタントグループ 部長 トップSEOコンサルタント。ITベンダーにてプログラマ経験を積んだのち、ある案件で担当したWebサイト制作を通してSEOに興味を持ったのをきっかけに、SEOコンサルタントとしての道を目指し、ディーエムソリューションズへ転職。検索エンジンにおける表示順位を上げ、サイトへの流入数を増やすだけでなく、コンバージョンの増加やブランド認知の向上、コンテンツ資産を高めていくといったWebサイトトータルの成功を日々追及している。