画像の利用を最適化する

画像の利用を最適化する

画像はサイトを構成する単純な要素と考えているかもしれませんが、最大限に活用しましょう。すべての画像には個別のファイル名と alt 属性を持たせることができるので、この点を有効的に利用すると良いでしょう。

alt 属性は何かの理由によって画像が表示されないときに、代わりのテキストを示してくれるものです。

この alt テキストは短いですが、画像の内容を正確に説明しています
この alt テキストは短いですが、画像の内容を正確に説明しています

このような属性を使うのは、ユーザーが画像を表示しないブラウザを利用していたり、もしくはスクリーン リーダーのような別の手段でサイトを閲覧していたりする場合に、alt 属性の代替テキストがあれば画像に関する情報を提供できるからです。

何かの理由によって画像が表示されていませんが、alt テキストは表示されました
何かの理由によって画像が表示されていませんが、alt テキストは表示されました

alt 属性を使うもうひとつの理由は、画像からリンクを張る場合に画像の alt テキストがリンクに対するアンカー テキストのように扱われるからです。ただし、サイトのナビゲーションとしてテキストのリンクで十分なのであれば、画像を使ったリンクを多用することは推奨されません。また、画像のファイル名と alt 属性をわかりやすく付けると、Google 画像検索 のような画像に特化した検索エンジンにサイトの画像について伝えることができます。

適切な画像の使い方

  • 簡潔で、かつ内容をきちんと説明しているファイル名と alt テキストを付ける ―― 最適化できるその他の多くの要素と同様、(ASCII 文字コードにおける) ファイル名と alt 属性は、簡潔かつ説明的なものが理想です。

    注意点
    • 可能であれば "image1.jpg", "pic.gif", "1.jpg" のような一般的なファイル名は使わない (何千もの画像を持つサイトの場合は、画像ファイルの名前を自動的に付けることを検討してみるのも良いかもしれません)
    • 極端に長いファイル名を付けない
    • alt 属性にキーワードを詰め込んだり、文章をすべてコピーして貼り付けない
  • 画像をリンクとして使用する場合は alt テキストを提供する ―― 画像をリンクとして利用する場合は、alt テキストを提供すると Google にリンク先のページ内容が理解されやすくなります。テキストのリンクのアンカー テキストを書いているようなイメージで考えてください。

    注意点
    • ガイドライン違反と疑われるほどに極端に長い alt テキストは書かない
    • サイトのナビゲーションに画像リンクだけを使うのは控える
  • 画像はひとつの専用ディレクトリにまとめて保管する ―― 画像をドメイン名内の複数のディレクトリやサブディレクトリに分散して保管せず、ひとつのディレクトリ (例: brandonsbaseballcards.com/images/) にまとめられないか検討してみてください。こうすることで、画像へのパスを簡潔にできます。

  • 一般的にサポートされているファイル形式を使う ―― JPEG, GIF, PNG, BMP の画像形式は、ほとんどのブラウザでサポートされています。また、ファイル形式に合わせて、拡張子を付けておきましょう。

次のページへ
この記事が役に立ったらシェア!
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く

Web業界の転職情報

もっと見る
Sponsored by

今日の用語

Google爆弾
Googleに限らず、検索エンジンでネガティブな言葉を入力すると特定のホームペー ...→用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]