チェックが面倒なAlt属性とMetaタグ内容を手軽に確認できるChrome拡張「Alt &Meta viewer」

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

僕は記事投稿時、画面上には出ないけど、SEO的に有利だと信じてやっていることがあります。

それが以下の2つ。

  1. 画像のAlt属性にキーワードを交えながら画像の説明を入力
  2. ヘッダーのMetaディスクリプションタグにキーワードを用いて概要文を書く

ただ、この2つの情報は、1度投稿してしまうと通常では画面上に現れないため、いろいろなチェックがかなり面倒な部分ではあります。一応ソースなどを見れば、確認はできるんですけど、そこまでして確認している人は少ないと思います。

けれど、「手軽にチェックしたい!」という需要もあるのか、ChromeにAlt属性とMetaタグチェックを手軽にするAlt & Meta viewerという拡張があったので紹介です。

スポンサーリンク
レクタングル(大)広告

Alt & Meta viewer拡張とは

Alt&Meta viewer

この拡張は、主に以下のようなことができます。

  • 画像に関する情報をツールチップで視覚化
  • ヘッダーのtitleタグMetaタグ情報を一覧表示

と、文字で書くよりも、動作画面を見た方が分りやすいので紹介します。

Alt & Meta viewer動作画面

Alt & Meta viewerをインストールすると、ツールバーにアイコンが表示されるので、それをクリックします。

すると以下のような2つの機能が表示されます。

Alt&Meta拡張の機能

  1. 画像のAlt表示
  2. Title Meta表示

以下でそれぞれの機能について説明します。

画像のAlt表示

画像のAlt表示をクリック

「画像のAlt表示」機能を利用すると、閲覧ページ上の画像に以下のようなツールチップが表示されます。

  • Alt属性
  • title属性
  • 画像のサイズ(元の画像のサイズ)
  • 画像のサイズ(スタイルで設定されているサイズ

実際に、表示させてみると、以下のように画像の情報がツールチップで一目瞭然です。

画像情報がツールチップで表示

ツールチップの内の1つを拡大してみると、こんな感じです。

画像情報を拡大

これまで、ブラウザ上で調べるのが面倒だった画像情報を手軽に見ることができます。

Title Meta表示

Title Meta表示

Title Meta表示では、以下のものを表示させることができます。

  • Titleタグの内容
  • Metaタグの内容すべて

タイトルとMETAタグ情報を表示

拡大画像はこちら。

タイトルとMetaタグ情報の拡大

ヘッダーのMetaタグに書かれている情報は全て表示されます。

ディスクリプションやキーワードはもとより、ビューポートやOGP情報、Twitterカード情報なども、これで手軽にチェックすることができます。便利。

インストール方法

一応インストール方法も書いておきます。

Chromeで、Alt & Meta viewerに移動し、「無料」ボタンをクリックします。

Alt & Meta viewer

すると以下のようなダイアログが表示されるので、「追加」ボタンを押してください。

ダイアログ

まとめ

僕はこれまで、プラグインでOGPやTwitterカードを設定した時は、動作確認をするのに、わざわざブラウザのソースを見ていました。

WordPressテーマのヘッダーをカスタマイズをしたときも、同様で結構めんどくさかったんですが、これからは、手軽にチェックが行えるようになります。

画像の設定も1つの画面上で手軽に見ることができるので、WEB開発時にも重宝しそうです。