「リンクはクロールできません」エラーの原因と解決策は？サイトパフォーマンスを向上させよう

8 min 5 views

皆さんはPageSpeed Insightsを使ってサイトの診断をしたことがありますか？最近、多くのWeb担当者が直面している問題の一つに「リンクはクロールできません」というエラーがあります。このエラーメッセージを見て、「また新しい問題が…」と頭を抱えた方も多いのではないでしょうか。

この記事では、「リンクはクロールできません」エラーの原因から具体的な対処方法、そしてサイトパフォーマンスの向上につながる施策まで、初心者の方でも理解できるよう詳しく解説していきます。

目次

「リンクはクロールできません」エラーとは何か？

エラーの基本的な意味

「リンクはクロールできません」エラーは、Googleが提供するサイト診断ツール「PageSpeed Insights」のSEO項目に表示されるエラーメッセージです。これは2022年末頃から新しく追加された項目で、以前よりも細かい指摘が行われるようになった結果として現れています。

具体的には、検索エンジンのクローラーが該当のリンクをクロール（辿る）することができない状態を指しています。Googleの公式説明によると、検索エンジンではWebサイトのクロールにリンクのhref属性を使用するため、アンカー要素（<a>タグ）のhref属性に適切なリンク先が設定されていないと、このエラーが発生します。

エラーが発生する技術的な背景

検索エンジンのクローラーは、Webページを巡回する際に以下のような流れで動作します：

  1. ページの読み込み：まずHTMLファイルを取得
  2. リンクの検出：HTML内のaタグのhref属性を検索
  3. クロールキューへの追加：見つかったリンクを巡回予定リストに追加
  4. 次のページへの移動：href属性で指定されたURLへアクセス

このプロセスで、href属性が存在しない、または空の場合、クローラーは次のページを発見できません。これがエラーの根本的な原因となっています。

エラーが発生する具体的なケース

1. ドロップダウンメニューの項目

ナビゲーションメニューでよくある問題の一つが、ドロップダウンメニューの親項目にhref属性が設定されていないケースです。

問題のあるコード例：

Copy<ul>
  <li><a>サービス</a> <!-- href属性がない -->
    <ul>
      <li><a href="/service1.html">サービス1</a></li>
      <li><a href="/service2.html">サービス2</a></li>
    </ul>
  </li>
</ul>

このような場合、親項目の「サービス」はクリックできないボタンとして機能しているため、href属性が省略されがちです。

2. パンくずリストの現在位置

パンくずリストで現在のページを示す部分も、しばしばこのエラーの原因となります。

問題のあるコード例：

Copy<nav>
  <a href="/">ホーム</a> > 
  <a href="/category/">カテゴリ</a> > 
  <a>現在のページ</a> <!-- href属性がない -->
</nav>

現在のページにはリンクを設定する必要がないと考えがちですが、クローラーの観点では問題となります。

3. JavaScriptを使用したボタン

目次の開閉ボタンやSNSシェアボタンなど、JavaScript機能を提供するためにaタグを使用している場合も該当します。

問題のあるコード例：

Copy<!-- 目次の閉じるボタン -->
<a class="close-btn" onclick="closeTable()">閉じる</a>

<!-- Twitterシェアボタン -->
<a onclick="window.open('https://twitter.com/share?url=...'); return false;">
  Twitterでシェア
</a>

これらのボタンは実際にはページ遷移を行わず、JavaScript関数を実行するだけですが、aタグを使用している以上、クローラーはリンクとして認識してしまいます。

4. 動的コンテンツの操作要素

アコーディオンメニューやタブ切り替えなど、動的なコンテンツ操作にaタグを使用している場合も同様の問題が発生します。

問題のあるコード例：

Copy<div class="accordion">
  <a class="accordion-header">質問1</a>
  <div class="accordion-content">回答1</div>
</div>

Google公式の見解とクロール可能なリンクの条件

Googleが推奨するリンクの形式

Googleの公式ドキュメント「リンクをクロールできるようにする」によると、クローラーがたどれるリンクには以下の条件があります：

