HTMLタグで発揮するSEO効果！タグ修正チェックリスト

SEO効果の高いWebサイト運営をするカギの一つはHTMLです。タイトルタグ、ディスクリプションタグ、h1タグなどを正しく設定し、サーチエンジン最適化することがサイトの上位表示には欠かせません。ユーザーの目につきやすく、検索エンジンからも評価されやすいタグをつかう秘訣をお教えします。

SEOとHTMLタグの関係とは

ホームページにおけるHTMLタグを人間の身体に例えるならば、人体を構成する細胞のようなものだと言えます。基本となる細胞が崩れてしまっていては、細胞から構成される体組織、各種器官、ひいては身体全体も崩れてしまいます。

HTMLソースコードにおけるHTMLタグは、それぞれの特徴や活用方法を理解して適切に使用することで、SEO（サーチエンジン最適化）に絶大な効果を発揮します。コンテンツ全体の状態を整えるためには、HTMLタグを最も細かい単位から見直しすることが必要になります。内的SEO対策や内部SEOと呼ばれるSEO対策方法のひとつに位置づけられるHTMLタグの見直し。

この記事では、SEO効果のあるHTMLタグを包括的に見直すことを目的にまとめました。各タグごとにチェック項目をまとめていますから、チェックリストとしてお使いいただけると幸いです。網羅するために、長いですけどね。

HTMLとtitleタグ

ホームページを構成しているHTMLタグの中でも、タイトルタグ（以下、titleタグと記載）はもっとも重要な重みを持つタグです。titleタグの付け方ひとつを習得するだけでも検索順位に大きく影響が出ます。

また、titleタグに記載した内容は検索結果にも表示されるため、検索ユーザーにも直接はたらきかけることになり、クリック率ひいてはサイト訪問数にも影響が出ます。このように重要度の高いtitleタグに対し、あれもこれもとキーワードを盛り込みすぎるのは禁物です。欲張らず、ページごとのターゲットキーワードを絞ることでSEO効果が現れやすくなります。

titleタグ記述の基本的な書き方

titleタグ記述の基本を示すために具体例を出して説明します。トップページとサイトのタイトルを並べるのが基本です。

「ソースカツ丼 福井」というキーワードで上位表示を狙う場合、筆者は下記のようにtitleを付けるところからはじめます。

ソースカツ丼 福井｜ソースカツ丼なら野村食堂

この書き方は、キーワード＋地域名｜もっとも重要なキーワード＋なら＋屋号という書き方で構成しています。何のヒネリもありませんが、最初に構成するならこうでしょうか。「なら」の代わりに「の」で繋いで、ソースカツ丼 福井｜ソースカツ丼の野村食堂という書き方でもいいでしょう。

また、地名を限定する必要がない場合、例えば通販で「育毛剤 通販」で上位表示されたい場合は、育毛剤通販｜育毛剤ならカミハエールのようにするのを基本とします。「｜」は「パイプ」または「たてぼう」と呼び、一般的な使用方法としてページタイトル｜サブタイトルという書き方などでもよく使います。

例えば、次のようになります。

カミハエールの成分｜育毛剤のカミハエール

「｜（パイプ）」は一般的にサブページで使用することが多いのですが、トップページでも問題ありません。トップページで使用する場合は、トップページタイトル｜サイトタイトルとなります。

titleタグの注意点

titleを作成する上では、下記のような点に留意する必要があります。近年ではGoogleアルゴリズムの進化により重視されなくなっているものもありますが、そのあたりも含め紹介します。

キーワードはなるべく前部（左側）に入れる

まさしくGoogleアルゴリズムの進化により重視されなくなったと言われているものです。上位表示させたいキーワードをなるべくtitleの左側に入れようというものです。筆者はお守り代わりに左側に寄せるようにしています。あくまでも不自然にならない程度に、です。

文字数は32文字以内にする

titleタグは文字通り「タイトル」なのですから、長すぎる文章は禁物です。シンプルに一言で表現するようにしましょう。

また、文字数が多くなればなるほど、ひとつひとつのキーワード威力が分散される。そんなイメージを持ちましょう。必要なキーワードを入れ込みつつ、シンプルにまとめるのがコツです。

