SEOを意識したコンテンツを作成する際、HTMLタグを正しく設定することが重要です。HTMLタグを適切に使用できれば、読者・検索エンジンともにコンテンツの内容が正確に伝わるため、より多くの人にコンテンツを楽しんでもらえるようになるでしょう。

本記事では、特にSEOに効果的なタグ10選を詳しくご紹介します。また、初心者が悩みがちなタイトル・メタディスクリプション・ヘッダータグの考え方についても解説します。本記事を最後までお読みいただくことで、それぞれの意味や書き方を理解し、SEOに効果的にタグを使えるようになります。

HTMLタグとは？

HTML（HyperText Markup Language）タグとは、Webページを作成する際にコンテンツを構造化するために使用される言語です。HTMLタグを使用することで、コンテンツに強弱をつけたり、要点を明らかにしたりできます。

構造が明らかになることで、読者にとっても、検索エンジンにとっても、読みやすいコンテンツになります。そのため、コンテンツが上位表示されやすくなり、結果的に多くの人に読んでもらえるコンテンツになります。

HTMLタグは、開始タグと終了タグのふたつのタグがセットで使用されます。例えば、タイトルタグを指定する際は、<title>という開始タグを使用し、</title>という終了タグでここまでがタイトルであることを示します。

SEOに効果的なタグ10選

HTMLタグの種類はたくさんありますが、初心者の場合、よく使用されるタグから学んでいくとよいでしょう。よく使用されるSEOに効果的なHTMLタグは、次のようなものがあります。

タイトルタグ <title>

タイトルタグは、コンテンツのタイトルを指定するタグです。本記事の場合、HTML上では、「<title> SEOに効果的なタグ10選とタイトル・メタD・ヘッダーの書き方を紹介</title>」という記載し、タイトルを 指定しています。

キーワード検索をしたユーザーはタイトルを頼りに、どのコンテンツを読むのかを決める傾向があるため、好印象を与えるタイトルを付けることが重要です。キーワードの位置や文字数などのポイントを守りつつ、コンテンツ内容を簡潔にまとめたタイトルを付けましょう。

メタディスクリプション <meta description>

メタディスクリプションとは、キーワード検索を行った際に、タイトルの下に表示される簡単な説明のことをいいます。

メタディスクリプションは、Google社が以下のように明言する通り、検索順位には影響しません。

正確なメタディスクリプションは、クリックスルー率を向上させる可能性があります。しかし、検索結果内のランキングには影響する可能性は低いです。

引用：Google Search Central Blog

また、コンテンツがメタディスクリプションを設定していない場合、検索エンジンが自動的に考えてくれます。一見すると、メタディスクリプションは、書く必要がないように思われます。

しかし、検索エンジンによるものよりも、コンテンツに詳しい人間が読者のためにメタディスクリプションを書くことで、より魅力的にコンテンツの説明をすることが可能です。

その結果、クリック率が上がり結果的に検索順位の上昇が期待できます。

ヘッダータグ <h>

ヘッダータグとは、コンテンツ内の見出しを指定するタグのことです。ヘッダータグを設定することで、記事の構造がわかりやすくなる効果があります。

ヘッダータグには、<h1>・<h2>・<h3>などがあり、それぞれ意味が異なります。以下では、<h1>・<h2>・<h3>の使い分けについてご紹介します。

<h1>

<h1>タグは、「大見出し」とも呼ばれ、一般的にひとつのコンテンツ内で多用されることは少ないです。

タイトルでは入らなかった、キーワードを含むことで、読者にコンテンツの魅力が伝わりやすくなるメリットがあります。

<h2>

<h2>は、「二次見出し」または単に「見出し」と呼ばれ、<h1>の下に設置されます。

<h2>タグはそれぞれのセクションの要点を表し、<h2>を見るだけで内容を把握できるように記載するのがおすすめです。本記事の場合、「<h2>SEOに効果的なタグ10選</h2>」「<h2>タイトルタグを考えるポイント</h2>」などで使われています。

<h3>

<h3>は「中見出し」と呼ばれ、<h2>の下に設置されます。<h1>の下に<h3>を設定すると、構造がわからなくなってしまうため、<h1>の下に直接<h3>を設定するのは避け、必ず<h2>を挟むようにしましょう     。

本記事の場合「<h3>タイトルタグ</h3>」「<h3>メタディスクリプション</h3>」などと指定されています。

強調 <strong>

<strong>タグは、文章を強調する際に使用されるタグのことをいいます。

文章を強調するタグには、<b>・<strong>の2種類があります。<b>タグは、ただ単に視覚的に文字を太くするタグです。一方で<strong>タグは、視覚的に文字を強調するだけではなく、検索エンジンに内容が重要であることを伝える役割があります。

