「生成AI」「LLM」など、AI時代のWEBマーケティングを制する!基礎から最新トレンドまで、169の必須用語を完全網羅。今すぐ無料ダウンロードして、知識をアップデートしよう!今すぐ無料ダウンロードalt属性とは、画像の代わりにテキスト情報を表示するためのHTMLタグのimg要素のプロパティ(属性)のことです。別名「代替テキスト」や「altタグ」「altテキスト」とも呼ばれ、alt属性の「alt」は「オルト」という読み方になります。このalt属性を適切に記述すれば、SEOに良い効果が期待できます。alt属性を不適切に設定すれば、ユーザーや検索エンジンに画像の内容がちゃんと伝わらない可能性が高まります。具体的には、スクリーンリーダーや音声ブラウザで読み上げできなかったり、Webブラウザで画像が表示されないときに画像の情報がテキストで表示されません。クローラーが画像内容を理解しづらくなります。なれば、コンテンツの品質が下がるので、Googleから評価されづらくなります。結果、検索順位が上がらなかったり、検索流入が増えないことに繋がるというわけです。した良くない状況を回避する為に、alt属性を適切に書いて、画像内容がよりわかりやすいコンテンツに仕上げましょう。この点踏まえて今回は、alt属性の意味や書き方、設定すべき理由など中心に、初心者にもわかりやすくポイントをまとめて解説したいと思います。alt属性とは?alt属性とは、画像の代わりにテキスト情報を表示するためのHTMLタグのimg要素のプロパティ(属性)のことです。別名「代替テキスト」や「altタグ」「altテキスト」とも呼ばれ、alt属性の「alt」は「オルト」という読み方になります。通信不安定でWebページの画像がうまく読み込まれないことがあります。この場合、画像内容をユーザーやクローラーはちゃんと認識できません。認識できるように書いておくのが、alt属性というわけです。alt属性を設定すべき理由alt属性を設定すべき理由がいくつかあります。視覚障害者に対応するため通信障害に対応するため検索エンジンのクローラーに画像の情報を伝えるため視覚障害者に対応するためalt属性を設定すべき理由は、視覚障害者に対応するためです。猫がジャンプしてる画像に対して「塀から塀へジャンプして飛び移ろうとしてる猫」という内容のテキスト情報をalt属性に設定します。この場合、「塀から塀へジャンプして飛び移ろうとしてる猫」という文言をスクリーンリーダーや音声ブラウザで読み上げることができます。なれば、視覚に障害のあるユーザーもWebページ上の文字や画像などのコンテンツ内容をしっかり認識できます。視覚障害者に対応できるとうわけです。して、視覚障害者に対応するために、alt属性を設定する必要があります。通信障害に対応するためalt属性を設定すべき理由は、通信障害に対応するためです。犬が寝てる画像に対して「玄関の犬小屋で気持ちよさそうに寝てる犬」という内容のテキスト情報をalt属性に設定します。この状態でインターネットの接続速度が遅くなって、うまくWebページの画像が読み込まれなかったとします。この場合、画像の代わりに「玄関の犬小屋で気持ちよさそうに寝てる犬」というテキスト情報がWebブラウザに表示されます。なれば、表示されたテキスト情報からユーザーは画像の内容を認識することができます。通信障害に対応できるというわけです。して、通信障害に対応するために、alt属性を設定する必要があります。検索エンジンのクローラーに画像の情報を伝えるためalt属性を設定すべき理由は、検索エンジンのクローラーに画像の情報を伝えるためです。カブトムシが競り合ってる画像に対して「木の枝の上で戦ってるカブトムシとクワガタ」という内容のテキスト情報をalt属性に設定します。この場合、「木の枝の上で戦ってるカブトムシとクワガタ」というテキスト情報を画像に付与してるので、クローラーが画像の内容をより理解しやすくなります。検索エンジンのクローラーに画像の情報を伝えることができるとうわけです。して、検索エンジンのクローラーに画像の情報を伝えるために、alt属性を設定する必要があります。ちなみに画像をリンクとして使用する場合、その画像のalt属性がテキストリンクのアンカーテキストと同様に扱われます。alt属性とtitle属性の違い画像表示のHTMLタグであるimg要素のプロパティにはalt属性だけでなく、title属性を合わせて使うことも可能です。alt属性は、代替テキストを記述し、画像の情報を簡潔な文言で記述します。title属性は、グローバル属性でimg要素以外にも使用でき、HTML5の全ての要素に指定すること可能です。補足的な情報の記述に役立ち、マウスカーソルを合わせるとツールチップで表示されます。title属性は、ユーザーの利便性を考慮しながら適切に使うことが大切です。使い方によって、キーワード(SEOキーワード)の詰め込みすぎなどSEOスパム判定を受ける可能性も秘めてるので、慎重に使い分けしましょう。まとめると、画像の「alt属性」は検索エンジンやユーザーにわかりやすいように簡潔な内容で記述し、「title属性」はユーザービリティを考慮しながら画像の情報を補足するような文言を記述しておくと良い思います。alt属性とtitle属性の重複した文言はなるべく避け、それぞれ以下のように役割を意識した記述をしましょう。title=”子猫が自分の手をなめてる”>写真にマウスカーソルを載せるとtitle属性の文言「子猫が自分の手をなめてる」がツールチップで表示されます。画像が表示されない環境では、alt属性に記述した文言「子猫のしぐさ」がテキストで表示されます。alt属性の書き方alt属性の書き方がいくつかあります。短くてわかりやすい内容にする画像がデザイン装飾目的なら空にする画像をリンクとして使用する場合は入力する短くてわかりやすい内容にするalt属性は、短くてわかりやすい内容にします。赤ちゃんが笑ってる画像に対して「こっちに向かってハイハイしながらにこにこと笑ってとても愛くるしい赤ちゃん」という内容のalt属性を書きます。この内容の場合、少し冗長でわかりづらい可能性があります。「にこにこと笑ってる赤ちゃん」という内容のalt属性を書きます。この内容であれば、簡潔で概要がまとまってます。短くてわかりやすいというわけです。して、短くてわかりやすい内容にすることが、alt属性の書き方です。画像がデザイン装飾目的なら空にするalt属性は、画像がデザイン装飾目的なら空にします。デザインレイアウトするためにスペーサー用の画像を挿入したり、リストを装飾してデザインするために中点の画像を挿入することがあります。これらの画像は、基本的に意味を持ちません。この場合、alt属性の値を空にします。画像がデザイン装飾目的なら空にするというわけです。alt=””>こうして、画像がデザイン装飾目的なら空にすることが、alt属性の書き方です。画像をリンクとして使用する場合は入力するalt属性は、画像をリンクとして使用する場合は入力します。熱帯魚が写ってる画像にリンクを貼るとします。この場合、「熱帯魚が水槽の中で泳いでる」という内容のalt属性を設定して画像にリンクを貼ります。画像をリンクとして使用する場合は入力するというわけです。すれば、alt属性の内容がテキストリンクのアンカーテキストと同様に扱われます。結果、リンク先のページについてGoogleが理解しやすくなります。して、画像をリンクとして使用する場合は入力することが、alt属性の書き方です。alt属性を書くときに避けたいことalt属性を書くときに避けたいことがいくつかあります。キーワードを詰め込む文章全体をコピペするキーワードを詰め込むalt属性を書くときに避けたいことは、キーワードを詰め込むことです。特定のキーワードや関連するキーワードだけをalt属性に羅列して書きます。Developers「わかりやすい代替テキストを使用する」この場合、ユーザーエクスペリエンスが低下して、サイトがスパムとみなされる場合があります。具体的には、「キーワードの乱用」としてGoogleペナルティを課される可能性が高まります。結果、インデックス削除や検索順位の下落につながるというわけです。このように、キーワードを詰め込むことが、alt属性を書くときに避けたいことです。文章全体をコピペするalt属性を書くときに避けたいことは、文章全体をコピペすることです。さるが木に登ってる画像があるとします。この画像の前後に綴られてる多くのテキスト情報をコピーして、さるが木に登ってる画像のalt属性にコピーペーストします。この場合、alt属性は冗長な内容となります。この内容を読み上げたり、ブラウザ上に表示されればメインコンテンツを妨害してユーザーの利便性を下げたり、無駄なクロールを浪費する可能性が高まります。結果、Googleから評価されづらくなるというわけです。このように、文章全体をコピペすることが、alt属性を書くときに避けたいことです。ちなみに、外部サイトのテキスト情報をコピペすれば、スパムでGoogleペナルティになる可能性が高まるでしょう。alt属性の確認方法alt属性の確認方法として、以下2つのツールを活用する方法があります。viewer」が便利です。viewer」と検索後、「CHROMEに追加」ボタンをクリックすることで簡単にインストールできます。属性をツールチップで表示することができます。インストール後、Chromeブラウザの右上に「Alt」アイコンが表示されるのでクリックしてみると、以下のように「alt」が設定されてるか否か、簡単に確認することができます。キーワード出現率」を競合上位10位平均と比較し、確認できる無料SEOツールです。競合上位サイトのalt属性はどんな状況か?自社サイトと数値で比較確認できるので、SEO対策に役立てることができます。まとめ適切にalt属性を記述し、効果的な画像コンテンツにしましょう。認識されやすいコンテンツにし、ページの質を上げながら、SEO対策を進めることが重要です。名前メールアドレス電話番号(ハイフン(-)は必要ありません)送信することでプライバシーポリシーに同意したものとします。現在受付中のセミナーはありません。USデジタルマーケティングに関することならお気軽にご相談くださいメルマガ登録メールマガジンはこちらからご登録ください。デジタルマーケティングに関するホットな情報をお届けいたします。TECHへの業務依頼、発注を希望される方はこちらよりご連絡ください。