こんな悩みに答えます。
結論、alt属性を設定しておくと以下のメリットが得られます！
・GoogleなどのサーチエンジンのSEO対策になる
・画像が表示されなかった場合に、代替テキストがあることによってユーザーが画像内容を把握できる
本記事では、そんなalt属性の設定方法から設定するメリット、記事後半ではWordPressでalt属性を設定する方法を紹介します。
なお、WordPresss（ワードプレス）を使うことで、難しいソースコードにalt属性を記述しなくても簡単に設定できます。
サイトやブログを立ち上げて簡単に運用されたい方にはオススメです！
ワードプレスでサイトを立ち上げてみたい方は以下記事をご覧ください。
-
【初心者でも簡単！】WordPressでブログを開設する方法・始め方
続きを見る
前置きが長くなりましたが、それでは早速はじめます。
目次
alt属性とは？
alt属性は、Webブラウザで画像が表示されないときに、画像の代わりになるテキスト情報のことです。
alt属性は、代替テキストと呼ばれることもあります。
alt属性の役割としては、以下があります。
・通信が不安定などが原因で画像が正しく表示されない場合に、画像の代替テキストを表示できる
・視覚に障害がある方がスクリーンリーダーを使用することで画像の意味を理解できる
万が一サイトを開いて画像が表示されなかった場合に、alt属性で設定した代替テキストを表示させコンテンツの意味が伝わるようにできます。
また、音声読み上げ機能を使用した場合の読み上げテキストとしての役割にもなるので、視覚障害者の方などが利用しやすくなる効果もあります。
alt属性の記述方法
HTMLタグのimg要素を書く際には、以下のように記述します。
command <img src= “/img.png” alt=”◯◯◯” />
画像を見なくても掲載している画像がどんなものか検索エンジンとユーザーが把握できるテキストを書いてあげることがポイントです（この後詳しく紹介します！）。
alt属性を設定するメリット
冒頭でも紹介しましたように、alt属性の設定はユーザーとGoogleの両方にメリットを与えられます。
Googleは以下のように提言しています。
Google は、画像のキャプションやタイトルなどのページのコンテンツから画像のテーマに関する情報を抽出します。可能な限り、画像のテーマに関連するページの、関連テキストの近くに画像を配置するようにしてください。
Googleは代替テキストを設定しておくことを推奨しており、alt属性を設定することで、ある程度SEO対策が期待できそうです。
また、alt属性の設定以外に画像近くに画像の説明書きを書いてあげるのもユーザーやGoogle両方に効果的なのでオススメです。
ただ、alt属性を設定したからといって劇的に検索順位が伸びるわけではないようなので注意は必要そうです。
alt属性の設定以外にやっておくべきSEO対策について以下で紹介しているので、参考にしてみたい方はご覧ください！
-
WordPressでブログを立ち上げたらやるべきSEO対策6選【初心者】
続きを見る
alt属性の書き方ポイント
alt属性の書き方のポイントは、以下の通りです。
・多数のキーワードを含めない
・画像の内容に合わせたキーワードにする
・「～画像」と入れない
１つずつ順番に紹介します。
・多数のキーワードを含めない
alt属性に色んなキーワードを含めるのはNGです。
『キーワード』をたくさん含めることで、確かにSEO効果になりそうですが、ユーザーや検索エンジンに適切に情報を伝えられなくなります。
特に、スクリーンリーダーで意味のないキーワードが読み上げられてしまうことで、なんの画像であるかユーザーは混乱してしまう可能性があります。
例えば、
Good
「犬 散歩」
NG
「犬 猫 散歩 飼い方 おやつ ペット」
上記のように画像とは関係のないキーワードが沢山あることで、画像の内容を適切に伝えられなくなります。
色んなユーザーを狙ってキーワードを詰め込むよりは、少ないキーワードで代替テキストを設定してあげましょう！
・画像の内容に合わせたキーワードを具体的に書く
キーワードの詰めすぎと同じように、画像の内容にあった具体的なキーワードを入れるのがポイントです。
例えば、画像にリンクを貼っていて『○○へのリンクのボタン』のように説明するのではなく、『◯◯商品ページ』などその先のページ名を設定してあげます。
具体的ではないキーワードですと、Googleは評価するにしても難しくなってしまいますし、品質ガイドラインにも抵触する可能性にもなります。
抽象的なテキスト情報を設定するよりかは、画像内容を具体的に書くことがポイントです！
・「～画像」と入れない
画像内容をテキストで代わりに説明するので、改めて「〜画像」という文言を入れる必要はありません。
WordPressでalt属性の設定方法
続いてWordPress（ワードプレス）でalt属性を設定する方法を紹介します。
まずは、お使いのワードプレスを開きまして、画面サイドバーから記事を開きます。
開きましたら、「メディアを追加」をクリックして追加したい画像を選択します。
選択すると「代替テキスト」があります。
「代替テキスト」がalt属性になるので、ここにキーワードを入れて「投稿に挿入」ボタンをクリックして完了です！
既存のalt属性を変える方法
続いて、すでに登録済みの画像のalt属性を変える方法です。
まずは、設定したいalt（代替テキスト）画像をクリックします。
クリックすると、先ほどと同じように「代替テキスト」の項目があるのでそちらを入力します。
最後に「更新」ボタンをクリックして完了です！
alt属性の確認方法
最後に、設定したalt属性が問題なく反映されているか確認する方法について紹介します。
ツールを使わないで簡単にalt属性を確認したい方にはオススメです。
まずは、デベロッパーツールを表示させるのですが、以下のショートカットキーを押すことで表示できます。
- Windowsユーザー：Ctrl+Shift+I
- Macユーザー：⌘ command + Option + I
表示できましたら、続いて以下のショートカットキーを押して検索ボックスに移動します。
メモ
・Windowsユーザー：Ctrl + F
・Macユーザー：⌘ command + F
検索ボックスに移動できましたら、検索ボックス内に「alt」と入力してEnterキーをクリックします。
すると該当箇所が黄色のマーカーで敷かれるので、画像にalt属性が設定されているかを確認できます。
なお、デベロッパーツールの使い方について以下で詳しく紹介していますので興味のある方はご覧ください！
-
【ブログ初心者】Googleデベロッパーツールの使い方を解説します
続きを見る
alt属性を設定してSEO対策をしよう！：まとめ
今回は、alt属性について紹介しました。
ただ、最後にお伝えしますと全てのalt属性に必ず設定する必要はありません。
あくまでGoogleに読み込んでほしい画像や、ユーザーに理解してもらう必要のある画像に設定しておくのがポイントかなと思います。
alt属性の設定ができていない方は、これを機会にぜひ設定してみてください！
今回は以上です。
ここまで読んでいただきありがとうございました。