✅ クロール可能なリンク（推奨）：

Copy<a href="https://example.com">外部リンク</a>
<a href="/relative/path/file.html">相対パス</a>
<a href="#section1">ページ内リンク</a>

❌ クロール不可能なリンク（非推奨）：

Copy<a routerLink="some/path">SPA形式のリンク</a>
<span href="https://example.com">spanタグのリンク</span>
<a onclick="goto('https://example.com')">JavaScript実行</a>
<a>href属性なし</a>

クローラーの動作メカニズム

検索エンジンのクローラーは、以下の手順でWebサイトを巡回します：

  1. 起点の設定：サイトマップやすでに知られているURLから開始
  2. HTML解析：ページのHTMLコードを解析
  3. リンク抽出：href属性を持つaタグを検出
  4. URL正規化：相対URLを絶対URLに変換
  5. クロール実行：新しいページにアクセス
  6. インデックス化：コンテンツをデータベースに保存

この過程で、href属性が存在しないaタグは「リンクではない」と判断され、クロールの対象外となります。

具体的な対処方法

方法1：href属性の追加

最も簡単で効果的な解決方法は、該当のaタグにhref属性を追加することです。

基本的な対処：

Copy<!-- 修正前 -->
<a class="close-btn" onclick="closeTable()">閉じる</a>

<!-- 修正後 -->
<a href="." class="close-btn" onclick="closeTable()">閉じる</a>

href=”.”を指定することで、現在のページ自体をリンク先として設定できます。これにより、クローラーはリンクとして認識しつつ、実際の動作はJavaScriptで制御されます。

方法2：適切なHTMLタグの使用

リンクとして機能しない要素については、より適切なHTMLタグに変更することを検討しましょう。

ボタン要素への変更：

Copy<!-- 修正前 -->
<a class="close-btn" onclick="closeTable()">閉じる</a>

<!-- 修正後 -->
<button type="button" class="close-btn" onclick="closeTable()">閉じる</button>

spanタグへの変更：

Copy<!-- 修正前（ドロップダウンメニュー） -->
<a>サービス</a>

<!-- 修正後 -->
<span tabindex="0" class="menu-item">サービス</span>

方法3：CSS による開閉機能の実装

JavaScriptを使用した開閉機能は、CSS のみで実装することも可能です。

CSSのみの実装例：

Copy<style>
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.accordion-toggle:checked + .accordion-content {
  max-height: 1000px;
}
</style>

<div class="accordion">
  <label for="toggle1">質問1</label>
  <input type="checkbox" id="toggle1" class="accordion-toggle">
  <div class="accordion-content">回答1</div>
</div>

方法4：パンくずリストの改善

パンくずリストの現在位置には、自分自身のURLを設定します。

修正例：

Copy<!-- 修正前 -->
<nav>
  <a href="/">ホーム</a> > 
  <a href="/category/">カテゴリ</a> > 
  <a>現在のページ</a>
</nav>

<!-- 修正後 -->
<nav>
  <a href="/">ホーム</a> > 
  <a href="/category/">カテゴリ</a> > 
  <a href="/category/current-page/">現在のページ</a>
</nav>

PHP を使用している場合は、以下のように動的に取得できます：

Copy<a href="<?php echo $_SERVER['REQUEST_URI']; ?>">現在のページ</a>

SEO への影響とサイトパフォーマンスの関係

直接的なSEO影響

「リンクはクロールできません」エラー自体は、検索順位に直接的な大きな影響を与えるものではありません。しかし、以下の点で間接的な影響が考えられます：

  1. クロール効率の低下：クローラーが無駄な処理を行う可能性
  2. サイト構造の不明確さ：サイトの階層構造が正しく理解されない
  3. ユーザビリティの問題：アクセシビリティの観点で問題がある可能性

サイトパフォーマンスへの影響

適切なリンク構造は、サイトパフォーマンスの向上にも寄与します：

表示速度の改善：

  • 不要なJavaScript処理の削減
  • CSS のみでの実装による軽量化
  • ブラウザの最適化機能の活用

