もう迷わない!画像ファイル名とaltタグの正しい付け方と日本語をファイル名にしてはいけない理由

Thanks to our advertisers


ブログやサイトを運営している方は画像のファイル名をどのようにつけているでしょうか?

画像のファイル名はサイトを管理するGoogle側や見る人にとって非常に重要な役割を持ちます。

画像をアップロードしたときにファイル名をちょっと工夫することで、Google側と見ている人側、両方の信用性を上げることができますよ。

今回は画像のファイル名のつけ方と注意してほしいところを、僕の失敗例を交えながら紹介していきます。

Thanks to our advertisers

画像ファイル名の正しい付け方は?

画像ファイル名はどのようにつけるのが最適か。

Google社員のTifannyOberoi(ティファニー・オベロイ)さんが、その質問に動画で答えてくれています。

英語でわかりにくいので、簡単にまとめるとこんな感じです。

  • Googleは写真を理解できないからその写真が何なのかが分かるようにテキストを追加したほうがいい。
  • ファイル名をIMG345789.jpgではなくその写真の手がかりになるような説明的な名前にする。
  • 画像の周辺にテキストを書く。
  • 写真を説明するaltタグも絶対に必要。
  • altタグはSEO上の理由以外でも役立つ。インターネット回線が遅いときはaltタグでその画像が何なのかが予想できるし、スクリーンリーダーを使っているユーザーの手助けになる。
  • テキストを画像の中に埋め込まない。サイトタイトルのバナーであってもテキストのほうがGoogleにはヒントになる。

たくさんありますが一言でまとめると、「写真見なくても識別できるように工夫をしてください」とGoogle側は言っています。

この中でよくやってしまうのは、ファイル名を【201605061200】みたいに投稿した時間をそのままファイル名にしてしまうことです。

文字や数字が羅列されているだけだと、Googleはその写真が何であるかを理解することができないので、本当に適切な画像が置かれているのか判断できません。

そのために重要な役割を持つのがファイル名とaltタグです。

今回は画像を識別してもらうために重要なファイル名の付け方altタグの付け方を紹介していきます。

まずはaltタグから。

altタグの必要性

<img src="ファイル名" alt="写真の説明">

画像を表示するときに使うimgタグの中には、altタグという非常に重要な役割をもったタグがあります。

このaltタグには大きく分けて二つの役割があります。

1つ目は、サイトを目の不自由な人などが文章を音で聞くために音声ブラウザを使ったとき。画像を読むときは、画像のファイル名ではなくこのaltタグの中身が読み上げられます。

2つ目は、画像がリンク切れを起こしていたり、通信速度が遅くて画像を読み込めないとき。このときは画像の代わりに、altタグの文章が入ります。

実際にリンク切れを起こした画像はこのように表示されます。

リンク切れが起きた場合、altタグが表示された画像を紹介しています。

また、たとえタイトルが数字の羅列だったとしても、altタグに文章を入れてあげることでGoogle側・読み手側が何の画像なのか分かるようになるので、このタグはSEO的にも非常に重要視されています。

なので画像を入れたら、必ずaltタグを入れるようにしましょう。

もし言葉で説明できないような画像(記号やしるし)の場合は、altタグの中身は空白でもいいのでつけておくのがベストです。

<img src="説明できない画像" alt="">

こんな感じでね!

altタグの正し付け方

altタグ中にどんな文章を書くのが適切か。

これはサイトの種類(商品販売サイト・企業サイト・目の不自由な方のサイト・個人サイト)と見る人によって変わります。

僕の場合は個人サイトのブログです。なのでターゲットを考えたときに、一番altタグが重要な役割をもつのはリンク切れを起こしたときに表示されることです。

なので、画像に何が入っているかよりも、何を伝えたい画像か意識して文章を書いています。

例えばこの画像。

お姉様から帰ってきなさいとラインで言われました。

僕がヒッチハイクをしているとき、お金がないと姉に話したら「諦めろ!」と送られてきたメッセージです。

