軽視しがちだけど、alt属性に設定しているテキストをGoogleに伝えることはけっこう重要な要素。
リンクの有無だけでなく画像の意味をGoogleというロボットにいかに伝えるかがポイントです。
Web制作会社でも設定していないことが多い「alt属性」は設定しておいたほうがプラスになります。
- alt属性は画像の意味をGoogleに正しく伝える手段の一つ
- リンクが生じる場合はアンカーテキストの代わりになる
- キーワードの詰め込みは行わないようにする
- 意味を持たない画像にはalt属性は空白にする
alt属性とは
alt(オルト)属性とは、画像の代替となるテキスト情報のこと。
音声読み上げサービスで画像が含まれる場合、alt属性に設定しているテキストを読み上げることもあるから設定しておいて損はないテキストでもあるのよね。
そもそもなぜ画像にテキスト情報を与えるのかというと、理由は大きく2つあるんですね。
- 何らかのエラーで画像が表示されない場合、テキストで表示させるため
- Googleに画像の「意味」を教えることができるため
ユーザー視点では、画像表示がされない場合に設定するもの(①)なんだけど、Googleは画像のデザインは把握できないから画像の意味を知らせるための設定(②)と覚えればOKですね。
alt属性はSEO評価として重要なのか
結論から言うと、alt属性が順位を決めるアルゴリズムに大きく影響することは考えにくいとされています。
テキストしか判断できない(とされている)Googleからすれば、どんなに素晴らしいデザイン性を持った画像であっても正直大きな影響はないんです。
1つの画像は100文字に相当するとも言われていることから、ユーザーにとっては画像のデザイン性に左右されてしまうんですけどねぇ(苦笑)
そこを何とかしようとGoogleは頑張っているようですが、当分先でしょう。
とはいえ、無視もできないのがalt属性。
alt属性に設定しているテキスト内容によっては、画像はもちろんページ全体の主張を正しく伝えることができるからです。
リンクの有無で変わるalt属性の意味合い
alt属性はリンクが発生するかどうかで、設定するテキストの重要性が変わってくるから注意してみましょ!
リンクが発生する画像の場合
リンクが発生する場合は、alt属性がアンカーテキストの代わりとなるのよ。
そう、通常リンクを設定する場合は『alt属性の意味とは』というようにテキストをクリックすると別ページに飛ぶように設定しますね。
これがアンカーテキストです。
でも画像にリンクが設定されているとクリックするは画像なので、アンカーテキストは一見存在していないように見えます。
リンクが発生する場合は画像の意味ではなく、次ページの内容を示すテキストをalt属性にすることが重要なんですね。
リンクが発生する画像の場合は、
<a href="リンク先のURL"><img src="画像のパス" alt="alt属性の意味とは"></a>
>
とすることでalt属性の意味とはと同等の意味を持つということになります。
被リンク効果と似ているんですが、キーワードを含めた自然な形のアンカーテキストにすることが重要なんですね。
自然な形のアンカーテキストとは
自然な形のアンカーテキストとは、
SEO目的とした内容にしていないキーワードのこと。
検索する時に使用するようなキーワード(「デート 東京」みたいな分割したもの)を設定しないようにするんです。
謝:
<a href="リンク先のURL"><img src="画像のパス" alt="東京 飲食店 ●●"></a>
正:
<a href="リンク先のURL"><img src="画像のパス" alt="東京のデートでオススメの飲食店●●"></a>
これはリンクが発生するalt属性も同じことが言えます。
ひと昔前は、
<a href="リンク先のURL"><img src="画像のパス" alt="デート 東京"></a>
を乱発すれば上位表示できていたようですが、今ではスパム扱いされるから止めましょう。
あとキーワードの詰め込みすぎも御法度です。
謝:
<a href="リンク先のURL"><img src="画像のパス" alt="デート 東京 飲食店●● 安い オススメ 格安 お酒 人気 おしゃれ"></a>
リンクが発生しない画像の場合
リンクが発生しなかったらalt属性はテキトーで良いの?笑
という疑問を持つ人もいるでしょう。
まぁ大きな影響はないですが、alt属性だけでは伝えきれない場合はテキストを前後に追加したほうが良いです!
↑これ何の画像かわかりますか?
・・・
・・・・・・
・・・・・・・・・
はい。りんごですよね。
ちなみに画像だけだったら「りんご」ですが、前後の文脈によって画像が持つ意味も変わってくるんです。
- ①1個5,000円の話題の青森県産りんご
- ②果物にニコちゃんマークをつけられる器具の例
- ③子供が学校の実習で作成した発泡スチロールのりんご
単純に「りんご」だけでも、深く掘ればもっと別の詳細のaltをつけたほうが画像の意味に近づきますよね。
ページ内容によって画像の意味が全く変わってしまうことを防ぐのもalt属性の役割なんです。
【簡単な例】
青森の瀬尾農園で店主が5年の歳月をかけて生み出した育て方によって生まれりんごがある。
それは、瀬尾りんご。
『ここに画像を設定』
↑
画像が農園なのかリンゴなのかはGoogleは理解できない
1個250円前後の相場に対して、瀬尾りんごはトンデモナイ金額設定をしている。
1個5,000円だ。
5,000円のりんごなんて誰も買わないと周囲は笑っていたんです。
しかし、なぜか注文が殺到し来年分まで予約完売しているというから驚きの一言。
瀬尾りんごの人気と価格の秘密は一体なんなのか
(以下説明が続く)
画像が何の意味を持っているかなんて文脈によっては変わってきちゃうでしょ?
人間は『農園』なのか『リンゴ』なのかはデザインを見れば推測はできるけどGoogleは判断できないもの。
テキストの代わりとなるalt属性を用意することで、画像の意味をGoogleにしっかりと伝えることができます。
瀬尾りんごの例では具体的なテキストが前後にあったけど、逆に画像だけだったらどう?
さっきの文章をalt属性にすると大変なことになります。
謝:
<img src="画像のパス" alt="青森の瀬尾農園で店主が5年の歳月をかけて生み出した育て方によって生まれりんごがある。それは、瀬尾りんご。1個250円前後の相場に対して、瀬尾りんごはトンデモナイ金額設定をしている。1個5,000円だ。5,000円のりんごなんて誰も買わないと周囲は笑っていたんです。">
うぜぇ!!!笑
Googleはテキストを元に判断するので、やはり画像だけでなくページの主張性を出すならテキストを多めにして、画像には最低限の意味を示すalt属性を配置したほうが吉。
alt属性の文字数制限は?
alt属性のテキストに文字数制限はないけど、簡潔に説明できる程度にするのが良いですね。
長くても理由がない限りは25~30文字以内が理想的ですね。
ちなみに、長すぎてもマイナスにはなりにくいとされています。
全ての画像にalt属性を設定するの?
全ての画像にalt属性を設定する必要はないです。
例えば、メニューの背景とか帯とかデザイン上必要だけど意味はない画像に関しては
alt=""
と空白にしておけばOKです。
まとめ
簡単にざざっとまとめましょう!
- alt属性は画像の意味をGoogleに正しく伝える手段の一つ
- リンクが生じる場合はアンカーテキストの代わりになる
- キーワードの詰め込みは行わないようにする
- 意味を持たない画像にはalt属性は空白にする
- alt属性に文字数制限はないけど簡潔に伝えられるようにする
- alt属性が長くなるようだったらテキストを前後に追加する
効果は薄いかもしれないけどチリも積もれば何とやらだし、ページの内容を正しく認識してもらうためにも忘れずに!
※たまに抜けちゃうんだよね(笑)
画像にalt属性があるかどうかを調べる簡単なツールもあるから、気になったらどうぞ。