SEO

SEOにも影響するalt属性とはなに?【効果的な活用方法を解説】

2021年1月23日

alt設定記事の見出し

悩む学生
altってなんですか?詳しく知りたいです。

今回はこんな悩みを解決します。

本記事の内容

  • alt属性とは
  • alt属性の必要性
  • alt属性の適切な付け方と注意点

alt属性についてブログを始めたての人はあまり気にしてない人もいるのではないでしょうか?

 

実はぼくも意識できていませんでした。
リットン

 

しかし、alt属性SEOに影響を与える1つの要因になっています。

 

今回は、alt属性についてまったく知らない人に向けて、alt属性の基礎と適切な付け方について紹介します。

 

この記事を読めば、alt属性について全体像を掴めますし、あとで設定しとけばよかったと後悔することもなくなりますよ。

 

簡単なことなので、ぜひ最後まで見てくださいね。
リットン

 

alt属性とはなにか?検索エンジンに向けた画像の説明

?マークの人

alt属性とはざっくりいうと、記事に挿入する画像の説明文のことで、またの名を代替テキストといいます。

 

画像HTMLの下記の部分です

<img src="画像のURL" alt="この部分 " >

 

ただし、alt属性は基本的には読者に向けてではなく、検索エンジンつまりGoogleに向けて設定するものです。

 

人間は画像を見ればなんの画像かは理解できます。しかし、検索エンジンは画像を画像としてきちんと認識してくれないのです。

 

そのため、検索エンジンに向けて「この画像はこういう画像ですよ。」という説明をつけます。

 

いろいろ書きましたが、alt属性は画像のテキスト情報ということだけおさえれば問題なしです!
リットン

 

alt属性の役割と必要性

虫網で電球を捕まえる

alt属性の役割と必要性を確認しましょう。

 

主に下記の5つの役割を果たしてくれます。

alt属性が果たす役割

  1. 視覚障がい者の音声読み上げに利用される
  2. 画像が表示されない時の補助テキスト
  3. 画像リンクのアンカーテキスト
  4. 画像検索で表示される
  5. SEO的にプラスの評価

1つずつ見ていきましょう。

 

視覚障がい者の音声読み上げに利用される

代替テキスト(画像について説明するテキスト)は、スクリーン リーダーを使用するユーザー向けの補助機能として役立ちます。(一部省略)

出典:Google 画像検索に関する SEO のおすすめの方法 

alt属性は視覚障がいの方の手助けになります。

 

視覚障がい者の方は、PCを使うときにスクリーンリーダーを使用します。
しかし、スクリーンリーダーは文章を読み上げてくれても、画像の内容までは読者には伝えられません。

 

そんなとき、alt属性を付けていれば、スクリーンリーダーはalt属性を読者に伝えてくれるのです。

 

視覚障がいの方にとってalt属性の設定はありがたいのです。

 

画像が表示されないときの補助テキスト

代替テキスト(画像について説明するテキスト)は、ウェブページの画像を確認できないユーザー向けの補助機能として役立ちます。(一部省略)

出典:Google 画像検索に関する SEO のおすすめの方法 

 

なんらかの理由で画像が表示されないときに、代わりにalt属性が表示されます。

 

画像が表示されない主な原因としては下記の通り。

  • 読み込みに時間がかかっている
  • 画像のリンクが切れて削除されている

 

写真が表示されない場合にalt属性を設定してなければ、読者は謎の空白を不快に感じて離脱するかもしれません。

 

ですが、alt属性を設定することでその不快感は多少マシにはできるでしょう。

 

画像リンクのアンカーテキスト

画像の代替テキストは、画像をリンクとして使用する場合にアンカー テキストとして使用できます。

出典:Google 画像検索に関する SEO のおすすめの方法 

アンカーテキストは内部リンクや外部リンクをつけるテキストのこと。例の青字の部分です。
(例)ブログで使う有料画像については初心者こそブログで有料画像を使うべき理由5選を参考にしてください。

 

アンカーテキストの役割はリンク先の情報を簡潔に伝えるもので、こちらもSEO的に重要とされています。

 

そのため、alt属性も画像につけたURLのリンク先を正しく伝えるためには必須です。

 

画像検索で表示される

alt属性の設定により、画像検索からの流入も見込めます。

 

例えば「富士山 雪」と画像検索した場合に、あなたがalt属性にこれらのキーワードを含めていれば、画像検索で表示されやすくなります。

 