「文章のすべてが大事だ」と考えて、<strong>タグを多用すると、悪質なコンテンツであるとペナルティが与えられる可能性があります。そのため、文章の中でも特に重要な部分を選んで使用したほうが賢明です。

画像の代替テキスト <alt>

<alt（オルト）> は、なんらかの原因で画像が表示されないときに、画像に代わって表示される文章のことをいいます。また、<alt>は、目が見えない人がコンテンツを読むときに、画像を表す説明として読まれます。

検索エンジンは、画像の意味を読み取ることを苦手としているため、<alt>を使用することで適切に「なぜこの画像を使用しているのか」を伝えることが可能です。

読者がコンテンツを読みやすくするために画像を使用した場合は、<alt>で、使用している写真を一言で表す内容を設定しましょう。例えば、バラの花の画像だった場合、単に花と設定するのではなく、赤いバラの花など具体的に設定するとよいでしょう。

<alt>は、以下のように、画像を表す<img>内にコードされます。

<img src=XX.jpg” alt=”オルトタグの内容” width=”画像の幅” height=”画像の高さ”>

他のタグのように単独で使用せず、必ず<img>タグとともに使用する点を覚えておきましょう。

表 <table>

<table>タグは、コンテンツ内に表を作成する際に使用されるタグです。

コンテンツ内に表を挿入することで、データを整理・比較できるようになるメリットがあります。

表は直接的に検索順位を上げることはありませんが、ユーザーフレンドリーなコンテンツを作成しやすくなります。そのため、表を使用したほうがわかりやすい場合は、積極的に活用するといいでしょう。

コンテンツ内に表を挿入する際、<table>タグ以外にもさまざまなタグが使用されます。例えば、以下のような表を見てみましょう。

一見、HTMLタグは関係ないように見えますが、以下のようにコードされています。

<table>

<tr>

<th>セル1</th>

<th>セル2</th>

</tr>

<tr>

<td>セル3</td>

<td>セル4</td>

<td>セル5</td>

<td>セル6</td>

</tr>

</table>

それぞれのタグの意味をチェックしてみましょう。

セル1・セル2は表の中でもヘッダーと呼ばれる部分であるため、コード上部で定義されます。一方で、データの内容は、コード下部の<td>タグで入力します。このように、同一の表であっても、場所によってタグが違う点を覚えておきましょう。

リストタグ <li>

リストタグは、コンテンツ内にリストを作成する際に使用されるタグです。リストを使用することで、並列する内容や順序がわかりやすくなったり、読者が重要なポイントを理解しやすくなったりするメリットがあります。

また、リストタグはSEOに効果的なタグであり、適切な場所にリストタグを使用していると、強調スニペットを取得することが可能です。例えば、「XXの材料は？」というキーワードを調べる読者には

などと、リストタグで簡単にまとめているものが、強調スニペットに選ばれる可能性が高まります。リストだけではなく、そのほかの要素が合わさって選ばれることが多いため、一概に、リストだけ充実していれば良い、というわけではありません。

リストタグには、「順序があるもの」と「順序がないもの」の2種類があります。

順序があるものは、ステップに分けて説明するときに役に立ちます。順序があるHTMLコードは、以下のように表されます。

<ol>

<li>まずは、〇〇を切る</li>

<li>次は、〇〇を水につける</li>

<li>その次は、XXを切る</li>

</ol>

順序がないものは、並列する内容を列挙する際に使用されます。順序がないHTMLコードは、以下のように表されます。

<ul>

<li>じゃがいも</li>

<li>人参</li>

<li>鶏肉</li>

</ul>

順序がある場合は<ol>、ない場合は<ul>であることを知っていると、途中で順序あり・なしを変更したくなった際に便利です。

ハイパーリンク <a>

ハイパーリンク（リンク）は、コンテンツから別のページに飛ばす際に使用するタグです。例えば「ログインはこちら」のように、読者にクリックをしてもらうことで、スムーズに目的のページへ移動してもらうことが可能です。

ハイパーリンクは、検索エンジンがリンク先のコンテンツを見つけやすくなる効果もあります。また、被リンク（他のコンテンツにリンクをされる）を増やすことは、検索順位を上げる効果があります。

「ログインこちら」のハイパーリンクのHTMLコードは、以下の通り。

<a href=”https://www.example.co.jp/”>ログインはこちら</a>

<a>は、以下のページに転送することを示し、「href= “XXX.com”」でどこのページに飛ばしたいのかを指定します。「ログインはこちら」は、アンカーテキストと呼ばれるテキストで、読者に見える内容です。

