クローラーが読みやすくするために!SEOのために最低限知っておきたいHTMLタグの使い方

執筆者

株式会社NOBITA代表取締役。グループ企業の株式会社ノイズにてフロントエンドエンジニア兼ディレクターを担当。LIGMAKEPOなどのメディアでは「のび太」名義にてライターとして執筆活動も行っている。

監修

NOIZZ

株式会社ノイズ

http://noizz.co.jp/

マーケティングコンサルティング企業。事業戦略・事業開発支援のほか、MAKEPO等のメディアを展開。ウェブ制作系グループとして株式会社NOBITAを抱えている。

あなたが書く記事は内容さえ良ければいいというわけではありません。ブログ記事を検索結果で上位に表示させて、1人でも多くにあなたのコンテンツを届けるためには内容以外にも重要なことはあります。

前回の記事の中で、クローラーに読まれやすくするために「適切なHTMLで書く」ことが必要とお伝えしました。今回は検索で上位表示させるために最低限知っておきたいHTMLタグの使い方をご紹介します。

最低限知っておきたいHTMLタグ

HTML web code

見出しタグ(h1~h6)

h1、h2、h3などの見出しタグは、大見出しにh1、その小見出しにh2、さらにその小見出しにh3といったように、文章に応じて適切に使っていきます。クローラーはこの見出しタグによって、文章の概要や内容を正しく理解し、適切にインデックスしやすくなります。

ここで気をつける点は、記事中ではh1〜h6を上から順番に使っていくということです。見出し2(h2)のあとに見出し4(h4)を使う、見出し3(h3)のあとに見出し2(h2)を使うということは避けましょう。

※ダメな例

<h3>見出しタイトル</h3>
<p>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章...</p>
<h2>見出しタイトル</h2>
<p>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章...</p>
<h2>見出しタイトル</h2>
<p>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章...</p>
<h4>見出しタイトル</h4>
<p>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章...</p>

段落タグ(p)

pは段落を表すタグです。段落を変えるときは
の強制改行で余白を作るのではなく、基本的にpタグで段落を区別します。 文章としては、各見出し(hタグ)には段落(p)があるのがキレイな流れです。見出し→段落(文章)→見出し→段落(文章)というような感じで、見出しと見出しの間には段落を入れるのが適切です。

強調タグ(strong)

pタグの中で強調したい言葉につかいます。ただ単に視覚的に文字を目立たせたい、色を変えたいという理由で強調タグを使うのは適切ではありません。意味的に重要な文言、強調したい文言のみにstrongタグを使いましょう。

画像タグ(img)

HTML上で画像は、

<img src=“(画像への絶対パス)" alt=“(代替テキスト)”>

という記述になります。

重要なポイントは代替えテキスト(altタグ)で画像の説明を入れるということです。これはやってない方がかなり多いです。クローラーは人間と同じように画像を見ていません。altタグの文章で理解します。ゆえにaltタグが設定されていないと、クローラーが理解できないのです。

また、代替えテキストはブラウザ上の理由で画像が表示されなかった場合に画像の代わりに表示される文言です。 目が見えない方が音読ソフトを使ってテキストが読み上げられたりもします。

リストタグ(ul、ol、li)

ul、olはリストを表します。liは中にあるリスト1つ1つの要素を囲むものです。ulは順不同、olは順序のある箇条書きをする際に使います。

順不同リスト

<ul>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
</ul> 

順序のあるリスト(番号付きリスト)

<ol>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
</ol> 

定義タグ(dl・dt・dd)

定義タグは説明文つきリストを表します。dlで全体をくくり、dtで説明する言葉や対象を、ddでその説明文を表します。上のリストタグ(ul、ol)の要素(li)に対して説明文を加えたいときに使用するといいでしょう。

<dl>  
    <dt>文章1・・・</dt>
        <dd>文章1に対する説明文</dd>
     <dt>文章2・・・</dt>
        <dd>文章2に対する説明文</dd> 
    <dt>文章3・・・</dt>
        <dd>文章3に対する説明文</dd> 
</dl> 

テーブルタグ(table・thead・tbody・tr・th・td)

tableタグは表組みを表します。表として見せたい場合に使います。

<table>
    <thead>
        <tr>
            <th>(列1タイトル)</th>
            <th>(列2タイトル)</th>
            <th>(列3タイトル)</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>(行1列1)</td>
            <td>(行1列2)</td>
            <td>(行1列3)</td>
        </tr>
        <tr>
            <td>(行2列1)</td>
            <td>(行2列2)</td>
            <td>(行2列3)</td>
        </tr>
    </tbody>
</table> 

上記のコードは人間の目には以下のように映ります。

(列1タイトル) (列2タイトル) (列3タイトル)
(行1列1) (行1列2) (行1列3)
(行2列1) (行2列2) (行2列3)

さいごに

one point

Googleにも読んでもらえるために私たちがWeb上にアップするコンテンツは、人間だけが読むのではありません。Googleが理解できるように書く必要もあるのです。HTMLタグはいろいろな種類がありますが、最低限ここでご紹介したものだけ覚えていればOKです。HTMLタグを適切に使用し、Googleに正しく内容を理解されるようにしましょう!