alt属性について
記事の著者：ワイエスウェブテック代表者
Webサイトを自主制作し、SEO対策を自分でやってみようと思った方は「alt属性」という言葉を耳にしたことがあるのではないでしょうか？
様々なWebサイトを見ていると、alt属性の目的を理解していない方、誤った書き方をしているケースが非常に多くみられます。
本ブログでは、alt属性の正しい情報、設定方法、書き方、適切な文字数など広範囲に解説していきます。
alt 属性とは-その1
真の目的
SEO対策がalt属性の目的ではありません。
以下、引用文です。
利点
- この達成基準は、ビジュアルコンテンツの知覚が困難な人々を支援します。 支援技術は、テキストを音声で読み上げたり、視覚的に表示したり、点字に変換したりできます。
- テキストの代替案は、意味を理解するのが難しい一部の人々を助けるかもしれません 写真、図面、その他の画像(線画、グラフィックデザイン、 絵画、立体表現)、グラフ、チャート、アニメーションなど
耳が聞こえない人、難聴の人、理解に苦労している人 何らかの理由で音声情報はテキストプレゼンテーションを読むことができます。研究は進行中です テキストの手話への自動翻訳について。 - 盲ろう者は点字でテキストを読むことができます。
- さらに、代替テキストは、テキスト以外のコンテンツを検索する機能をサポートしています そして、さまざまな方法でコンテンツを再利用します。
参照：W3C Web Accessibility Initiative (WAI)/SC 1.1.1 について:テキスト以外のコンテンツ(レベルA)
※原文は英語です。下記はGoogle翻訳で翻訳したものになります。原文を確認したい方は参照リンク先をご覧ください。
テキスト(文字)とビジュアル(画像や動画)などで相互に補完し、Webサイトを訪問した五感に懸念点がある様々な検索ユーザーにも内容を理解してもらえるようにすることがWebサイト構成としては大切になります。
alt属性の真の目的は、その中でも知覚困難者(例えば耳が聞こえない方)のための代替テキストであることを知っておきましょう。
alt属性とは-その2
一般認識されている内容
以下の引用内容が一般的に知られているalt属性の特徴です。
説明
要素を使用する場合はimg、属性を使用して短い代替テキストを指定します alt。注: この属性の値は「alt テキスト」と呼ばれます。
画像に内容を理解する上で重要な単語が含まれている場合、代替テキストにはそれらの単語を含める必要があります。これにより、代替テキストはページ上で画像と同じ機能を果たすことができます。代替テキストは必ずしも画像自体の視覚的特徴を説明する必要はなく、画像と同じ意味を伝える必要があることに注意してください。
参照：W3C Web Accessibility Initiative (WAI)/テクニックH37:要素altの属性の使用img※原文は英語です。下記はGoogle翻訳で翻訳したものになります。原文を確認したい方は参照リンク先をご覧ください。
引用文を下記にわかりやすくまとめます。
- 画像等が表示されなかった時に代替テキストとして「短い」文章を使用します
- 画像に重要な単語が含まれている場合、代替テキストに含みます
- 画像と同じ意味を表示します
これらを踏まえ、適切な文字数、正しい書き方と誤った書き方の事例、そもそも書いた方がいいのかについて解説していきます。
適切な文字数
上記1.からすれば文字数自体は「関係ない」ということになります。
ただ、「短い」と記載がありますので、長文にならないように注意しつつ、端的に画像と同じ意味を説明すればよいということになります。
この「端的」が非常に難しいため、後述する正しい書き方の事例を確認してください。
※ パソコンで確認した方が見やすいです。
誤った書き方の事例
まずは誤った書き方の事例から理解を深めましょう。
上記はブログのトップ画像の一つです。この画像を素材として考えてみましょう。
1,短い文章になっていない
SEO対策が必要であることは伝わりますが、上記わかりやすいまとめの1．の「短い代替テキスト」という条件を満たしていません。
長文では「必要なことか」「重要なことか」「Web集客の話か」など画像が伝えたい内容を「簡潔に」理解することが困難になります。
このように短文でない場合、文字数は適切とは言えず、かつ、相手に伝わりづらくなってしまいます。
2,画像に重要な文字が含まれていない
文字数は端的になっていますが、画像は「なぜSEO対策が必要か」ですから、alt属性の記述内容と一致しておらず、上記わかりやすいまとめ2．の「重要な単語が含まれている場合、代替テキストに含む」ことができていません。
画像とalt属性は一致させ、長文になりそうな場合は要約して簡潔に記述しましょう。
3,画像と同じ意味になっていない
SEO対策の必要性に関する代替テキストになっておらず、上記わかりやすいまとめ3．「画像と同じ意味」を伝えることができていません。
このalt属性は、ひと昔前に合ったSEO対策の手法として使用されてきました。
<img src=”” alt=””>は、一般的にはWebサイトにおける非公開部分(ソースコード)ですが、ソースコードもSEO対策の評価対象となり、Googleガイドラインに抵触する内容になります。
下記ウェブページ内にある「ペンギンアップデート」の過剰最適化にあたり、マイナス評価となりますので、このような記述を行っている方は直ちにやめることをお勧めします。
初心者向け-Googleコアアップデートの内容をわかりやすく解説/ペンギンアップデート
正しい書き方の事例
alt属性とはのその1,その2を踏まえてalt属性を正しく記述する必要があります。
以下が参考です。
<参考事例1>
画像の説明として短い文(端的)に示せる場合は、画像内のテキストをそのまま記述しても構いません。
<参考事例2>
必ずしも視覚的特徴と同じものを伝えることを要しないため、テキストの一部を変えても、意味が伝われば問題ありません。
上記わかりやすいまとめ1．2．3．それぞれ満たしている内容になります。
alt属性を書いた方がいいかどうか
W3Cの趣旨・ユーザビリティの観点からすれば、alt属性は記述した方が良いということになります。
具体的には、画像とalt属性に関連性が高い場合は書いたほうが良いです。
無理に頑張って記述する必要はありませんので、空白でも構いません。
W3C、SEO対策どちらの観点から、Webサイトのマイナス評価にならないので、空白でも問題ありません。
まとめ
X(旧Twitter)で見かけたWebサイトを多く見ていますが、alt属性に画像と関係テキストを記述したり、いろんな地域名を入れたり、とにかく文字数を増やしたり、高順位を目指したりしたいキーワードを詰め込んだりしているWebサイトが非常に多いです。
alt属性の誤った書き方を客観的に見直し、排除することで、GoogleやBingなどの検索エンジンにおいて低評価となるようなことは控え、Webサイトの品質向上を目指しましょう。
