画像のalt属性を確認する方法

自身のサイトや他サイトのalt属性を確認する方法はいくつかありますが、その中でも簡単にチェックできる方法を2つ紹介します。

ソースを確認する

まずはページのソースを確認する方法です。

ページのソースを確認するにはCtrl+UやF12キーを押すなどのショートカットがありますが、ショートカットに詳しくない、わからない場合は、左クリックを押すとWindowsでもMacでも「ページのソースを表示」という選択肢がありますので、そこから確認ができます。

先述のようにalt属性はimg要素に含まれる記述ですので、
img srcから始まるソースを見つけて『[ alt=””]』のダブルクォーテーション(”)で囲われているテキストがalt属性になります。

Google Chromeの拡張機能を利用する#

続いてGoogle Chromeの拡張機能「Alt & Meta viewer」を利用してalt属性を確認する方法です。

こちらは若干のインストールの手間がかかるものの、インストールしてしまえばソースを確認するよりも簡単に各ページのalt属性、およびmeta titleを確認することができるようになりますので、ぜひインストールしてみてください。

Alt & Meta viewerをインストールするとGoogle Chrome右上の拡張機能の部分にAltと書かれたアイコンが追加されるので、そのアイコンをクリックするとalt属性とmeta titleを確認することができます。

alt属性の確認以外にも記事タイトルとmeta titleを違うものにするなどの工夫しているサイトもあるので、勉強の意味でもインストールしておくことをおすすめします。

HTML5におけるimg要素のalt属性について

HTML5が扱われるようになってalt属性の設定方法が少し変更になりました。

その内容が、「alt属性には前後の文脈を広げることのできるテキストを記載する」「補足や短文での記載はtitleタグを使用する」「装飾やロゴなど記事に対して関係のないものは””内を空白にする」という3つのポイントです。

HTML5が扱われるようになる以前はalt属性をきちんと設定しているサイトの方が少なかったのですが、スマートフォンの普及などの環境要因に合わせてこのようにHTMLの記載方法も少しずつ変わってきています。

alt属性の文字数

最後にalt属性の文字数に関しての紹介です。

SEOにおけるalt属性の適切な書き方」の部分でどのような画像なのかをわかりやすように記載しましょう。という内容を紹介しましたが、alt属性自体に文字数制限はありません。

Googleが公開している検索エンジン最適化(SEO)スターターガイドではalt属性について以下のように記載がされています。

簡潔でわかりやすいファイル名と alt テキストを使用する
最適化の対象となるページの他の部分と同様に、ファイル名と alt テキストは短くてわかりやすいものが適しています。
避けるべき方法:alt テキストにキーワードを並べたり、文章全体をコピー&ペーストしたりする。
引用元:検索エンジン最適化(SEO)スターターガイド

このように簡潔でわかりやすいalt属性が良いとされており、キーワードを羅列することや文書をコピペで貼り付けることはGoogleのガイドラインによって避けるべきと明確に紹介されています。

SEOに関しては不確実な部分が多いのが実態ですが、こうしたGoogleが公開している情報に関しては積極的に取り入れていきましょう。