ちなみに、先に紹介した「ソースカツ丼 福井｜ソースカツ丼なら野村食堂」で22文字です。「｜（パイプ）」も文字数に含みます。

キーワードの使用回数に注意

タイトルの中から、名刺（固有名詞も含む）を抽出してください。

ソースカツ丼 福井｜ソースカツ丼なら野村食堂の場合、ソース…2つ、カツ丼…2つ、福井…1つ、野村食堂…1つという構成になります。ここで、「ソースカツ丼 福井」というキーワードに着目しましょう。「ソースカツ丼 福井」とは関係のない「野村食堂」というキーワードを外して考えます。残りのキーワード3つは、それぞれソース…2つ、カツ丼…2つ、福井…1つ使用しています。

このとき、3つのキーワードをそれぞれ2回ずつ使用することはNG。仮にこの3つのキーワードを2回ずつ含んだタイトルを考えるとすると、次のようになります。

ソースカツ丼 福井｜ソースカツ丼なら福井の野村食堂

くどすぎますね。要するに、狙いたいキーワードだからといって、使いすぎると良くないということです。

上位表示させたいキーワードは1回以上使用する

いずれのキーワードも、最低1回は使用するのは当然です。では、なぜ同じキーワードの使用を2回以内にする必要があるのでしょうか？

2回以内に抑える理由は、同じキーワードの2回使用が、検索エンジンから受けるペナルティのグレーゾーンだからです。ちなみに、タイトルで同じキーワードを3回使うというのはレッドゾーンだと言えるでしょう。

また、すべてのキーワードを2回以上使用してしまうと、自然な文章にするのが難しくなります。また、文字数も多くなりすぎてしまいます。titleタグに使うキーワードは1回ずつにし、多くても2回以内に収めることをおすすめします。

キーワードが重複した不自然な文章にしない

キーワードが重複するとくどくて不自然な文章になります。極端な例を挙げてみます。

ソースカツ丼 福井｜ソースカツ丼 福井は、キーワードが重複して不自然になっている、悪い例です。また「 | （パイプ）」の後ろには、キーワードの羅列ではなく、文章に見えるようにしてください。文章に見えるようにするためには、キーワードのつなぎとして「なら」や「の」などの助詞を付けるのが自然です。

キーワードの選び方について詳しく知りたい方はこちらのページをどうぞ。
参考：SEOキーワード選びのポイントをわかりやすく解説

他のページと重複させないように

トップページとその他のサブページとして、ページタイトルがダブらないように気をつけることが重要です。ページタイトルが重ならないようにすることでGoogleのペナルティを避けられるだけでなく、それぞれのページの特徴が明確になり、タイトルの威力を存分に発揮できるのです。

例えば、トップページタイトルが育毛剤通販｜育毛剤ならカミハエールだとします。それに対して、サブページをカミハエールの成分｜育毛剤のカミハエールのようにすることで、キーワードが重複せず、それぞれのページの特徴が明確になります。

少なくとも「 | （パイプ）」の左側は、必ず変更するようにします。「 | 」の右側はサイトタイトルのため原則同じとなりますが、決して変更してはいけないということではありません。

ただし、構造的にサブページは親コンテンツ（トップページ）の子コンテンツであるため、サブページの内容はトップページに関連したコンテンツである必要があります。もし、サブページの内容がトップページと関連が少ない場合は、タイトルもトップページと関連の少ないものにせざるを得なくなり、SEO的には不利となります。

結果、そのサブページを上位表示させることが難しくなります。なおかつ、トップページ等の他ページの足を引っ張ることもあります。

タイトルとページコンテンツを合致させる

前項でも述べたことですが、ページのタイトルは、そのページの内容と合致するものになっている必要があります。

例えば「ソースカツ丼 福井」で上位表示を狙っているとしてソースカツ丼 福井 | ソースカツ丼なら野村食堂というタイトルを付けたとします。それなのに、肝心のページの内容（表示される部分＝bodyタグ内）が、ソース、カツ丼、福井などの文字が使用されず、関連性のない情報となっている場合は注意が必要です。必ず、タイトルを反映したコンテンツにするようにしましょう。

記号を多用しすぎないように

記号の☆、＃、□、！といった記号は、検索エンジンからは区切り文字として認識されます。特に！は注意です。検索においては「意味のない文字」として判断されます。よけいな装飾を施すことは控えます。