段落<p>

pタグは「paragraph（段落）」の頭文字を取ったタグで、段落を設置します。pタグは、ユーザビリティを上げるために、ほとんどのサイトで使われています。

pタグを使用していなければ、段落がない長い文章になってします。ヘッダータグの下に文章を書く際は、段落を明確にするために、<p>タグを使用することがおすすめです。

正規タグ <canonical>

<canonical（カノニカル）>タグは、Webサイト内で類似もしくは、同様のコンテンツがある際に、検索エンジンに優先的に評価してほしいページを指定する際に使用します。

例えば、「色だけが異なるワンピースA」の販売ページは、「サイズ」「値段」「写真」などが同じであり「色」のみ要素が異なります。このようなやむを得ない事情があっても、<canonical>タグを付けていなければ、重複コンテンツがあるとみなされてしまいます。

また、ページ評価が色ごとに分散してしまうこともあります。その結果、サイト評価を下げることにつながってしまう可能性も高いです。

canonicalタグをつけることで、ワンピースAに関するページ評価をひとつのURLに統一することが可能です。それにより、重複コンテンツの問題を解決できます。

ここではECサイトを例に上げましたが、

などのシーンでも、<canonical>タグを指定しなければなりません。正当な評価を得るためにも、<canonical>タグを忘れずにつけましょう。

タイトルタグ <title>を考えるポイント

キーワード検索を行った読者が記事を読むかどうかを決定づける「タイトル」は、SEOタグの中でも非常に重要です。魅力的なキーワードを考えることも大事ですが、読者に選ばれるためのテクニックを知っておくことも必要です。以下では、タイトルタグ <title>の考え方についてご紹介します。

キーワードは前半に配置する

キーワード検索をした読者は、並んでいる複数のタイトルを見たとき、熟読するのではなく数秒で何を読むのかを取捨選択します。そのため、コンテンツキーワードは前半に含めることが大切です。

キーワードを前半部分に配置する際は、不自然にならないようにすることが重要です。タイトルを決めたら、日本語的におかしくないか、意味は通じるのかなどをチェックしましょう。

文字数は30文字程度にする

タイトルが長すぎてしまうと、キーワード検索を行った際に「……」とタイトルが最後まで表示されません。そのため、タイトルの文字数は30文字程度にすることが一般的です。

ユーザーが使用しているブラウザや、パソコン、スマホなどによっても表示される文字数は異なります。例えば、パソコンの場合は30～32文字程度、スマホの場合は30～41文字程度が適切とされています。

よって、30文字程度にしておけば、どのような、ブラウザ・デバイスであっても、タイトルが最後まで表示され、記事が何を説明しているのかを読者に伝えることが可能です。

サブキーワードも効果的に入れる

タイトルタグには、メインキーワード以外のサブキーワードも、効果的に入れることをおすすめします。

例えば、メインキーワードが「SEO」の場合、サブキーワード「とは」「対策」などの言葉をタイトルに入れると、読者を惹きつけられる可能性が高まります。「SEOとは？SEO対策についてSEOの専門家が解説」などと、メインキーワードを重ねるのではなく、読者の興味がありそうなサブキーワードを散らしたタイトルをつけると良いでしょう。

また、メインキーワードであるSEOは日本語で「検索エンジン最適化」ともいうため、「SEO対策とは？検索エンジン最適化の方法を徹底紹介」といったタイトルをつけると、「検索エンジン最適化」で検索をした人にもコンテンツを読んでもらえる可能性が高まります。

タイトルを重複させない

自社コンテンツもしくは、他社コンテンツと同様のタイトルを使用することは、避けたほうがいいとされています。

全く同じタイトルのコンテンツがあると、検索エンジンにコピーコンテンツとみなされる可能性が     あります。また、読者が困惑してしまう原因にもなってしまうため、タイトルを決めた後は、同様のものが使用されていないかチェックしてから、使用するようにしましょう。

数字やカタカナを入れる

魅力的なタイトルタグを考えるコツに、数字やカタカナを入れることがあります。数字やカタカナは人間の興味を惹きつける要素があります。ひらがな・漢字だけよりも、読者に読みたいと思わせることが可能です。

例えば「SEOに効果的なタグを紹介」と「SEOに効果的な5つのタグを紹介」の2つのタイトルでは、読者の好みによりますが、後者のほうが、具体的な内容を紹介してくれる期待感を、     持たせることができるでしょう。

メタディスクリプションを書く際の3つのポイント

