h1タグをロゴ画像に設定して良いのかSEO

TOPページはSEO上h1タグにロゴマーク画像を使っても良いです。Altテキストが画像の説明とサイトの固有名詞を兼ねるためです。

TOP以外のコンテンツページはSEO上h1とロゴ画像とは分けるべきです。Altテキストが画像の説明とh1のテキストをを兼ねないためです。

それ以外のhタグは画像見出しを使ってもいいです。Altにキーワードをきちんと入れましょう。

今はコンテンツSEOの時代と呼ばれています

今SEOで何より重要なのは、価値ある有益な情報をユーザーに提供できているかどうかですよね。

それまでは外部リンクやheadタグのキーワードやディスクリプション、そして本記事で紹介するh1などの見出しタグの工夫が騒がれていました。

しかし最近は上記のような細かい部分にあまりこだわる必要は無いというのが一般認識でしょうか。

重要視されるのはコンテンツ

ではなぜ以前のように記述の工夫が重要視されなくなったのでしょう。

それはコンテンツがしっかりしていて評価が高ければ、他の要素がそれほどしっかりしていなくても上位表示されるからです。

しかしだからと言って、細かい部分を無視したままというのはよくないと思います。

あくまで順位は相対評価です。

SEOは「100点満点で100点を取った方が勝ち」の世界ではありません。

その時の競合他社ページと比べて、あなたのページの評価次第で優劣が決まるのです。

仮に両方のページがそれぞれ同価値（80点）のコンテンツを提供していた場合、それでもどちらが上かを判断しないといけません。

細かい事でも無視をしない事

そんな時は見出しタグの構成やh1タグの付け方が次に判断される要素になるはずです（もちろん他にもたくさんありますが）。

そこでこの見出しタグの部分だけで相手に負けてしまったらもったいないですよね。

ですので細かい事でも無視できないのです。

前置きが長くなりましたが、それでは見出し「h1タグ」にロゴ画像を使って良いのかについてみていきましょう。

見出しタグ（h要素）とは？

h要素とはHTMLタグの一つで「見出し」を表す要素です。

見出しを意味する「heading」の頭文字「h」からきています。

見出しタグが正しく使用されていれば、ユーザーにとって読みやすい文章になります。

そしてそれだけでなく検索エンジンに対してページの階層構造を正しく伝える事もできるのですね。

h1が最重要、次から順に重要度が下がる

h要素はh1からh6まで存在し、最もランクの高い見出しタグがh1で、一番下の見出しタグがh6になります。

つまり見出しの重要度はh1が一番高く、そこからh2、h3と順に低くなります。

中でもh1タグはそのページの「題名」を伝える大見出しタグとして使われることが多いです。

HTML5以降でのh1の仕様変更について

2014年にHTMLの大きな仕様変更としてW3CよりHTML5が勧告されました。

その中で見出しタグであるh要素にいくつかの仕様変更が発生します。

HTML5勧告当初

<section></section>を入れ子にした 正しい階層構造でマークアップされている場合、 その中の見出しランクは問わない

という仕様明記がありました。

つまりセクション内の見出し毎にh1が使える・ページ内でのh1の複数使用に問題は無い、という解釈が広まったのです。

HTML5.1勧告以降

<section></section>の階層に応じて、 適切な見出しランクを使用する必要がある

という仕様明記がされ、前回までのh1を複数使えると判断される内容は削除されました。

これにより「HTML5以前の仕様に戻ったのでは」と認識がされたのですね。

このようにHTML5以降は「h1タグを複数使用してもいい」「複数使用してはならない」双方の意見が飛び交っていました。

ページ内のh1タグの設置数

h1タグはもともとはページ内に一つしか設置できないとされていました。

HTML5記述ルールだけで言えば、複数のh1タグを設定しても問題はないとされている様です。

ただしそれはあくまでHTMLの記述仕様上のお話です。

SEO目的ならばh1タグは一つ

SEOを目的とした場合、h1タグはページ内に１つのみとする事をおすすめします。

