[レベル: 上級]
JavaScript によって挿入した rel="canonical" を Google は認識、処理できます。
JS 挿入の rel=canonical をサポートしなかったのは昔の話
「レンダリング前の、初期状態の HTML コードにある rel=”canonical” だけを Google は処理する」と John Mueller がちょっと前に言っていたが今でもそうなのか？
Google の Martin Splitt（マーティン・スプリット）氏に Twitter でこのように質問したユーザーがいました。
@g33konaut Does Google still only process rel="canonical" in the initially fetched, non-rendered HTML? John tweeted this a while ago.
— Ludde (@luddeluddeludde) March 11, 2021
この人が指しているのはおそらくジョンのこちらのツイートです。
We (currently) only process the rel=canonical on the initially fetched, non-rendered version.
— 🍌 John 🍌 (@JohnMu) May 10, 2018
「ちょっと前に」と質問者は言っていますが、ジョンの発言は 2018 年 5 月のツイートですから 3 年近く前です。
かなり古い情報を参照しています。
現在の Google は、JavaScript で挿入した rel="canonical" もきちんと処理できます。
もっと言えば、rel="canonical" に限らず JavaScript で生成したコンテンツを上手に処理するようになっています。
また、HTML 取得とレンダリング実行のタイムラグも気にするほどではありません。
ただし、JavaScript 挿入の rel="canonical" が機能するとしても 初期の HTML に埋め込んでおくほうを推奨するともスプリット氏は補足しています。
That tweet is saying that they're supported, John doesn't dispute that… I'm confused.
I'm also confused that a tweet from 2018 is regarded "recently" 😂
Also, yes, JS canonicals work but I'd also recommend to have em in the initial HTML.
— Martin Splitt (@g33konaut) March 11, 2021
これは、おそらくレンダリングできない可能性を完全には排除していないからでしょう（たとえば、何らかの理由で JS の読み込みに失敗したとか）。
URL 検査ツールで検証してレンダリング後の HTML コードに rel="canonical" を確認できれば通常は問題ないはずです。
JS で削除する noindex は要注意
JavaScript で操作する noindex robots meta タグには注意が必要です。
JavaScript で挿入する noindex も Google はきちんと処理します。
それでも、レンダリングのタイムラグが万が一発生したら、ひょっとしたら短時間とはいえ検索結果に出ることがあるかも知れません。
とはいえ、ほとんどのケースでは問題を起こさないでしょう。
一方で、JavaScript で削除する noindex は機能しません。
つまり、初期状態で noindex が HTML に存在していて、それを JavaScript で取り除く構成です。
noindex を発見した時点で Google 検索のレンダリングシステム (WRS) は、JavaScript を使ったレンダリングを実行しません。noindex はインデックスさせない仕組みですから、インデックスしないページをレンダリングするのはリソースの無駄使いです。
技術ドキュメントにも言及があります。
Googlebot は
noindexタグを見つけた場合、レンダリングと JavaScript の実行をスキップします。この場合、JavaScript がスキップされるため、ページからタグが削除されることはありません。JavaScript を使用してrobotsメタタグを変更または削除しても、期待どおりに動作しないことがあります。robotsメタタグの先頭にnoindexが含まれていると、Googlebot はレンダリングと JavaScript の実行をスキップします。ページをインデックス登録する可能性がある場合は、元のページコードでnoindexタグを使用しないでください。
ページで見せるコンテンツだけではなく、head セクション内の要素も JavaScript で操作しているサイトはこの記事で説明したことを理解しておくといいでしょう。