
あなたはウェブページに挿入する画像の「代替テキスト」を設定していますか?
画像に代替テキストを設定すると、ユーザーのための利便性をあげたり、SEO面で評価されてアクセスアップすることも期待できます。
細かい点にはなるのですが、サイトの質を高めるために代替テキストは軽く見ることはできません。
そんなわけでこの記事では、代替テキストについての詳細や、代替テキストを入れるときのポイントについてお伝えしていきます。
目次
代替テキストとは?役割は?
代替テキストとはずばり、サイトページ内に挿入されている画像がどんな画像なのかを伝えるためのテキスト文章になります。
同じ意味の言葉として、「altタグ」・「alt属性」といった言葉があります。
なぜわざわざ画像をテキスト文章で説明する必要があるのかというと、Googleは画像の判別をできないことがまず理由としてあります。
例として、以下の画像を見てみてください。
人間の目で見ると、一目でこの画像はあくびをしている猫の画像であることがわかると思います。
ところが、今のGoogleの機械のシステムでは、この画像だけではあくびをしている猫の画像であることを理解することができません。
Googleはサイトページの文章はほぼ正確に理解することはできても、画像までは理解できないのです。
そして、ここで重要な役割をしてくれるのが代替テキストというわけです。
代替テキストを「あくびをしている猫」と設定してあげると、Googleは「この画像はあくびをしている猫の画像なんだな」と理解できるようになります。
また、以下のように、サイト利用ユーザーの利便性を向上させてくれる役割も代替テキストにはあります。
- サイトのページの読み込みの不具合によって画像が正確に表示されなかった場合、画像の代わりに代替テキストで設定した文章を表示してくれる
- 音声ブラウザによって記事の文章を読み上げてもらう場合、代替テキストを設定しておけばテキストを音声として読み上げてくれる
代替テキストはSEO効果もあり
画像に代替テキストを設定すると、SEO効果が期待できる点も見逃せません。
検索結果の順位を決めるGoogleのアルゴリズムは、記事の構成がわかりやすく整っていて、ユーザー満足度の高いサイトを評価して高順位にさせる傾向があります。
お伝えしてきたように、代替テキストにはGoogleに画像の情報を伝えたり、ユーザーの利便性を上げる働きがあります。
なので、代替テキストはSEO効果に関係しているとされています。
実際に、Googleも画像には適切な代替テキストを設定することを推奨しています。
また、代替テキストを設定しておくと、Google検索結果の画像項目で表示されることがあり、アクセスアップも期待できます。
例えば、先ほどの例でも紹介した「あくびをしている猫」と代替テキストを設定した猫の画像であれば、「猫 あくび」などで検索した結果に表示される可能性があります。
検索したキーワードに対して画像を表示させるユーザーも多いので、画像検索で上位に表示できれば大きなアクセスアップが見込めるでしょう。
筆者であれば、ある美容系(ヘアケア)のキーワードで検索した際に、画像の検索結果で最初の方に表示されるページがあるので、画像検索からのアクセスもそこそこあります。
このように、代替テキストはSEO面でも効果的なのでぜひ設定していきましょう。
代替テキストの入れ方
続いて、代替テキストの入れ方について解説していきます。
基本的な代替テキストの入れ方
サイトページに挿入する画像はhtmlコードで以下のように表示されます。
<img class=”×××” src=”https://×××” alt=”〇〇” width=”×××” height=”×××” />
この中のalt属性を編集します。
〇〇の部分に入力した文字が代替テキストになります。
もし代替テキストを設定しない画像であれば、文字は入力せずに、alt=””の状態にします。
wordpressの場合の代替テキストの入れ方
wordpressを使っているなら、代替テキストはとても簡単に入れることができます。
まず、投稿画面に挿入した画像をクリックし、「Edit|button」のボタンをクリックします。
それから、開いた画像詳細画面の中にある「代替テキスト」欄に文字を入力し、最後に右下の「更新する」をクリックすれば完了です。
その他の方法として、メディアライブラリの編集画面でも代替テキストを入力して設定することができます。
画像ライブラリ一覧から対象の画像を選択し、右側に表示されている添付ファイルの詳細の中の「代替テキスト」に文字を入力するだけでOKです。
入れる代替テキストのポイント
最後に、代替テキストを決めるときのポイントについてお伝えしておくので参考にしてみてください。
代替テキストは画像を簡潔に表す文章が適切です。
最適な画像を説明するテキストについては、以下のようにGoogleが提供するsearchconsoleのヘルプでも述べられています。
代替テキストを設定するときは、キーワードを適切に使用して、ページのコンテンツのコンテキストに沿った、情報に富む、有用なコンテンツを作成するようにしてください。alt 属性にキーワードを羅列すること(キーワードの乱用)は避けてください。これによって、ユーザー エクスペリエンスが低下し、サイトがスパムとみなされる場合があります。
悪い例(代替テキストがない): <img src=”puppy.jpg” alt=””/>
悪い例(キーワードの乱用): <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”/>
英語の表記になっていますが、良い例と最も良い例を日本語にすると、
良い例が「子犬」で、最も良い例は「持ってこいをするダルメシアンの子犬」となっています。
まとめると、2~3文節ぐらいの文章がよさそうですね。
何度か例であげてきたこちらの画像であれば「あくびをしている猫」。
こちらの画像であれば、「両手を上げる笑顔の女性」といった感じのテキストがいいでしょう。
一方、悪い例でもあるように、キーワードをいくつも並べたような代替テキストはSEO面でマイナス評価されることがあるので避けるように注意しましょう。
まとめ
代替テキストは画像を説明するテキストのことで、設定することでユーザーの利便性やSEO効果の向上が見込めます。
テキストの入力設定も簡単にできるので、挿入する画像にはぜひ代替テキストを設定するようにしていきましょう。
ちょっとしたことの積み重ねが大きな結果につながるかもしれませんよ。
コメントを残す