IT関連

SEOに効果がある画像ファイル名の付け方を徹底解説

スポーツウエアを着た女性の全身写真と、「SEOに効果的な画像フふぁああいる名の付け方」という文字

この記事を書いた人🐰
楽しく働くドットコム・べるこさん

2013年からIT関連会社を経営
適格請求書発行事業者登録番号 TA5450001010642

YMAA認証マーク取得
薬機法・医療法適法広告取扱個人認証
KTAA認証マーク取得
景品表示法・特定商取引法取扱個人認証

【資格・スキル・経験】
■証券外務員Ⅰ種/英検2級/医療事務2級
■広告運用(Google・FB・Instagram)
■SEO・動画のSEO(VSEO)対策
■SEOライティング

■セールスライティング
■コピーライティング
■html/css/WordPress
■Illustrator/Photoshop/Premiere Pro
■AWS/Ruby on Rails(アプリ開発)
■インフルエンサーのプロデュース多数

2013年より、WEBアプリ開発、LP制作、オンライン講座・オンラインサロン構築など、企業さまやインフルエンサーさまのプロデュース業に携わって参りました。企画開発だけではなく、構築から運用までをワンストップでサポート。広告運用から内部SEO対策、動画のSEO(VSEO)対策込のYouTube運用に定評あり。大手WEBメディア・出版社さまからの執筆依頼多数あり。

モットーは、「秘密厳守とコンプラ遵守」。お客さまの魅力を引き出し、輝かせることが何よりの喜びです。

べるこさん
べるこさん
楽しく働くドットコムへようこそ💛写真とかの画像ファイルの名前、テキトーにつけてない?

SEO効果を高める画像ファイル名の付け方

べるこさん
べるこさん
結論から言っときます。画像ファイル名テキトーにつけるのやめて!って話。

ブログのアイキャッチ画像等につける画像のファイル名にSEO効果があるってご存知でしたか?

Google検索セントラルという、GoogleのSEOに関する公式見解を述べているページがありますが、そこでも画像のSEO対策について述べていますよ。

画像のファイル名とは、画像を保存するときに「banana.jpg」とか「orange.png」みたいに名前つけるでしょ?この画像のファイル名にはSEO効果があるんです!

適切なファイル名を付けることで、検索エンジンが画像の内容を理解しやすくなり、検索結果で上位に表示される可能性が高まります。以下は、SEOに効果的な画像ファイル名の付け方です。

べるこさん
べるこさん
重要と思う事だけピックアップしています
  1. キーワードを含める 画像の内容に関連するキーワードをファイル名に含めます。
  2. ファイル名は小文字を使用するのが一般的。
  3. 画像番号は避ける 「image1.jpg」のように、連番で画像ファイル名を付けるのは避けましょう。画像の内容を表現するファイル名が望ましいです。

上記に基づいてファイル名を決めると

✅「ブルーベリーマフィンのレシピ」
blueberry-muffin-recipe.jpg
✅「夏の海岸の風景」
summer-beach-landscape.jpg
✅「コーヒーカップとラップトップ」
 coffee-cup-laptop.jpg
✅「レモンケーキのレシピ」
lemon-cake-recipe.jpg

なぜ画像ファイルに適切なファイル名をつけるとSEOに効果的なのか?

YouTubeのサムネもファイル名意識したほうがいいの?
めるみーちゃん
めるみーちゃん

YouTubeにアップロードされたサムネイル画像は、YouTubeのプラットフォーム内で管理され、外部の検索エンジンのクローラーがダイレクトにアクセスすることはできません。

サムネイル画像自体は、YouTubeの内部システムで処理および保存され、外部からはインデックスの対象となりません。

ただし、YouTubeの動画ページ自体は検索エンジンのインデックス対象となるため、動画のタイトル、説明文、タグなどのテキスト情報はSEOに影響を与えます。

つまり、ブログのアイキャッチ画像は直接的にインデックスの対象となり、ファイル名や代替テキストを最適化することでSEOに影響を与えますが、YouTubeのサムネイル画像は直接的にはインデックスされず、ファイル名のSEOへの影響は限定的だと言えます。

画像ファイル名は日本語でもSEOに効果があるのか?

日本語だと効果がないとは言い切れません。なぜなら、Alt属性は、一般的に日本語で画像に説明をつけるのが一般的だからです。

視覚障害がある男性と盲導犬の写真
画像のSEO施策|代替テキスト(alt属性・オルト属性)の書き方と画像ファイル名の付け方 この記事を書いた人🐰 楽しく働くドットコム・べるこさん 2013年からIT関連会社を経営。 適格請求書...

しかし、パーマリンクや画像ファイル名は、一般的に英語でつける方が多いです。

記事そのものやAlt属性は日本語でインデックスされるので、日本語の画像ファイル名だとインデックスされないとは言い切れませんが、英語にするほうが無難かと思います。

ウインクするパソコンが指を指すイラストと、ブログ記事のパーマリンク意識してる?の文字
パーマリンクはSEOに影響するのか? この記事を書いた人🐰 楽しく働くドットコム・べるこさん 2013年からIT関連会社を経営。 適格請求書...

