アンカーリンクとは?設置方法とSEO効果を高めるポイント
( 最終更新日:2024年6月4日)
アンカーリンクを適切に設置すると、ユーザーの利便性やウェブサイト全体の評価が上がります。細かい部分ではありますが、情報の探しやすさが重視される現在のSEO対策において、アンカーリンクの最適化は欠かせません。
アクセス数やコンバージョン率を上げるには、どのようにアンカーリンクを設置すればよいのでしょうか。本記事では、アンカーリンクのSEO効果や使い方、適切に設置するポイントを解説します。
目次
アンカーリンクとは?
アンカーリンクとは、ウェブサイト内で指定したページや、同一ページの指定場所にユーザーを移動させるリンクです。HTML(サイト製作用の言語)の世界では、「aタグ」と表現されます。
ウェブサイト内で指定したページに飛ばすアンカーリンクは、「内部リンク」とも呼ばれるものです。通常のSEO対策では、ユーザーが興味をもちそうな関連するコンテンツのリンクを掲載します。例として、本サイトのアンカーリンクを張ってみましょう。
同一ページの指定場所にユーザーを移動させるリンクとしては、「目次」や「ページトップに戻る」が代表的なものです。また、下記のコンテンツで紹介しているように、指定した表やリスト、参照データなどに飛ばすアンカーリンクもよく見られます。
アンカーリンクを設置する目的は、必要な情報を探しやすくすることです。アピールしたい情報や、訴求したいサービスのページに飛ばす例もありますが、SEO対策では「情報の探しやすさ」にこだわることが重要になります。
アンカーテキストとの違い
アンカーテキストとは、掲載したアンカーリンクの内容を表す文章です。前述の内部リンクでは、「失敗しない内部リンク戦略 最低限押さえておきたい6つのポイント」がアンカーテキストに該当します。
アンカーリンクを最適化するには、わかりやすいアンカーテキストを意識することが重要です。「飛んだ先になにがあるか」「どのような情報を知れるか」を明確にすると、情報の探しやすさが向上します。
ハイパーリンクとの違い
ハイパーリンクとは、外部のウェブサイトやファイルなどにアクセスできるリンクです。たとえば、Wordでは大見出しや中見出しを設置できますが、ハイパーリンクを設置すると目次から各見出しへの移動がスムーズになります。
一方で、アンカーリンクは同一のウェブサイト内で使われる機能です。いずれも特定の位置・場所に飛ばす仕組みは同じですが、設置する目的や使い方が異なります。
アンカーリンクを設置するSEO効果
適切なアンカーリンクを設置すると、ユーザーや検索エンジンからの評価が高まることにより、ある程度のSEO効果が見込めます。大手検索エンジンのGoogleも、ガイドラインにおいてアンカーリンクの設置を推奨しています。
通常は外部のウェブサイトの参照に関してリンクを検討しますが、内部リンクに使用するアンカー テキストにより注意を払うと、ユーザーや Google がサイトの内容を簡単に把握できるようになるとともに、サイト上の別のページを見つけやすくなります。関心のあるすべてのページに、同じサイト上の少なくとも 1 つ以上の別のページからのリンクがあることが推奨されます。
Google検索セントラル「Google の SEO リンクに関するベスト プラクティス」
実際にどのようなSEO効果を期待できるのか、ひとつずつ解説します。
ユーザーの利便性が向上する
アンカーリンクの役割は、ユーザーが関心をもちそうな情報やページ、参照先のデータなどを案内することです。つまり、必要な情報を見つけやすくなる効果があるため、適切なアンカーリンクはユーザーの利便性を向上させます。
ウェブサイトの利便性は、アクセス数や回遊率(※)につながる重要な要素です。ユーザーに「最後まで読みたい」「ほかのページも読んでみたい」と思わせることができれば、アクセス数や回遊率は自然とアップするでしょう。
(※)ユーザー1人あたりのPV数を表す指標。一方で、1ページのみを閲覧してウェブサイトを閉じたユーザーの割合は「直帰率」と呼ばれる。
検索順位(サイト評価)がアップする
ユーザーの利便性が高いウェブサイトは、検索エンジンからも評価されます。検索エンジンの評価要素には、ユーザーの滞在時間や回遊率の高さ(直帰率の低さ)などが含まれるためです。
つまり、適切なアンカーリンクの設置にはSEO効果があり、コンテンツによっては検索順位がアップします。あくまで評価要素のひとつですが、ほかの施策で検索順位が上がらない場合は、有効なSEO対策になるかもしれません。
インデックスにつながる
インデックスとは、検索エンジンが世界中のウェブサイトをデータベースに登録したもの(索引化)です。アンカーリンクを最適化すると、検索エンジンがページ構造を正しく理解する助けになるため、インデックスの有効性を高められる場合があります。
たとえば、SEO対策を紹介するコンテンツにアンカーリンクを設置し、「最新のSEO対策集」や「SEO記事を外注化するポイント」などの別コンテンツを紹介するとしましょう。この場合、検索エンジンのロボットはアンカーリンクを含めてコンテンツを巡回するため、「実践的なSEO対策を学べるページ」であることを伝えられます。
コンバージョン率(CVR)が改善する
アンカーリンクを最適化すると、ユーザーの滞在時間や回遊率などが向上するため、コンバージョン率(CVR)の改善にもつながります。コンテンツによっては目的のページ(サービス概要など)に誘導する方法で、申し込みや問い合わせに直接つなげることも可能です。
ただし、CVのみを目的にしたアンカーリンクは、ユーザーの利便性を下げるリスクもあります。結果的に検索エンジンからの評価が下がり、CV数が減ってしまう可能性もあるので、アンカーリンクはユーザー目線で最適化することが重要です。
アンカーリンクの種類と使い方
アンカーリンクには複数の設置方法があり、属性の種類によって効果が変わります。
- href属性:リンク先をURLで指定する
- id属性:同一ページの特定位置に飛ばす
- target属性:リンク先を新しいタブで開く
それぞれどのように使用するのか、具体的な効果と併せて解説します。
href属性(リンク先をURLで指定)
href属性は、URLでリンク先を指定するアンカーリンクです。自サイトの別ページに飛ばす場合のほか、ユーザーを外部サイトに遷移させたいときにも使用されます。
href属性の使い方は以下の通りです。
<a href=”URL”>アンカーテキスト</a>
たとえば、当社ブログのトップページに遷移させたい場合は、次のようにコードを記載します。
<a href=”https://yosca.jp/blog/”>YOSCAブログのトップへ</a>
href属性のURL部分には相対リンク(※)も使えますが、Googleは絶対リンクの使用を推奨しています。
(※)ファイルの位置のみを指定するURLのこと。すべての文字列を含めた一般的なURLは「絶対リンク」と呼ばれる。
可能な場合は、相対リンクではなく絶対リンクを使用します(たとえば、サイト内の別のページにリンクするときに、mypage.html だけではなく https://www.example.com/mypage.html とします)。
Search Console ヘルプ「クロールが完了できなかった URL のエラー 」
なお、ウェブサイト製作用のソフトウェア(Word Pressなど)には、href属性をボタンひとつで実装できるような機能が備わっているため、コードの文字列を覚える必要はありません。
id属性(同一ページの特定位置に飛ばす)
id属性は、リンク先になる特定の位置を指定できるアンカーリンクです。以下のようにhref属性と組み合わせると、同一ページの指定場所にユーザーを飛ばすことが可能になります。
【特定の見出し(h2)に飛ばしたい場合】
<h2 id="アンカーリンクの名称">見出し名</h2>
【特定のテキストに飛ばしたい場合】
<p id=”アンカーリンクの名称”>特定のテキスト</p>
【リンク元に設置するコード】
<a href=”#アンカーリンクの名称“>アンカーテキスト</a>
アンカーリンクの名称は、自身が管理しやすい文字列で構いません。仮に、当コンテンツの見出し「アンカーリンクとは?」に飛ばしたい場合は、以下のように設定を行います。
リンク先:<h2 id="midashi1">アンカーリンクとは?</h2>
リンク元:<a href=”#midashi1“>ひとつ目の見出しへ</a>
なお、リンク元となるhref属性のコードには、アンカーリンクの名称の先頭に「#」をつける必要があります。
target属性(リンク先を新しいタブで開く)
target属性は、リンク先の別ページを新しいタブで開くアンカーリンクです。リンク元のページタブを残しつつ、新たなタブで別ページが表示されるため、情報を見返したいときや比較したいケースなどに向いています。
target属性も、以下のようにhref属性と併用して記載します。
<a href=”URL” target=”_blank”>アンカーテキスト</a>
当社ブログのトップページに遷移させる場合は、次のようにコードを記載します。
<a href=”https://yosca.jp/blog/” target=”_blank”>YOSCAブログのトップへ</a>
なお、「_blank」を「_self」に変えるとリンク先を同じタブで開きますが、href属性だけでも同じ仕様になります。
WordPressでアンカーリンクを設置する手順
WordPressでコンテンツ製作をする場合は、もともと備わっている機能でアンカーリンクを設置できます。まずは、ウェブサイト内の別ページに飛ばす方法から見てみましょう。
<ウェブサイト内の別ページに飛ばす場合>
手順1:設置するコンテンツの編集ページを開く
手順2:設置場所を選択する
手順3:アンカーテキストを入力し、ドラッグする
手順4:「Link」のボタンを選択する(※下図参照)
手順5:リンク先のURLを入力して「送信」を選択する
上記の手順6で「新しいタブで開く」をチェックすると、target属性のアンカーリンクを設置できます。
次に、同一ページ内の指定場所にアンカーリンクを設置する手順を紹介します。
<ページ内の指定場所に飛ばす場合>
手順1:設置するコンテンツの編集ページを開く
手順2:リンク先の場所を選択する
手順3:画面右下の「高度な設定」を開く
手順4:「HTMLアンカー」にアンカーリンクの名称を入力する(※下図参照)
手順5:リンク元の場所を選択する
手順6:アンカーテキストを入力し、ドラッグする
手順7:「Link」のボタンを選択する
手順8:「#アンカーリンクの名称」を入力して「送信」を選択する
このように、WordPressではhref属性などのコードを打ち込む必要がありません。「アンカーリンクの名称」を変えれば、同一ページに複数のアンカーリンクを設置することも可能です。
適切なアンカーリンクを設置するポイント4つ
アンカーリンクはあくまで情報収集をサポートする機能であるため、無暗な設置は望ましくありません。ここからは、適切なアンカーリンクを設置する5つのポイントを紹介します。
1.関連性のある内容に飛ばす
どのようなアンカーリンクであっても、基本的には関連性のある内容に飛ばすことが重要です。たとえば、運営者が訴求したいページのみにリンクを飛ばす施策は、ユーザーの利便性につながりません。
どのような内容であれば関連性があるのか、以下では本コンテンツ(アンカーリンクについての解説記事)を参考に例を挙げてみます。
<本コンテンツと関連性がある内容>
- 内部リンクを活用したSEO対策
- 外部リンクの選び方と設置方法
- アンカーテキストを最適化する方法
<本コンテンツとの関連性が低い内容>
- SNSを活用した集客方法
- 分かりやすい画像や表の作り方
- インタビュー代行のサービスページ
「ユーザーの情報収集に役立つか」「新たな気づきを与えられるか」という視点をもてば、関連性が高いアンカーリンクを設置しやすくなります。
2.シンプルでわかりやすいアンカーテキストにする
アンカーテキストも、ユーザーの情報収集を助ける役割があります。「リンク先でなにを知れるのか」を表すため、シンプルでわかりやすい内容を意識しましょう。
Goolgleのガイドラインにも、同様の記述が見られます。
良いアンカー テキストとは、内容が具体的で、適度に簡潔で、テキストが掲載されているページとリンク先のページの両方に関連があるテキストです。リンクに文脈を与え、読み手の期待に沿うものです。アンカー テキストが良好であるほど、ユーザーはサイト内のナビゲーションが容易になり、Google はリンク先のページ内容を把握しやすくなります。
Google検索セントラル「Google の SEO リンクに関するベスト プラクティス」
たとえば、「詳細はこちら」や「次の記事へ」のようなアンカーテキストでは、ユーザーにリンク先の情報を伝えられません。ユーザーがひと目で「このリンクを押すべきか」を判断できるように、具体的かつ簡潔なアンカーテキストを設定しましょう。
3.リンクであることがわかる装飾をする
通常のテキストと同じデザインにすると、ユーザーがアンカーリンクに気づかない可能性があります。アンカーリンクはクリックまたはタップされてこそ効果を発揮するため、リンクであることがわかる装飾をしましょう。
例としては、以下のような対策が挙げられます。
- 通常のテキストと異なるカラー(赤や青など)を使用する
- リンクにしか使わない記号(▲や▼など)を使用する
- アンカーテキストの文字サイズを変える
アンカーテキストのカラーは青のイメージが強いかもしれませんが、ひと目でリンクであることがわかれば色にこだわる必要はありません。
4.設置後にはアンカーテキストとリンク先を確認する
アンカーリンクの設置後には、アンカーテキストとリンク先がイメージ通りになっているかを確認する必要があります。ひとつでもプロセスを誤ると、コンテンツ全体のデザインが崩れる場合もあるので、設置後には実際のページで確認をしましょう。
また、ユーザーが利用する端末によって、アンカーリンクの見え方が変わるケースもあります。モバイルフレンドリーなウェブサイトを目指している場合は、モバイル端末での見え方も確認してください。
アンカーリンクで悩んだときの対処法
実際にアンカーリンクを設置すると、思わぬトラブルに悩まされることもあります。ここからは、アンカーリンクで悩んだときの対処法を紹介します。
Q1.設置場所のズレはどうやって修正する?
アンカーリンクの設置場所にズレが生じる場合は、以下のような対策が有効です。
- 余白を入れて位置を調整する
- CSSでヘッダーの高さを調整する
- スムーズスクロールをJavaScriptで実装する
CSSでヘッダーの高さを調整する場合は、以下のコードを入力します。
#anchor{padding-top:200px;margin-top:-200px;}
上記の「padding-top」は、ヘッダーの高さを表す文字列です。また、「margin-top」は要素上側の余白領域(マージン)を表します。いずれも「200px」「-200px」の数値部分を変更することで、アンカーリンクの設置場所を調整できます。
Q2.デザインはどうやって選べばいい?
アンカーテキストのデザインは、通常のテキストや背景とのバランスから考えることが重要です。たとえば、ウェブサイトの背景色と似たカラーを使うと、文字が見えなくなる可能性があります。
なお、アンカーテキストはあくまで情報収集のサポート役なので、無理に目立たせる必要はありません。設置後の見え方を確認しながら、ほかの要素とのバランスがよいデザインを選びましょう。
Q3.スムーズスクロールをしたい場合は?
前述のスムーズスクロールは、CSSを活用すると簡単に実装できます。いくつか方法はありますが、以下ではシンプルな記述例を紹介します。
html{
scroll-behavior: smooth;
}
上記の「scroll-behavior: smooth;」がスムーズスクロールを実装するCSSであり、ページ内のhtmlタグ内に記述することで同機能が実装されます。
Q4.リンクをうまく飛ばせない原因は?
アンカーリンクをうまく飛ばせない場合は、次のような原因が考えられます。
- id属性が重複している(同じアンカーリンクの名称を使っている)
- URLが正しく入力できていない
- リンク元に記載する「#」が抜けている
- その他、コードの記載方法を間違えている
上記をひとつずつ確認して、原因を見つけたら編集ページから修正を行いましょう。
アンカーリンクはユーザー目線で最適化しよう
アンカーリンクの目的は、ユーザーの情報収集を助けることです。製品・サービスなどの訴求を目的にすると、ユーザーにとっては不要なリンクが増えるため、SEO効果が下がってしまうこともあります。アンカーリンクを活用したマーケティングもありますが、まずはユーザー目線で最適化することを目指しましょう。
本記事の内容が、貴社のビジネスにとってプラスになりましたら幸いです。当社ではWordPress入稿のサービスも行っておりますので、実際の施策で不安などがございましたら、お気軽にご相談くださいませ。
- 不動産業界で必須のSEO戦略とは?キーワードの選び方と10の施策 - 2024年7月10日
- 金融業界で必須のSEO施策とは?実践的な11のテクニック - 2024年7月10日