僕は記事投稿時、画面上には出ないけど、SEO的に有利だと信じてやっていることがあります。
それが以下の2つ。
- 画像のAlt属性にキーワードを交えながら画像の説明を入力
- ヘッダーのMetaディスクリプションタグにキーワードを用いて概要文を書く
ただ、この2つの情報は、1度投稿してしまうと通常では画面上に現れないため、いろいろなチェックがかなり面倒な部分ではあります。一応ソースなどを見れば、確認はできるんですけど、そこまでして確認している人は少ないと思います。
けれど、「手軽にチェックしたい！」という需要もあるのか、ChromeにAlt属性とMetaタグチェックを手軽にするAlt & Meta viewerという拡張があったので紹介です。
目次
Alt & Meta viewer拡張とは
この拡張は、主に以下のようなことができます。
- 画像に関する情報をツールチップで視覚化
- ヘッダーのtitleタグMetaタグ情報を一覧表示
と、文字で書くよりも、動作画面を見た方が分りやすいので紹介します。
Alt & Meta viewer動作画面
Alt & Meta viewerをインストールすると、ツールバーにアイコンが表示されるので、それをクリックします。
すると以下のような2つの機能が表示されます。
- 画像のAlt表示
- Title Meta表示
以下でそれぞれの機能について説明します。
画像のAlt表示
「画像のAlt表示」機能を利用すると、閲覧ページ上の画像に以下のようなツールチップが表示されます。
- Alt属性
- title属性
- 画像のサイズ（元の画像のサイズ）
- 画像のサイズ（スタイルで設定されているサイズ
実際に、表示させてみると、以下のように画像の情報がツールチップで一目瞭然です。
ツールチップの内の1つを拡大してみると、こんな感じです。
これまで、ブラウザ上で調べるのが面倒だった画像情報を手軽に見ることができます。
Title Meta表示
Title Meta表示では、以下のものを表示させることができます。
- Titleタグの内容
- Metaタグの内容すべて
拡大画像はこちら。
ヘッダーのMetaタグに書かれている情報は全て表示されます。
ディスクリプションやキーワードはもとより、ビューポートやOGP情報、Twitterカード情報なども、これで手軽にチェックすることができます。便利。
インストール方法
一応インストール方法も書いておきます。
Chromeで、Alt & Meta viewerに移動し、「無料」ボタンをクリックします。
すると以下のようなダイアログが表示されるので、「追加」ボタンを押してください。
まとめ
僕はこれまで、プラグインでOGPやTwitterカードを設定した時は、動作確認をするのに、わざわざブラウザのソースを見ていました。
WordPressテーマのヘッダーをカスタマイズしたときも、同様で結構めんどくさかったんですが、これからは、手軽にチェックが行えるようになります。
画像の設定も1つの画面上で手軽に見ることができるので、WEB開発時にも重宝しそうです。
