# 構造化データ？セマンティクス？フロントエンドエンジニアに求められるモダンな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を入力するだけでタグ付けされます。
詳しくは以下のサイトをご覧ください。