SEOに効果的な6つのHTMLタグの書き方とは?【2019年最新版】

Pocket

SEOに効果的な6つのHTMLタグの書き方とは?【2019年最新版】

HTMLタグの使い方が間違っているからといって、Googleからペナルティを与えられることはありません。

GoogleのMatt Cutts氏によれば、現在公開されているWEBページには、HTMLの構文エラーがあるものが非常に多く、Googleのクローラーは文法エラーのあるHTMLでも判断できるようになっていると言います。

しかし、SEO対策において、正しくHTMLタグを使うことは検索順位を上げるために必須。

当ページでは、HTMLタグを正しく使う理由を解説した上で、Googleの検索アルゴリズムの観点から抑えておくべきHTMLタグの使い方を6つ紹介いたします。

「SEO対策で、少しでも検索順位を上げたい」

「どのようにHTMLタグを使えば、SEO対策に適しているのか知りたい」

このようにお思いの方は必見ですよ!

HTMLはなぜSEO対策に重要?Google検索アルゴリズムをチェック

HTMLはなぜSEO対策に重要?Google検索アルゴリズムをチェック
SEO対策で特定のページの検索順位を高めるには、HTMLタグの使い方にもこだわる必要があります。

Googleをはじめとする検索エンジンは、HTMLで記述されたコードを解読し、検索順位ページの内容を理解するもの。そのため、Googleがコンテンツを適切に認識し、評価するために、正しいHTMLを記述することは非常に大切です。

先程、間違ったHTMLの記述でGoogleからペナルティを受けることはないと書きましたが、

SEO対策においては、HTMLタグの最適化は欠かせません。

文章コンテンツで利用するHTMLタグは、例えば、「h2」などの見出しを表すものから、リンクを配置する「a」タグなどが代表的でしょう。

