サイトのメタ情報のチェックに悩んでいる制作者やディレクターの皆さん、こんにちは。
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.htmlURLを入力して、確認したい項目にチェックを入れて、check を押します。
取得できる要素は、こちらの Cheat Sheetを参考に、個人的によく設定する、設定しそうなものにしました。
デフォルトでチェックが入っているものは、今のところ、僕がよく使うやつです。
実行すると、こんな感じで取得結果が表示されます。
赤は要素が存在しない、黄色は存在するけど未設定のものです。
使い方
使いたい環境にファイルをアップして、ブラウザでアクセスするだけです。
Chromeでしか動作確認してませんが、大体のモダンブラウザだったら大丈夫なはず…。
ブラウザ幅は広いほうが見やすいです。
GitHubで公開していますので、気になる方は是非使ってみてください！
https://github.com/KanDai/simple-meta-checker
短い期間で作ったので、不具合などあるかもしれません。
今後も改良していく予定ですので、ご要望や不具合などあれば、issueに登録をお願いします。
あ、ツールの性質上、サイトに負荷をかけることも可能なので、アクセス制限をかけるなど、注意して使用してください。
最後に、GitHub Pagesの作り方があまりにも簡単だったので感動しました。
GitHub Pages を使った静的サイトの公開方法が、とても簡単になっていた
