MENU
超高機能SEOツール
SE Ranking

alt属性の役割と画像最適化

Search Times

alt属性とは?

alt(オルト)属性とは、img要素内に含める事ができる属性で、ネットワークの回線速度が遅い場合など、画像が表示されるまでの間に画像の代わりに表示されるテキストです。スクリーンリーダーではalt属性のテキストを読み上げます。alt属性のaltは英語のalternateの略で、代替テキストとも呼ばれます。

alt属性の説明イメージ
alt属性の記述例と効果

画像を直接ページに配置する際は、<img>や<picture>を使用し、imgタグ内でalt属性を指定する事ができます。

<img src=”画像のURL” alt=”画像の名前” width=”○” height=”○” />

<picture>は、レスポンシブページ用に用意した画面サイズに対応する複数の画像ソースを指定できます。

<picture>
<source srcset=”画像のURLパターン1” media=”(min-width: 600px)”>
<img src=”画像のURLパターン2″ alt=”MDN”>
</picture>

alt属性で提供できる本来の価値

alt属性は次のような価値を提供します。

  • スクリーンリーダーによる読み上げ
  • 画像表示までの間に代替テキストを表示

スクリーンリーダーによる読み上げ

alt属性で画像に対して指定したテキストは、スクリーンリーダーで読み上げる事ができます。視覚障碍者がウェブを利用する際の事も想定して画像のalt属性を記述しましょう。

画像表示までの間に代替テキストを表示

画像の読み込みが遅い場合、読み込みが完了するまでの間に、alt属性で指定したテキストが代わりに表示されます。

検索エンジンもalt属性のテキストを使用する

Googleに対してはalt属性にテキストを使用する事で以下のような効果があります。

  • リンクのアンカーテキスト効果
  • コンテンツ理解の手助けとなる
  • Google 画像検索に掲載される機会が増える

リンクのアンカーテキスト効果

画像にリンクを設定する場合、alt属性のテキストがアンカーテキストとしてみなされるようです。ただしテキストがふさわしい場合はテキストを使用してください。過剰な画像リンクは使いにくいナビゲーションとなります。

アンカーテキストについては、「アンカーテキストによるSEO効果とサイト内部のページ間被リンク設計」で解説しています。

尚、ページのデザイン上ふさわしいフォントが利用できないという理由で、綺麗なフォントを使用した画像を使用しているウェブページもありますが、以下の理由で利便性が低くなりますので避けた方が良いでしょう。

  • テキストは画像よりもコピー&ペーストに向いている(メールでの利用等)
  • 検索エンジンがコンテンツを理解しにくい

このような場合はウェブフォントを使用する事をおすすめします。

Google Fonts
Browse Fonts - Google Fonts Making the web more beautiful, fast, and open through great typography

コンテンツ理解の手助けとなる

画像の中身まで判別する事はできていない為、画像を理解する為にalt属性を使用するようです。alt属性以外ではtitle属性や画像周辺のテキストなども判断材料として使用しているようです。

Google 画像検索に掲載される機会が増える

レイアウトのデザイン上必要な画像に対してalt属性を無理に使用する必要はありませんが、重要な画像に対してはalt属性のテキストを記述する事はGoogle画像検索で有効な最適化方法です。

alt属性記述と画像最適化の要点

alt属性最適化の要点

  • alt属性のテキストは簡潔に
  • 画像リンクにはalt属性のテキストを必ず記述
alt属性のテキストは簡潔に

alt属性の文字数は特に明確な制限はありません。
alt属性にテキストを含める場合には、長い文章を入れるのではなく、画像の内容を簡潔に説明しましょう。

画像リンクにはalt属性のテキストを必ず記述

アンカーテキスト効果がある為、テキストリンク同様次のページが何に関するページであるかをわかりやすく説明したテキストをalt属性に設定してください。

画像検索 最適化の要点

  • 標準的な画像フォーマットを使用
  • 画像ファイルとその画像を掲載しているページの両方のクロール・インデックスが可能
  • 簡潔でわかりやすいファイル名
  • ネイティブLazy-loadを使用
  • 画像とページで関連性のある文脈にする
  • 画像周辺のテキスト最適化
  • 画像の配置場所を最適化
  • max-image-preview:largeを使用
  • ライセンス情報を追加