では、こうしたHTMLタグは、一体どのようにして使えばSEO対策に効果的なのでしょうか。ここではGoogleの検索アルゴリズムの観点から、最適なHTML構造を考えています。
(参考:NORTHCUTT、Google Ranking Factors

Googleの検索アルゴリズムを紐解いていくと、HTMLタグについても記載がありました。特に、次のものには注意して、SEO対策に適したHTMLタグを設定するべきだと言われています。

【SEO対策に効果的なHTML】

  • h1~h4に適度な量のキーワードを入れる
  • h1~h4が論理的な構造になっている
  • meta情報にキーワードを入れる
  • aタグの文が分かりやすい
  • 画像にalt属性を設定していること
  • リストタグの効果的な利用

こうしたHTMLタグの設定は、慣れてしまえば簡単なものばかり。実際にどのようにHTMLタグを記述していけば良いのか、次項で6つのポイントをご紹介いたします。

SEO対策に効くHTML設定方法|Googleの検索順位アップに役立つ!

HTMLはなぜSEO対策に重要?Google検索アルゴリズムをチェック

①h1~h4のタグ設定方法

HTMLタグの中でも、「h」と「数字」を組み合わせたものが見出しタグです。この記事にも「h1」から「h2」、「h3」までの見出しタグを設定しています。

では、「h1」から「h4」まで、それぞれのHTMLタグの役割をみていきましょう。

  • h1:その記事の大見出し(例:SEO対策のメリットとは?)
  • h2:見出し(例:SEO対策をする3つのメリット)
  • h3:中見出し(例:メリット①たくさんのユーザーがサイトに訪れる)
  • h4:小見出し(例:ユーザーの訪問率を表す指標)

このように、「h1」タグで記事の大見出しを決め、その本文を構成する各見出しに「h2」~「h4」タグを配置していくという形で使われます。

見出しタグを利用する場合は、そのタイトルを各HTMLタグで囲みます。次の通りです。

  • <h1>SEO対策のメリットとは?</h1>
  • <h2>SEO対策をする3つのメリット</h2>
  • <h3>メリット①たくさんのユーザーがサイトに訪れる</h3>
  • <h4>ユーザーの訪問率を表す指標</h4>

②h1~h4の適切な構造

見出しタグには適切な構造があります。

大前提として、「h1」タグは各コンテンツページに一つしか使ってはいけません。 そして、「h2」から以下の見出しタグは文法構造が決まっています。まずは、悪い例からご覧ください。

【見出しタグの悪い例】

  • <h2>大見出し</h2>
  • <h4>小見出し</h4>
  • <h3>中見出し</h3>
  • <h2>大見出し</h2>
  • <h4>小見出し</h4>

このように、各見出しを適当に配置するのは避けましょう。必ず「大見出しの後には見出し」、「中見出しの後には小見出し」というように設定していきます。

【見出しタグの良い例】

  • <h2>SEO対策の3つのメリット</h2>
  • <h3>メリット①たくさんのユーザーがサイトを訪れる</h3>
  • <h4>ユーザーの訪問率を表す指標</h4>
  • <h3>メリット②購買意欲の高いユーザーを集中的に集客できる</h3>
  • <h3>メリット③広告費用をかけずに高い効果を期待できる</h3>
  • <h2>SEO対策のデメリットについても知っておこう</h2>
  • <h3>デメリット①成果まで時間がかかる</h3>
  • <h3>デメリット②業者に依頼する場合は高額な費用がかかる</h3>
  • <h2>まとめ</h2>

上記のように、必ず大見出しの後には見出しが続いています。また、小見出しを使う場面も、必ず中見出しの後に設置する形です。このように、記事の本文を構造的に配置していくことで、ユーザーと検索エンジン共に階層構造を理解しやすくなり、SEO対策にも効果的となります。

③meta情報の設定で間接的なSEO対策に

meta情報の設定で間接的なSEO対策に
SEO対策におけるmeta(メタ)情報とは、特定のタイトルやキーワード、記事の概要などを表す要因のこと。特に、次の3つの要素はSEO対策にもなるため、必ず覚えておきましょう。

  • meta title(メタタイトル):
    その記事のタイトル情報を30文字程度で表したもの
  • meta description(メタディスクリプション):
    その記事の内容を120文字程度で表した概要文
  • meta keyword(メタキーワード):
    その記事で扱う5つ程度のキーワード

この中で直接的なSEO効果があるのはメタタイトル。タイトルタグの最適化はSEO内部対策の中でも最重要だと言っても過言ではないため、適切に設定しましょう。

一方で、メタディスクリプションとメタキーワードに直接的なSEO効果はありません。しかし、メタディスクリプションを適切に設定することは、CTR(ユーザーのクリック率)が上昇することに繋がり、WEBサイトのアクセス数に大きな影響を与えるため、こちらも適切な設定が必要です。

各メタ情報のHTMLタグは次のように記述します。

  • meta title:
    <title>タイトル名</title>
  • meta description:
    <meta name="description" content="概要文を120文字程度" />
  • meta keyword:
    <meta name="keywords" content="キーワード①,キーワード②" />

④アンカーテキストにキーワードを入れ、リンクを最適化

リンクを設定するときは「a」タグを用います。

例えば、先ほどの「<h2>SEOのデメリットについても知っておこう</h2>」という見出しを設定して、ほかのコンテンツページで「SEOのデメリットとは」という記事を紹介していたとしましょう。

「<h2>SEOのデメリットについても知っておこう</h2>」という見出しの本文で、「SEOのデメリットとは」のコンテンツページを紹介する内部リンクを貼っておけば、興味を持ったユーザーがリ別のページにアクセスし、サイト内の回遊率が上がります。

こうした内部リンクや参照URLを記載するときに、下記のように「a」タグを使いましょう。

■ <a href=https://〇〇〇/>関連記事:SEOのデメリットとは</a>

このように、HTMLの間にテキストを入れ(アンカーテキストといいます)、ユーザーがそのテキストをクリックすると、「a」タグで設定したURL先にページが移動します。

⑤altタグにもキーワードを入れる

また、画像にもテキスト情報を設定しておきましょう。Googleは人間のように画像情報を認識できないため、画像をテキストに置き換えておくとSEOで効果が高くなります。この画像をテキストに置き換える際に使用するのは、「alt属性」です。

alt属性を使ったHTMLは次のように設定しましょう。

■ <img src="images/001.jpg" alt="画像を説明する文">

これでユーザーからは画像として見られ、Googleのクロールにはしっかりとテキストとして認識されるようになります。

⑥箇条書きはユーザーにもSEOにも効果的

箇条書きはユーザーにもSEOにも効果的
SEOに効果的なHTMLでは、箇条書きに使われる「li」タグも覚えておくとよいでしょう。メリットを3つ端的に並べるときなどに便利です。コンテンツ内に箇条書きがあれば、それだけ読者は本文を読みやすくなるため、SEOにも高い効果を発揮します。

また、CSSのデザインでなく、「li」タグを使って記述することで、強調スニペット(フィーチャードスニペット)にも表示されやすくなります。

強調スニペットへの露出はアクセス数の増加に繋がったりと、2019年のSEOにおいて非常に重要となるため、箇条書きの際は「li」タグでの記述を行うようにしましょう。

箇条書きのHTMLは次の通りです。

  • <ul>
  • <li>メリット①~~</li>
  • <li>メリット②~~</li>
  • <li>メリット③~~</li>
  • </ul>

すると次のように、黒点が文頭にくる箇条書きが表現されます。

・メリット①~~
・メリット②~~
・メリット③~~

また、番号付きの箇条書きを設定する場合は、「ul」タグではなく「ol」タグを用います。

  • <ol>
  • <li>メリット①~~</li>
  • <li>メリット②~~</li>
  • <li>メリット③~~</li>
  • </ol>

すると実際の表示は次のようになります。

1.メリット①~~
2.メリット②~~
3.メリット③~~

SEO対策を意識して書いたHTML構文の例

SEOを意識したHTMLを利用して、実際に文章を記載してみましょう。
SEO対策を意識して書いたHTML構文の例

<!DOCTYPE html>
<html>
<head>
<title>SEOのメリットとは?</title>
<meta charset="UTF-8">
<meta name="description" content="SEOについて3つのメリットを紹介します。また、デメリットについて知っておくことで、あらかじめリスクに備えておくこともできます。">
<meta name="keywords" content="SEO,メリット,とは">
</head>

<body>
<h1>SEOのメリットとは?</h1>
<p>SEOのメリットを知っておくと、ご自身で運営されているWebサイトの検索順位が上昇し、ひいてはユーザーの流入するが増えることでしょう。次の画像はSEOを効果的に行った場合の検索結果と、SEOを行っていないページの検索結果です。SEOによって訪問者が増えることで、サイト上の広告クリック率も向上することは間違いありません。</p>

<img src="https://〇〇〇/images/seo.JPG" alt="SEO対策の検索結果" width="450 "height="250">

<h2>SEOの3つのメリット</h2>
<p>SEO対策を行うことで得られるメリットは、次の3点です。Webサイト運営者にとって大きな影響を及ぼすため、それぞれのメリットについて詳しく学んでいきましょう。</p>

<ul>
 <li>メリット①たくさんのユーザーがサイトを訪れる</li>
 <li>メリット②購買意欲の高いユーザーを集中的に集客できる</li>
 <li>メリット③広告費用をかけずに高い効果を期待できる</li>
</ul>

<h3>メリット①たくさんのユーザーがサイトを訪れる</h3>
<p>SEOメリットの1つ目は、今までより多くのユーザーの流入数が望めることです。…</p>

<h3>メリット②購買意欲の高いユーザーを集中的に集客できる</h3>
<p>メリットの2点目は、訪れるユーザーの中でも、特に購買意欲の高い人がアクセスしてくれやすい点です。…</p>

</body>
</html>

HTML構文の基本的な構造は上記の通りです。是非参考にしていただければと思います。

まとめ: HTMLタグを正しく使い、Googleとユーザー両方に価値を届けよう

SEO対策においてHTMLタグを適切に記述することは、検索順位を上げるためにも大きな意義があります。

今回お伝えした見出しタグ(h1~h4)や、箇条書きタグ(li)を適切に記述することで、その記事を読むユーザーにも検索エンジンにもメリットのあるWEBコンテンツにすることが可能。このように、ユーザー、Googleの両者に取って価値のあるコンテンツは、SEO対策にも高い効果が期待できます。

また、今回お伝えしたHTMLの設定が面倒という方には、世界で1番使われているCMSである「WordPress(ワードプレス)」の「ビジュアルエディター」機能がおすすめです。HTMLなしで記事を書くことができるため、初心者でもサイトの運営がしやすくなるでしょう。

それでは、最後まで読んでいただき、誠にありがとうございました。

SEOツールで、
オウンドメディアの成長を
自動化
当社では、自社開発したSEOツールで、
企業様のWEBマーケティングを
支援しております。
経営陣が10年以上蓄積した
ノウハウが詰まったツールで、
オウンドメディアの成長を
自動化させませんか?
EmmaTools™logo

日本発、世界基準の
SEOマーケティング
ツール

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Pocket

No Comments

Post a Comment