なお「｜」の場合は、ページタイトルとサイトタイトルを区切ることを目的として1回の使用はOKです。ただし「｜」の前後が続き文字として認識される場合がごく稀にあるようです。「｜」の前後には半角スペースを入れて、想定外の検索結果になるのを避けるようにしましょう。

ひとつのキーワード内に不要な空白を入れないように

例えばソースカツ丼というキーワードに対しソ　ー　ス　カ　ツ　丼のようにして間に余計な空白（スペース）を入れてしまうと、検索エンジンは「ソ」「ー」「ス」「カ」「ツ」「丼」といった単独の文字を検索エンジンの対象としてしまいます。これでは意味がないですよね。

見栄えを重視してキーワードの分割処理をtitleタグに対して行っている事例を散見します。SEO対策においてユーザーへの見栄えは重要ですが、検索エンジンへのアピールには関係ありません。

使うキーワードの順番も検索ワードを意識する

複数キーワードをtitleタグで使用する場合、使用する順番にも気を配りましょう。

例えば「ソースカツ丼 福井」で上位表示を狙うならばソースカツ丼 福井 | ソースカツ丼なら野村食堂にします。ですが、「福井 ソースカツ丼」で上位表示を狙うならば福井 ソースカツ丼 | ソースカツ丼なら野村食堂の方が良いのです。

titleタグを書く順番も検索結果に影響します。
※近年はほぼ差が無くなっていると言われていますが、お守り代わりに意識しておいてはいかがでしょうか？

ここで言いたいのは、「検索ユーザーがどのようなキーワードを入力するか？」もタイトルタグ作成の際には強く意識しておくべきということです。

不必要なキーワードは短めにする

不必要だと思われるキーワードは、限られた文字数の中ではできるだけ排除することを心がけます。不必要なキーワードとは、例えば、ソースカツ丼 福井 | ソースカツ丼なら野村食堂でございますの場合の「でございます」の部分です。不必要だと思われる文字をできるだけ排除することが大切です。

ただし、ユーザーに認識できないところまで排除してしまうとユーザビリティが落ちますから、バランスを意識しつつ排除することが大事だと言えます。

titleタグの使用例

ここで、いくつかのtitleタグ事例を紹介します。ポイントを復習しながら参考にしてください。以下の例では、特に重要なキーワードのみ2回使用するようにしています。

「お見合いパーティー 福井」で上位表示されたい

お見合いパーティー 福井 ｜ お見合いならグッドカップル

「お見合い」「パーティー」「福井」の3キーワードに小分けにし、もっとも重要なキーワードを「お見合い」としました。

「美容室 福井市」で上位表示されたい

美容室 福井市 ｜ 美容室ならヘアサロンタナカ

この場合、「美容室」と「福井市」の2キーワードです。もっとも重要なキーワードを「美容室」としました。

「フォトフレーム 通販」で上位表示されたい

フォトフレーム通販 ｜ フォトフレームならライフイズグッド

通販でご商売をされている方は、地域は関係ありませんね。

ワンパターンにならず検索ユーザーに配慮した工夫を

なお、ここでは使用例として王道のものだけを利用しています。

キーワード＋地域名｜もっとも重要なキーワード＋なら＋屋号

という構成、王道のワンパターンで構成したtitleタグですが、検索結果が全てこんな類のものならば検索ユーザーにとって不自然かつ味気ないですよね。この王道のワンパターンをベースに、少しずつ工夫していくのが望ましいといえるでしょう。

シンプルさを求めるという原則と工夫を求めるという矛盾の中で、最適なものを求めていくことが本当の王道だと言えます。

meta descriptionタグの役割

メタディスクリプションとは、サイトやコンテンツページの内容を示すもので、HTML内に記載された文章です。Googleなどでサイトが表示されたときに、タイトルやURLの下に文章が出てきます。それがメタディスクリプションです。

meta descriptionタグの設定目的は上位表示とユーザーPR

メタディスクリプションタグ（以下、meta descriptionタグと記載）の書き方にも設定ポリシーが必要です。どのような目的意識を持って、meta descriptionタグを書けばいいのでしょう。主に、2つの目的があると考えられています。

上位表示のためにmeta descriptionタグを活用

