よつまお

雑記と過去ログ置き場。時々担当が入れ替わりながら、ゆるーく不定期更新していきます。

【はてな】スクリプトでヘッダ内やmetaタグの内容を書き換えた時のソース確認

 

以前はてなブログでとある固定ページ作ってさ。別にわざわざグーグル様にインデックスしてもらう必要のない内容のページなんだけど、ある日検索してみたら普通にヒットしちゃうわけよ。

 

まぁそれもそのはず、自動的に生成されるサイトマップのXMLファイルには、固定ページのURLもしっかり載っていて。

一部非公開なんていう仕様はないし、大抵サーチコンソールに登録してあると思うんで、自動的に検索エンジンのクローラーが回ってきちゃうんだよね。

 

ってことでそれを拒否すべく、Javascriptでmetaタグを書き換えてみたんだけど、その際にちょっと迷ってしまった点。

※以下は概ね、はてなブログに限らずの話。また例えばサイト移転などの際のcanonical書き換え時にも同様。

まず普通にスクリプト書くじゃん

と言ってもここは偉大なる先人たちの知恵を借りようってことで、グーグル様に頼ってコードを探す。すると例えばnoindexを追加するなら、

<script type="text/javascript">
// 追加するmetaタグの作成
var newMeta = document.createElement("meta");
newMeta.setAttribute("name","robots");
newMeta.setAttribute("content","noindex");
// 作成したmetaタグをhead要素内末尾に追加
document.getElementsByTagName("head")[0].appendChild(newMeta);
</script>

引用:https://www.marorika.com/entry/hatena-noindex 

こんな感じでいいわけだ。

 

これを目的の特定の記事や固定ページにHTML編集から追記してみる。そして確認のために更新したページのソースを見てみると、、

ソースが変わってない件

ん、変わってないぞ。コードがおかしい?いやいや、そんな馬鹿な。

もしやデフォのmetaのrobots属性をいじれないように制限でもされてる?いやいや、そんな話聞いたことない。

 

ってことで今度は試しにもっと単純に、はてな→ワードプレスなどのサイト移転時によく使われているスクリプトでcanonical書き換えを試してみる。

<p>移転しました。
<script type="text/javascript" language="javascript">
<!--
// 新urlの作成
  var domain = "https://beiznotes.org/"; // 新ドメイン + ディレクトリに置き換える。末尾はスラッシュ。
  var path = location.pathname.substr(6).replace(/\//g, "") + "-2"; // パスの整形
  var url = domain + path;

// リンクhtmlの書き出し
  document.write("<a href=\"" + url + "\">" + url + "</a></p>");

// リダイレクト
  setTimeout("redirect()", 5000); // 5 sec
  function redirect(){
    location.href = url;
  }
 
 // canonical の書き換え
  var link = document.getElementsByTagName("link")[0];
  link.href = url;
-->
</script>

 引用:https://beiznotes.org/move-from-free-hatenablog-without-301/

このコードから、新URLの作成とcanonicalの書き換えの部分のみを流用。この際の挙動を分かりやすくするため、canonicalにトップページのURLを指定してみた。

 

そしてブラウザから同じくソースを見てみると、、

f:id:yotsumao:20191202193233p:plain

うーん、固定ページのURLのまま。何で変わらないねん!!w

ちなみに話

ここは本筋の話とは外れる項。

一応上記の引用スクリプトでは、javascriptによってリダイレクト処理をしているわけだが、通常のサイト移転では301リダイレクトを設定するのが普通。

 

とはいえ、はてなからワードプレスに移行する際などは、そういった設定が行えないための苦肉の策なわけよ。もちろんクローラーはスクリプトを解釈できるわけだが。

 

ただし例えばnoindexをjavascriptで挿入する場合(今回私がやりたいこと)、

JavaScript の処理は HTML のクロールとは別プロセス

引用:https://www.suzukikenichi.com/blog/adding-noindex-tag-with-javascript-isnt-recommended/

というGoogleの公式見解もあって、一応非推奨扱いであるという話のようだね。

 

さてさて、閑話休題。

はてなブログは書き換えできない?

なぜスクリプトは正しいのに、ソースが変わっていないのか。ってことでグーグル様に聞いてみると。

同じようなことを言っているブログ主さんを発見。

恐らく今年の2月以降にはてなブログのjavascript動作に関する仕様が変わったのかもしれない。

引用:https://www.yu2.jp/entry/canonical

わりと新しい2019年の記事。このかたも、私と同様javascriptによるmetaタグ書き換えを試してみたところ、上手くいかない(ソース上変わってない?)っていう話。

 

うーん、まさかはてな運営がそんな制限掛けるのかなぁ。いやでも「はてな」ならあり得るw しかしなぜ。

っていう疑問が湧いてきたので、ちょっと別の方法で確認。

「Lighthouse」で確かめてみる

実際canonicalはどのように解釈されているのか、もしかしてソースの見た目上が変わっていないだけじゃないか。

 

ってことでグーグル謹製のChrome拡張機能LighthouseでSEOチェックしてみる。

使い方は実に簡単で。

今回のcanonical書き換えを確認したければ、Lighthouseの設定で「SEO」だけチェックをいれて、確認したいページを開きつつ「Generate report」ボタンをポチっとな。

 

すると、、

f:id:yotsumao:20191202200018p:plain

お、ちゃんと警告出てる!要は、ルートドメインが(配下ページなのに)canonicalに設定されとるで!っていうメッセージ。

うん、普通の運用じゃダメな状態だけど、テストしてる今はこれでおk。

 

ってことで何かが制限されてるわけじゃなく、きちんとスクリプトによってmetaタグは変わっていた。

でもでも、じゃあマジでソースを見るだけじゃ、実際変わってるかどうか確かめらんないってことになるよねぇ。それはそれで不便。。

デベロッパーツールを使えばいいじゃない

何かもっと簡単に確認できる方法ないかなーと、再びグーグル様に聞いてみると。

右クリック > 「ページのソースを表示」からページのhtmlソースコードを確認してもnoindexの設定は反映していません。

 引用:https://u-ff.com/how-to-set-noindex/

なぬ?!マジで!

こちらのブロガーさま曰く、スクリプト実行前のソースしか見れないので、実行後の状態を確認したければ「検証」を使おうと。

 

なるほど、要はデベロッパーツールで見てみなさい。ってことで早速確認してみると、、

f:id:yotsumao:20191202201000p:plain

お、ちゃんとcanonicalにはルートドメインが表示されてる!すげえ、ありがとうございます!

てか配下ページのcanonicalがルートになってるとか普通は由々しき事態なんだが、今は無事スクリプトが機能しているのが確認出来て嬉しいww

 

というわけで、head内のタグやmetaタグなどの内容をjavascriptで書き換えた際は、デベロッパーツールで実行後のソース確認しようねっていう話。

っていうかこれってWeb業界じゃ常識の話なの? なんか以前は普通に見れてた気が(適当w)。

 

しかしそんなこんなで、無事canonicalの書き換えテストが上手くいったので、同様にようやく本来の目的のnoindex追記も無事行うことができましたとさ。

 

なお、先述の通りスクリプトによるソース変更は、その情報がクローラーに伝わるのはやや時間がかかるので、検索エンジン上のインデックス動向に関しては反映までしばらく様子を見ようね。