java scriptで生成したrel=”canonical”も認識される

URLを正規化するlink rel=”canonical” というタグがあります。

よほど事情がなければheadタグ内に直接記述するものですが、JSでcanonicalを挿入しても、今のGoogle検索エンジンは認識してくれている と知ったので、メモしておきます。

URLの正規化 おさらい

内容が重複する異なるURLが存在するとき、どのURLを正規のものとするか、をサイト側で明示することをURLの正規化と言います。そのために使用されるのが、rel=”canonical” です。

最近はレスポンシブデザインで設計されているサイトが主流なので例としては弱いですが、たとえばPC用とモバイル用で別々にページを用意しているサイトですと、ほぼ同じ内容のページが2つ存在することになってしまいます。

ほかにも、wwwありのURL、なしのURL。http://~のURL、https://~のURL などなど。どれにアクセスしてもそのURLで同じコンテンツが表示される場合も考えられます。wwwの有無だけで検索エンジンに重複を疑われることはあまり無いと思いますが、検索エンジンがどのページを主ページと判断するのかが分からない。被リンクが分散するなどページ評価にマイナス影響があり、SEO上よくない状態だと言えます。

rel=canonicalの記述

canonicalはheadタグ内でlinkタグを使い、正規化したいURLを指定します。

逆に、メインページの派生ページはrel=”alternate”で指定します。

Java Scriptで挿入するcanonicalも認識される

表題についてはそのままの意味です。

「canonicalを指定したい」「headタグは編集できない」サイトがあり、じゃあJSで挿入しても問題ないのかと調べたところ、「認識される」と明記された記事がありました。(「JavaScript挿入したrel=canonicalをGoogleは処理できる」)

そこで早速以下のコードで実験。

const head = document.getElementsByTagName('head');
head[0].insertAdjacentHTML('beforeend' , '<link rel="canonical" href="https://example.com/"> ');

Google Search Consoleでライブページを検証してみると、正規URLに「https://example.com」がきちんと反映されていました。成功です。

念を押しておくと、この方法は確実に反映されるものではないので、あくまで”やむを得ない場合のみ” であり、headタグを編集できる状況ならheadに直接記述したほうが良いです。