MENU

空の<a>要素の取り扱い

デザイン上の都合等で<a>要素を空要素にしてリンクを設定するような方法は、SEOの観点からは不利になる可能性が高い。

目次

検索エンジンの評価のされ方

  • Google などの検索エンジンは、リンクテキスト(アンカーテキスト)をリンク先ページの内容を説明する重要な手がかりとして利用します。
  • <a>要素が空(例:<a href="..."></a>)だと、リンクテキストが存在せず、検索エンジンはリンクの意味を理解しづらくなります。
  • その結果、リンク先ページの評価や関連性シグナルが弱くなります。

アクセシビリティ面での問題

  • スクリーンリーダー利用者にはリンクの意味が伝わらないため、アクセシビリティ上もNG
  • WCAG(Web Content Accessibility Guidelines)では、リンクには意味を持つテキストか代替テキストが必要とされています。

実装上の代替策

デザインの都合でテキストを見せたくない場合は、SEO的に有利な構造を保ちながら視覚的に非表示にする方法がおすすめです。

例:視覚的に非表示にしてもSEO的には残す方法

<a href="example.html">
  <span class="visually-hidden">サービス詳細ページへ</span>
</a>
.visually-hidden {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}
目次