【ブロガー必見】SEOライティング時に知っておきたいHTMLタグ5選



【ブロガー必見】SEOライティング時に知っておきたいHTMLタグ5選
目次
  1. そもそもSEOとは?
  2. 知っておきたいSEOに関するタグ5選
  3. <title>にはクリックしたくなる文章を書こう
  4. <h1>にページの見出しを書こう
  5. descriptionメタタグにサイトへの誘導文を書こう
  6. ページ内の主要なコンテンツは<article>に書こう
  7. <a>にはリンク先のタイトルを書こう
  8. まとめ

そもそもSEOとは?

SEO(Search Engine Optimization、検索エンジン最適化)とは、作成したwebサイトの認知度を高め、閲覧数を増やしていく対策の一つです。

具体的には、googleなどの検索エンジンで関連するキーワードで検索した時に、作成したwebサイトを検索結果の上位に表示させることを言います。

googleのような検索エンジンは、世界中のwebサイトをクロール(巡回)して情報を集めています。 そしてそのサイトが「良質なサイトかどうか」ということを評価基準として検索結果の表示順位を決めています。

「良質なサイトかどうか」というのは具体的には以下のような項目で評価されます。

  • 信頼できる内容が記述されていること
  • わかりやすく正確に説明されていること
  • 事実に反する記述がないこと
  • スペルミス、文法ミスがないこと
  • サイト内に内容が重複したページがないこと
  • サイトを見たユーザーが満足できること

googleの公式ブログ「良質なサイトを作るためのアドバイス」が参考になります。
https://webmaster-ja.googleblog.com/2012/09/more-guidance-on-building-high-quality.html

このように、SEO対策として一番重要なのは「良質なサイトにしていくこと」です。

そして、次に重要なのが「サイトの内容を検索エンジンに正しく伝えること」です。 せっかく良質なサイトを作っても、googleが正しく理解してくれなければ検索順位は上がっていきません。
そのためにはサイトを構成するHTMLを適切に書いていく必要があるのです。

上記のように、SEO対策では「良質なサイトにしていくこと」が求められます。HTMLの書き方はそれを表現するための手段にすぎません。サイトの内容が良質でなければ、HTMLを適切に書いても検索順位が上がるわけではないことを理解しておきましょう。

知っておきたいSEOに関するタグ5選

ここでは、SEO対策として具体的にどのようにHTMLを書いていけばよいのか、重要なタグを中心に解説していきます。

<title>にはクリックしたくなる文章を書こう

<title>はページのタイトルを表すタグで、<head>要素の中に1回だけ書くことができます。title要素の内容は、ブラウザのタイトルバーに表示されます。

<title>は、検索エンジンに最も重要視されるタグです。ですから<title>にはそのページの検索キーワードを入れておく必要があります。

<title>の内容は、検索結果のタイトルとして表示され、サイトへのリンクになっています。検索ユーザーがサイトを訪問するきっかけになる重要なタグです。

したがって、検索結果に表示された時に多くの人がクリックしたくなるような文章を設定しておくと良いでしょう。 単語の羅列ではなく、検索キーワードを含めながらそのページに書いてある内容がわかるような文章にしましょう。 googleの検索結果では全角32文字程度以上は省略されてしまうので、全角32文字以内で簡潔に書きましょう。

記述例

<title>記念日、誕生日のプレゼントはギフト通販サイト〇〇〇〇へ&lt;/title&gt; 

注意点としては、webサイト内で複数ページに同じtitleを設定しないことが重要です。 同じtitleのページが複数あると、検索エンジンは重複したページとみなして、サイトの評価が下げられてしまいます。必ずページごとに異なるtitleを設定しましょう。

<h1>にページの見出しを書こう

<h1>はページの見出しを表すタグで、その内容はサイトに表示されます。 <h1>は、<title>に次いで2番目に検索エンジンに重要視されるタグです。

<h1>タグは後述するセクション要素内を除いてページ内に1つだけ書くようにしましょう。

基本的に<h1>と<title>の内容は同じで構いません。
しかし、<title>は検索結果に表示されるので外からそのサイトに来る人向け、<h1>はページの見出しとして表示されるのでそのページを見ている人向け、という違いがあります。
そこで、わかりやすいように多少内容を変えても問題ありません。ただし検索キーワードを含めるようにしましょう。

<h1>を書く場所に気をつけよう

HTML5では、セクション要素と呼ばれる以下の4つの新しいタグが追加されました。これらのタグは、文書の「意味的なまとまり」を表すのに用います。

  • <section>
  • <article>
  • <nav>
  • <aside>

HTML5では、<header> <footer> <main>といったタグも追加されましたが、これらはセクション要素ではありませんので注意してください。