画像のSEO効果を高めるための基本的な方法

画像ファイルだけではなく、画像全体に関するのSEOに関するベストプラクティスとして以下のような点が知られています。

1. 画像ファイル名の重要性

検索エンジンは画像の内容を直接理解することはできません。そのため、ファイル名から画像の内容を推測します。的確なファイル名を付けることで、検索エンジンによる画像の認識とインデックス化が改善され、検索結果での表示順位が上がる可能性があります。

2. ファイル名の付け方

SEOに効果的な画像ファイル名の付け方は以下の通りです。

  • 英語の単語を使用し、3語程度の簡潔で分かりやすいファイル名にする
  • 単語はハイフン(-)で区切る
  • 関連するキーワードを含める
  • 日本語やローマ字は避ける
  • 数字での連番は避ける

3. alt属性の活用

ファイル名だけでなく、alt属性も適切に設定しましょう。

  • 画像の内容を端的に日本語で説明する
  • キーワードの詰め込みは避ける
  • 装飾目的の画像には不要

4. 画像の配置

画像はページ内の関連する文章の近くに配置します。本文中の適切な位置に自然な形で挿入するのがベストです。検索エンジンはページの上部にある画像を重要だと判断するため、大切な画像は上の方に配置するのが良いでしょう。

5. 高画質かつ低容量の画像の使用

ユーザー体験とサイトのパフォーマンスを考慮し、高画質かつ低容量の画像を使用することが理想的です。

  • ページの表示速度低下を防ぐため、画像1枚あたり100KB以下に抑える
  • 画像編集ツールやオンラインの圧縮ツールを活用し、画質を保ちつつファイルサイズを削減する
  • スマホでの表示も考慮し、レスポンシブ対応も忘れずに

6. 画像フォーマットの選択

画像フォーマットもSEOに影響します。

  • 写真などの色数の多い画像はJPEG
  • ロゴ(アイコン)、イラスト、グラフィックにはPNG

それぞれの特性を理解し、適材適所で使い分けましょう。

以上が、画像ファイル名のSEO対策の基本です。ファイル名、alt属性、配置、画質、フォーマットのすべてを最適化することで、検索エンジンにアピールし、検索順位の向上とサイトへの流入増加が期待できます。画像一つ一つを丁寧に扱い、効果的なSEO対策を実践していきましょう。

高画質かつ低容量の画像について

高画質で見た目が美しい画像は、ユーザーの関心を引き付け、サイトの印象を良くするのに役立ちます。一方で、画像ファイルのサイズが大きいと、ページの表示速度が低下し、ユーザー体験を損ねる恐れがあります。SEO的にも、表示速度の低下はマイナス要因になり得ます。

そこで重要になるのが、高画質を維持しつつ、ファイルサイズをできる限り小さくすること。画像編集ソフトなどを使って、画質を落とさずに圧縮する工夫が必要です。

高画質かつ低容量の画像とは?

高画質かつ低容量の画像とは、見た目の美しさを保ちつつ、ファイルサイズを小さくした画像のことを指します。

高画質な画像は、ユーザーにとって魅力的で情報伝達力が高いです。鮮明で詳細まではっきりと見える画像は、ユーザーの関心を引き付けやすく、結果的に滞在時間の増加やサイトへの好印象につながります。また、画像検索経由の流入を狙う上でも、高画質な画像は欠かせません。

しかし、画質を上げるとファイルサイズが大きくなり、ページの読み込み速度が低下してしまう恐れがあります。読み込みの遅いサイトではユーザーが離脱しやすく、SEOにもマイナスの影響を及ぼします。

そこで重要になるのが、高画質を維持しつつ、できる限りファイルサイズを圧縮することです。具体的には、画像のファイル形式や圧縮率を調整したり、不要な部分をトリミングしたりといった工夫が必要です。

具体的には、JPEGであれば「保存時の画質」の設定を調整したり、PNGであれば「PNG-8」を利用したりと、画像フォーマットごとに最適な圧縮方法を選択しましょう。

ただし、ファイルサイズを小さくしすぎて画質が著しく損なわれてしまっては本末転倒です。あくまでも、高画質を保ちつつ、ページの表示速度が落ちない程度に圧縮するのがポイント。

PNGとJPGの違い

PNGとJPEGはそれぞれ異なる特性を持つ画像フォーマットですが、一般的には以下のような関係があります。

PNG-24 24ビットのPNGフォーマットは、透明度を含むフルカラー画像を無損失で保存できます。画質は高いですが、ファイルサイズは大きくなる傾向があります。
PNG-8 8ビットのPNGフォーマットは、256色までの画像を無損失で保存できます。PNG-24よりも色数が少ないため、写真などの色数が多い画像には適していませんが、イラストやアイコンなどの色数が少ない画像では、ファイルサイズを抑えつつ高画質を維持できます。
JPEG JPEGは、写真などの色数が多い画像に適した lossy(非可逆圧縮)フォーマットです。圧縮率を高めることでファイルサイズを小さくできますが、画質は低下します。一方、圧縮率を低めに設定すれば、高画質を維持しつつファイルサイズを抑えることができます。

