アンカーリンクとは？アンカーテキストとの違いとaタグの付け方

「アンカーリンクもアンカーテキストも、リンクのことを言っているのだろう」。2つの言葉はどちらも「アンカー」で始まり、HTMLでリンクを作るa要素の話で一緒に出てくるため、同じものの言い換えに見えます。ところが、アンカーリンクは読者をページの決めた位置へ移動させるリンクで、アンカーテキストはそのリンクとして画面に表示される文字です。2つは1本のaタグの別々の部分なので、作るときも直すときも分けて扱います。

本記事では、2つの言葉の違いから、aタグでの付け方、表示する文字の決め方、うまく動かないときに直す場所まで、SEO対策を手がける会社の視点で順を追ってお伝えします。

アンカーリンクとは

アンカーリンクとは、クリックすると同じページや別のページの決めた位置へ移動するリンクです。長い記事の目次から各見出しへ飛ぶリンクや、ページの下から先頭へ戻るリンクが、アンカーリンクにあたります。

「アンカー」は、HTMLでリンクを作るa要素の呼び名です。MDNのa要素の解説では、アンカー要素はhref属性で、別のページや同じページの中の場所などへのリンクを作る要素とされています。

アンカーリンクを似た2つの言葉と並べると、移動できる範囲は次のように分かれます。

「アンカーリンク」は、a要素で作るリンク全般を指して使われることもあります。依頼や会話で「目次」「見出しへ飛ぶ」と一緒に出てきたら位置へ移動するリンク、記事から別の記事へ張るリンクの話ならリンク全般の意味だと見分けます。

アンカーリンクとアンカーテキストの違い

アンカーリンクとアンカーテキストの違いは、アンカーリンクがリンクの行き先を決める仕組みで、アンカーテキストがそのリンクとして画面に表示される文字だという点です。1本のaタグで見ると、2つは別の場所に書かれます。

<a href="#price">料金の一覧</a>

hrefの「#price」がアンカーリンクの行き先で、クリックするとidが「price」の要素へ画面が移動します。開始タグと終了タグの間にある「料金の一覧」がアンカーテキストです。Googleのリンクに関するベストプラクティスには、アンカーテキストはユーザーやGoogleにリンク先の情報を伝えると書かれています。

2つは、決めることと、間違えたときに起きることも違います。

アンカーテキストは、アンカーリンクだけにあるものではありません。別のサイトの記事や別のページへのリンクにも表示される文字があり、どれもアンカーテキストと呼ばれます。

Web担当者

「目次にアンカーリンクを付けて」と頼まれました。目次の文字を見出しと同じにしておけば足りますか？

Writers-hub
編集部

目次の文字をそろえるのは、アンカーテキストを決める作業です。アンカーリンクとして動かすには、見出しにidを付け、目次のリンクのhrefに「#」とそのidを書く作業が別に要ります。

aタグでアンカーリンクを付ける3つの手順

aタグでアンカーリンクを付ける作業は、次の3つの手順に分かれます。1つでも抜けると、移動しないリンクか、行き先の分からないリンクになります。

飛び先の見出しと、同じページから移動するリンク、別のページから移動するリンクは、それぞれ次のように書きます。

<h2 id="price">料金</h2>

<a href="#price">料金の一覧</a>

<a href="/service/#price">サービスの料金の一覧</a>

MDNのid属性の解説によると、idは空白以外のどの文字でも付けられます。ただし、「1234」のような数字だけのidは、CSSのセレクターや、JavaScriptのquerySelector()で指定するときにエスケープという処理が要ります。priceやfaqのような英字のidにしておけば、そのまま使えます。

アンカーテキストに書く言葉の決め方

アンカーテキストには、リンクの文字だけを読んでも移動先に何があるかが分かる、具体的で短い言葉を書きます。Googleのリンクに関するベストプラクティスは、良いアンカーテキストを、内容が具体的で適度に簡潔で、掲載ページとリンク先の両方に関連があるテキストとしています。

リンクの文字だけを読んで、移動先の中身が分かるかで確かめます。Googleも、文脈から切り離してアンカーテキストだけを読み、意味が通じるかを試すよう勧めています。MDNのa要素の解説には、支援ソフトウェアにはページのすべてのリンクを一覧にする機能があり、リンクの文字は文脈から外れても行き先を示すべきだと書かれています。

次のような言葉は、移動先の中身を伝えないため避けます。

• 「こちら」「詳細」のように、どこへ移動するか分からない言葉
• URLをそのまま書いた文字
• 「〜へのリンク」「リンク先：」のように、リンクであることを言うだけの言葉
• キーワードを詰め込んだ長い文
• 文字を入れない空のaタグ

位置へ移動するアンカーリンクでは、移動先の見出しと同じ言葉か、見出しを短く言い換えた言葉にします。目次の「こちら」を「料金の一覧」に変えると、読者は目次と見出しを見比べて、移動した先が目当ての場所かを確かめられます。

画像をリンクにするときは、画像の説明として書くalt属性が、Googleにアンカーテキストとして使われます。altにも、移動先の中身が分かる言葉を書きます。別のページへの内部リンクでキーワードをどこまで入れるかは、アンカーテキストの書き方と例で扱っています。

Google の SEO リンクに関するベスト プラクティス | Google 検索セントラル | Documentation | Google for Developers

Google は、ページの関連性を判断し、クロールする新しいページを見つける際にリンクをシグナルとして使用します。リンクをクロール可能にしてアンカー テキストを改善する方法を紹介します。

🌐 developers.google.com

外部リンク

アンカーリンクで起きる問題と直す場所

アンカーリンクで起きる問題は、行き先の問題か表示する文字の問題かで、直す場所が変わります。

移動はするものの位置がずれるときの直し方と、WordPressで付けるときの手順は、アンカーリンクの仕組みとずれるときの直し方にまとめています。

制作会社や社内の担当者に直してもらうときは、「アンカーリンクを直して」とだけ伝えないようにします。「目次のhrefと見出しのidが合っていない」「目次の文字が見出しと違う」のように、どちらの部分かを書いて頼むと、直す人が直す場所を探さずに済みます。

アンカーリンクのよくある質問

アンカーリンクを付けるときに迷いやすい3つの質問に答えます。

飛び先にname属性を使ってもいい？

飛び先はname属性ではなく、id属性で付けます。MDNのa要素の解説では、name属性は非推奨の属性とされ、代わりにid属性を使うよう書かれています。古いページでa要素にnameを付けた飛び先を見つけたら、見出しのタグに同じ名前のidを付け直します。

ページの先頭へ戻るリンクはどう書く？

ページの先頭へ戻るリンクは、href="#top" か href="#" と書きます。MDNのa要素の解説には、この2つの書き方で今のページの先頭にリンクできることがHTMLの仕様書で定められていると書かれています。アンカーテキストは「ページの先頭へ戻る」のように、行き先が分かる言葉にします。

ボタンの形のリンクもaタグで作る？

ページや位置へ移動するリンクは、見た目がボタンでも、href属性を付けたaタグで作ります。Googleのリンクに関するベストプラクティスには、Googleはhref属性のないa要素や、スクリプトのイベントで動くリンクから、URLを確実に取り出せないと書かれています。メニューの開閉のように移動しない操作には、MDNのa要素の解説が勧めるとおり、buttonタグを使います。

まとめ｜アンカーリンクは行き先、アンカーテキストは表示文字

アンカーリンクは、hrefの「#」とidで、ページの決めた位置へ読者を移動させるリンクです。アンカーテキストは、そのリンクとして表示される文字で、移動先に何があるかを読者とGoogleに伝えます。

付けるときは、飛び先にidを付け、hrefに「#」とidを書き、タグの間に移動先の中身が分かる言葉を書きます。移動しないときはhrefとidを、行き先が伝わらないときはアンカーテキストを直します。

私たち合同会社Writers-hubは、滋賀のSEO対策として、現状の分析と設計から実行、毎月の報告と見直しまでを行っています。