記事を簡潔に説明するメタディスクリプションは、検索エンジンが自動出力するよりも、魅力的な内容を書くとよいでしょう。メタディスクリプションを書く際は、次のポイントを押さえたうえで記載するのがおすすめです。

120文字程度の長さにする

メタディスクリプションはタイトルと同様に、文字数に気をつけて記載する必要があります。

ブラウザによって異なりますが、パソコンの場合は90〜120文字・スマホの場合60文字程度であれば、途切れずに表示されます。そのため、長くても120文字以内に収めることが大切です。

メタディスクリプションは、読者がタイトルと同様に記事を読むかどうかを決める要素です。ダラダラとした長い説明を書いても魅力であると思われないので、要点を120文字以内に絞り込みましょう。

メタディスクリプションが120文字以上の場合でも省略されずに表示されることもあります。Google社がどのようなメタディスクリプションを評価するか、アップデート情報をチェックすることが大切です。メタディスクリプションをSEO的にも、最適な文字数にすることを意識しましょう。

キーワードを含める

タイトルと同様に、メタディスクリプションには、キーワードを含めることが大切です。

「SEO」「対策」「とは？」などのタイトルに含めた、サジェストキーワードだけではなく「使い方」「コツ」などの魅力的なキーワードを含めましょう。サジェストキーワードだけではなく、内容に関連する言葉や、類似する言葉などを入れることも一案です。

コンテンツが何を説明しているのかを記載する

コンテンツが何を説明しているのかを簡潔に記載することで、読者の興味を引き付けやすくなります     。しかし、ただ単にコンテンツ内に書いている内容を列挙するだけでは、クリック率向上は期待できません。

メタディスクリプションは、コンテンツ内容に加えて、読者の悩みや関心を解決できることがわかるように記載するべきです。

例えば「SEOに効果的なタグの使い方をご紹介します（記事内容の説明）」に加えて「初心者でも簡単に」などターゲットを絞り込むことも一案です。また、ダイレクトに「「SEOに効果的なタグの付け方は？」「HTMLタグの意味と活用方法は？」などと悩む読者の悩みを解決します」と、解決できる内容を記載してもいいでしょう。

120文字     で、何を伝えるべきかをしっかりと熟考した     うえで、記載することをおすすめします。

ヘッダータグを書く際のポイント

ヘッダータグを書く際は、次のようなポイントに気をつけましょう。

以下では、それぞれのポイントについて詳しくご紹介します。

<h1>とタイトルの趣旨が同じである

ヘッダータグを考える際は、<title>の趣旨にあわせて<h1>タグを考えることが大事です。

<title>タグを見て、読むことを決めた読者が初めに目に入るものは、<h1>タグです。<title>タグと<h1>タグの内容が異なっている場合、読者は内容が矛盾していると困惑してしまう可能性が高いです。ブラウザバックをされてしまう可能性が高まるため、検索順位に大きく影響を与えてしまいます。

悪質なコンテンツであるとみなされないように、内容にズレが生じないよう<h1>・<title>を考えましょう。

<h2>から<h3>の順に使用する

ヘッダータグは、<h2>の下には<h3>、<h3>の下には<h4>と順番が決まっていることに注意しましょう。

例えば、以下のように順番が適切ではない場合、コンテンツの構造がわかりにくくなってしまいます。

構造をわかりやすくするためのタグを間違えると逆効果になってしまうため、<h2>→<h3>→<h4>の順番になっているか確認しておきましょう。

ヘッダータグは並列させる

ヘッダータグは並列させて、使用することが一般的です。以下の不適切な例をチェックしてみましょう。

上記の例の場合、H3が「動詞」「名詞」「形容詞」と内容がバラバラであり、H3だけを読んでもすぐに理解することはできません。ヘッダータグは並列させると以下のように、表現できます。

このように、H2の下に配置した複数のH3の表現や内容を並列することが重要です。同様に、それぞれのH2を並列させて記載すると、読みやすい文章になるでしょう。
 

よくある質問（Q＆A）

まとめ

SEOに効果的なタグと言われているHTMLタグは、読者・検索エンジンともにコンテンツを読みやすくさせる重要な要素です。HTMLタグは、たくさん使用すればいいというものではなく、記事内に適切に使用することで効果を発揮します。HTMLタグになれるためには、実際にHTMLを触って慣れることが一番です。自社コンテンツ作成に携わる際は、WordPressの「ビジュアル」モードだけではなく、「テキスト」モードでもコンテンツをチェックしてみることをおすすめします。本記事を理解したうえで、HTMLタグに触れることで、その特性や使い方を徐々に学んでいきましょう。

SEOとWEBマーケティングの東京SEOメーカーTOPへ戻る