ページの題名を指す「大見出しタグ」の役割を持つh1タグは、bodyタグ内に設定するタグの中でも最も重要な見出しです。

h1タグは、タイトルタグ（<title></title>）の次に検索エンジンがページの内容を理解するために使用していると考えられます。

複数のh1があると、極端なお話Googleがページ内容を把握する際に混乱する可能性を100％否定できません。

h2以降は出現ルールを守れば個数は自由

それに対してh2以降はそのセクション内のルールを守れば個数は自由です。

大きい数から小さい数へ順に流れていき、セクションごとにリセットされる形式であれば問題はありません

<section> h2 h3 h3 </section> <section> h2 h3 h3 h4 h4 </section> <section> h2 </section>

h1タグを設置する位置

h1タグが大見出しを意味する以上、やはりメインコンテンツ領域内上部の目立つ位置に大きく表示させるのが文書としてのルールです。

大見出しはページのトピックを伝える最も大事なテキストです。それがページ中段にあるのはそもそもおかしいと言えます。

それに見やすい位置に大きく表示させればユーザーの目に留まり、ページテーマをすぐにつかんでもらえるという意味でもその利便性にかなっていますよね。

位置に関する明確なルールはない

ですがhtml記述ルールやSEOルールで明確にそう記されてはいません。

h1の設置位置はbodyタグのすぐ下でなければいけないか？といえばそうでは無いのです。

WEBサイトはそれぞれHTMLコードの書き方が違います。ヘッダータグの設計上直下に置けない場合も大いにありますよね。

ですので「役割を果たせるべく、できうる限り上部に」という事で問題は無いと言えます。

h1タグにロゴ画像を入れても良いのか

ではここから本題に入りましょう。h1タグに画像を使っても良いのかどうかです。

これまでの常識を先に走らせるのでは無く、ページの持つ役割・目的を元に説明をしていきましょう。

TOPページのh1タグにロゴマークが使われている事ってよくありますよね。

できるだけ上部にh1タグを設置するべきなのであれば、ロゴマーク部分につけたらロゴとh1とが一度に設置できて便利ですしね。

TOPページはh1タグに画像を使ってOK

TOPページ記述例

<h1> <a href="https://lpeg.info/"> <img src="images/logo.png" alt="WEBフリーランスBLOG えるぺぐ"> </a> </h1>

上記の様にきちんと画像のAlt属性にサイトタイトルを記載しておけば、問題は無いと思います。

TOPページでユーザーに一番伝えたいのは、このブログサイトの主題が「WEBフリーランスBLOG えるぺぐ」であるという事です。

WEBサイトTOPページのタイトルはほとんどの場合「そのサイトのIDを示す固有名詞」と考えられるからです。

さらにロゴマーク画像のAltテキストで「WEBフリーランスBLOG えるぺぐ」をアピールしている事は検索エンジンにも伝わります。

本サイトTOPの場合はこれで良いのです。

確かにアピールをしているのは上記の題目ですが、本当に検索にヒットさせたいのは各記事のコンテンツページですからね。

サブページではh1に画像は使わない方が良い

WEBサイトのTOPページではロゴ画像をh1で囲む事があります。それは先述の通りそれでよいと思います。

ただし、他のサブページ（コンテンツページ）では、ロゴ画像をh1に設定しない方が良いと思います。

サブのコンテンツページは、各サービス紹介や説明それから記事のページなどですよね。

ロゴ画像とh1タグを別々にする

ロゴ画像のタグとそのページの題目テーマh1タグ（テーマタイトル）は別々にしておいた方が良いです。

サブページ記述例：

<h1>コンテンツページタイトル</h1> <p> <a href="https://lpeg.info/"> <img src="images/logo.png" alt="WEBフリーランスBLOG えるぺぐ"> </a> </p>

この場合h1タグをどこか邪魔にならないところに設置します。

なぜ全ページでロゴにh1タグを使ってはいけないのか？

本来画像タグのaltテキストには、その画像写真に関する説明が入ります。

その画像が何を示した画像なのかに関する説明テキストを入れる事で、仮に画像が映っていなくてもその存在を示す事ができますよね。