セクション要素内では、見出しタグ<h1>〜<h6>はセクション要素内での見出しという役割になります。 したがって、セクション要素内に<h1>を書いてもページ全体の見出しとはなりませんので注意が必要です。

<h1>がページ全体の見出しにならない例

<body>
  <header>
    <section>               ←セクション要素
      <h1>見出し</h1>        ←セクション要素内なのでページ全体の見出しにはならない
        …
    </section>
  </header>
  <article>
   ...

<h1>がページ全体の見出しになる例

<body>
  <header>
    <h1>見出し</h1>          ←セクション要素外なのでページ全体の見出しになる
    <section>               ←セクション要素
        …
    </section>
  </header>
  <article>
   ...

descriptionメタタグにサイトへの誘導文を書こう

descriptionメタタグは<head>要素内に「<meta name="description" content=」のように記述します。

descriptionメタタグに記述した内容はgoogleの検索結果の順位には影響を与えないと言われています。

しかし、検索結果のタイトルの下のページの要約にdescriptionメタタグの内容が表示される場合があります。ページの要約では、ユーザーが入力した検索キーワードは強調されて太字になります。

googleは、普通は検索キーワードなどに基づいてページの中から要約に表示する内容を探しますが、ページ内に適切な情報が見つからなかったときにdescriptionメタタグの内容を表示してくれます。
googleもdescriptionメタタグの記述を推奨しています。

したがってサイトへの誘導を促すような文章を設定しておくことで、検索結果からサイトへの流入を増やすことができるのです。

記述例

<meta name="description" content="ギフト専門通販サイト〇〇〇〇〇が、記念日・誕生日の心のこもったプレゼントを提案します。">

ページ内の主要なコンテンツは<article>に書こう

HTML5で新しく追加されたセクション要素を表すタグのうち、以下の3つは特別な意味を持っています。

  • <article>・・・ページ内の主要なコンテンツを表す
  • <nav>・・・他のページへのナビゲーションを表す
  • <aside>・・・広告など、主要なコンテンツとあまり関係ない情報を表す

検索エンジンは<article>の内容をページ内の主要な情報とみなしてくれます。
例えば企業の採用情報のページでは、そのページの主要なコンテンツである採用に関する情報を<article>の中に書きます。

サイト内の他のページへのリンクは、<nav>の中に書きましょう。具体的にはグローバルナビゲーションを<nav>の中に書いておけば問題ありません。

ページの本題とあまり関係なく重要でない部分や、他のページと重複するような内容は、<aside>の中に書くと良いでしょう。 検索エンジンは<aside>の内容を補足的な情報とみなし、重複したページではないと判断してくれます。

記述例

<body>
  <h1>〇〇〇会社 採用情報</h1>
  <nav>
    <!-- ここにサイト内の各ページへのリンクを記述 -->
  </nav>
  <article>
    <!-- ここに採用に関する情報を記述 -->
  </article>
  <aside>
    <!-- ここに採用と関係ない補足的な情報を記述 -->
  </aside>
</body>

<a>にはリンク先のタイトルを書こう

他のページへのリンクをあらわす<a>タグのアンカーテキストはリンク先の内容がわかる内容にしましょう。

検索エンジンはアンカーテキストの内容がリンク先のページのタイトルだと認識します。
「こちら」や「ここをクリック」のようなリンク先の内容がわからない書き方はやめましょう。

良くない例

採用情報は<a href=”recruit.html”>こちら</a>

良い例

<a href=”recruit.html”>採用情報</a>

検索エンジンはリンクをたどってクロールします。リンク先のページが存在しないとサイトの評価が下がってしまいますので、リンク切れがないようにすることが重要です。

まとめ

webサイトのSEO対策として一番重要なことは、「良質なサイトにしていくこと」です。次に重要なのが「サイトの内容を検索エンジンに正しく伝えること」です。そのためにはサイトを構成するHTMLを適切に書いていく必要があります。

SEO対策を行う上で重要なHTMLのタグとしては以下のようなものがあります。

  • <title> ・・・SEO対策でもっとも重要なタグ。検索結果のリンクテキストになる。
  • <h1>・・・ページのタイトルを書く。
  • descriptionメタタグ・・・ページへの誘導文を書く。
  • <article>・・・ページ内の主要なコンテンツをこの中に書く。
  • <a>・・・アンカーテキストにリンク先のタイトルを書く。

これらのタグを適切に書くことによって、サイトの内容を検索エンジンに正しく伝えることができ、結果的にサイトの閲覧数を増やしていくことにつながります。

関連記事

k.takano
この記事を書いた人
k.takano
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp