アンカーテキストは短く、説明的に。リンクの正しい命名方法でSEOとUXを改善する

デザインの観点からアンカーリンクをどのように視覚的にスタイリングすべきかについては、さまざまな意見があります。しかし今回は、それよりもさらに重要なテーマ——「リンクのアンカーテキストをどう命名すべきか、そしてその理由」に焦点を当てます。実は、驚くほど多くのウェブサイトがこの点を間違えています。筆者自身もかつてその一人でした。

アンカーテキストとは何か

ウェブサイト上でクリック可能なリンクを作成するには、リンク先のパスをHTMLのアンカータグ <a></a> で囲みます。アンカータグには多くの属性を含めることができます。URL（リンク先のパス）、class、id、title、そしてアンカーテキストです。

アンカーテキストとは、リンクのうちクリック可能な部分を指します。つまり、アンカータグで囲まれるテキスト（リンクURLではなく）のことです。

例として、TechStackerのトップページへのリンクを見てみましょう。HTMLは次のようになります。

<a href="https://techstacker.com">TechStacker </a> 

• href=" " 内のURLが、リンク先（ターゲット）です
• >TechStacker< の部分が、リンク先へ誘導するクリック可能なアンカーテキストです

良いアンカーテキストと悪いアンカーテキストの違い

次に、同じリンクに対する2つの異なるアンカーテキストの書き方を比較してみましょう。この場合、リンク先はパフォーマンス最適化に関するページです。1つ目は悪い例、2つ目は良い例です。

なぜ1つ目のアンカーテキストが良くないのでしょうか？ 理由はシンプルです。1つ目は説明的でなく、2つ目は説明的であり、リンク先の内容と関連性があるからです。

アンカーテキスト作成のポイント

• アンカーテキストは短く保つ。 5語を超えるとレイアウトが雑然としがちです。特にデザイン上強調されたアンカーの場合は顕著です。ただし、文脈によって変わります。
• 意味のある説明的なテキストを使う。 「ここをクリック」は説明的ではありません。スクリーンリーダーを使う人にも、通常の視力の人にも、何の情報も伝えられません。
• アンカーテキストはSEOに影響する。 検索エンジンは、リンク先のコンテンツに関連性のある説明的なリンクを評価します。
• アンカーテキストはアクセシビリティにも影響する。 スクリーンリーダーが視覚障害のあるユーザーに向けて、自分のアンカーテキストをどのように読み上げるかを想像してみてください。それを命名の指針にしましょう。

まとめ

アンカーテキストはSEOとUXの両方に影響を与えます。命名に少し工夫を凝らすだけで、読者と検索エンジンの両方を満足させることができます。

この記事を執筆するにあたり、私はGoogleのSEOスターターガイドを読みました。

お気づきでしょうか？ 上記のアンカーテキストは、この記事の文脈とも、リンク先であるGoogle SEOスターターガイドの内容とも関連性があり、説明的になっています。これこそが、アンカーテキストの理想的な命名方法です。

アンカーテキストは「期待感」を生み出すもの

アンカーテキストは、クリックした先に何があるのかという期待を設定すべきです。これは、UIカードがより詳細なコンテンツ（記事や商品ページなど）のプレビューとして機能する仕組みに似ています。例としては、MediumのトップページやTechStacker自身のサイトが挙げられます。

実は私がこの記事を書いたのは、ブログ記事、コーディング、さらには買い物リストに至るまで、あらゆるコンテンツにおいて意味のある説明を使うことの重要性を、自分自身に思い出させるためでもありました。曖昧にせず、説明的に——それがすべての基本です。

デジタルプロダクトデザイナーのLuke Wroblewski氏は、こう言っています。

わかりやすさは、常に勝つ。