サイトのメタ情報のチェックに悩んでいる制作者やディレクターの皆さん、こんにちは。

HTMLのタイトルやメタ情報、h1など、とても大事なんですが確認するのめんどくさいですよね？
僕はめんどくさいです。ページ数が多かったら、それはもう大変です。

こういった情報を確認するためのツールは、探せば色々と公開されているのですが、

• 開発環境（IP制限やベーシック認証がかかっている領域）で使えない
• 今見ているページしかチェックできない
• 1度にチェックできる数に制限がある

などの条件があるものが多く、僕としては「サイト公開前に一括で確認したい！」といったような状況が多いのですが、合うものが見つかりませんでした。

そういうわけで、自分でツールを作ってみたので、会社のブログを利用して紹介させてくださいｗ

Simple Meta Checker

デモサイトをGitHub Pagesで作ってますので試してみてください。
https://kandai.github.io/simple-meta-checker/

Ajaxを使用して情報を取得するので、別ドメインのサイトの情報は取得できませんが、制限の掛かった開発環境でも使用できます。
URLは一度に1000件まで取得可能ですので、大抵のサイトだったらカバーできるはず…

4つほどサンプルのHTMLを用意してますので、下記のように入力して試してみてください。

https://kandai.github.io/simple-meta-checker/sample/01.html
https://kandai.github.io/simple-meta-checker/sample/02.html
https://kandai.github.io/simple-meta-checker/sample/03.html
https://kandai.github.io/simple-meta-checker/sample/04.html

URLを入力して、確認したい項目にチェックを入れて、check を押します。

取得できる要素は、こちらの Cheat Sheetを参考に、個人的によく設定する、設定しそうなものにしました。

デフォルトでチェックが入っているものは、今のところ、僕がよく使うやつです。

実行すると、こんな感じで取得結果が表示されます。

赤は要素が存在しない、黄色は存在するけど未設定のものです。

使い方

使いたい環境にファイルをアップして、ブラウザでアクセスするだけです。

Chromeでしか動作確認してませんが、大体のモダンブラウザだったら大丈夫なはず…。
ブラウザ幅は広いほうが見やすいです。

GitHubで公開していますので、気になる方は是非使ってみてください！

https://github.com/KanDai/simple-meta-checker

短い期間で作ったので、不具合などあるかもしれません。
今後も改良していく予定ですので、ご要望や不具合などあれば、issueに登録をお願いします。

あ、ツールの性質上、サイトに負荷をかけることも可能なので、アクセス制限をかけるなど、注意して使用してください。

最後に、GitHub Pagesの作り方があまりにも簡単だったので感動しました。

GitHub Pages を使った静的サイトの公開方法が、とても簡単になっていた