アクセシビリティの向上：

  • スクリーンリーダーでの読み上げ対応
  • キーボードナビゲーションの改善
  • セマンティックなHTML構造の実現

実際の修正作業の進め方

Step1：エラーの特定

PageSpeed Insights でエラーが発生している具体的な要素を特定します。

  1. PageSpeed Insights でサイトを診断
  2. SEO項目の「リンクはクロールできません」を確認
  3. 該当する要素をブラウザの開発者ツールで特定

Step2：修正方針の決定

各要素について、以下の観点から修正方針を決定します：

  • リンクとして機能すべきか？：Yes → href属性を追加
  • ボタンとして機能すべきか？：Yes → buttonタグに変更
  • 単純な表示要素か？：Yes → span または div タグに変更

Step3：実装とテスト

修正後は必ず以下のテストを実行します：

  1. 機能テスト：JavaScript機能が正常に動作するか
  2. 表示テスト：デザインが崩れていないか
  3. アクセシビリティテスト：キーボード操作が可能か
  4. 再診断：PageSpeed Insights で改善されているか

表示速度改善とlandinghubの活用

表示速度最適化のポイント

今回の「リンクはクロールできません」エラーの修正と合わせて、以下の表示速度改善施策も実施することをお勧めします：

1. 画像の最適化

  • 次世代フォーマット（WebP、AVIF）の使用
  • 適切なサイズでの配信
  • 遅延読み込み（lazy loading）の実装

2. CSSとJavaScriptの最適化

  • 不要なコードの削除
  • ファイルの圧縮（minify）
  • 非同期読み込みの活用

3. サーバーサイドの最適化

  • キャッシュの活用
  • CDN の導入
  • サーバーレスポンスの改善

landinghubでの一括管理

表示速度の改善や SEO 対策を効率的に行うために、landinghubのようなランディングページ作成ツールの活用も検討してみてください。

landinghubの主な特徴：

  • 表示速度に最適化されたテンプレート
  • SEO に配慮した HTML 構造
  • レスポンシブデザインの自動対応
  • A/Bテスト機能による継続的な改善

特に、コーディング知識が限られている場合や、迅速にランディングページを作成したい場合には、このようなツールが非常に有効です。

よくある質問とトラブルシューティング

Q1：修正後もエラーが消えない場合

A1： 以下の点を確認してください：

  • ブラウザのキャッシュをクリア
  • PageSpeed Insights の再診断（時間をおいてから）
  • HTML の構文エラーがないかチェック
  • JavaScript エラーが発生していないか確認

Q2：href=”.” を設定するとページが更新される

A2： JavaScript で preventDefault() を使用して、デフォルトの動作を無効化します：

Copydocument.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('a[href="."]').forEach(function(link) {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      // ここに必要な処理を記述
    });
  });
});

Q3：既存のデザインが崩れてしまう

A3： CSS の調整が必要な場合があります：

Copy/* ボタンスタイルの統一 */
.button-style {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007cba;
  color: white;
  text-decoration: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* aタグとbuttonタグの統一 */
a.button-style,
button.button-style {
  /* 同じスタイルを適用 */
}

まとめ

「リンクはクロールできません」エラーは、一見すると技術的で複雑に見えますが、実際の対処方法は比較的シンプルです。重要なのは、エラーの原因を正しく理解し、適切な修正方法を選択することです。

主要なポイントの再確認：

  1. エラーの原因：aタグにhref属性がない、または空の状態
  2. 基本的な対処法：href属性の追加、適切なHTMLタグへの変更
  3. SEO への影響：直接的な影響は少ないが、サイト品質向上に寄与
  4. 継続的な改善：定期的な診断と修正の実施

今回の修正作業を通じて、より良いWebサイトの構築を目指していただければと思います。また、表示速度の改善やSEO対策にお悩みの際は、landinghubのような専門ツールの活用も検討してみてください。

<PREV
「ページで有効なソースマップが使用されています」を解説！表示速度に与える影響と最適化のポイント
NEXT>
「robots.txt が無効です」エラーを完全解決！正しい書き方から修正方法まで徹底解説
関連記事

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です