流入元が少しでも増やせるならやらない手はないですね。

 

SEOに効果的

以上のことから、alt属性SEOに効果的といえるでしょう

 

またalt属性は必要ないという人もいまが、実際にGoogleはこのように明言しています。

Google にとって代替テキストは、画像の題材についての有用な情報です。Google はこの情報を使用して、ユーザーのクエリに最適な画像を判断します。

出典:Google 画像検索に関する SEO のおすすめの方法

 

少数派の意見よりGoogleのいうことを聞くのが無難でしょう。

 

たしかに順位が急激に変わらないかもしれません。が、設定しなくて損をする可能性はあります。

 

alt属性の設定方法

設定マークに立つ人

alt属性は簡単に設定できるので、やっておきましょう。

方法は2択。

  • 直接コードに書き込む
  • 代替テキストに書く

直接コード部分に書き込む

<img src="画像のURL" alt="この部分 " >これが画像部分のコードになりますが、このalt以下の部分に直接書き込みます。

 

例えば、<img src="画像のURL" alt="犬が庭を走る " >など。

 

ただ、次の方法の方がラクなのでそちらを推奨します。

 

画像挿入時の代替テキストに書く

こちらの方が簡単。

 

挿入したい画像をクリックしたら、画像のような設定が開きます。

代替テキストなどの画像設定

 

この代替テキストの部分に打ち込みましょう。

 

alt属性の適切な付け方と知っておくべきこと

鉛筆に乗って空を飛ぶ

ここではalt属性の適切な付け方と注意点について紹介します。

alt属性の適切な付け方

alt属性を適切につけるポイントは以下の2つです。

 

適切なalt属性の設定方法

  • キーワードを入れる
  • 内容は簡潔に伝える

 

Googleもこのように明言しています。

代替テキストを設定するときは、キーワードを適切に使用して、ページのコンテンツのコンテキストに沿った、情報に富む、有用なコンテンツを作成するようにしてください。alt 属性にキーワードを羅列すること(キーワードの乱用)は避けてください。

出典:Google 画像検索に関する SEO のおすすめの方法 

 

車のそばに立つ女性

例えば上記の画像なら「車のそばに立つ美女」などがいいでしょう。

 

できるだけ無駄を省いて、必要なキーワードのみを入れてください。

 

逆にNGな設定の例を挙げると以下のようなものがあります。

無関係な文字の並び

asdあjさ

キーワードを入れすぎ

白 車 女性 美人 シャツ 立っている 髪の毛が長い

単なる数字

12345

 

alt属性に関して知っておくべきこと

alt属性に関していくつか知っておいた方がよさそうなことを紹介しておきます。

 

alt属性は記述した方がいいと書きましたが例外もあります。装飾目的の写真やアイコンなどがこれにあたります。

 

これらは記事のコンテンツとしては意味を持たないため、Googleも評価はしてくれません。

 

ただし、記述しない場合でも、alt=“”“”を空白にするだけで、alt=“”ごと消してはいけないので注意が必要です。

 

まあ普通は消しませんのでご安心を。
リットン

 

念のために、alt属性に関する便利ツールを紹介しておきます

  • GoogleChromeを利用する
  • AltMeta viewerを利用する

これらのツールはaltが適切に設定されているか確認できます。

 

詳しい説明はSEOラボさんのalt属性に関する記事を参考にお願いします。

 

またライバル記事のaltのチェックにhttps://seolaboratory.jp/alt/というツールがあります。

 

興味のある人は使いましょう。

まとめ:alt属性は手間はかからないので設定するべき

人が電球に座る

alt属性の設定は上記のように手間はそれほどかかりませんし、してなくて損をする可能性が非常に高いので、設定しましょう。

 

altの役割を改めて確認しておきます。

alt属性の役割

  • 画像を文字の情報として検索エンジンに伝える
  • 視覚障がい者の補助として働くといったユーザビリティの向上
  • 画像検索も見込める

 

やらなかったらどうせあとで後悔する羽目になるのでaltの設定はおすすめします。

 

今回は以上です。ありがとうございました。

 

関連記事

ブログで使う理想の容量とサイズは?【圧縮手順は簡単3ステップ】

関連記事

初心者こそブログで有料画像を使うべき理由5選【有益サイトも紹介】

-SEO

Copyright © Lytton Blog