画像につける「alt属性」について、あなたはご存知でしょうか？
このalt、普段私たちの目に付く事はないので軽く見られがちですが、実はSEO*にも影響する大事な要素なんです！
簡単に付けられるのに付けていないなんて損ですよ
この記事ではalt属性の概要と、付け方について解説します。
* SEO: ユーザが検索したとき上位表示されるためにおこなう工夫のことです。
詳しくは「よく耳にするSEOとは何か説明してみた」を参照してください。
altの意味
altはHTMLタグのimg要素のプロパティの一つです。
なるほどわからん。
ですよね。かみ砕いて説明しましょう。
altを簡単に言うと、画像に「この画像がどういうものかをメモしたもの」です。
また、altは代替テキストとも言われています。
ウェブページを開いたとき、上手く画像が読み込めない事ってありますよね。
通信制限で読み込めないとかよくあるよね
そんな時にaltは使われていて、読み込めていない画像がどんな画像かを文字で表示しておくために使います。
先に画像を文字で説明するって事ですね。
SEOへの影響
altはSEOに影響すると言われています。
なぜかと言うと、Webページの質を評価するときに見られるのは画像以上にaltの方だからです。
いくらAIが劇的な進歩をしていても、まあ自動的になんの画像かをロボットが完璧に把握することはできないんですよね。
ですので、画像がどういうものかを把握するためにaltが使われています。
このことから、画像を含めコンテンツを適切に評価してもらうにはaltをつける必要があると言えます。
必要なのはわかったけど、SEOに影響するって言える根拠は？
理由としてはGoogleの社員さんがこんな事をツイートしていたり、
Search ConsoleのSEOスターターガイドにもaltについて書かれています。
画像にわかりやすいファイル名を付けて、alt 属性の説明を入力します。「alt」属性を使用すると、何らかの理由で画像を表示できない場合の代替テキストを指定できます。
引用: 検索エンジン最適化（SEO）スターター ガイド
このようにGoogleはいつもaltの重要性を伝えています。
これが評価に影響しないとは考えにくいですよね！
また、2020年12月のアップデートの際に「適切にaltを付けられていない記事の順位が落ちた」という報告もあります。
altの付け方
WordPressの編集画面で付ける
altは画像の編集・設定画面で記述できます。
（書き方は次の章で解説しますね！）
以下の画面はWordPressのメディア欄から画像を選択した際の画面です。
なお、Gutenbergなら記事の編集画面でaltの記述ができます！
HTMLで記述する
htmlで画像を記述する場合は、以下のように画像のsrcの次ぐらいにalt=”altテキスト”という形式で記述すればOKです。
altテキストの書き方
altをどのようにして入れるかが分かった所で、実際にどのようなテキストを入れるべきか把握しておきましょう。
こちらもGoogleでどのように書くのが望ましいかが説明されています。
- 分かりやすい説明（タイトル）を心がける
- “dog”だけよりも、”Dalmatian puppy playing fetch”のようにするとどんな画像かがより伝わる
- 1.jpgとかは何の画像か伝わらないので望ましくない
- 長過ぎないように気をつける
- altに検索クエリとか入れても逆効果（スパム扱いを受ける）
- 位置調整などで使う小さい画像（ユーザが認識しないような画像）にはaltは入れなくても良い
- alt=””(入力無し)を入れておくとより良い（無難）
悪い例（代替テキストがない）: <img src=”puppy.jpg”/>
悪い例（キーワードの乱用）: <img src=”puppy.jpg” alt=”puppy dog baby dog pup pups puppies doggies pups litter puppies dog retriever labrador wolfhound setter pointer puppy jack russell terrier puppies dog food cheap dogfood puppy food”/>
良い例: <img src=”puppy.jpg” alt=”puppy”/>
最も良い例: <img src=”puppy.jpg” alt=”Dalmatian puppy playing fetch”/>
引用: Google 画像検索に関するおすすめの方法
altのチェック方法
altは画像を入れる毎に書き込みますが、人間忘れてしまう事もあります。
そんな私たちの味方、無料ツールです！
以下サイトで公開されております。（外部サイトなのであしからず）
⇒画像ALTチェッカー
ここにサイトのURLを入れるだけで、サイト内の画像を検索・altタグの内容を一覧表示してくれます。
画像のURLじゃなくて、サイトのURLだけで大丈夫ですよ
これで抜けが無いか確認すれば安心です。
ちなみに管理人はこの記事を書くにあたって確認したのですが、抜けが結構あることに気づきました。修正中です……。
まとめ
今回の記事についてまとめると、以下のようになります。
・altは画像の説明テキスト
・altはSEOに影響する
・テキストは分かりやすく簡潔に
・無料ツールで抜けが無いか確認しよう
これを機にaltを付けるのを習慣化しましょう！
もし不明点などがあればコメント欄にてお問い合わせください。
Twitterの方でブログのお悩み相談なども受け付けていますので、お気軽にご連絡くださいね！