SEO h1タグへのテキストリンクの技
TOPページのh1タグにはロゴマークを背景画像にし、WEBサイトURLをリンクしてサイトのメインタイトルテキストを入れましょう。
それに対しサブページではh1タグにTOPではなく当ページのメインテーマ見出しのテキストリンクを入れます。
この時h1タグはロゴ画像を兼ねる事ができないので、クリックしてTOPページへ飛ぶロゴのリンクを別途設置します。
テキストリンクのおさらい
それでは技術的なSEO対策の要として、まずはリンクの設置についておさらいをしていきましょう。
リンクはコンテンツSEOをマスターする以前の基礎的な技術ですので、しっかりとしたaタグへの理解・リンク対策をしておくべきです。
それがSEOのパフォーマンスを最大限に発揮する技につながります。
リンクは、リンク先の情報の正確性・信頼性を示す
aタグというのは<a href="#">テキストや画像</a>で示されるものです。SEOにおいてこのリンク（aタグ）が非常に重要視されています。
aタグで囲まれたリンクテキストや画像が、飛んだ先のページ・情報を表現したものになります。
リンクによりその先のページ情報の内容および正確性・信頼性が示されるのですね。
一般的に画像リンクよりもテキストリンクの方がリンクの効果が高いです。
リンクの数だけ信頼度が上がる
例えば〇〇ハウスを探していて、道標に「〇〇ハウスはこちらです」と書いてあれば、そっちにいけば〇〇ハウスがあるんだと当然わかります。
そのあと似たような道標をいくつも見つけたら、それだけ安心するはずですよね。
自分の回りに「あの人がAさんだよ」と話す人物がたくさんいたとすると、直接聞かなくてもその人はほぼ間違いなくAさんであるはすなのです。
リンクとはWEBサイト上で「その情報を指し示す道標」として重要な役割を担っています。
リンクを設定するaタグは、SEO対策でそのサイトの評価・価値の程度を決める上での要でもあります。
サイトのテーマタイトルを示すh1タグ
ここではTOPページ（index.html）の上部にあるh1タグを想定しています。
TOPページのh1タグと言えばWEBサイトのメインタイトルとなる一番重要な見出しタグです。
そのホームページが「何のホームページなのか」を一番に伝える見出しですよね。
ですので、TOPではこのh1タグでサイトのタイトルを囲むべきだと説明してきました。
TOPページはh1にサイトアドレスのリンクを貼る
ではこの一番重要な見出しタグであるh1タグに対し、WEBサイトのURLとなるサイトアドレスのリンクを貼ります。
ですので下記の様にサイトURLが入りますね。
仮に今あなたのホームページのTOPでh1タグにaタグが付いていない場合は必ずつけて下さい。
サイトアドレスリンク記述例
<h1><a href="https://lpeg.info/">WEB系フリーランスBLOG えるぺぐ</a></h1>
上記では「WEB系フリーランスBLOG えるぺぐ」というメイン題名にしています。
つまり「https://lpeg.info/」のURLは、「WEB系フリーランスBLOG えるぺぐ」のサイトですよ、とアピールした事になります。
titleタグも基本は同様にサイトの題名
同じく重要タグである「titleタグ」と同様で、h1タグと同じ「サイトのメインの題名」を入れるべきだと思います。
h1タグにロゴ画像が使われる場合
ここで重要なポイントをご紹介します。
ホームページにおいて、h1タグは通常ヘッダー部分の「ロゴマーク」に使われる事が多いと思います。
ロゴマーク画像のリンク例
<h1><a href="https://lpeg.info/"><img src="images/logo.png" alt="WEB系フリーランスBLOG えるぺぐ"></a></h1>
ここまでTOPページのh1タグはサイトタイトルを囲むべきとご説明してきました。
しかし上記でh1タグはロゴマークを囲っており、サイトタイトルは画像のaltタグ内に記述されています。
Wordpressサイトのテーマによって、このようにロゴ画像が使われた状態の事も多いと思います。
きちんとGoogleは把握をしてくれます。
基本的には画像のAltテキストでもリンクに問題は無いと思います。
Googleはh1タグのテキストとして認識をしてくれます。
これが原因で順位が落ちたという事には絶対になりません。マイナスにはならないという意味ですね。
画像リンクより、テキストリンクの方がリンク効果が高い
ですが本来は、サイトタイトルのテキスト（タグに直接打ち込まれた文章）をh1タグで囲っておきたいのです。
SEOでは「画像リンクより、テキストリンクの方がリンク効果が高い」という重要ルールがあるためですね。
これはリンクタグにおいて不変の決まりです。
常に「テキストリンクにできないかどうか」はチェックしたいですよね（もちろん可能な範囲でです）。
ですので私の場合はCSSを使い、よく下の様な工夫をしていました。
h1のテキストを画面から消す
下記のようにサイトタイトルを記述し、h1に「seoh1」クラスを設定します。
CSSのテキストインデントのマイナス設定・或いは非表示などでテキストを見えない様にします。
次にh1のaタグでリンク範囲を構築し、backgroudの背景画像でロゴマークを表示させます。
リンク記述例
<h1 class="seoh1"><a href="https://lpeg.info/">WEB系フリーランスBLOG えるぺぐ</a></h1>
CSS記述例
h1.seoh1{
margin: 0px;
padding: 0px;
text-indent: -9999px;
}
h1.seoh1 a{
display: block
width: 150px;
height: 80px;
background: (image/logo.png) no-repeat;
}
※上記CSSにより、テキスト自体は-9999pxのインデントでモニターの左側9999px先の延長上に移動させています。
ですのでディスプレイ上では見えません。
テキストを逃がしてもリンクは逃げない
テキストを見えなくしてもaタグのdisplay: block；の箇所は残ってくれます。
なのでロゴマークを背景にした150px×80pxの画像エリアがクリックできる様になるのです。
※クラス名は「seoh1」としていますがこれは適当につけたもので何でも構いません。
ロゴマークとh1タグが重なる場合だけです。
ロゴマークを使わずにサイトテキストがそのまま表示されても良いデザインもあるでしょう。
その場合は、上記のようなCSSを使わずにシンプルにh1でサイトタイトルを囲ってしまえばよいと思います。
ただ、デザイン的な面でロゴマークが欲しい場合が当然あります。
その場合は上の様に設定をするとロゴマークでデザイン性を保ちながら、SEO的にはしっかりとh1タグでサイトタイトルを設定できる事になります。
あわせて読みたい関連記事
h1タグリンクの仕方：サブページの場合
h1タグでそのサブページの主題を示す
前回のコンテンツSEO以外のSEO対策のページで、「サブページのh1タグではTOPページと同じタイトルは使わない」とお話しました。
同様にサブページのh1タグでは「https://lpeg.info/」のサイトURLリンクは貼りません。
サブページのh1タグは「そのサブページの主題」を示すものになるからです。
ここで一つ問題が発生します。
サブページのh1もTOPと同じ枠組みであればロゴマークの位置にあります。
ホームページのセオリーとして「ロゴマークをクリックしたらTOPページへ戻る」ようにリンクを設置しなければなりません。
先述のCSS設定を使った場合、サブページのタイトルを明記したh1タグに対し、TOPページへのリンクを設置してしまう事になります。
※ここでのTOPページへのリンクはサイトURLのhttps://lpeg.info/でもいいし、相対リンク（../index.htmlなど）でも大きな差はないと思います。
h1のテキストリンクでTOPページのリンクを紹介してしまう
結論から言いますと、サブページもTOPと同じ構成のままではいけません。
サブページの主題を記述するh1タグのテキスト内容で、リンク先のTOPページを紹介する事になるからです。
本来h1タグはそのページのテーマ命題を示す一番の見出しであるはずなのに、リンクがあるせいでちぐはぐになるのです。
h1タグとは別のタグでTOPページリンクをつける
ですのでこの場合私は以下の様にしていました。
TOPリンクのロゴ画像タグとh1タグを分ける
ロゴマークを必ずh1タグで囲う必要はないので、h1タグを別の位置に邪魔にならない様に移動させ、ページタイトルの見出しテキストを入れます。
そしてロゴマークのタグを別に設けて、TOPページへのリンクを設置します。
h1部分とロゴ部分のタグを分けた例
<h1 class="seoh1">SEO対策 h1リンクの付け方</h1> 上記h1とは別にロゴマークにリンク <a href="../index.html"><img src="../images/logo.png" alt="サイトタイトル"></a>
サブページのh1タグは個人的にですがaタグを付けても付けなくても大差はないと思っています。
気になる様であればそのページ自身のURLを付けておきましょう。
リンク記述例
<h1 class="seoh1"><a href="aaa.html">SEO対策 h1リンクの付け方</a></h1> 上記h1とは別にロゴマークにリンク <a href="../index.html"><img src="../images/logo.png" alt="サイトタイトル"></a>
ポイント
TOPページではロゴマークがh1タグだったので、サブページではh1タグ以外に別途ロゴマークのタグを記述する必要がありますね。
TOPページとサブページでh1タグの位置や管理が違ってきて細かくはなりますが、SEOのためには必要な対処をしていると自負しています。
まとめ
いかがだったでしょうか。ここまで、h1タグのテキストリンクの付け方について説明をしました。
TOPページとサブページとではh1タグのテキストリンクの付け方が違います。
TOPページのh1タグには、そのままWEBサイトのURLをリンク先にして、サイトのメインタイトルテキストをきちんと入れましょう。
その際、h1タグでロゴマークの設置を兼ねても構いません。
それに対しサブページではh1タグに当ページのメインテーマ見出しのテキストリンクを入れます。
この時h1タグはロゴマークを兼ねる事ができないので、クリックしてTOPページへ飛ぶロゴのリンクを別途設置します。