したがって、ファイルサイズの大きさは、一般的にPNG-24 > PNG-8 > JPEGの順になりますが、画質はPNG-24とPNG-8が無損失であるのに対し、JPEGは圧縮率によって画質が変化します。

画像の用途や求められる画質とファイルサイズのバランスに応じて、適切なフォーマットを選択することが重要です。

PNGは高画質な画像フォーマットで、Webサイトでの使用に適しています。特に、ロゴやアイコン、イラストなどの画像には最適です。PNGは圧縮による画質の劣化がなく、透明背景も扱えるのが大きな特徴です。

ただし、JPEGと比べるとファイルサイズが大きくなる傾向があります。そのため、写真などの色数の多い画像には、JPEGの方が適しているでしょう。

「PNG-8」と「PNG-24」の違い

また、PNGには圧縮レベルの異なる「PNG-8」と「PNG-24」の2種類があります。色数の少ない画像なら、PNG-8を選ぶことでファイルサイズを小さくできます。

サイトの表示速度のためには、PNGのファイルサイズにも注意が必要ですが、うまく使いこなせば、高画質な画像をWebサイトに取り入れることができます。

画像のSEO対策により、Google砲が発動!?

画像を適切に扱う事により、GoogleがChromeやGoogle Discoverなどで記事をおすすめとして掲載してくれる、いわゆる”Google砲”が発動することがあります。

このGoogle砲の効果は絶大で、以下のようなメリットが期待できます。

  1. サイトへのアクセス数が大幅に増加
  2. SNSでの拡散が進み、さらなる集客が見込める
  3. 多くのメディアに取り上げられるチャンスが広がる

ただし、Google砲に選ばれるためには、クローラーにコンテンツの内容を正しく理解してもらうことが大前提となります。

特にGoogle Discoverでは、タイトルと画像のみが表示されるため、魅力的な画像を選定することが重要です。因みに、Google Discoverとは、ユーザーのGoogleログイン中の閲覧履歴をもとに、おすすめのコンテンツをGoogleトップページに表示する機能のことです。

クローラーにコンテンツを的確に理解してもらい、ベストな画像を表示してもらうために、画像ファイルの名前付けが重要な役割を果たします。

HPやLPをコーディングして作るときの画像ファイル名に関して

べるこさん
べるこさん
ブログに挿入する画像ファイル名の付け方と、コーダーがつける画像ファイル名のルールは異なるので、参考までに載せておきます。
※因みに、コーダーとは、html、cssなどのマークアップ言語でサイトを作成する技術者のことです。マークアップ言語でサイトを作成する作業をコーディングと言います。
HTMLコーディングの場合、コーダーが管理しやすいようにシンプルで統一性のあるファイル名を付けることが一般的です。
WordPressのブログ記事で使用するアイキャッチ画像の場合は、SEOを意識した意味のあるファイル名を付けることが重要でしたが、コーダーが画像につけるファイル名は、シンプルで統一性を持たせ、あとから修正したりするのに便利なふうにします。

コーダーがヘッダーやサムネイルの画像につける典型的なファイル名の例を以下に示します。

ヘッダー画像(TOPページのメインのヘッダー)

  1. header.jpg
  2. header-logo.png
  3. main-visual.jpg
  4. hero-image.jpg
  5. header-background.jpg

サムネイル画像(YouTubeではなく、HPやLP内のバナーのこと)

  1. thumbnail.jpg
  2. thumb.png
  3. thumbnail-001.jpg
  4. thumb-001.png
  5. post-thumbnail.jpg

コーダーが命名する画像ファイル名の特徴は以下の通りです。

  • 画像の種類や用途を明確に示す単語を使用(header、thumbnail、logoなど)
  • 単語はハイフンまたはアンダースコアで区切る
  • 連番を使用してファイル名を統一
  • ファイル名は簡潔で分かりやすい
  • 小文字を使用

コーダーがつける画像ファイル名の意味

  1. 一貫性と管理のしやすさ:統一された命名規則により、ファイルの管理や検索が容易になります。
  2. 簡潔さ:ファイル名が短く、画像の種類や用途が一目で分かります。
  3. 変更への対応:連番を使用することで、新しい画像を追加したり、既存の画像を変更したりする際に、ファイル名の修正が最小限で済みます。

これらの例は一般的なものですが、プロジェクトごとに命名規則が定められている場合もあります。コーダーは、プロジェクトの規模や要件に応じて、適切なファイル名の付け方を選択します。

まとめ

ブログに挿入する画像は、適切な扱いをすることで、SEO効果が期待できます。

ファイル名、alt属性、配置、画質、フォーマット(PNGyJPGなどのファイル形式)のすべてを最適化することで、検索エンジンにアピールし、検索順位の向上とサイトへの流入増加が期待できます。

画像一つ一つを丁寧に扱い、効果的なSEO対策を実践していきましょう。