標準的な画像フォーマットを使用

多くのブラウザが標準的にサポートする以下のフォーマットを使用してください。

  • JPEG
  • GIF
  • PNG
  • BMP
  • WebP
画像ファイルとその画像を掲載しているページの両方のクロール・インデックスが可能

もしその画像を掲載しているページを削除ないし非表示にしてしまうと、画像検索からもその画像は検索できなくなります。

簡潔でわかりやすいファイル名を使用

画像のファイル名も画像の内容を理解する際に使用されます。日本語名のファイルではなくアルファベットで簡潔なファイル名にしましょう。

ネイティブLazy-loadを使用

ページの表示速度改善の為に画像に対して loading=”lazy” 属性を使用し、スクリーン上で表示されていない画像の遅延読み込みを設定する事ができます。

<img src=”画像のURL” alt=”画像の名前” loading=”lazy” width=”○” height=”○” />

Chromeや一部のブラウザでサポートされており、Googleボットもサポートしているので、Google向けのSEOでは必須な上、Chromeユーザーにも利便性が向上します。また、ウェブ標準の属性となる為今後ほとんどのブラウザでサポートされる事になるでしょう。ブラウザの対応状況は以下のページで確認できます。

Lazy loading via attribute for images & iframes

画像とページで関連性のある文脈にする

ページや、そのタイトル、見出し、その他コンテンツと関連する画像を提供しましょう。

画像周辺のテキスト

画像の近くに関連するテキストを配置し、画像の傍にキャプションを配置します。

画像の配置場所

重要な画像はページ上部に配置します。

max-image-preview:large

max-image-preview-:largeを使用して、大きなサイズの画像プレビューを使う。

ライセンス情報

画像にライセンス情報を追加する。画像のメタデータをGoogleに伝える方法として、構造化データまたはIPTC 写真メタデータがサポートされています。

Google画像検索アルゴリズムが評価するポイント

  • ページのオーソリティ
  • 新鮮なコンテンツ
  • 画像の表示される場所
  • 画像の品質

2018/9/24のGoogleのブログの発言によると、次の点を評価するように改善したそうです。画像検索アルゴリズムだからといって画像のみを判断しているわけではなく、ウェブサイト全体に関する様々な要素を総合的に活用して判断しているようです。

ページのオーソリティ

例えばDIY棚の材料について検索する場合、DIYプロジェクトを専門にするウェブサイトサイトが優遇されるようになります。

新鮮なコンテンツ

最近更新されたばかりのサイトが優遇されるようになります。

画像の表示される場所

検索対象の画像が、ページの中央、上部に位置されていれば、その画像はランキングで優遇されます。もし特定のシューズを購入しようと閲覧している場合、そのシューズをフォーカスした商品ページの方が、幅広いスタイルのシューズを表示するカテゴリページよりも優遇されます。

画像の品質

高品質の画像を使用しましょう。

画像の最適化で避けるべき事

alt属性で避けるべき事

alt属性を省略・alt属性のテキストが空欄

Google画像検索に掲載される機会を増やすなら、alt属性を省略したり、alt属性のテキストを空欄にしないようにしましょう。

仮にサイト内の全ての画像のalt属性を空白にしてしまうと、Google画像検索のトラフィックに対して重大な影響を与えるようです。

alt属性にテキストを詰め込む・長文を指定する

テキストが長過ぎるからといってランキングのマイナス要素というわけでは無さそうですが、SEO以外の本来の用途を意識して訪問者とGoogleに正しく画像の内容を伝える事を目的に記述しましょう。一方でキーワードを詰め込み過ぎれば、スパムと判断されるかもしれません。

画像検索の最適化に関する注意点

Instagram写真の埋め込みは要注意

Instagramの埋め込みコードを使用してページに画像を埋め込んでも、noindexメタタグが使用されている為、画像自体はインデックスされないようです。iframeのコンテンツ内にnoindexが示されているようです。2021/04/10時点でも同様の状況です。

