サイト内リンクはJavascriptで書かないで！ Googleが言ったサイト内リンクのベストプラクティスとは

マーケティングとアウトソーシング支援で企業の売上拡大をサポートするメディコム株式会社です。

今回はGoogle主催の #WMCOsaka 内のセッションでも聞いた内容です。

以前の案件で、同様の事案があったのでサイト制作者の方はこの点に注意してサイトの構築をお願いしたいです。

以前遭遇した、認識されない内部リンク

以前入らせていただいた案件で、サイトの改善を行う過程で内部リンクを増やしていただきました。

その作業はすべて保守作業をされているシステム会社さんにお願いし、テスト環境にアップしていただきました。

そのテスト環境の内部リンクを見ていると、ブラウザ上に表示されるリンクが全て同一に見える・・・。

おかしいなーと思いソースを確認したところ、内部リンクはこのように表記されていました。

＜a href="#" onclick="goTo('hogehoge')"＞hogehoge＜/a＞

この場合aタグの中が#となってしまっているので、Googleのクローラーの判断では内部リンクはないという判断になってしまいます。

内部リンク設置のワーストプラクティス

上記の場合以外にもクローラーに認識されない内部リンクの例を上げておきます。

もし自社で運営されているサイト内にこの形式のリンクがあったら修正されることをおすすめいたします。

＜span onclick="goTo('hogehoge')"＞これが最悪のパターンです＜/span＞
＜button onclick="goTo('hogehoge')"＞これもかなりの悪手です＜/button＞
＜a href="javascript:goTo('hogehoge')"＞これも認識されません＜/a＞

先程の例と併せて4パターンを紹介しました。

このような内部リンクを設置している場合は、ベストプラクティスのパターンに書き換えましょう。

内部リンク設置のベストプラクティス

ではベストプラクティスはどんなものかというと、旧来のリンク設置方法ということです。

＜a href="/hogehoge"＞これがベストプラクティスです＜/a＞
＜a href="/hogehoge"  onclick="goTo('hogehoge')"＞これも認識されます＜/a＞

なお、このベストプラクティスは2020/02/21現在のものです。

今後クローラーが進化してJavascriptを理解できるようになるかもしれません。

しかしいつ実現するかわからないことを待っているわけにも行きませんので、ウェブサイトから集客をしたいのであれば現在の仕様に合わせていきましょう。