WordPressのshutdownフックが「robots.txtが無効です」を引き起こす件

ある日、当サイトのrobots.txtに異常があることがわかりました。原因を調べていくとshutdownというhookの使い方にあることがわかりました。対応方法もご説明します。

ある日PageSpeed Insightsで問題に気づく
原因はshutdownフックの使い方
代わりのhookはwp_print_footer_scripts
robots.txtを操作するためのhook
さいごに

ある日PageSpeed Insightsで問題に気づく

ある日、PageSpeed Insightsでサイト速度の計測してみました。

そこで問題が起きていることに気がつきました。

「robots.txtが無効です」と表示され、その後、JavaScriptのコードが表示されているのです。

実際に

https://proggy.jp/robots.txt

にアクセスし、表示してみると、

User-agent: *
Disallow: /wp-admin/
Allow: /wp-admin/admin-ajax.php

Sitemap: https://proggy.jp/wp-sitemap.xml
<script>
 var loadDeferredStylesJin = function() {
   var addStylesNodes = document.getElementsByClassName("deferred-jin");
   var target = document.getElementById("parent-style-css");
   var place = target.nextElementSibling;

   addStylesNodes = Array.prototype.slice.call(addStylesNodes);
   addStylesNodes.forEach(function(elm) {
		 var parent = document.createElement("div");
		 parent.innerHTML = elm.textContent;
		 place.insertAdjacentElement('beforebegin', parent.firstChild );
   });
	 addStylesNodes.forEach(function(elm) {elm.parentElement.removeChild(elm);});
 };
 var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
     window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
 if (raf) raf(function() { window.setTimeout(loadDeferredStylesJin, 0); });
 else window.addEventListener('load', loadDeferredStylesJin);
</script>

User-agent: *

Disallow: /wp-admin/

Allow: /wp-admin/admin-ajax.php

Sitemap: https://proggy.jp/wp-sitemap.xml

var loadDeferredStylesJin = function() {

var addStylesNodes = document.getElementsByClassName("deferred-jin");

var target = document.getElementById("parent-style-css");

var place = target.nextElementSibling;

addStylesNodes = Array.prototype.slice.call(addStylesNodes);

addStylesNodes.forEach(function(elm) {

var parent = document.createElement("div");

parent.innerHTML = elm.textContent;

place.insertAdjacentElement('beforebegin', parent.firstChild );

});

addStylesNodes.forEach(function(elm) {elm.parentElement.removeChild(elm);});

};

var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||

window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

if (raf) raf(function() { window.setTimeout(loadDeferredStylesJin, 0); });

else window.addEventListener('load', loadDeferredStylesJin);

</script>

と、通常のrobots.txtの内容の下に、JavaScriptのコードが出力されていました。

これでGoogleの検索エンジンからrobots.txtが無効と認識されてしまい、しばらくSEO的に不利益を被っていました。

原因はshutdownフックの使い方

ある自作のプラグインで、HTML内の最後にJavaScriptを書き込むために、以下のようにしておりました。

 function jin_script() {
		if (is_mobile() && (is_single() || is_page())){
			$target_id = "jin-inline-css";
		}else{
			$target_id = "parent-style-css";
		}
    echo <<< EOM
<script>
 var loadDeferredStylesJin = function() {
   var addStylesNodes = document.getElementsByClassName("deferred-jin");
   var target = document.getElementById("{$target_id}");
   var place = target.nextElementSibling;

   addStylesNodes = Array.prototype.slice.call(addStylesNodes);
   addStylesNodes.forEach(function(elm) {
		 var parent = document.createElement("div");
		 parent.innerHTML = elm.textContent;
		 place.insertAdjacentElement('beforebegin', parent.firstChild );
   });
	 addStylesNodes.forEach(function(elm) {elm.parentElement.removeChild(elm);});
 };
 var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
     window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
 if (raf) raf(function() { window.setTimeout(loadDeferredStylesJin, 0); });
 else window.addEventListener('load', loadDeferredStylesJin);
</script>
EOM;
  }
  add_action( 'shutdown', 'jin_script' );

