Share on
SEO対策の初歩！HTMLの文章構造化マークアップの基礎【ポイントは4つ】
HTMLの文章構造化マークアップは、コード内部の話です。サイトの見た目やデザインとは基本的に無関係であるため、できていなかったとしても、ページの見た目・デザインにはまったく影響しません。
そのような背景もあり、文章構造化マークアップはわりとぞんざいに扱われがちです。しかし、Webページのコードから情報を得る「クローラー」を意識すると話は変わります。
じつは文章構造化マークアップは、SEO対策と非常に密接な関係があります。文章構造化マークアップができていないページは、コンテンツ内容の捉え方や認識、ひいてはページ評価が変わってくるのです。
今回は簡単ではありますが「文章構造化マークアップとは何なのか」「何の意味があるのか」「どうすれば良いのか」という部分についてご説明していきたいと思います。少しでもご興味をもっていただけると幸いです。
HTMLの文章構造化マークアップとは
マークアップとは、タイトルや見出しなどの各構成要素に「タグ」と呼ばれる目印をつけて、コンピューターがコンテンツを正しく認識できるように意味付けを行っていくことです。
HTMLの文章構造化マークアップ（以降、文章構造化とします）では、タグをつけたコンテンツの親子兄弟関係も明確化になるため、文章の構造がクローラーにわかりやすくなります。
根本的なSEO対策は正しい文章構造化から
文章構造化されたページは、クローラーが内容をより明確に認識し評価するとされています。
あくまでイメージですが、「クローラーの見方ってこうなんじゃないかな、、、」という例をご覧ください。
例1 文章構造化できていないコード
以下は文章構造化ができていないコードです。
テキストがdivタグで括られています。
<div>カレーの作り方</div> <div>カレーの作り方を紹介します。</div> <div>その1.野菜を切る</div> <div>野菜を食べやすい大きさに切ります。</div> <div>その2.肉を炒める</div> <div>お鍋にサラダ油を入れて表面にしっかり焼き色がつくように炒めます。</div>
divは文章上の意味を持たないタグなので、クローラーが捉えるイメージとしては、ただ文字が並んでいるだけ。
もちろんクローラーは優秀なので、なんとなく「カレーの作り方についての内容だろう」と認識してくれるでしょうが、ぼんやりと伝わってしまいます。
例2 文章構造化できているコード
一方、文章構造化ができているコードではどうでしょうか。
以下は文章構造化ができているコードの例です。
<h1>カレーの作り方</h1>
<p>カレーの作り方を紹介します。</p>
<ol>
<li>
<section>
<h2>その1.野菜を切る</h2>
<p>野菜を食べやすい大きさに切ります。</p>
</section>
</li>
<li>
<section>
<h2>その2.肉を炒める</h2>
<p>お鍋にサラダ油を入れて表面にしっかり焼き色がつくように炒めます。</p>
</section>
</li>
</ol>
クローラーは、1行目で「これはカレーの作り方というコンテンツだな」と認識します。もっとも重要な見出しであるh1タグで「カレーの作り方」が括ってあるからです。
その次に重要なh2タグが付いているのは「その1.野菜を切る」「その2.肉を炒める」。これらは文章中の大見出しとして認識されるので、この2つがトピックです。
「その1.野菜を切る」は「野菜を食べやすい大きさに切ります」と同じsectionタグの中に入っており、一塊であることがわかります。「その2.肉を炒める」と「お鍋にサラダ油を入れて表面にしっかり焼き色がつくように炒めます」も同様です。
このように文章構造が明確になったことで、はっきりと「カレーの作り方について」の文章であると認識できました。
仮に、世の中に「カレーの作り方」を紹介しているページが、上記の例1と例2の2ページしかなかったとします。「カレーの作り方」で検索した結果、上位に表示されるのは言うまでもなく、文章構造化ができている例2です。
画像を軽くする、重いJSを整理するなど、SEO対策の施策はいろいろありますが、そもそもページ内容が正しくクローラーに伝わっていなければ元も子もありません。その意味で「正しい文章構造化は根本的なSEO対策である」と言えるでしょう。
誤った文章構造化はSEOにとって逆効果の可能性
文章構造化は、単純にh1やsectionなどのタグを使えばできるわけではありません。誤った使い方をすればSEOに逆効果となる可能性もあります。
例えば前述の例1を、「カレーの作り方」というキーワードで上位表示させるケースを考えてみましょう。
文章構造化できてない例
上位表示させるために「カレーの保存方法」という内容を追加します。この考え自体は間違っていません。
しかし以下のようにHTMLを書いたらどうでしょう。
元のHTMLに、<!--SEO施策で追加-->の部分を追加しました。
<div>カレーの作り方</div>
<div>カレーの作り方を紹介します。</div>
<div>1.野菜を切る</div>
<div>野菜を食べやすい大きさに切ります。</div>
<div>2.肉を炒める</div>
<div>お鍋にサラダ油を入れて表面にしっかり焼き色がつくように炒めます。</div>
<!--SEO施策で追加-->
<h1>カレーの保存方法</h1>
<p>カレーの保存方法についても紹介していきたいと思います。</p>
<ul>
<li>
<section>
<h2>方法1：冷蔵</h2>
<p>2〜3日の保存であれば冷蔵が適しています。</p>
</section>
</li>
<li>
<section>
<h2>方法2：冷凍</h2>
<p>1か月ぐらいの保存であれば冷凍が適しています。</p>
</section>
</li>
</ul>
<!--SEO施策で追加-->
後半に追加した「カレーの保存方法」は、h1、ulなどのタグを使って文章構造化がバッチリできています。
しかし元からある「カレーの作り方」はそのままです。クローラーにしてみれば、文章の前半はただのテキストの羅列なので、とくに重要ではありません。後半に構造化された「カレーの保存方法」が出てくるので「こっちが重要だな」と認識するでしょう。
つまりクローラーの認識では、このページは「カレーの作り方」ではなく「カレーの保存方法」のページなのです。したがって「カレーの作り方」での検索上位表示は期待できません。それどころか、検索順位が下がってしまう可能性もあります。
正しい文章構造でHTMLを書くと？
上の例はどうすればよかったのでしょうか。ポイントは以下の４つです。
- 1ページ1テーマにする
- 親子関係を作る
- 「見出し＋内容」でひと塊にする
- 兄弟関係を作る
このルールに則ると、以下のような解答例になります。
<h1>カレーの作り方</h1>
<p>カレーの作り方を紹介します。</p>
<ol>
<li>
<section>
<h2>その1.野菜を切る</h2>
<p>野菜を食べやすい大きさに切ります。</p>
</section>
</li>
<li>
<section>
<h2>その2.肉を炒める</h2>
<p>お鍋にサラダ油を入れて表面にしっかり焼き色がつくように炒めます。</p>
</section>
</li>
…
…
…
</ol>
ポイントをそれぞれ解説します。
1ページ1テーマにする
よくない例にあった「カレーの保存方法」を削除して、「カレーの作り方」だけのページにしました。
「カレーの作り方」がテーマだとわかるようにh1タグで括ってあります。
<h1>カレーの作り方</h1> <p>カレーの作り方を紹介します。</p>
これにより、「何についてのページか」が明確になりました。クローラーにとって、ページのテーマがわかりやすいはずです。
ちなみに削除した「カレーの保存方法」については、別のページを作ればOKです。このコンテンツ自体が悪いわけではありません。
親子関係を作る
親子関係は「入れ子関係」とも言えます。大きな箱の中に小さな箱を入れるイメージです。
上の解答例ではsectionタグが小さな箱に当たります。
<section> <h2>その1.野菜を切る</h2> <p>野菜を食べやすい大きさに切ります。</p> </section>
では、大きな箱はどこにあるのでしょうか。
上の例では書いていませんが、本当はコード全体を<body>というタグが括っています。ページ全体を入れる大箱と思ってください。
bodyの大箱の中に、sectionの小箱を入れると内容の親子関係がはっきりします。
「見出し＋内容」でひと塊にする
箱の中身は基本的に「見出し＋内容」でひとセットです。
下の例ではh2が見出し、pが内容となっています。
<section> <h2>その1.野菜を切る</h2> <p>野菜を食べやすい大きさに切ります。</p> </section>
もし見出しタグがなかったら、クローラーが「Untitled Section（見出しのないセクション）」と判断します。逆に、見出しタグだけのセクションというのも文法上よろしくありません。sectionの中には見出しと内容を入れましょう。
ところでh1タグも見出しですが、これはどう考えればいいと思いますか？ 実はh1タグにとってはbodyタグがsectionタグにあたります。したがって、h1タグをとくにsectionタグで括ったりする必要はありません。「ページのはじめにh1を一つだけ入れる」と覚えておけば大丈夫です。
兄弟関係を作る
最後に作るのが兄弟関係です。小さい箱同士の横の関係ですね。
これを表しているのが liタグです。<li>で括られた内容は同レベルに位置付けられます。
下の例では、「その1.野菜を切る」と「その2.肉を炒める」のセクションが同じレベルです。レベルが同じというのは、内容的に納得できますよね？
<ol>
<li>
<section>
<h2>その1.野菜を切る</h2>
<p>野菜を食べやすい大きさに切ります。</p>
</section>
</li>
<li>
<section>
<h2>その2.肉を炒める</h2>
<p>お鍋にサラダ油を入れて表面にしっかり焼き色がつくように炒めます。</p>
</section>
</li>
…
…
…
</ol>
なお、liタグはolタグでひとまとまりに括られます。この2つのタグはセットで使うものであると覚えておいてください。
まとめ
以上、HTMLの文章構造化マークアップの基礎について解説しました。
冒頭にもあったとおりHTMLの文章構造化マークアップはコード内部の話なので、世の中の大多数の人は気に留めません。それが普通です。しかしWebを作っている側にとっては、知識や技術で差がつく重要なポイントと言えます。
もしあなたがWeb制作に関わっている、もしくはこれから関わっていこうと思っているなら、HTMLの構造を大事にしてください。大事にするだけの価値は十分にあります。
この記事を書いた人
クーシーブログ編集部
1999年に設立したweb制作会社。「ラスクル」「SUUMO」「スタディサプリ」など様々なサービスの立ち上げを支援。10,000ページ以上の大規模サイトの制作・運用や、年間約600件以上のプロジェクトに従事。クーシーブログ編集部では、数々のプロジェクトを成功に導いたメンバーが、Web制作・Webサービスに関するノウハウやハウツーを発信中。
お問い合わせはこちらから
Web制作デザイン、丸ごとお任せ
お問い合わせする
テキスト：土田玲央 デザイン：大坂間琴美
Share on