過剰に長い画像ファイル名は避ける

簡潔な画像ファイル名が推奨されています。

重要なインデックスさせたい画像の表示がCSSによって指定されている

CSSで背景に指定されている画像はインデックスの対象になりません。<img>や<picture>で指定した画像がインデックス対象です。(ユニバーサル検索では問題なくインデックスされるようです。)

テキストまで画像化してしまう

画像とテキストは分けて表示させましょう。検索エンジンは画像化されたテキストは判別できません。

画像のURLは変更しない

変更する場合は301でリダイレクトを設定します。

画像の最適化でよくある質問

alt属性でよくある質問

alt属性にキーワードを含めた方が良いですか?

タイトルタグのように特定のターゲットとするキーワードに最適化する必要はありません。画像に関する簡潔な説明を記述しましょう。

画像検索に関するよくある質問

ページのURLではなく、画像URL単体を画像検索結果で表示させる事はできる?

画像検索は、ウェブページ上で実際に活用・表示しているページと画像がセットで掲載されます。ページのURLの無い状態で特定の画像ファイルのURLのみを検索結果に表示させる事はできません。
つまり、画像は必ず公開しているウェブページ上で使用し、Googleが取得できるようにしておく必要があります。

画像ファイルは画像を表示しているページと同じドメイン上に配置するべきか?

最近ではサーバー負荷軽減やサイト表示速度改善を目的として(費用も安くなってきた為)、画像ファイルをCDN上に配置するサイトも多くなって来ているようです。
ここで疑問となるのが、画像ファイルは同一ホスト(ドメイン)上に配置すべきか、まったく別のドメインに配置すべきか、また、それによってSEO上に問題が生じてしまうかどうかなどが挙げられます。

GoogleのJohn Mueller氏の発言によると、画像を掲載しているページと同一ドメイン上に画像ファイルを配置しても、特にSEOで優遇される事は無いようです。
ページとは別のドメイン上に画像を配置する事も特に問題はありません。

一方で画像ファイルを同一ドメイン上で提供していれば、今後CDNを利用する際にもコントロールしやすいという事も付け加えています。

複数ページに同じ画像を埋め込んでも問題無い?

もちろん問題ありません。複数ページに同一画像を使用する事は一般的でどのサイトでも行われています。

画像のメタデータはSEOに影響する?

現時点では影響はないようです。以前より検討中の状況でしたが、2017年9月のJohn Mueller氏のTwitterコメントによると、状況は変わらないと発言しています。

画像のLicenseメタデータはSEOに影響する?

Googleは画像検索で構造化データやIPTCに含まれるcopyrightやライセンス情報も表示できるようになっていますが、こちらも順位に影響する要素ではないようです。


SE Rankingの「サイトSEO検査」機能を使用すれば、ウェブサイトの全てのページを巡回し、画像のファイルサイズやalt属性に関する問題点を一括抽出してくれます。画像が配置されているURLや画像自体のURLも指摘してくれますので、出来る限り問題点を修正しましょう。

サイトSEO検査の画像セクション
サイトSEO検査の画像セクションで問題点を詳しく把握

「サイトSEO検査」では、画像やalt属性の問題点を含め、SEOに影響を与える多くの要素を定期的にチェックしてレポートしてくれます。

2週間無料のトライアルが利用できる為、現時点の問題点だけでも把握してみてはいかがでしょうか?以下のページから無料トライアルアカウントを作成できます。

SE Rankingの競合&キーワード調査ツール

この記事を書いた人

SEOは考え方はシンプルですが、いざ実践するとなかなか思うようにいきません。
当ブログでは、読者の方に成功も失敗も合わせて情報を共有し、同じような悩みを解決できればという思いで運営しています。
【著書】
分析が導く 最新SEOプラクティカルガイド」(2022年5月27日発売 技術評論社)
最強の効果を生みだす 新しいSEOの教科書」(2017年9月20日発売 技術評論社)

>>著者情報の詳細

Search Times
閉じる