function jin_script() {

if (is_mobile() && (is_single() || is_page())){

$target_id = "jin-inline-css";

}else{

$target_id = "parent-style-css";

}

echo <<< EOM

var loadDeferredStylesJin = function() {

var addStylesNodes = document.getElementsByClassName("deferred-jin");

var target = document.getElementById("{$target_id}");

var place = target.nextElementSibling;

addStylesNodes = Array.prototype.slice.call(addStylesNodes);

addStylesNodes.forEach(function(elm) {

var parent = document.createElement("div");

parent.innerHTML = elm.textContent;

place.insertAdjacentElement('beforebegin', parent.firstChild );

});

addStylesNodes.forEach(function(elm) {elm.parentElement.removeChild(elm);});

};

var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||

window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

if (raf) raf(function() { window.setTimeout(loadDeferredStylesJin, 0); });

else window.addEventListener('load', loadDeferredStylesJin);

</script>

EOM;

}

add_action( 'shutdown', 'jin_script' );

上のコードの最終行でshutdownというhookを使って実行させていました。

このhook、HTMLの最後の最後に出力できるため、表示要素のロードの邪魔をせずにJavaScriptを書き込めるので便利だなーと思っておりました。

しかし、shutdownというhookは、通常のページだけでなく、robots.txtのような特殊なURLにリクエストする際も実行されるものということがわかりました。（名前の由来をよく考えたら当然か）

代わりのhookはwp_print_footer_scripts

shutdownは使えないということがわかったので、代わりのhookを探しました。

Action Reference

最初はwp_footerかなと考えましたが、wp_print_footer_scriptsの方が、実行順序が後ということがわかり、名前もscriptを記載する目的に適っています。

shutdownは完全にHTMLが終わった後に出力できました。それに対して、wp_print_footer_scriptsはテーマのfooter.php内の wp_footer() 実行時に起動するようなので、テーマによってはどうしてもHTMLの最後の最後に出力というわけにはいきません。とはいえ、他にこれより後に起動するhookは無いようなので、諦めるしかないですね。

robots.txtを操作するためのhook

そもそもrobots.txtを操作するためのhookも一応用意されています。その名もrobots_txtです。

【WordPress】自動で出力される［仮想robots.txt］をカスタマイズする方法

さいごに

今回のようにWordPressに関する知識不足により、知らぬ間にPageSpeed Insights上で指摘事項が発生してしまうことが何度がありました。以下もその一つです。

WordPressでclean_urlフィルターでのdefer、asyncの付与はNGWordPressでテーマやプラグインで使われるJavaScriptを遅延や非同期読み込みするために、clean_urlを使ってdefe...

対策としては、

なるべくトリッキーな使い方をしない
PageSpeed Insightsで確認する頻度を上げる（もしくは自動化）

が考えられます。参考にして頂けたらと思います。

そして、一つお願いしたいことがあります。

もしこの記事がお役に立てたのなら、下のボタンからSNSでシェアするか、あなたのブログでご紹介頂けないでしょうか？検索エンジンの仕組みで、同じ問題で今困っている方の目に届きやすくなります。もちろん、私としても記事を書くモチベーションになります。

記事への要望やダメ出しを書いて頂いても嬉しいです。定期的にエゴサーチしており、今後の記事で活かさせて頂きます。よろしくお願いいたします！

PHP WordPress

ある日PageSpeed Insightsで問題に気づく

原因はshutdownフックの使い方

代わりのhookはwp_print_footer_scripts

robots.txtを操作するためのhook

さいごに

WordPressのTable of Contents Plusのサイドバーのリンクの不具合

Wordpressのenqueue、register、dequeue、deregisterのポイント

Wordpressでclean_urlフィルターでのdefer、asyncの付与はNG

Conoha VPSのバージョン2.0から3.0へ移行での落とし穴

KUSANAGIのバージョン8⇒9のアップデートが地獄だった件

httpsへリダイレクト用の.htaccess記載はSiteGuardより上に