TOPページでロゴマークをh1タグで囲った場合、上の説明ではAltテキストに「サイトのID・固有名詞」を入れるお話でした。

つまりAlt属性のテキストが「ロゴマークの画像説明」と「サイトの固有名詞」とを兼ねているのですね。

<h1> <a href="https://lpeg.info/"> <img src="images/logo.png" alt="h1タグをロゴ画像に設定して良いのかSEO？"> </a> </h1>

Altテキストの「WEBフリーランスBLOG えるぺぐ」が、ロゴマーク画像の説明でもありサイトIDでもあります。

これにはそんなに違和感はありません。

サブページではAltが画像説明とh1見出し内容を兼ねない

しかしサブページの場合はいかがでしょうか。

もし下記の様にロゴマークにh1タイトルのテキスト（例は本記事タイトル）を入れていたとしましょう。

<h1> <a href="https://lpeg.info/"> <img src="images/logo.png" alt="h1タグをロゴ画像に設定して良いのかSEO？"> </a> </h1>

この場合、「ロゴマーク画像の説明」であるはずのAltテキストに「h1タグとしてのページの題名テーマ見出し」が入っています。

これは、Altテキストが画像の説明とページのテーマ大見出しを兼ねる事ができていない事を指します。

同じ画像なのにページごとに説明が違う

これが全ページで同じ様に設置されていると、Googleとしては基本的にはこう思います。

「同じロゴ画像のはずなのに各ページごとに画像の説明が違ってて変だな」と。

各ページごとにh1のタイトルは変えるべきなのですから当然そうなりますよね。

Googleクローラーが他社と比べてどう思うか

もちろんあえてロゴにh1タグをつけている事くらい、今のGoogleクローラーがわからないはずはないですよね。

ただし、もし競合他社がサブページでロゴマーク画像とh1タグを別々にしていたらどうでしょうか。

他社サイトのページはロゴマーク画像のAltテキストは画像説明がしてあり、ページの一番重要な見出しであるh1タグは別に存在しているのです。

SEOはあくまで他社との差別化で順位が決まります。冒頭で説明した通りですね。

ですのでこの状態だと他社サイトの方に軍配が上がる可能性は否定できません。

Googleは全ページ共通となっている部分を特別評価しない

さらにサイトによっては未だにh1タグの画像Altテキストが全ページ同じになっているサイトがある様です。

Googleは全ページ同じ状態になっている構造部分を一通り認識はしますが、特別な評価はしません。

「共通部分」としてしか認識しないのです。

h1部分が際立たない

この場合はh1部分まで全て共通部分と認識され、一番大切なh1タグの評価がGoogleからされないままになるのです。

Wordpressサイトだときちんとh1テキストは変えれますし、今このようなケースはかなり少ないとは思います。

共通部分と思われる可能性を限りなくなくすため、ロゴ画像部分とh1タグ部分とは分けておくべきですね。

あわせて読みたい関連記事

CSSを使った工夫

では実際にサブページなどでどのようにロゴ画像とh1を両立させるのでしょう。

ロゴ画像は全ページで共通位置なのでそれほど問題は無いと思います。

しかしh1タグの場合は、デザインの問題上でテキスト文字を小さくしても設置場所がないという事もあるでしょう。

どうしても位置が確保できない場合は、CSSの「display: none;」を使っても良いと思います。

h1タグへのCSSコントロール例（私の場合）

※text-indent-9999pxは画面の左に追いやるだけです。 そのテキスト分の「高さ」分だけ空白がでるので注意です。

上記を良く使っていましたが私の場合ペナルティを受けた事はありません。

各ページコントロールの仕方と量が同じであれば問題無い

それはページを見るユーザーへの配慮であり、Googleのためでは無いからです。それはGoogleもわかってくれます。

不安なようであれば、多少のデザインには目をつぶってどこか隅の方に小さめの文字にして設置しておきましょう。

ページ最上段に一つ色付き帯を作ってそこに小さく入れても良いと思います。

オリジナル応用編（おすすめはしません）

