芝生やDIY等のライフハックやWeb制作情報を発信するメディア

【何気に便利!】閲覧中の通常ページURLをAMP対応ページのURLでバリデータに投げるブックマークレットをご紹介

Web2016年11月29日

作成したページがAMPに対応できているかどうか、【WordPress】プラグインなしでAMPに対応する方法の記事でもご紹介させていただいている通り、バリデータツールに通すことで確認することができます。

本記事では、このバリデータツールでのチェックを簡単に行うブックマークレットをご紹介させていただきたいと思います。

もう少し簡単にAMP対応ページをチェックしたい

公開された記事が正しくAMP対応できているかどうか、

  1. [?amp=1]を付与したURLで開く
  2. バリデータを開き、URLを入力
  3. [VALIDTAE]をクリック

という手順でチェックしていたのですが、非常に手間がかかるためブックマークレットで簡単にできないかなと思い検索したところ、以下の記事を発見。

AMP対応ページを開いている状態で以下のブックマークレットを実行すると、そのままバリデータツールに送信してくれます。

javascript:(function(){var%20u=encodeURIComponent(document.location.href);window.open(%27https://validator.ampproject.org/#url=%27+u,%27_blank%27);})();

通常ページのURL末尾に「?amp=1」を付与して送信するように改良

上記の記事で紹介されているソースコードで十分便利なのですが、わざわざAMP対応ページを開いてから実行するのではなく、通常ページからそのままAMP対応ページのURL、すなわち末尾に[?amp=1]を付与して送信できればより楽だなと思い、以下のようなソースコードのブックマークレットにさせていただきました。

javascript:(function(){var%20u=encodeURIComponent(document.location.href);window.open(%27https://validator.ampproject.org/#url=%27+u,%27_blank%27);})();

まとめ

閲覧中の通常ページがAMP対応できているかどうか簡単にブックマークレットでチェックする方法をご紹介させていただきました。

個人運営のブログメディアでは誰か第三者がチェックしてくれるわけではないので、ある程度こういったチェックを自動化できると記事の質も向上するのでオススメです。

「Web」の他の記事を読む

ページの先頭に戻る