“リンクはクロールできません”がPageSpeed Insightsで出た時の対処法。

リンクはクロールできませんの対処法

Googleが提供するサイト診断ツール「PageSpeed Insights」ですが、2022年末ごろ？に仕様変更があり、指摘される項目が以前よりも細かくなりました。

今回はそんな新しい改善案である、リンクはクロールできませんという内容の解決策についてです。これはPageSpeed Insightsの“SEO”の項目に出る改善案です。

当サイトの記事ページを「PageSpeed Insights」で検証した結果画面

リンクはクロールできません
検索エンジンでは、ウェブサイトのクロールにリンクの href 属性を使用する場合があります。アンカー要素の href 属性に適切なリンク先が設定されていて、ウェブサイトの他のページを見つけられるようになっていることを確認してください。リンクをクロール可能にする方法の詳細

問題内容はPageSpeed Insightsの説明にある通りです。分かりやすく言うと、

という内容ですが、クロールされなくても良い部分にも出るようです。

目次の「閉じる」ボタンやSNSボタンも指摘対象

当サイトを例にすると、

<!-- aタグをボタンに使用（目次の閉じるボタン） -->
<a class="xxx"> ～ </a>

<!-- aタグ内にJavaScriptを使用（Twitterのシェアボタン：） -->
<a onclick="window.open(' ～ '); return false;"> ～ </a>

という感じにaタグをボタンとして使用していたり、aタグ内にJavaScriptを使うような部分（SNSシェアボタン）でも“リンクはクロールできません”が出ます...。
リンクではないのでクロールできなくても良い部分なのですが、怒られます。

リンクをクロール可能にする方法の詳細

対処方法はPageSpeed Insightsの説明にリンクがあるのでこれを見てみます。

Google のクローラがたどれるリンクは、解決可能な URL が指定された適切な <a> タグが使用されているリンクのみです。

適切な <a> タグを使用する
Google のクローラがたどれるリンクは、href 属性が指定された <a> タグのみです。その他の形式のリンクはたどれません。<a> タグでも href 属性がないものや、スクリプトのクリック イベントによりリンクとして機能するその他のタグをたどることはできません。（～後略～）

同じページに、辿ることが出来る（クロール可能な）リンクと、辿ることが出来ない（クロール不可能な）リンクの例も載っており、以下のようになっています。

<!-- たどることが出来るリンク（OK例） -->
<a href="https://example.com">
<a href="/relative/path/file">

<!-- たどることが出来ないリンク（NG例） -->
<a routerLink="some/path">
<span href="https://example.com">
<a onclick="goto('https://example.com')">

以上をまとめると、<a href=""> ～ </a>という風にaタグ内にはhref属性が存在し、尚且つhref=で指定したリンクが解決可能でないとダメということになります。

そしてリンクはクロールできませんの解決方法は、あくまでもリンクをクロール可能にすることみたいです...。ボタンにaタグを使っていると対処不可能なのでは？

回避方法：該当のaタグにhref="."を追加する

う～ん...もくじの「閉じる」ボタンはJavaScriptを使わずにCSSだけで実装することで解決できるとしても、Twitterのシェアボタンはどうするか？

と思っていたところ、href属性を追記すれば<a onclick=""> ～ </a>の形式であっても“クロール可能な状態”にできるという情報を以下のサイト様で見つけました。

つまるところ「PageSpeed Insights」の“リンクはクロールできません”を回避するには、該当の<a>タグ内に以下を追記すればOKです！

追記するhrefの属性値はドットでOKとのことです。

さっそく当サイトも、目次の「閉じる」ボタンと、SNSシェアボタンのaタグ内にhref="."を追記しておきました。

<!-- aタグ内にhref="."を追記 -->
<a href="." class="xxx"> ～ </a>
<a href="." onclick="window.open(' ～ '); return false;"> ～ </a>

こんな感じでOKです。PageSpeed Insightsで確認してみると...

リンクはクロール可能です

OKですね！

解決はできるが、SEO効果はほとんど無い？

該当の<a>タグ内にhref="."を入れるという方法で“リンクはクロールできません”を解決できましたが、SEO的な効果はほとんど無いと思われます。

記事ページへのリンクとしてaタグを使っており、クロールできない状態だとSEO的に問題ですが、今回はボタン実装のためにaタグを使っていただけなので...。

一応「PageSpeed Insights」のSEOのスコアは伸びますが...検索順位にはあまり関係ないでしょう。今回の内容は解決策というよりは回避策と言うのが正解ですかね。

ドット（.）のリンク先はそのページ

最後にもう少しだけ補足です。
今回href="."というのを使って回避することになりましたが、hrefの属性値にドット（.）を指定するとリンク先はそのページ自身になります。

「href="."」のドットのリンク先はそのページ

これは上の画像を見てもらえれば分かると思います。

「href="."」という記述により、リンクがクロール可能になりましたが、リンク先はそのページ自体なのです。こうみるとSEO的なデメリットも特に無いと思います。

まとめ

以上、PageSpeed Insightsで“リンクはクロールできません”が出た時の対処/回避方法でした。SEO的な効果は期待できませんが、怒らられるとやる気が無くなってしまう自分としては十分に意味のある作業でした！

aタグにhref属性を指定すると「フォームの要素にラベルが関連付けられていません」と怒られるかも...こちらの対処法は同じaタグ内にaria-label="xxx"を入れるだけなので、ついでに対処しておきましょう！内容は別記事（↓）に詳しく書いています。

ではではこの辺で・ｗ・