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

楽天で購入し、使って良かったものや欲しいと思ったものを紹介しています。
ぜひ、覗いて頂ければ幸いです。

私の楽天ルームURL

こんにちは。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」のインストール方法を紹介します。

  • STEP1
    Chrome ウェブストアにアクセス
    Chrome ウェブストアの拡張機能「Alt & Meta viewer」 にアクセスする。
  • STEP2
    Chromeへの追加
    アクセスすると以下のような画面表示後、【Chromeに追加】ボタンをクリックする。

    Google Chrome_Alt & Meta viewer追加画面

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

    Alt & Meta viewer拡張機能追加

  • STEP4
    追加完了
    拡張機能が追加されると、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表示機能では、表示しているサイトのヘッダにおける下記情報を表示します。 

      Alt & Meta viewer_Title Meta情報

      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タグの情報を簡単に調べることができます。

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

         

        おすすめの記事