画像のalt属性(オルトテキスト・代替テキスト)

画像のalt属性は、ウェブサイトのSEOにおいて重要な役割を果たします。alt属性は画像に関するテキスト情報を提供し、視覚的にコンテンツを理解できないユーザーや検索エンジンにとって価値のある情報を提供します。本記事では、画像のalt属性の重要性と適切な使い方について詳しく説明します。

画像のalt属性とは何か

alt属性の役割

alt属性（=オルトテキスト=代替テキスト）は、HTMLの画像要素内に指定されるテキスト情報です。このテキストは、画像が読み込まれなかったり、ユーザーが視覚的にコンテンツを理解できない場合に代替情報を提供します。

また、検索エンジンクローラーにとっても画像を理解するのに役立ち、特に画像SEOの観点からとても重要です。

SEOとの関連性

適切に設定されたalt属性は、検索エンジンランキングにプラスの影響を与えることがあります。

検索エンジンはテキスト情報を理解しやすく、画像に関連するキーワードを含むalt属性は、コンテンツのテーマと一貫性を持たせ、ランキング向上に寄与します。

適切なalt属性の使い方

適切なalt属性の作成方法

alt属性を効果的に活用するには、以下のポイントを考慮することが重要です。

• キーワードを使用する: alt属性には画像とコンテンツのテーマに関連するキーワードを含めることが望ましい。
• 説明的で具体的に: 画像の内容を具体的かつ説明的に表現するテキストを記述する。
• スパムを避ける: alt属性にキーワードスタッフィングを行わないようにし、自然な表現を心がける。

代替テキストの悪い例・良い例

以下に、Googleが例を挙げる良い例と悪い例を引用します。

悪い例（代替テキストがない）:

<img src=”puppy.jpg”/>

悪い例（キーワードの乱用）:

<img src=”puppy.jpg” alt=”子犬 犬 赤ちゃん犬 小犬 仔犬 パピー わんちゃん 子犬 兄弟 レトリーバー ラブラドール ウルフハウンド セッター ポインター 子犬 ジャック ラッセル テリア パピー ドッグ フード ドッグフード 安い 子犬用 フード”/>

良い例:

<img src=”puppy.jpg” alt=”子犬”/>

最も良い例:

<img src=”puppy.jpg” alt=”「取ってこい」遊びをするダルメシアンの子犬”/>

Google 画像検索 SEO ベスト プラクティス「わかりやすいファイル名、タイトル、代替テキストを使用する」

alt属性の注意点

画像のalt属性を設定する際、いくつかの重要な注意点に留意することが重要です。正しく設定することで、ウェブサイトのアクセシビリティ向上とSEOの向上に寄与します。

説明的で具体的なテキストを使用する

alt属性には、画像が伝える内容を簡潔かつ具体的に表現するテキストを入力します。例えば、ウェブショップの商品画像の場合、商品名や特徴的な詳細を含めると良いでしょう。

装飾用画像には空のalt属性を設定する

ウェブページのデザイン要素としての装飾用画像は、alt属性を空にしておきます。これにより、スクリーンリーダーを使用するユーザーが無駄な情報を受け取るのを防ぎます。

alt属性の長さに注意

alt属性は短くても効果的ですが、画像の内容に従って適切に拡張することもあります。長すぎず、短すぎず、適切な長さを心がけましょう。

alt属性の重複を避ける

同じページ内で同一の画像を複数回使用する場合、alt属性を適切に変えて設定しましょう。重複したalt属性は避けるべきです。

キーワードの過度な使用を避ける

alt属性にキーワードを過度に詰め込むのは避け、自然な言葉で説明することが重要です。ユーザー体験を向上させつつ、SEOにも寄与します。

これらの注意点を頭に置いて、alt属性を適切に設定することで、ウェブサイトのアクセシビリティを向上させ、検索エンジンのランキングにもプラスの影響をもたらします。

画像のalt属性の実例

以下は、画像のalt属性の具体的な例です。

製品画像のalt属性の例

製品画像のalt属性には、製品名と重要な特徴を含めることができます。例えば、”赤いスポーツカー – ハイパフォーマンスエンジン” というalt属性は適切です。

ブログ記事のalt属性の例

ブログ記事内の画像には、画像の内容を要約したテキストを提供します。例えば、記事内の山の写真に対しては、”美しい山の風景” などが適切なalt属性となります。

店舗サイト(例えばパーソナルジム)などのalt属性の例

この場合、代替テキストは次のように設定できます。”パーソナルジムでトレーニングする男性”。

alt属性の実装方法

WordPressでのalt属性の設定方法

WordPressでは、alt属性の設定が簡単です。画像をアップロードする際、メディアライブラリ内で各画像の設定を行います。以下はWordPressでalt属性を設定する手順です。

1. ダッシュボードにログイン: WordPressのダッシュボードにログインし、投稿またはページを編集する画面に移動します。
2. 画像の選択: 投稿またはページ内で、画像を追加または選択します。
3. alt属性の設定: 画像の選択後、編集オプションを開いて、”代替テキスト”または”altテキスト”と表示されている項目に適切なaltテキストを入力します。これは画像の内容を説明するテキストであるべきです。
4. 変更を保存: alt属性を設定したら、変更を保存または更新します。これにより、画像のalt属性が設定されます。
5. プレビュー: 作業をプレビューして、alt属性が正しく表示されていることを確認しましょう。画像の上にマウスを合わせると、alt属性がポップアップ表示されます。

Gutenbergブロックエディタでの設定

WordPressの新しいブロックエディタであるGutenbergは、画像のalt属性を設定するプロセスをシンプルにします。以下はGutenbergエディタを使用して画像のalt属性を設定する手順です。

1. ブロックエディタの起動: 投稿やページの編集画面で、Gutenbergエディタを起動します。
2. 画像ブロックの追加: 画像を挿入したい場所に「画像」ブロックを追加します。
3. 画像のアップロード: 画像をアップロードするか、メディアライブラリから選択します。
4. alt属性の設定: 画像が挿入されたら、画像ブロックの設定パネルで「代替テキスト」または「altテキスト」というフィールドに適切なaltテキストを入力します。これは画像の内容を説明するテキストであるべきです。
5. 変更の保存: alt属性を設定したら、変更を保存します。
6. プレビュー: 作業をプレビューして、alt属性が正しく設定されていることを確認します。

Gutenbergエディタは、alt属性の設定プロセスを非常に直感的に行えるため、ユーザーフレンドリーです。画像ブロックを挿入し、alt属性を設定して、ウェブサイトのアクセシビリティを向上させましょう。

まとめ

画像のalt属性は、視覚的な情報を提供できないユーザーや検索エンジンに対して重要な情報を提供します。適切に設定されたalt属性は、SEO向上に貢献し、ウェブサイトのアクセシビリティを高めます。alt属性の適切な使い方を理解し、コンテンツに価値を追加する手助けとして活用しましょう。