正しいalt属性の使い方を分かりやすく教えてほしいです！
この記事では、こんな疑問にお答えします。
本記事の内容
- alt属性とは？
- alt属性とSEOの関係性
- alt属性を設定する際のポイント
- alt属性の具体的な設定方法
ブログ記事を書くときに画像を使いますよね？
画像にalt属性は設定していますか？
「設定していません...」「そもそもalt属性って何？」という人にはこの記事がお役に立つかと思います。
この記事ではalt属性の基礎部分から具体的な設定方法まで、分かりやすく解説していますのでぜひ最後まで読み進めてみてください。
目次
alt属性とは？【答え：画像の代替テキストです】
alt属性とは、画像に書かれている内容をGoogle（検索エンジン）に伝えたり、画像が読み込めないときに代わりに表示させる画像の代替テキストのことです。
＜img＞タグの中にある［alt””］というタグがalt属性です。
Googleの検索エンジン（クローラー）はテキストを基に情報を読み取るため、画像に何が書かれているのかを認識できません。
そのため、画像にalt属性というタグを設定することで、検索エンジン（クローラー）にどんな内容の画像か？ということを伝えることが出来ます。
また代替テキストと呼ばれている通り、alt属性は画像の代わりになります。
ページの読み込みが上手くできなかったり、回線の調子が悪く画像が表示されなかった場合に本来表示される画像は上記のような表示になります。
あらかじめalt属性を設定しておくことで、画像の代わりにテキストが表示され、本来どのような内容の画像が表示されるはずだったかを読者が理解することができます。
また視覚障害者の方がページを閲覧するときは、スクリーンリーダーと呼ばれる読み上げソフトを使って音声で情報を得ます。
alt属性を設定している場合は画像の内容も読み上げてくれるので、「alt属性を設定することは、よりユーザーに優しいサイト設計にすること」とも言えますね。
alt属性とSEOの関係性
alt属性はSEO（検索順位）に影響します。
Googleとユーザーのどちらの視点からもalt属性を設定することは重要と言えます。
ポイントは下記の通りです。
alt属性がSEOに影響するポイント
- 検索エンジンに画像の内容が伝わり、画像を含めた評価をしてもらえる
- ユーザビリティーが向上する
- 画像検索に使用される
- 画像にリンクが貼られている場合、アンカーテキスト（文字列）になる
1つずつ解説します。
① ②は先程の「SEOとは？」で説明した内容と重複しますのでササッと説明しますね。
ポイント①：検索エンジンに画像の内容が伝わり、画像を含めた評価をしてもらえる
先ほど説明した通りですが、検索エンジンは画像に書かれている内容を認識できません。
alt属性を設定することにより検索エンジンが画像に書かれている内容を理解出来るようになり、画像を含めてページを正しく評価してくれるようになります。
ポイント②：ユーザビリティーが向上する
こちらも先程説明した通りですが、alt属性を設定することにより、何らかの原因で万が一画像が表示されない場合にも読者に画像の内容をテキストで伝えることが出来ます。
また視覚障害者の人にも音声で画像の内容を伝えることが出来るようになるため、ユーザビリティーの向上につながります。
ポイント③：画像検索に使用される
上記はGoogleの画像検索です。
画像検索で検索をした場合、alt属性の内容を反映させますので、設定していないと検索にヒットしません。
alt属性を設定することで画像検索からの流入も見込むことが出来ますので、機会損失を防ぐためにも設定しておくことが大切です。
ポイント④：画像にリンクが貼られている場合、アンカーテキスト（文字列）になる
アンカーテキストとはリンクを貼る際のテキスト（文字列）のことです。
-
-
【SEOに効く】ブログ運営に大切な正しいキーワード選定の方法
例えば上記の記事をリンク先に設定する際、
- 【SEOに効く】ブログ運営に大切な正しいキーワード選定の方法をご覧ください
⇒ https://koublog.me/seo-keyword/ - 【SEOに効く】ブログ運営に大切な正しいキーワード選定の方法をご覧ください
のような書き方になると思いますが、②のようにアンカーテキストにキーワードを含んだ方がSEO的には良いとされています。
画像にリンクを貼る場合はalt属性がアンカーテキストとなりますので、リンク先の情報を分かりやすくalt属性に設定しておくようにしましょう。
alt属性を設定する際のポイント
alt属性を設定する際のポイントは下記の2つです。
- すべての画像にalt画像を設定する必要はない
- 画像に合ったキーワードを適切な長さで入れる
それぞれ解説します。
ポイント①：すべての画像にalt画像を設定する必要はない
そのままなのですが、alt属性はすべての画像に設定する必要はありません。
記事に関連する画像はalt属性を設定をした方がいいですが、装飾などの目的で使用する画像には設定する必要はありません。
「この画像の内容をGoogle（検索エンジン）に伝えたいか？設定することでユーザビリティーは向上するか？」という視点で考え、「Yes」と言えるものだけ設定すればOKです。
ポイント②：シンプルかつ適切なキーワードを入れる
alt属性に書くテキストはシンプルかつ適切なキーワードを含んでいることが大切です。
Google公式サイトでは下記のような書き方を推奨しています。
代替テキストを設定するときは、キーワードを適切に使用して、ページのコンテンツのコンテキストに沿った、情報に富む、有用なコンテンツを作成するようにしてください。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="子犬"/>
・最も良い例: <img src="puppy.jpg" alt="投げたものを取ってくるダルメシアンの子犬"/>
引用：Google 画像検索に関するおすすめの方法｜Search Consoleヘルプ
特にキーワードを詰め込もうと無駄に長い文章にしたりキーワードを羅列したりするとサイトがスパムとみなされてしまう可能性がありますので避けるようにしましょう。
alt属性の具体的な設定方法
alt属性を設定する方法は2種類ありまして、
- WordPressで設定する
- HTMLを編集する
の2パターンです。
どちらも簡単ですよ。
方法①：WordPressで設定する
記事を書く前に画像を前もって登録する場合はこちらの方法でalt属性を設定しましょう。
まずはWordPress管理画面の「ダッシュボード ＞ メディア ＞ 新規追加」の順番に進みます。
次に設定したい画像をアップロードしましょう。
上記のようになればアップロードは完了ですので、画像横の「編集」をクリックします。
するとアップロードされた画像が表示されますので、その下に「代替テキスト」を設定する箇所があります。
ここに入力した文字がalt属性となります。
方法②：HTMLを編集する
記事を書いているときに新しい画像を挿入する場合はこちらの方法を使います。
まずは画像を挿入します。綺麗なバルーンですね。
次に画像をクリックし、HTML編集に切り替えましょう。
するとこの画像の場合は下記のような文字列が表示されます。
<figure class="wp-block-image size-large"><img src="https://koublog.me/wp-content/uploads/2020/08/baloon-1024x676.jpg" alt="" class="wp-image-2386"/></figure>
この中の［alt=""］がaltタグですので［""］の間に入力した文字がalt属性になります。
どちらも簡単にできますので面倒くさがらずに設定するようにしましょう。
まとめ：alt属性を設定して、Googleと読者に正確な情報を伝えよう
以上、alt属性について解説させて頂きました。
alt属性に関しては、得に難しい設定ではないですがSEO的な重要度は高いですので面倒くさがらずしっかりと設定するようにしましょう。
SEOはユーザーとGoogleの両者が見やすく理解しやすいよう、正しい設定を積み上げていくことが大切です。
その他のSEO対策については【SEO対策とは？】SEOに強いブログを作るための12のポイントにまとめていますので、ぜひ参考にしてみてください。
-
-
【SEO対策とは？】SEOに強いブログを作るための12のポイント