あくまで少し前までのお話ですが私は以下の様な方法を取っていました。

TOPページもそれ以外のサブページも共通の設定で賄えて管理も簡単です。

今はWordpressやレスポンシブデザインが主流なのでこのままでは使いずらいかもしれませんが、一応ご紹介をしますね。

ロゴ画像とh1タグの記述例

ロゴ画像周りのhtml

TOPページもサブも同じタグ構成です。

<div class="logo"> <h1><a href="URL">h1見出しのテキスト</a></h1> <p class="toplink"><a href="URL"></a></p> </div>

css

.logo{ position: relative; } h1{ margin: 10px 0 0 0; padding: 0; text-indent: -9999px; } h1 a{ display: block; width: 120px; height: 70px; background: url(img/logo.png) no-repeat; } .toplink{ position: absolute; top: 10px; left: 0px; } .toplink a{ display: block; width: 120px; height: 70px; background: url(img/logo.png) no-repeat; }

記述の流れ

h1タグを用意

ロゴマーク位置に普通にh1タグを設置します。

この時h1タグのテキストはtext-indent: -9999px; で左に逃がします。

中に入れたaタグで縦横サイズを作り、背景画像を表示しています。

これでロゴマークが表示されていますが、h1テキストもきちんと表示できている状態です。

TOPページリンクを別途用意

サブページの場合、例えばabout.htmlであれば<a href="about.html">で自分自身にリンクする形です。

しかし本来はロゴマークを押すとTOPページに飛ばなければなりませんよね。

ですのでh1タグ内のリンクとは別にTOPへ戻るリンクが必要になります。

display: block;でロゴマークと同じ縦横サイズにしたpタグを作り、別途TOPページへ飛ばすリンクを構成します。

このpタグのTOPリンクを絶対配置でh1ロゴ画像の上に重なる様に設置します。

これでロゴマークを押せばTOPページへ飛ぶし、ソース上のh1タグテキストは各ページ自由に設置ができるという訳です。

h2以降のhタグが画像の場合はキーワードを入れる

見出しタグにはキーワードを設定する事が重要

普通はユーザーも検索エンジン側も、一番重要な見出しであるh1タグのキーワードを通じてページのメインテーマを把握するでしょう。

しかしそれ以外にh2～h6にもキーワードを適切に設定するべきです。h1程でなくてもページ内の各構成の把握に役立ちます。

見出しタグに画像を設置している場合はAltテキストにきちんと入れる

見出し画像の場合はロゴ画像と違い、Altテキストが「見出し画像の説明」と「見出しタグのテキスト説明」を兼ねますよね。

ですのでh2からh6タグは画像を使っても問題は無いと思います。

きちんと見出しタグにキーワードを設置する事で、検索上位の効果が見込めると言えますね。

※あとはそのテーマと文章がマッチした価値あるものかどうかが判断されます。

やり過ぎはペナルティを受けるので注意

見出しタグや画像のAltテキストに検索キーワードがたくさん埋め込まれていた場合、検索エンジンからペナルティを受ける事があります。

これは通常のテキストと全く同じ感覚です。故意に多くの検索キーワードを盛り込むことは良いとは言えません。

あくまで見出し文章として自然な配分になるようにしましょう。

あわせて読みたい関連記事

まとめ

いかがでしたか。本記事をまとめると以下の様になると思います。

本来h1を含む見出しタグは、ユーザーが見てわかりやすい構成になるよう案内をするものになります。

ですのでGoogleの検索エンジン側も見出しタグを通してページ内を把握しています。

あくまでコンテンツありき

しかしその見出しで検索順位を決定している訳ではありません。あくまで評価の中心は内容部分（コンテンツ部分）です。

その意味ではh1タグで全ての評価をしている訳では無いのですね。

極端なお話h1タグにロゴ画像を使っていようが使っていまいが、コンテンツが他社と比べて抜群に良ければ上位表示されます。

ですのでh1がロゴ画像である・ロゴ画像でない、に左右されない位にコンテンツを磨くべきといえますね。

一押し人気コーナー紹介