ホームページを上位表示させるかどうかの判断材料として、Googleはmeta descriptionタグのデータを参照している可能性があります。

とは言え、「お守り代わり」程度の重要度です。SEO目線では、記載しないよりは書いておいたほうがいい程度の役割です。

ユーザーへのPRのためにmeta descriptionタグがある

meta descriptionタグはホームページを構成しているHTML内において、SEO対策目的以外の重要な役割を持ちます。それは、ユーザーへのPRです。なぜユーザーへのPRになるかと言うと、meta descriptionタグに書かれた内容は、検索結果ページにおいてタイトル（title）の下に説明文・要約文として表示されます。

meta descriptioは、別名「スニペット」と呼ばれています。「切れ端」「断片」を意味する英語のスニペット（snippet）ですが、SEOでは「抜粋」の意味で使われています。

タイトル中のキーワードと異なり、検索結果に表示されたスニペットに含まれるキーワードは太字で表示されます。スニペットに検索キーワードが含まれていれば、ユーザーは「きっと私の欲しい情報が含まれているに違いない」と思うことでしょう。したがって、クリック率の向上にも繋がります。

2019年5月現在、Google検索結果は検索キーワードが含まれてもタイトル部分は太字で表示されず、スニペット部分だけ太字になります。検索キーワードが含まれたmeta descriptionタグを設定する重要度が高まっていると言えるでしょう。

meta descriptionタグ設定の注意点

ここで、良いスニペットをmeta descriptionタグに設定するための注意点を紹介します。ユーザーへのPR効果とSEO対策目線で見た上位表示効果の両方に優れたスニペットが、ここでいう良いスニペットです。

titleタグやh1タグよりも長い文章を書くこと

スニペットは「説明文または要約文」という役割ですから、当然、ページタイトルや見出しよりも長い文章にする必要があります。

titleタグやh1タグに合わせた文章にすること

ページタイトルや見出しと同じ文言では、説明文または要約文の役割をなしません。しかし、まったく異なる文章では、見出しと内容が一致しないことになってしまいます。

次の例は、良い例です。

• タイトル
  ソースカツ丼 福井 | ソースカツ丼なら野村食堂
• スニペット
  福井のソースカツ丼なら野村食堂。福井市木田の野村食堂は
  ソースカツ丼とおろしそばが看板メニュー。毎月29日の肉の日は
  先着20名様にカツ3枚増量+ごはん大盛りを無料サービス中！

重要キーワードの「ソースカツ丼」「福井」がタイトル、スニペットの両方にきちんと使用されています。また、同じ内容ではありますが、文章は異なっています。

キーワードのみの羅列ではなく、クリックされやすいPR文を書くこと

ユーザーに対するPRという観点で、読んで思わずクリックしたくなるような文言にしましょう。例えば、クリックに効果的だと思われるフレーズとして、以下のような例があります。

• サービスの効果
  売上アップ、コスト削減、など
• 具体的な数字
  最安650円～、70%オフ、30%増量、など

検索ユーザーは、検索結果のタイトルだけでなくスニペットを読んで、自身が探している内容を含んだページかどうかの判断をします。そのため、目を引くフレーズが重要となってくるのです。

次の例は、良いスニペットの例です。

福井のソースカツ丼なら野村食堂。福井市木田の野村食堂は
ソースカツ丼とおろしそばが看板メニュー。毎月29日の肉の日は
先着20名様にカツ3枚増量+ごはん大盛りを無料サービス中！

ここでは、「毎月29の肉の日は～」以降の文章で、「29日の肉の日」「先着20名」「カツ3枚増量」などを明確にPRしています。

文字数は80～100文字、最長でも110文字程度にすること

スニペットの文言は文頭に日付が入った場合、全角110文字を超えたあたりから途中で切れ、表示されなくなります。そのため、途中で切れて表示されなくなる110文字目以降の文字数は無駄であると言えます。また、長すぎることで検索エンジンからペナルティを受ける可能性もあります。

重要キーワードを先頭付近に配置すること

これは、titleタグなどと同様です。次の例を参考にしてください。

福井のソースカツ丼なら野村食堂。福井市木田の野村食堂は
ソースカツ丼とおろしそばが看板メニュー。毎月29日の肉の日は
先着20名様にカツ3枚増量+ごはん大盛りを無料サービス中！

