【これだけ押さえれば大丈夫】SEOを意識したhtmlタグの書き方特集

タグ:

【これだけ押さえれば大丈夫】SEOを意識したhtmlタグの書き方特集の画像


今回はSEOを意識したHTMLのタグの書き方について最低限知っておきたい知識を紹介していきたいと思います。この記事を読み終わるころには、SEOに最適なタグが書けるようになっています!

HTMLにおけるタグとは

まず最初にHTMLのタグについて説明していきます。
HTMLとはWebサイトを表示させるテキストファイルのことを指します。
テキストはただ書いてあるだけでは読みにくくなるため、ある程度整理することが必要です。
その際に用いられるのがHTMLの「タグ」です。具体的には以下のようなものがあります。

  • <div></div> (divタグ):最もよく使われるタグです。要素のまとまりを示します。
  • <p></p> (pタグ):文であることを示しています
  • <li></li> (liタグ):箇条書きの際に使用されるタグです。

このように<>の形式で書かれているものをタグと呼んでいます。※このテキストもpタグやliタグを使って書かれています。今回はこのタグについてSEOの観点から紹介していきたいと思います。

構造化タグとは

構造化タグとは「文章構造を明示化するもの」と定義されています。
言い換えれば、記事の中の各文章の役割についてタグで明記することでコンピューターがその文章が何を示しているのか理解できるようになります。ここでのコンピューターとは検索エンジンであるGoogleを示しています。

Googleが文章構造を理解できない例
(それぞれのタグが文章中で何の役割をしているのか不明)


<h2>記事タイトル</h2>
<div>文章</div>
<p>コピーライト</p>

Googleが文章構図を明確に理解できる例

<header>サイトのタイトルやロゴ</header>
<section>
<h2>記事タイトル</h2>
<div>文章</div>
</section>
<footer>コピーライト</footer>

私たちは文章を読むと文章のまとまりとその役割(タイトル、見出し、セクションなど)を理解することができますが、Googleのような検索エンジンはそれを正しく理解することが困難です。
Googleに本当の意味での情報整理をさせるためには、検索エンジンでも文章の役割を理解できる形で記述が必要とされ、その流れで登場したのが構造化タグです。※構造化タグはHTML5から有効です。

構造化タグの種類

続いて構造化タグの種類について紹介していきます。
以下のリストが代表的な構造化タグですので覚えておきましょう。

出典:『現場のプロから学ぶSEO技術バイブル』 2018年

これらの全ての基本となるのが<section>です。本で例えると見出しを付けることができる「章」に相当します。このように、見出しでまとめることができる文章群をセクションと呼び、それを見出しごとに区分するタグ
を「セクショニング・コンテンツ」と呼びます。下の図のグレー部分がセクショニング・コンテンツです。さらに、セクショニング・コンテンツの中でも特別な役割を持つものとして
<article><aside><nav>
の3つのタグが定義されています。

構造化タグを使用する際の注意点

構造化タグのことが分かったので実際に使ってみましょう!
と、その前に押さえておきたい注意点をいくつか紹介します。

・<section>と<article>の違い
これについて混乱する人が多いのでケースごとに説明していきます。使い分けるポイントは「その部分だけ抜き取ってもコンテンツが完結しているか否か」です。完結していれば<article>で囲み、それ以外は
<section>で囲みます。

【例1:1つの記事を段落分けするケース】
こちらは各段落を<section>で囲み、全体を<article>でまとめます。というのも、<section>が集まって一つの独立した記事を構成しているからです。

<h1>記事タイトル</h1>
<article>
    <section></section>
    <section></section>
    <section></section>
</article>

【例2:複数の記事を並べるケース】
例えば複数の独立した記事を並べるケースでは、それぞれの記事がコンテンツとして完結しているため、<article>で囲い、そのまとまり全体を一つのコンテンツとして<section>で囲います。

<h1>記事一覧</h1>

<section>
<article></article>
<article></article>
<article></article>
</section>

・構造化タグとして<div>を使用してしまう
こちらはよくある間違いで、既存のサイトに構造化タグを導入しようとした際に<div>タグを使って導入してしまうことです。これが間違いである理由は単純で、<div>タグには要素をまとめる役割を持っていてもセ
クションを表現する役割がないためです。別の言葉で言い換えれば、<div>には文章のまとまりに意味を付与する役割は一切なく、CSSでデザインを装飾する際などに便宜上要素をまとめているだけです。構造化タグを導入す
る際は<div>を使わず、ルールに沿って行いましょう。

 

まとめ

 いかがでしたか?構造化タグは慣れないうちは使いづらいかもしれませんが、SEOの観点からは重要な要素になってきますので、ぜひ習得してみてくださいね。


オススメ関連記事
本当の狙いはココ!オウンドメディアから自社サイトへの誘導方法
外部リンク対策の押さえておきたい3つの基本について
SEOキーワードの正しい用途を知ろう!読んでもらえる記事を書ける秘訣