【WebクリエイターのためのSEO】サイト内容を伝える構造化タグと構造化マークアップ - Webデザイナー・Webディレクターの求人転職支援「STASEON(スタシオン)」

Webデザイナー・Webディレクターの求人転職支援「STASEON(スタシオン)」

Webデザイナー・ディレクターの求人転職支援

【WebクリエイターのためのSEO】サイト内容を伝える構造化タグと構造化マークアップ
TIPS 2019.4.06

【WebクリエイターのためのSEO】サイト内容を伝える構造化タグと構造化マークアップ

HTML5が導入されてから、Webサイトの中身をコンピューターに伝えるために、「構造化タグ」「構造化マークアップ」が利用されるようになりました。この構造化はSEOの観点でもサイトの情報をしっかりGoogleに伝えるために非常に重要な項目となります。また構造化マークアップをしておくことで、検索結果により多くの情報を掲載できて、より自社のWebサイトへのアクセスを促す仕組みも日に日に強化されています。
今回はこの構造化タグ、構造化マークアップについて、押さえておくポイントを説明していきます。

文書構造は構造化タグで示される

構造化タグはHTMLの文書であるbody要素(<body>)の中で、より文書構造を明示的に検索エンジンに伝えるために活用します。この構造化タグの中で基本になるものが<section>になります。この<section>は文章におけるまとまりを示すもので、書籍で例えると「章」にあたります。

このように見出しをつけられる文書のまとまりを「セクション」と呼び、セクションを区分するタグを「セクショニングコンテンツ」と呼びます。セクショニングコンテンツは記事を全体を示す<article>や補足情報を示す<aside>のようにセクション内で定義されるものと、セクションに一意で紐づく<header>や<footer>などの文章のまとまりの2種類に区分されます。

少々ややこしいのですが、セクショニングコンテンツである<section>とセクションは異なる概念なります。例えば記事全体を示す<article>についても、<section>で囲まれる場合と、<article>で囲む範囲に<section>を包含する場合もあります。前者は1記事で複数コンテンツの場合(まとめ記事など)、後者は1記事1コンテンツだが段落分けが入る場合になります。

構造化マークアップのメリット

文章のまとまりに意味付けをする構造化タグに対し、構造化マークアップは要素に意味を付与するのが特徴になります。要素に意味をつけるというのは、例を挙げると「東京」という言葉(要素)に対し、「地名」という要素名をつけるイメージとなります。構造化マークアップはかつては複数の規格が存在していました。その後検索エンジンの大手企業が協力して立ち上げたプロジェクトである 「schema.org」が定めた規格に統一化されています。

では実際構造化マークアップを利用するとどのようなメリットがあるのでしょうか?構造化マークアップが実装されるとGoogleの検索結果に以下の2つの表示が反映されるようになり、クリック率などの効果を得られます。

(1)検索結果への表示拡張
通常の検索結果に対し、追加情報を付与した表示がされます。例えば店舗の口コミを扱うサイトなどを例にあげると、URLのパンくずリスト表示、クチコミ評価点、価格帯などを表示することができます。
※パンくずリスト・・・トップページから表示ページまでの階層を表すリンクの集まり

(2)ナレッジパネルの表示
検索結果についてパソコンの場合は画面の右側、スマートフォンの場合には画面上部にクエリの詳述をしている表記が出てくるのを見たことはないでしょうか?これをナレッジパネルと呼びます。検索エンジンはこの情報を様々な手段で取得していますが、構造化マークアップもページの情報を検索エンジンに伝える1つの手段となっています。

構造化マークアップの分類と実装方法

構造化マークアップについては、「タイプ」と「プロパティ」の2つで構成されています。タイプが最上位概念であり、タイプの中で組織>企業など、その分類が階層的に構成されています。プロパティについては、タイプに紐づく要素になります。組織>企業というタイプ構成となっている場合、組織に紐づくプロパティと企業に紐づくプロパティの両方を設定することが可能になります。2018年12月時点ではこれまで米国で提供していたJobPosting(求人転職)に関する構造化マークアップの日本提供開始も報道され、これから大きなトピックになっていくでしょう。

構造化マークアップの実装にはschema.orgが定めてかつ、Googleがサポートしているものとして、以下の3種類があります。この3種類のいずれかを用いて、タイプとプロパティを記述していきます。
(1)Microdata
(2)RDFa Lite
(3)JSON-LD

MicrodataとRDFa Liteはメリットデメリットが似ており、構造化データと実際のHTMLが一致しやすいものの、ソースが煩雑になるという特徴を持っています。JSON-LDはHTMLコードと分離して構造化マークアップが記述できるため、コンピューターの読み取りやすさや管理面で有利です。一部同じ内容を2箇所に記述しなければならないデメリットもありますが、Googleの推奨でもあるため、特段の理由がなければJSON-LDを選択をするのがベターでしょう。

構造化マークアップの動作検証方法

構造化マークアップを記述していくためには、前述のJSON-LDなどの実装方法の知識が必要になります。その知識サポートのために 構造化データマークアップ支援ツール、データテストのために 構造化データテストツールをそれぞれGoogleが提供しています。

またGoogle Search Consoleでもエラー情報の補足をすることができます。基本的に構造化マークアップのエラーで評価が下落することはありませんが、スパムとして指摘される場合は悪影響を受ける可能性はあります。いずれもSearch Consoleの「構造化データ」の項目のアラートから確認できるので、定期的に巡回し適切な状態を保っておきましょう。

構造化マークアップは、Googleが推し進める検索体験の向上にも大きく関わってきます。またこれまで米国で提供していたJobPosting(求人転職)に関する構造化マークアップについて、2018年12月には日本提供開始も発表され、大きなトピックとなりました。構造化タグと合わせて、Googleにサイトの内容を適切に伝えていくことが、SEO上でも不可欠です。サイト全体に通じる設計でもあるので、ぜひ自社のWebサイトも一度見直しをしてみましょう。

▼関連記事

・【WebクリエイターのためのSEO】適切なtitleやmeta descriptionの設定が必要な理由
・【WebクリエイターのためのSEO】SEO最適化のためのモバイル対応で考えること
・【WebクリエイターのためのSEO】SEOにおいて画像化したテキストが好ましくないのはなぜか

-カテゴリーから記事を選ぶ-

はじめての方へ

アカウントを登録すると、求人情報やポートフォリオをお気に入り登録することができます。



Webディレクターの求人

MORE

おすすめの記事