画像の中にテキストが入っていますが、この文章を全部altタグに入れても読んでる人は僕が何を伝えたいのかわかりません。

なのでaltタグはこうつけました。

お金がないと姉に話したら、お姉様から帰ってきなさいとラインで言われました。※altタグの中を表示させるために、あえて画像をリンク切れにさせています。

これで画像の中の文章とは違っていても、僕が伝えたいことを読み手側に伝えることができます。

あとは、ブログだと基本的に文章で伝えることが多いので、写真の前後の文と、画像のaltタグの文を繋げて読んでも不自然にならないように気をつけながら入れています。

画像ファイル名を日本語にすると、表示されない場合がある。

次に画像ファイル名の付け方です。

僕はいままで「画像ファイル名の付け方は分かりやすいものがいい」と知ってから、「僕のブログは日本人が利用するわけだから、日本語の方が分かりやすいだろう」という理由で、画像ファイル名を日本語にして登録していました。

でもこれはあまり良くない。

ある日、友達がiPhoneから僕のサイトを見たときに

友達
あきらこの記事の画像、見れないよ。

と言われたので慌てて確認したら、ファイル名が日本語だったことが原因でした。

iPhoneだと表示されない

その記事の画像は、僕のAndroidのスマホからは表示されていましたが、友達のiPhoneからだと見ることができませんでした。

画像ファイル名を日本語にしたら表示されませんでした。

このとき画像につけていたファイル名は日本語。

僕がプログラムを勉強している頃に、ファイル名を日本語にしたことで起きるエラーを何度も経験してきたので、もしや…と思いファイル名を英数字に変えてみたんです。

ファイル名を英語に変えました。

すると的中!しっかり表示されるようになりました。

ファイル名を英数字に変えることで、表示されるようになりました。

その他の端末で確認したところ、Mac・Windows・Androidでは表示されて、iPhoneだけが表示されませんでした。

日本だとiPhoneを使っている人が非常に多いので、iPhoneでサイトの見栄えが悪いと、多くの人に見てもらえなくなってしまいます。

なので、いくら分かりやすくても、日本語でファイル名を登録するのはオススメしません。

なぜ日本語ではだめなのか
基本的にプログラムは英語ベースなので、日本語があると”文字コード化”という半角英数字に直す手間が加わります。その過程がうまくいかないと、エラーが起きやすいです。
「バグが見つからない…!!」と思っていたのに、日本語のファイル名を英数字にしただけで直ったという話はプログラマーあるあるです。笑

ファイル名は英数字で簡潔にするのがベスト

綺麗な富士山の景色です。

例えばこの綺麗な富士山の画像のファイルに名前をつけるなら

<img src="hujiyama.jpg" alt="綺麗な富士山の景色です。">
<img src="Fuji-Mountain.jpg" alt="綺麗な富士山の景色です。">

のように英語かローマ字にすると、しっかりと表示されて、分かりやすい名前になります。

既にアップロードした画像のファイル名を変えたい。

既にアップロードした画像のファイル名を変えたい場合は、Worpdpressのプラグイン「Media File Renamer」がオススメです。

既にアップロードしたファイル名を変えたい場合にお勧めのプラグインです。

メディアファイル内にあるファイル名を変えれば、既に記事内で使っている画像も変更してくれる便利なプラグインです。

まとめ。

「記事の内容が良ければ、画像のファイル名は適当でもアクセスは集まる。」

正直なところ、これは間違っていないと思います。

今でも、画像のファイル名は適当でaltタグなんて使っていないサイトでも、たくさんのアクセスを集めるサイトがあります。

画像のファイル名とaltタグが、検索上位とサイトの信用性にどのくらいの影響を与えるかは分からないところです。

でも確かなことはひとつ。

宮川 輝
しっかりしておくことに越したことはない!

サイト全体を取り扱うGoogleさんが言っているのですから、やって損はしないはずです。

面倒でない方は、画像を入れる際に一手間加えてみてください。

Googleに評価されなくても、画像が表示されなくて困った人からの信用性は上がると思いますよ。

それでわっ!

Thanks to our advertisers