# 構造化データ?セマンティクス?フロントエンドエンジニアに求められるモダンなHTMLマークアップとは

# 構造化データとは

私達がウェブサイトを制作する際、やはり気にするのは『Googleの掲載順位』です。
この『Googleの掲載順位』を上げるためには、ウェブサイトの内容を正しくGoogleに伝える必要があります。

たとえば以下のようなマークアップをしていた場合、
Googleはどれがタイトルで、どれが著者名かわかるでしょうか。
(わかりやすくクラス名は省いています。)

<h1>効率的なマークアップの仕方について徹底解説!</h1>
<p>Haru</p>

h1を用いている箇所はタイトルだと認識されるでしょうが、
それが記事のタイトルなのか、ページのタイトルなのかはこれだけでは判断できません。
また、pタグに至っては著者名などとわかるはずがありません。

HTMLタグ自体にも意味はある程度つけられていますが、
より詳しく、正確にGoogleに認識してもらうためには、構造化データと呼ばれるマークアップのコードを使用する必要があります。

# 構造化データにはセマンティックなHTMLまたはJSが必要

では実際にはどんな方法でGoogleに認識してもらうのでしょうか。
有名な構造化データの形式は3種類あります。
それはHTMLでマークアップするMicrodataとRDFa、
そしてJSでマークアップするJSON-LDです。

Googleが推しているのは3番目のJSON-LDです。
これら3つについてはまた別記事で紹介します。

# Googleの構造化データマークアップ支援ツールについて

ちなみに、仕様をいちいち確認せずとも、
Googleが便利なものを用意してくれています。

それは『構造化データ マークアップ支援ツール』です。

マークアップするページのタイプを選択し、URLを入力するだけでタグ付けされます。
詳しくは以下のサイトをご覧ください。

構造化データ マークアップ支援ツール

Last Updated: 2020-5-25 7:42:48