どのようなホームページでも、たいてい左上にロゴが表示されています。企業サイトであれば企業のロゴが、ブランドサイトであればブランドのロゴが入ります。
ホームページ制作を仕事とされている方は、「ロゴには、何のHTMLタグを使用すべきか？」と悩んだり疑問に思ったりしたことがあるはずです。
もちろん、ロゴは画像であることがほとんどですから、imgタグが用いられます。そのimgタグを「何のHTMLタグでマークアップすべきか？」で悩んだことがあるはずです。
この記事では、会社の事情によってことなることを、ご説明したいと思います。そして、ロゴに使用するHTMLタグが何かによって、SEO対策のレベルがおおよそ判ってしまうことも、お伝えしたいと思います。
ロゴによく利用されているHTMLタグは「h1タグ」
ロゴによく利用されているHTMLタグは、h1タグです。h1タグとは、見出しタグの1つで、「もっとも大きな見出し」のタグです。
見出しタグとは？
見出しは、文章を読みやすくするために入れられる、文章の要約が書かれた部分のことです。たくさんの文字だけが書かれた文章よりも、ところどころに見出しが入っている文章の方が、読みやすい文章になります。
見出しは、大見出しや小見出しといった、階層になっています。HTMLの見出しタグも階層になっており、h1タグは見出しタグの中でも最も大きな見出しに用いるタグです。見出しタグの階層は、h1～h6と6段階あります。
とても文字数の多いページを手掛けたとしても、h6まで使用することは稀で、たいていはh3からh4ぐらいまでで事足ります。
ロゴにh1タグを使用しても良いのか？
結論を先に述べるとするならば、「ダメではないが、正しくHTMLタグを使用したいのであれば、ロゴにh1を使用すべきでない」ということが、私の見解です。
h1タグは、見出しに使用されるべきHTMLタグですから、ロゴに使用することは、本来間違いなのです。
ですが、ロゴにh1タグを使用したとしても、ホームページの見た目はCSSで調整されるので、HTMLタグの意味を知らない人からすると、何ら問題は感じられません。その証拠に、多くのホームページのロゴにh1タグが使用されています。
見出しに使用されるh1タグがなぜロゴに使用されるのか？
企業がホームページを制作したら、SEO対策を意識するはずです。なぜなら、自社のホームページが、自社名でネット検索したときに、1位にヒットしなかったらショックのはずです。
いくらデザイン性の優れたホームページを制作してもらったとしても、ホームページ制作会社の技術力を疑うはずです。当社へのご相談で、「お客様のホームページを制作したが、会社名でネット検索しても上位ヒットしない。どうしたらいいのでしょうか？」といただくことが、未だにあります。
さて、h1タグの話に戻しますが、h1タグでマークアップされるキーワードは、検索エンジンからすると、タイトルやディスクリプションなどの同等に重要視されます。もちろん、imgタグのalt属性値には社名を入れます。
そして、ロゴには会社名が入っていますから、h1タグの中に会社名が含まれるので、「会社名でのSEO対策に強くなる」ということです。これが理由で、ロゴにh1タグが利用されるのです。
ロゴにh1タグが使用した場合のSEO対策の問題点
ロゴにh1タグが使用された場合、下層ページの大見出しのHTMLタグには、何を使用したら良いのでしょうか？
大見出しにh2タグを使用
今現在のHTMLのバージョンは「HTML Living Standard」ですが、かなり以前になりますがHTML4やXHTMLの時代では、「ページ中にh1タグは1つしか使用してはダメ」というルールがありました。
HTML5が出たときに、1つのページ中にh1タグをいくつも使用し良いことになりましたが、古いh1タグの使用方法を踏襲している方、古い方法を学んだ方であれば、未だにh1タグを1つしか使用していません。
実のところ、私もその方法を踏襲している一人でもあります。
さて、ロゴにh1タグを使用してしまったのであれば、ページ最上部に表示される大見出しにh2タグを使用することになります。そして、h2タグを大見出しに使用するわけですから、ページ中の見出しには、h3タグ以下が使用されます。
- ロゴにh1タグ・・・1つ
- 大見出しにh2タグ・・・1つ
- 各見出しにh3やh4タグ・・・いくつも
このように、不自然な見出しタグの使用方法になってしまいます。
コーダーさんからは、「このような見出しタグの使い方などしない」と怒られてしまうかもしれませんが、実際にこのような見出しタグの使い方をしているホームページを何度か見たことがあります。
SEO対策の観点から見ると、h1やh2タグにはSEOキーワードを盛り込みたいところです。h1タグに社名が、h2タグにはページタイトルと同じSEOキーワードのみが入り、ロングテールキーワードはh2には入らず、h3やh4に入ることになります。
SEOキーワードは、なるべくh1やh2に入れるべきなのですが、そうならない仕様のホームページですので、SEO対策に問題があると言わざるを得ません。
大見出しにh1タグを使用
では、ロゴにh1タグを使用しつつ、ページ最上部の大見出しにもh1タグを使用したらどうでしょうか？
- ロゴと大見出しにh1タグ・・・2つ
- 各見出しにh2やh3タグ・・・いくつも
ページ中の見出しタグがh2タグになるので、ロングテールキーワードがh2タグに盛り込まれ、SEO対策としては魅力に感じます。
ところが、h1タグが2個になるので、h1タグのSEOキーワード数が増えてしまいます。すると、SEOキーワードの重みづけが分散されてしまって、本来上位ヒットさせたいSEOキーワードの重みが下がってしまいます。
つまり、SEO対策としては、都合が悪いと言えます。
SEO対策をガチガチに行いたい場合は、ロゴにはdivタグを用い、ページ最上部の大見出しのみにh1タグを用いた方が良さそうです。
このページの冒頭で「ロゴに使用するHTMLタグが何かによって、SEO対策のレベルがおおよそ判ってしまう」と述べましたが、このことがその理由です。
自社名でSEO対策しつつHTMLを正しく使用したい場合
HTMLコーディングの技術を追求するコーダーさんであれば、ロゴにh1タグを使用することを躊躇するかもしれません。しかし、社名でネット検索したときに、上位ヒットしなければお客様から叱られてしまいます。
その場合には、ロゴにh1を設定しないで、タイトルとディスクリプションに社名を入れたら、それだけでも上位ヒットすると思います。
お客様の企業名が、他の企業と社名が被っている場合には、他社ホームページよりもページ数を圧倒的に多くしつつ、できればSchema（Organization）を設定しておきます。今ご覧になられているこのホームページであれば、トップページに次のようなSchemaを設置しています。
Schemaの記述例
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "WWAVE株式会社",
"legalName": "WWAVE株式会社",
"address": "東京都港区白金台4-2-10-701",
"telephone": "03-6821-1277",
"sameAs": "https://wwave.co.jp/",
"url": "https://inging.jp/",
"brand": "チームコンサルティングIngIng",
"image": "https://inging.jp/wp/wp-content/themes/inging/images/logo2.png",
"logo": "https://inging.jp/wp/wp-content/themes/inging/images/logo2.png"
}
</script>
SchemaはSEO対策とは関係が無いとされていますが、念のための設定です。
社名でネット検索したときに1位にしたい方は、「会社名でネット検索して1位にする方法とは？社名SEOについて」もご参照ください。
トップページのロゴはh1タグ、下層ページのロゴはdivタグ
SEO対策のご相談をいただいたときに、ロゴのh1タグの設定を、次のようにしているホームページを見たことがありました。
- トップページ＝ロゴにh1タグ
- 下層ページ＝ロゴにdivタグ
トップページと下層ページでロゴのHTMLタグを使い分けているパターンで、若干手の込んだやり方です。WordPressでこの方法を実施する場合には、header.phpのロゴの部分を、if文の条件に「is_home()」を入れることで切り替えることができます。
この手法であれば、トップページは社名で上位ヒットさせつつ、下層ページは下層ページそれぞれのSEOキーワードでの上位ヒットが可能です。
なぜわざわか手の込んだh1の設置方法を採用するのか？
さて、なぜわざわざこのような手の込んだやり方をするのか、検討したいと思います。
特にBtoBトップページの場合ですが、「h1タグを設置する場所がない」と考えるコーダーさんがいらっしゃることと思います。
例えば、トップページに製品ラインナップ、お知らせ、当社製品の特長などのコンテンツが並んでいるデザインだったとして、まさか「製品ラインナップ」にh1タグを設置するわけにはいきません。
そもそも、h1タグが設置できないデザインをしたデザイナーさんに、SEO対策の知識が無い場合に起こる現象です。デザイナーさんとコーダーさんが同じ業者のメンバーで、どちらかにSEO対策の知識があり、打ち合わせができれば、「トップページにh1タグを入れたいのだが、上部にこの文字列を入れたい」と提案するはずです。
デザイナーさんとコーダーさんが別の業者で、「デザインされたものをそのままコーディングしてほしい」と言われてしまったら、コーダーさんにSEO対策の知識があったとしても、h1タグを設定する場所に困り、苦肉の策でトップページのロゴにのみh1タグでマークアップされるように設定する可能性があります。
このケースのSEO対策の問題点
トップページにのみh1タグがロゴに設置されているケースでのSEO対策の問題点は、トップページのSEOキーワードが社名やブランド名になることです。
トップページは、まさしくトップページですので、検索エンジンは最重要ページであることに疑いはしません。そして、そのトップページのh1タグですから、上位ヒットするかどうかは別として、SEOキーワードとしてビッグワードを入れておくべきです。
そして、ビッグワードで上位ヒットしなかったとしても、トップページのh1タグに設定されているSEOキーワードが、下層ページのすべてに影響する可能性があります。つまり、ロングテールキーワードで上位ヒットする可能性があります。
トップページにh1タグを設置できる場所が無い場合
トップページにh1タグを設置できる場所が無い場合は、いくつかの方法があります。
デザイナーさんにh1タグが入れられるように依頼する
1つ目は、デザイナーさんに相談して、「トップページの最上部に、この文字列を入れてもらいたい」と依頼する方法です。
デザイナーさんと連携が取れる場合には、この方法が良いと思います。
スライドの1つにh1タグをマークアップする
2つ目は、スライダーの1つにSEOキーワードを盛り込み、そのスライドをh1タグでマークアップする方法があります。
今ご覧になられているこのホームページは、前者の方法をしています。後者の方法は、SEO対策の効果があるのかどうかは判りませんが、ビッグワードで上位ヒットさせられたホームページがいくつかあります。
トップページのヘッダーにh1タグの文字列を追加する
トップページのヘッダーのロゴにh1タグを設置するのではなく、ロゴの上側や右側などに小さなテキストを入れて、そこにh1タグを設置する方法です。
その文字列は、下層ページにも入れるのであれば、下層ページはpタグになるように設定したら良いと思います。
IngIngではロゴのHTMLタグに何を使用しているのか？
IngIngでホームページ制作をご依頼いただくときは、ガチガチにSEO対策をして、集客力の高いホームページを制作することが当たり前となっています。（反対に、SEO対策をしないホームページは、お断りしています。）
IngIngのホームページ制作は、「貴社の社名を知らない人がどのようにしてホームページに訪問してもらい、商品やサービスの魅力を感じてもらい、お問い合わせなどをしてもらえるか？」を追求します。そのSEO対策は、もちろん社名でのSEO対策ではなく、商品やサービスをネット検索で探している人が使うであろう、たくさんの検索キーワードでのSEO対策です。
この場合のロゴのHTMLタグは、もちろん「divタグ」です。
ロゴにh1タグを用いてしまうと、SEO対策のパワーがそこに吸われてしまう感じがするので、divタグを用いています。
以上、ホームページの左上に入るロゴに使用すべきHTMLタグについてまとめました。ロゴに使用すべきHTMLタグは、クライアント企業様や制作会社の事情によって異なること、SEO対策をする理由によってh1タグとdivタグを使い分けることを、ご理解いただけたことと思います。
そして、ホームページのロゴに使用されているHTMLタグを見たら、制作会社のSEO対策のレベルが高いのか、それとも低いのかを判断できるようになったのではないでしょうか？
IngIngでは、次のようなサービスをお客様のご事情に合わせてご提供しています。
- SEO対策に強いホームページ、集客力の高いホームページを制作した企業様と、制作会社の仲介役
- 既存ホームページのSEO対策のご相談やSEO改善実施
- 定期的なアクセス解析や検索順位解析の実施、それに基づいたSEOコンサルティング
- ホームページ担当者へのSEO対策技術の講習会実施
強力なSEO対策や効果的なWeb集客なら、IngIngにご相談ください。
この記事の著者
経営・集客コンサルタント
平野 亮庵 (Hirano Ryoan)
国内でまだSEO対策やGoogleの認知度が低い時代から、検索エンジンマーケティング（SEM）に取り組む。SEO対策の実績はホームページ数が数百、SEOキーワード数なら万を超える。オリジナル理論として、2010年に「SEOコンテンツマーケティング」、2012年に「理念SEO」を発案。その後、マーケティングや営業・販売、経営コンサルティングなどの理論を取り入れ、Web集客のみならず、競合他社に負けない「集客の流れ」や「営業の仕組み」をつくる独自の戦略系コンサルティングを開発する。