40代双子持ちサラリーマン日記

40代双子持ちサラリーマンの日々の出来事や趣味に関してのブログ

【ブログ便利機能】画像のSEO対策「ALT属性」を簡単に調べる方法

画像のSEO対策で効果のある「ALT属性」を簡単に調べる方法


こんにちは。40代双子持ちサラリーマンです。

 

みなさん、画像のSEO対策に効果のある「ALT属性」は設定していますか?

「ALT属性」のことは知ってるけど、

  • どういう付け方をしたらいいか分からない
  • 現在、自サイトでは何が設定されているのか分からない

 という方もいるのではないでしょうか。

 

今回は、そういった方にオススメの「ALT属性」を簡単に調べる方法を紹介します。

 

紹介するにあたり、ブラウザ「Google Chrome」の拡張機能を使用するため、「Google Chrome」を事前にインストールすることをオススメします。 

 

 

「Alt & Meta viewer」とは


「Alt & Meta viewer」とは、Chromeの拡張機能の1つで、サイトやブログの使用画像のALT属性やサイズ、また、ヘッダのTitle Meta情報を簡単に調べることができる拡張機能となっています

 

この機能を使用すると、どんな時に役に立ちますか? 

 

こんな時に役に立ちます

 

Alt & Meta viewer情報を使用するメリット
  • 気になるブログやサイトの画像のALT属性の付け方を簡単に確認できる
  • 自サイトの使用画像のALT属性やサイズを簡単に確認できる

 

それは便利ですね。早く使ってみたいです☺

 

 

「Alt & Meta viewer」のインストール方法

ChromeへのColorPick Eyedropper追加

 

chromeへの「Alt & Meta viewer」のインストール方法を紹介します。

  1. chrome ウェブストアの拡張機能「Alt & Meta viewer」 にアクセスする。

  2. アクセスすると以下のような画面表示後、【Chromeに追加】ボタンをクリックする

    Google Chrome_Alt & Meta viewer追加画面


  3. ポップアップ画面(下記画面参照)が表示後、【拡張機能を追加】ボタンをクリックする

    Alt & Meta viewer拡張機能追加


  4.  拡張機能が追加されると、URL入力の右横にAlt & Meta viewerアイコン(赤枠)が追加される。
    その際、ポップアップ画面(下記画面参照)が表示される。
    ※ただし、表示後、実際に使用する前に一度、ブラウザを閉じることをオススメします。

    Alt & Meta viewer拡張機能追加完了


 

「Alt & Meta viewer」の使用方法

 

「Alt & Meta viewer」の使用方法を紹介します。
今回は、YAHOO! JAPANサイトを事前に表示しています。

Alt & Meta viewerアイコンをクリックすると下記二つの機能が表示される(下記画面参照)

Alt & Meta viewer_機能一覧

 

Alt & Meta viewerの機能
  • 画像のAlt表示機能(赤枠部分)
  • Title Meta表示機能(青枠部分)
 

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

 

画像のAlt表示機能


画像のAlt表示機能では、表示しているサイトの下記情報を表示します。

①  Alt属性の未設定画像の個数及びその画像一覧を表示

 

Alt & Meta viewer_ALT属性なしの個数
Alt属性が未設定の画像個数



上記画像の青枠部分をクリックすると、Alt属性が設定されていない画像一覧が表示される。

Alt & Meta viewer_ALT属性なしの画像一覧
Alt属性が未設定の画像一覧



② すべての画像に対して、下記情報を表示

 画像のAlt表示機能で表示される情報
  • Alt:Alt属性
  • ImgSize:画像のサイズ(元の画像のサイズ)
  • Natural:画像のサイズ(スタイルで設定されているサイズ)

 

Alt & Meta viewer_ALT属性の情報

 

Title Meta表示機能 


画像のTitle Meta表示機能では、表示しているサイトのヘッダにおける下記情報を表示します。

・Titleタグ、Metaタグの内容

 

Alt & Meta viewer_Title Meta情報

 

「Alt & Meta viewer」の削除方法

 

chromeからの「Alt & Meta viewer」削除方法を紹介します。

 

  1. chrome ウェブストアの拡張機能「Alt & Meta viewer」 にアクセスする。

  2. アクセスすると以下のような画面表示後、【Chromeから削除します】ボタンをクリックする

    Google Chrome_Alt & Meta viewer削除画面

 

 

「Alt & Meta viewer」まとめ

 

「Alt & Meta viewer」の有効活用により、使用画像のALT属性やサイズおよびサイトのヘッダにおけるTitle/Metaタグの情報を簡単に調べることができます。

 

ぜひ、ブログやサイトなどのリライト時の現状分析をすばやく行うための手段として、この拡張機能を有効活用していただけたらと思います。