SEOのための画像ファイル名の付け方:ステップバイステップガイド
寄稿者
SaaS Hackers
画像に適切な名前を付けることは、検索エンジンでのWebサイトの表示を高めるうえで欠かせないSEO施策です。このガイドでは、SEOのための画像ファイル名の付け方を、実践的な例と、適切な代替テキスト(alt)を添えたビジュアルとともに順を追って解説します。
ステップ1:内容がわかる適切なファイル名を付ける
1.1 キーワードを使う
- キーワードを特定する:画像の内容を表し、コンテンツに関連するキーワードを使います。
- 具体的にする:ファイル名が画像の内容を正確に表すようにします。
例
悪い例: IMG001.jpg
良い例: sunset-over-mountains.jpg
1.2 単語の区切りにはハイフンを使う
- アンダースコアを避ける:ファイル名の単語の区切りには、アンダースコアではなくハイフンを使います。検索エンジンはハイフンをスペースとして認識します。
- 短くシンプルにする:ファイル名は簡潔でありながら、内容がわかるようにします。
例
悪い例: sunset_over_mountains.jpg
良い例: sunset-over-mountains.jpg
ステップ2:代替テキスト(alt)を最適化する
2.1 画像を説明する
- 具体的に説明する:画像を正確に説明する代替テキストを書きます。
- キーワードを含める:キーワードの詰め込みは避け、関連するキーワードを自然に代替テキストへ盛り込みます。
例
悪い例: alt="beautiful sunset"
良い例: alt="beautiful sunset over the Rocky Mountains during summer"
2.2 文脈を補う
- 文脈との関連性:代替テキストが、画像の周囲のコンテンツに沿った文脈を示すようにします。
例
悪い例: alt="team"
良い例: alt="diverse team of colleagues working on a project in a modern office"
ステップ3:キャプションを使う
3.1 画像にキャプションを追加する
- ユーザー体験を高める:キャプションはユーザーに補足の文脈を伝え、エンゲージメントの向上につながります。
- SEO上のメリット:キャプションは、検索エンジンが画像の内容を理解する助けになります。
例
悪い例:キャプションなし
良い例: Caption: A diverse team of colleagues collaborating on a project in a modern office.
ステップ4:画像を圧縮してサイズを最適化する
4.1 画像圧縮ツールを使う
- ツール:TinyPNGやImageOptimなどのツールを使えば、画質を落とさずに画像を圧縮できます。
- 読み込み時間の短縮:画像を最適化すると読み込み時間が短くなり、ユーザー体験とSEOの両方が向上します。
例
元の画像: sunset-over-mountains.jpg (5MB)
圧縮後の画像: sunset-over-mountains.jpg (500KB)
ステップ5:構造化データを実装する
5.1 スキーママークアップを追加する
- 構造化データ:スキーママークアップを使って、画像に関する追加情報を検索エンジンに伝えます。
- リッチリザルト:これにより、検索エンジンの検索結果ページ(SERP)で、画像がリッチリザルトとして表示されやすくなります。
例
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "ImageObject",
"contentUrl": "https://example.com/sunset-over-mountains.jpg",
"license": "https://creativecommons.org/licenses/by/4.0/",
"acquireLicensePage": "https://example.com/license",
"creator": {
"@type": "Person",
"name": "John Doe"
}
}
</script>
ステップ6:モバイルフレンドリーにする
6.1 レスポンシブ画像を使う
- レスポンシブデザイン:さまざまな画面サイズに合わせて表示が変わるレスポンシブ画像を使い、ユーザー体験を高めます。
- HTMLの例:次の属性を
srcset画像タグに実装します。
例
<img src="sunset-over-mountains.jpg"
srcset="sunset-over-mountains-400.jpg 400w,
sunset-over-mountains-800.jpg 800w"
sizes="(max-width: 600px) 400px, 800px"
alt="Beautiful sunset over the Rocky Mountains during summer">
ツールとリソース
画像最適化ツール
- TinyPNG:TinyPNG
- ImageOptim:ImageOptim
参考資料
- Moz Guide to Image SEO:Moz Image SEO Guide
- Google Search Central:Google Image SEO Best Practices
このステップバイステップガイドに沿って進めれば、SEOを意識した画像のファイル名付けと最適化を効果的に行えます。内容がわかるファイル名の使用、代替テキストの最適化、キャプションの追加、画像の圧縮、構造化データの実装、モバイルフレンドリーの確保は、検索エンジンでのWebサイトの表示を高めるための重要な施策です。これらはSEOを改善するだけでなく、ユーザー体験も高め、コンテンツをより利用しやすく、魅力的なものにします。
寄稿者
SaaS Hackers
