ウェブサイト制作をしていると、納品前の検証はつきものですよね。その中でも、ALT（オルト）のチェックや、メタタグのチェックって必ずやらなくちゃいけない大事なところ、、、でも、正直面倒！そんな時に、少しでも楽にチェックできるアドオンを紹介します。ちなみに、そんな検証がどちらかという好きじゃないソラト（@sorato_takagaki）です。
Alt & Meta viewerの設定
こんな方におすすめです。
- まだソース開いてチェックしている方
- 検証モード(F12）でチェックしている方
- 検証嫌いだけど、事故りたくない方
僕は３つ目に該当します！
インストールの方法
- Alt & Meta viewer インストール
- 右上にある「Chromeに追加」をクリックする。
- ポップアップで「Alt & Meta viewerを追加しますか？」と出たら「拡張機能を追加」をクリックします。
以上で、完了です。
Alt & Meta viewerの使い方
Alt属性を調べる
- 調べたいページを開く
- Chromeのツールバー右上にあるアイコンをクリック
- 「画像のAlt表示」をクリック
- 表示される
Alt 属性の表示内容の見方
・Alt & Meta viewer適応前
参考サイト：生いいね（僕の学生時代の卒業制作です）
これに、上記の通り、表示させると、、、
・Alt & Meta viewer適応後
黒いポップがたくさん出てきたのがわかりますでしょうか？
このように画像の数だけ、ポップアップが出てきます。この中に、情報が出てくるわけです。
ここだけ抜粋すると、ALT属性のところには「vm18_P6250312」 と出ています。
本当はここに「ベトナムの夜景」とか入れるべきなんですが、参考サイトが学生時代の卒業制作なので、そこまで徹底してないですね。（悪い例ですいません！！）
ImgSize：100×75はCSSで小さく表示していますが、元画像は
Natural：829×622もあるということがわかります。
ALTが全く入ってないと「なし」と表示されますし、ツールバーの近くにも
とページ内の画像の中でいくつALTが設定されていないものがあるかを教えてくれます。
ここまでが、ALT属性の見方でした。
Title meta表示の調べ方
- 調べたいページを開く
- Chromeのツールバー右上にあるアイコンをクリック
- 「画像のAlt表示」をクリック
- 表示される
Title Meta 属性の表示内容の見方
このように、黒いスクリーンがかかって、メタ情報が表示されます。
ここでは、タイトルやディスクリプション、今となってはどうでもいいキーワード、そしてOGPイメージまで確認ができてしまいます。これも便利ですね。
以上となります。
まとめ
たまーに、検証作業が好きって方もいらっしゃいますが、苦手な方が多いんじゃないでしょうか。まずはとにかく楽に、かつ的確にチェックできる方法でやるようにするといいと思います。僕もこれで頑張ります。
