こんにちは！こんにちは！及川です！！
「Webサイト制作やプログラミングは好きだけど確認作業が苦手だな～、でもそんな自分を変えたいけどそんなかんたんに変われないしな～」
「マークアップやプログラミングは効率化できるけど、確認作業は効率化できないよねー」
と思っていませんか？
そんなあなたが辛く苦しい精神的苦行を乗り越えるような自分を変える努力をすることなく、毎回サイトチェックを前にしぼんだ風船のような気持ちになることもなく、お客さんやチームメンバーの信頼を損ねることのないように、誰でもかんたんにサイトチェックができる方法をご紹介します。
納品日に差し戻しがきて遅くまで帰れなくて友だちとの飲み会に参加できずさみしい思いと申し訳ない気持ちで心がいっぱい、、、なんてことはもうないかもしれません！
今回はセキュリティなどの脆弱性チェックなどは対象にしていません。
リンク切れ、SEO、OGP、などを中心に、普段Webサイト制作業務で使っているものをまとめてみました。
手動でリンクチェック？笑止！「Check my links」で
リンクチェックはCMSにお任せですか？手で１つ１つクリックしてますか？
Chrome拡張の「Check my links」を使えば、開いたページのリンク切れをすばやくチェックしてくれます。
リンクに色をつけてくれ、リンクされているところは緑で、リンク切れの部分は赤で色がつきます。
下の画像はSREのオウンドメディア構築・運用のページで処理をさせたときのキャプチャです。もちろん、リンク切れはないですよ！
今どきアテのリンクにhref="#"はないよね、ないよ
ただし、リンク切れはひろってくれますがリンク先にページがある場合はエラーとして検出されません。
ページ内リンクもOKと判断されますし、アテでhref="#"なんてしててもリンクOKと判別されるのでこのツールを使う前提で存在しないページ名、たとえばhref="no.html"みたいなアテのリンク設定をしておくとリンク切れチェックがより有効になります。
マルチデバイスで別ページを作っている場合は手動チェック
もちろん、ユーザーエージェントを偽装すればスマホサイトのリンクチェックなどもできます。
ただし、リンク先がデバイスごとに異なるリンク、たとえばスマホサイトからPC用のログインページにリンクしていたりする場合、やはり手動でチェックしないと気づかないので気になるところは手動でチェックしましょう。
スマートな流し目でモテ顔になる「META SEO inspector」
titleタグやMETAタグの内容はブラウザでページにアクセスしてもそのままでは表示されないので確認がめんどうですね。
そんなときはページにアクセスするだけで表示してくれる「META SEO inspector」をつかいましょう！
これを入れるだけでHTMLも限界露出で空いた口が塞がりません。
Chromeにインストールすると、ブラウザのプラグインアイコンが次のように表示されます。
META SEO inspectorを有効にすると、ブラウザの右下にパネルが表示され、Webページを見ただけではみえづらい情報を教えてくれます。
SREでは次の項目をチェックしています。
SEO視点でのチェック項目
SEO視点では主に次の4つです。
- titleタグ
- METAディスクリプション
- METAキーワード
- canonical
titleタグ、METAディスクリプション、METAキーワードが正しく反映されているか、を確認します。
以前はhtmlソースや開発ツールのDOMをしかめっ面で画面いっぱいに顔を寄せて見ていたのが、今ではクールな表情で流し目確認ができるようになったためモテ始めました。
あ、でも社内にはまだ男性スタッフしかいないんですけどねっ。
ソーシャル視点でのチェック項目
ソーシャル視点では主に次の7つです。
- og:title
- og:description
- og:url
- og:image
- og:type
- fb:app_id
- fb:page_id
モテるという点では流し目SEOと変わりませんし使い方も特に変わりません。確認する項目はケースバイケースで、fb:app_idやfb:page_idなどは使わないこともあります。
アクセス解析視点でのチェック項目
アクセス解析視点では、次のカテゴリ内に表示される項目が重要になります。
SCRIPTSCRIPTカテゴリには、ページに埋め込まれているタグの種類を表示してくれます。
SRE BLOGでは国内外含めいろいろな解析ツールを試していて、次の画像のように種類がかなりあります。
導入しているツールもかんたんにご紹介します。導入目的や計測ポイントなど違うので組み合わせて効果測定を行うことで改善などを進めています。
- Googel Analytics...検索キーワード調査を首都したサイト全体のアクセス解析と動線分析
- MixPanel...アクセス解析＋ユーザー属性の深堀り（使い方はこちらの記事で）
- Yahoo!アクセス解析...ユーザーローカルのアクセス解析がタダで使えるので試験的に導入中
- Click Tale...ページごとにマウス動線やクリック率を計測したページ内解析
- なかのひと...こちらもユーザーローカルですが、アクセス元組織の特定により営業に活用（しようとしてる）
サイトごとに異なるので埋め込んだはずのものがちゃんと認識されてるか、という程度に使用しましょう。計測されてるかどうかはまた別の話なので解析サービスの数値をしっかりチェックしておく必要があります。
サイトの解析という点でAlexaなど外部サービスへのショートカットなども用意されているので、他にも使える機能が満載なので時間があるときに使い倒してみることをオススメします。
FacebookのLinterで直接チェックできる華麗なる「OGP Checker」
META SEO inspectorでogpタグの内容を見ただけでは完全にOKとはいいづらいですね。トンデモない画像がog:imageの設定にキャッシュで残っているのを目撃することもあったりなかったり。
そんなときは華麗なる「OGP Checker」で開いているページをLinterで直接チェックしましょう。アイコンをクリックすれば次のように画面が開いてかんたんに確認できます。
Chrome拡張じゃないけど便利なOGPチェックツール
別ページ開きたくない引きこもり属性なあなたにはページ遷移しなくても確認できるブックマークレットが便利です。
Chrome拡張ではありませんが複数ページを一括でチェックできる「OGP一括デバッガー」があるようです。
いいね！が必要なFacebookアプリですが、いいね！の１つや２つ減りゃしません。
口数少ない画像のalt属性を暴く「Popup Image Alt Attribute」
画像のalt属性に正しいテキストが埋められているか、これも目に見えなかったり、マウスオーバーしっぱなしだと表示してくれるブラウザもあった気がします。
が、その数秒を待ってられないほど切羽詰まったときでも、執事のごとくサッとalt属性の内容を差し出してくれる気持ちいいほどに優秀過ぎるのが「Popup Image Alt Attribute」です。
インストールしちゃうだけで使えます。
拡張機能のリンクは以下に貼っておきます。
いかがでしたか？間違わないことを心がけるのも大事ですが、間違いをかんたんにすばやく発見できれば創作時間も増えて効率的ですね！
そんなSREでは一緒にWeb制作実務を通して爆発的成長を成し遂げたいという意欲的な方を募集しています！
お問い合わせフォームからご連絡ください！
