Webサイト上の画像データに紐づくデータとして「alt属性」と呼ばれるものがあります。

alt属性とはHTMLのimg要素、つまり画像に設定することにより、画像を表示することや見ることができない環境であってもこの画像はこういうものですよと画像の情報を表すためのテキストです。

今回はこのalt属性の適切な使用方法やSEOにおける役割、確認方法、文字数などについて紹介します。

alt属性とは

Webブラウザでは様々な事情で画像を表示させることができない状況になってしまうことがあります。

例えばスマートフォンの通信制限等による表示の遅延によってページの生成がタイムアウトしてしまった場合にはalt属性として設定している代替えテキストが画像の部分に表示されます。

その他にもページの読み上げ機能を使用する場合において、alt属性が設定されていると画像の代わりにその代替えテキストを読み上げられます。

つまりalt属性は、なんらかの要因でユーザーが画像を画像として認識できない場合に、その画像が何を意味しているのかを伝えるためのテキストです。

alt属性のSEO効果について

alt属性は画像を見ることのできないユーザーにどのような画像なのかを伝えるためのテキストと紹介しましたが、SEOにおいて切っても切れない関係にあります。

ユーザーのほかにも画像を認識することができない要素、つまりクローラーです。

クローラーとはGoogle Botに代表される、検索エンジン（Google）がページやサイトを評価するためにWeb上で巡回させているプログラムのことです。

クローラーはWebページをコードを読み取ることによってその情報を収集しているため、どのような画像なのかを認識・判断することができず、alt属性によってどのような画像なのかを判断しています。

そのため、alt属性で代替えテキストを設定することは、画像を見ることのできないユーザーのためだけではなく、テキストに加えて画像を情報としてクローラーに伝える、つまりSEOの観点からも設定しておくべきだと言えます。

SEOにおけるalt属性の適切な書き方

SEOにおいて適切とされているalt属性の書き方について紹介していきます。

まずはこの画像をみてあなたであればどういったalt属性の代替えテキストを設定しますか？

image1.jpg

最も間違えやすいのが、SEO効果があるからとキーワードを詰め込みすぎるミスです。

この画像に対して「海で走る白と黒のMarinelleのモーターボートを運転する男性とそれを眺めている女性」というalt属性を設定するのは、無理に情報を詰め込みすぎて逆にわかりづらくなってしまいます。

では逆にこの画像に対して「ボート」とだけalt属性を設定するのもSEOにおいて適切とは言えません。

ボートの画像ということはすぐにわかりますが、そのボートはゴムボートなのか、あひるボートなのか、競艇用のボートなのかといった情報は伝わりません。

なのでこの画像において適切なalt属性の代替えテキストは「海でモーターボートに乗る2人組の男女」ほどの情報量ということになります。

ただし、SEOにおいてalt属性に設定する代替えテキストの正解は無数にありますので、あくまでユーザーに伝わりやすいalt属性を設定しましょう。

グラフやフローチャートなどについても、そのグラフやチャートで伝えたいことをなるべくテキストに起こして本文にしておくことで「〇〇の〇〇に関するグラフ、詳細は本文で」といったalt属性の使い方も可能です。

画像の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が公開している情報に関しては積極的に取り入れていきましょう。

まとめ

今回はimg要素に含まれるalt属性（オルト属性）について設定する理由やSEO効果、適切な記述方法などをご紹介してきました。

後半で紹介したalt属性を確認する方法で様々なサイトを見るとalt属性が不適切、もしくは設定されていないページも多くあるので、alt属性を設定しただけで検索順位が向上する可能性もあります。

Googleのガイドラインで記載のある簡潔でわかりやすいテキストをしっかりと意識してユーザーにとってもSEOにおいても効果的なalt属性を設定しましょう。

SEOに関する情報をさらにチェック

SEOと文字数の関係は？実際の検索結果をもとに解説

SEOと文字数の関係は？実際の検索結果をもとに解説

SEOを考慮したコンテンツを制作についてよく寄せられる質問の1つが「SEOと文字数」の関係です。「最低3000文字は必要」といった声もあれば「文字数は関係ない」といった様々な見解があります。そこで今回は実際の検索結果で上位表示されているコンテンツをもとに、SEOと文字数の関係について解説します。
共起語を使ったSEO対策！記事作成やリライトに役立つ方法を紹介

共起語を使ったSEO対策！記事作成やリライトに役立つ方法を紹介

共起語を正しく活用できれば、コンテンツ作成に役立つのはもちろん、SEO効果も期待できます。とはいえ、「なぜ共起語はSEOに有効なのか？」「どのように共起語を活用すればいいかわからない」という方も多いと思います。そこで本記事では、共起語の基本や活用方法、オススメの無料ツールなど、共起語を使った SEO対策について解説します。