出だしに、重要キーワードである「福井」「ソースカツ丼」が出現しています。

重要キーワードは2回ずつ使うこと

重要キーワードを使う回数は2回まで大丈夫です。しかし、3回以上使うのはペナルティ回避を考慮してNGだと考えています。同じキーワードを2回使用する場合も、不自然な文章にならないように重々気をつけましょう。

繰り返しになりますが、スニペットには検索ユーザーへのPRの意味もあります。キーワードを2回使いたいがあまり、不自然な文章になると、検索ユーザーがそもそもクリックしたくなくなっちゃいますからね。

サイト内それぞれのページでオリジナルの文章を書くこと

タイトルと同様、それぞれのページの内容に即した文章を用意する必要があります。他のページと内容を変えることで、検索エンジンからのペナルティを回避することもできます。

メタディスクリプションについてさらに詳しく知りたい方はこちらをどうぞ。
参考：ディスクリプションとは？SEOに効果的な考え方や書き方のまとめ

SEOを意識したh1タグ

h1タグの上手な活用方法を学びましょう。結論から言うと、SEOを意識したキーワードを盛り込むとよいです。順に説明します。

h1タグはtitleタグの次にSEO上で重要な意味を持つ

h1タグは、ホームページを構成しているHTML内において、2番目（titleタグの次）に重要と言われるタグです。h1タグの付け方ひとつで検索結果に大きく影響する可能性があるため、細心の注意を払ってキーワードの修正を行っていきましょう。

まず、h1タグは最も大きな見出しを意味します。サイト内の個別の記事タイトルをh1タグで記載することもあります。h1タグには、その後に続く本文の内容を表現するキーワードを盛り込みます。

例えば「福井 ソースカツ丼」で上位表示を狙う場合は次のような具合です。

<h1>福井でソースカツ丼を食べるなら野村食堂へ</h1>

<p>福井県のグルメといえばソースカツ丼。福井市木田の野村食堂は
ソースカツ丼とおろしそばが看板メニュー、30年の伝統を誇ります。</p>

h1内には、上位表示させたい「福井」「ソースカツ丼」を必ず入れます。また、h1のタイトルは、h1に続く本文の内容を表現している必要があります。

h1タグの注意点

ここからは、h1タグを作成する際の注意点を挙げます。場合によっては上位表示の妨げになりSEO効果を削ぐので注意したいところです。

本文中（<body>内）の上部に配置すること

h1タグは、本文中のなるべく上のほうに配置します。なぜなら、「大見出し」という機能を考えるとページの上部にあることが自然だから。最大効果を期待する場合は、bodyタグ直下が望ましいところです。

<body>
<h1>福井でソースカツ丼を食べるなら野村食堂へ</h1>
・・・・・・・・・・
・・・・・・・・・・
・・・・・
</body>

上記のように、<body>のすぐ下に<h1>を書くことが理想です。ただし、レイアウト等の構成上難しい場合は、必ずしも直下に置く必要はありません。

キーワードを全部（左側）に含めること

近年はその意味合いが徐々に薄れているとはいえ、一応紹介します。titleタグなどと同様、キーワードはh1タグ内の前部に配置するようにします。

キーワードの使用は1回のみにすること

h1タグ内では、重要キーワードの使用は1回のみにします。同じキーワードが何度も出てくるのは、「大見出し」という機能を考えると不自然だからです。

悪い例
<h1>福井でソースカツ丼を食べるならソースカツ丼で有名な野村食堂へ</h1>

「ソースカツ丼」を2回使用しているのは、よくない例になります。読んで違和感をおぼえるためです。

名詞の羅列にならないようにすること

他のタグと同様、不自然な文章にならないように気をつけることです。次のようなh1タグは悪い例です。

悪い例
<h1>福井県福井市ソースカツ丼人気おすすめ野村食堂</h1>

名詞をつなげる助詞などがないと、日本語の文として不自然だから避けましょう。

titleタグやh2タグと言い回しを変えること

titleタグやh2タグと同じ文言にすることは極力避けるべきです。同じ重要キーワードを含めたtitleタグに近い内容が望ましいといえます。

文字数を多くしすぎないようにすること

文字数制限は特にありません。ただ、「見出し」である以上、あまりにも長々と書きすぎることは控えるべきです。

