【altを記述するだけでSEO対策になる？】alt属性は必要なのか？

seo対策に必須なaltタグとは

こんにちは、しょうぞうです。

よく聞くけど、alt属性って重要なの？
altタグがあるとどんなメリットがあるんだろう？

本記事では、SEO対策に必須のalt属性について紹介していきたいと思います。

alt属性とは
まとめ

alt属性とは

alt属性とは、HTMLのimg要素の中に記述される画像の代替となるテキスト情報です。

alt属性が記述されているとスクリーンリーダー（画面の表示内容を音声で読み上げるソフト）を使用するユーザーや、弱いネットワーク回線を使用するユーザー、Webページの画像を確認できないユーザーに対して友好に働きます。

もう一つの特徴としては、画像をリンクにして飛ばす時に、その画像がテキストリンクと同様の役割を果たすことができます。

ただ、Googleはテキストリンクで可能であるならば、無闇に画像をリンクにすることを推奨していません。

alt属性の正しい書き方

簡潔でわかりやすいファイル名とaltテキストが重要になっています。

悪い例と良い例を比較してみましょう。

悪い例

代替テキストがない <img src=“sample.jpg”/>・・・①
キーワードを詰め込む <img src=“sample.jpg” alt=“犬, 座っている犬, 橋の下にいる犬, etc”>・・・②
あまりにも一般的すぎる名前<img src=“image1.jpg”>, <img src=“1”>, <img src=“1.jpg”>・・・③

①　当たり前ですが、代替テキストがない状態なので、ちゃんとalt=””を記述しましょう。

②　検索されたいキーワードを連続で打つと、スパム行為とみなされてGoogleから評価を落としてしまいます。

③　よくあるような名前をファイルにつけると、Web上にある無数の画像から検索されにくくしてしまうので避けましょう。

良い例

<img src=“white dog” alt=“子犬”>・・・①
<img src=“white dog” alt=“橋の下で座っている白い犬”>・・・②

①　誰でもわかるような明確な短い名前をつけるのが良い例とされています。

②　①よりもさらに良いとされているものです。
より詳しく説明すると、同じ画像を使っていても他者と差別化できたり、情報を受け取る側にとってより有益になるので推奨されています。

alt属性の記述の確認の仕方

普段テキストエディタを使っている人は、ほぼ全員知っていると思うのですが、ビジュアルエディタを使っている人は気づかないかもしれません。

ビジュアルエディタで利用している人は、対象の画像を追加したらテキストエディタに変えてhtmlを見ると、先ほど説明したような<img src=“” alt=“”>の部分が確認できます。

そのほかにもテンプレートテーマを導入している人などはもっと簡単にaltを記述できるので、それぞれのテーマの詳しいやり方を検索してみてください。

Googleが推奨している画像の形態

alt属性と関係ないように見えて実は重要なことです。

Google画像検索では、BMP、GIF、JPEG、PNG、WebP、SVG の形式の画像をサポートしています。
なので、この形式以外でアップロードしてしまうと、検索されなくなってしまうので気をつけましょう。

また、ウェブページをレスポンシブデザインすると、ユーザーがさまざまなデバイスタイプで使用できることから、Googleはレスポンシブ画像を推奨しています。

alt属性の効果

alt属性がブロガーにとって効果を発揮するのは、次の２つの場面です。

何らかの理由で画像を表示できない場合の代替テキストを指定できます。
検索エンジンから自分のサイトを見つけやすくしてくれる効果があります。

alt属性が必要な理由

Googleは画像を文字で解釈しているから

googleでは、視覚的な世界を解釈および理解するために、コンピュータービジョンアルゴリズムというものを使用しています。

つまり、googleは画像などの視覚的な情報を文字で認識しています。

Googleにしっかり適切な情報を伝えて理解してもらうことがSEOにとっては大切なので、alt属性が必要になってくるのです。

Googleのwebマスターが実際に発言していたから

Alt text is extremely helpful for Google Images — if you want your images to rank there. Even if you use lazy-loading, you know which image will be loaded, so get that information in there as early as possible & test what it renders as.

— 🍌 John 🍌 (@JohnMu) September 4, 2018