altテキスト(代替テキスト)はHTMLの画像に追加される短い説明です。2つの重要な目的を果たします: スクリーンリーダーに依存する視覚障害ユーザーが画像が何を示しているかを理解するのに役立ち、検索エンジンに 画像コンテンツのコンテキストを提供します。良いaltテキストを書くことは、ウェブサイトのアクセシビリティと 画像SEOの両方に対して行える最も簡単で最も影響力のある改善の一つです。
altテキストとは何で、どこに入れるのか?
HTMLでは、altテキストはimg要素のalt属性です:
<img src="golden-retriever.jpg" alt="秋の落ち葉で遊ぶゴールデンレトリバーの子犬">
altテキストは2つの状況で表示されます:
- 画像の読み込みが失敗したとき(壊れたリンク、遅い接続)
- スクリーンリーダーが視覚障害ユーザーにページを音読するとき
検索エンジンクローラー(Googlebot、Bingbot)はaltテキストを読み、画像が何を示しているかを理解し、 これをGoogle画像でのインデックス化や周囲のコンテンツのコンテキストの理解に使用します。
良いaltテキストを書くためのルール
- 具体的かつ説明的に:「木製のテーブルの上に緑色のハンドルが付いた白いセラミックの コーヒーマグ」は「コーヒーマグ」や「画像」よりはるかに優れています。
- 簡潔に保つ: ほとんどのスクリーンリーダーは周囲のコンテンツと共にaltテキストを 読み上げます。長いaltテキスト(125文字以上)は聞くのに邪魔になります。1〜2文を目標にします。
- 「画像」や「写真」で始めない: スクリーンリーダーはaltテキストを読む前にすでに 「画像」と発表します。「画像の」を追加するのは冗長です。
- 自然にキーワードを含める: 画像が製品、サービス、またはトピックを示している場合、 関連キーワードを含めます — ただし、画像が実際に何を示しているかを本当に説明する場合のみ。
空のaltテキストを使用するタイミング
一部の画像は純粋に装飾的です — 情報を伝えずに視覚的な興味を加えるデバイダー、背景テクスチャ、 抽象的な形状。これらには空のalt属性を使用します:
<img src="decorative-wave.svg" alt="">
空のalt=""はスクリーンリーダーに画像を完全にスキップするよう指示します。装飾的な 画像には常にalt=""を含め、属性を完全に削除しないでください。
SEOのためのaltテキスト:Googleが実際に使用するもの
- altテキストのない画像はGoogle画像でランク付けが難しい: Googleはalt属性なしに 画像が何を示しているかを確信を持って判断できません。
- altテキストはページの関連性に貢献する: 適切にaltテキストが付いたパン写真がある 自家製パンに関するブログ記事はGoogleにページのトピックの関連性を強化します。
- 正確なキーワード一致は不要: 関連する用語を含む自然な説明が強制的な キーワード挿入よりも優れたパフォーマンスを発揮します。
避けるべき一般的なaltテキストの間違い
- キーワードの詰め込み: スパムシグナルです。Googleはキーワードが詰め込まれた altテキストを検出でき、ランキングに役立ちません。
- ファイル名をaltテキストとして使用: ユーザーと検索エンジンの両方にとって無意味です。 常に意味のある説明を書いてください。
- すべての画像に同じaltテキストを書く: すべての画像はその特定の画像を説明する 一意のaltテキストを持つ必要があります。
altテキストを超えた画像の最適化
altテキストは画像SEOパズルの一部です。適切に最適化された画像ファイルで補完します:
- 汎用名ではなく説明的なファイル名を使用(
homemade-sourdough-bread.jpg対DSC_0019.jpg) - ページスピードを向上させるために Picovertのコンプレッサーで画像を圧縮 — これ自体がSEOシグナル
- 画像を表示される最大サイズにリサイズ — 画像リサイザーを使用して表示寸法と合わせます。
- 公開前に画像からGPSデータを含むEXIFメタデータを削除します。プライバシー保護のためにPicovertのEXIFリムーバーを使用してください。
適切に最適化された画像(正しいサイズ、圧縮済み、説明的なファイル名)と組み合わせた良いaltテキストは、 ユーザーと検索エンジンの両方に役立つ完全な画像SEOシグナルを作成します。