h1タグの数は、1ページ内に1つにすること

1ページ内で、h1タグを2回以上書くことが禁止されているわけではありません。しかし、ペナルティとなる可能性も否めないため、複数回使用しなければいけないような場合は、ページを分割するようにしたいところです。

なぜペナルティとなる可能性があるかというと、やはりh1タグが使途として「大見出し」であるということが関わってきます。1つのテーマには大見出しは原則1つのほうが分かりやすいからです。

h2タグやh3タグなどの見出しをh1タグより先に書かないこと

h2タグやh3タグは、h1タグよりも下位に位置する見出しです。見出しの階層は、最も大きい見出しであるh1タグから始まるのが自然な流れ。このことは、人間（リアルなユーザー）に対しても検索エンジンに対しても同様です。

また、HTML文書としても正しい書き方ではないため、おすすめできません。

他のページと重複させないこと

ページを分けている以上は当然ですが、ページごとに内容が異なるはずです。大見出しであるh1タグの内容も、変わって当然という認識が必要です。

見えない文字や極端に小さな文字にしないこと

かつて、以下のようなスパム行為が横行していた時期がありました。

• 見出しを1～2ピクセルの極小文字で書く
• 見出しを背景と同色または近い色で隠しテキストとして埋め込む

Googleの表示順位を決めるのがクローラーロボットであることを利用し、人間の目には見えないサイズや色のキーワードを複数入れて、サイトの上位表示を目指すのが目的でした。しかし、現在ではこれらはスパム行為とみなされ、ペナルティを受ける可能性が高いです。ペナルティを受けるというのは、単に上位表示されない場合もありますし、そもそも検索エンジンにも掲載されない場合もあります。

苦労して作ったHPが全く日の目を見ないということはおおいにあり得ます。h1タグの文字サイズを、人間が認識できないほどのサイズに小さくすることはやめましょう。また、背景色と同色または近すぎる色でh1タグを記載することは、ペナルティを回避するためにやるべきではありません。人間の目には気が付かなくても、検索エンジンからはバレバレです。

CSS側でdisplay:none;で隠すことや、text-indent-9999px;（画像置換）で画面外へ飛ばしているページもあります。これらも同様に、検索エンジンからは速攻でバレますので避けましょう。

画像を使用しないこと（テキストにすること）

h1タグの内容をテキストだけではなく、画像（imgタグ）にしているページを見かけることがあります。SEOのことを考えると、検索エンジンは画像よりもテキストを評価するため、h1タグの内容を画像にしている場合はテキストに直すことをおすすめします。imgタグのalt属性値に記述された文字列が、検索エンジンから重みづけを受けることはあまり期待できません。

strongタグとの併用をしないようにすること

次の例のように、h1タグに強調要素を入れた過度なキーワード強調はペナルティ対象となる可能性がありますので注意しましょう。

<h1><strong>福井でソースカツ丼を食べるなら野村食堂へ</strong></h1>

h2～h6タグも整理する

h2～h6タグ（総じてhxタグとも言う）の使い方を学習していきます。h2、h3、h4、h5、h6の各タグは中見出し以降を表し、数の大きさによって下記のような役割になります。hタグに付く数字が小さいほど、コンテンツ内での重要度が高まります。

• h2…中見出し
• h3…小見出し
• h4…見出し4
• h5…見出し5
• h6…見出し6

HTMLファイル内でh2～h6タグを使う際は、以下のことに注意しながらソースコードとキーワードの修正を行いましょう。コーディングする上でとても大切な要素です。

h2タグには上位表示したいキーワードを含める

titleタグやh1タグと同様、h2タグにも重要キーワードを入れることで、SEO対策においての相乗効果が期待できます。ただし、文章やコンテンツ構成全体から見て不自然にならないよう気を付けてください。

またh3タグにおいても、重要キーワードは入れたほうがベターです。ただし、こちらもh2タグ以上と同様、文章構成上で不自然にならないよう注意が必要です。意識はするが気にしすぎないのがポイントです。なお、h4タグ以降は基本的にキーワードを含める必要はないと考えます。

タグ内にキーワードを詰め込み過ぎないようにする

titleタグやh1タグと同様、たくさんのキーワードを入れすぎると、それぞれのキーワードのPR力が分散されると考えてください。キーワードのPR力が弱まる＝SEO力が弱まる、のです。hxタグを効果的に活用するために、キーワードを含めた短めの文章を作るようにしましょう。

「福井 ソースカツ丼」で上位表示を狙う場合の、よい例と悪い例を挙げます。

×：悪い例
<h2>福井のソースカツ丼で肉質とお米の質、越前そばとのセットもこだわった人気おすすめランキング</h2>
※キーワードについて、あれもこれもと欲張り過ぎているからNG

○：よい例
<h2>福井のソースカツ丼、肉質で選んだおすすめランキング</h2>
※ちょうどよいキーワードの分量

hxタグの後にはpタグを入れよう

pタグは、段落を表すHTMLタグです。<p>～</p>で囲まれた部分が、ひとつの段落であることを表します。

<h2>福井のソースカツ丼、肉質で選んだおすすめランキング</h2>
<p>肉質といっても、肉厚ジューシーなカツと薄めにサクッと揚げたカツの2種類があります。それぞれをランキング形式で見ていきましょう。</p>

<h3>肉厚ジューシーなソースカツ丼が台頭</h3>
<p>近年では、従来のソースカツ丼よりも肉厚のカツを使った店舗も人気が高まっています。</p>

上の例のように、hxタグの後にはpタグを必ずセットで使用するようにしましょう。またpタグの中には、見出しタグの内容を補足するような文章を入れます。

hxタグの使用順位に注意

hxタグは、必ず昇順で記述します。h1タグの次は必ずh2タグ。その次がh3タグ…と続くようにします。

hxタグを1回ずつ使用した例

例1. ○：<h1>→<h2>→<h3>→<h4>
例2. ×：<h1>→<h3>→<h2>→<h4>
例3. ×：<h1>→<h3>→<h4>

上記例だと、例2と例3はHTMLソースコードエラーに該当します。HTMLソースコードに不具合があると、検索エンジンがきちんと巡回できず、ページ内容を正確に把握してくれない可能性が高まります。下手すると、検索エンジンに認識すらされなくなってしまうこともあるので注意が必要です。

例2のように使用順位を間違えたり、例3のようにh2を使用せずに飛ばしてh3を記述することに気を付けましょう。hxタグの使い方を間違えるとうまくコーディングできず、表示エラーが起きて、サイトが正しく表示されなくなります。

h2を2回ずつ、その入れ子であるh3を2回ずつ使用した例

次の例4は、よい例です。

例4. ○：<h1>
→<h2>→<h3>→<h3>
→<h2>→<h3>→<h3>

また、例4をHTMLで表すと次のようになります。

<h1>見出し1（内容A+内容B）</h1>
<p>ページの概要（内容A+内容B）</p>
<h2>見出し2（内容A）</h2>
<p>内容Aの概要（内容A）</p>
<h3>見出し3（内容A-1）</h3>
<p>内容A-1の概要（内容A）</p>
<h3>見出し3（内容A-2）</h3>
<p>内容A-2の概要（内容A）</p>
<h2>見出し2（内容B）</h2>
<p>内容Bの概要（内容B）</p>
<h3>見出し3（内容B-1）</h3>
<p>内容B-1の概要（内容B）</p>
<h3>見出し3（内容B-2）</h3>
<p>内容B-2の概要（内容B）</p>

複数回使用可能だが、多く使いすぎないように注意

hxタグは、同一ファイル内に複数回の使用が可能です。読みやすさを考えて、適宜使用するようにしましょう。

他の見出しやtitleと重複させないようにする

hxタグの文言が、他の見出しタグやtitleタグとダブらないようにしなければいけません。

titleタグ≠h1タグ≠h2タグ≠h3タグ≠…≠h6タグ
ということです。

次のタグは、いずれも悪い例です。

<title>福井のソースカツ丼なら野村食堂</title>
<h1>福井のソースカツ丼なら野村食堂</h1>

SEOとHTMLタグは関連大

titleタグ、ディスクリプションタグ、hxタグなどを使う際、検索エンジンからペナルティを受けないようにすること、上位表示されるようにすること、読みやすさも意識することなどが大切です。サイトのSEO効果を上げるために、ご紹介した内容をチェックしましょう。