ホームページの写真、IMG_0023のまま載せていませんか

現場の写真も、商品の写真も、ちゃんと載せている。それなのに、写真から人が来ている感じがしない。そういうことがあります。

写真は、見た目を整えるためだけのものではありません。検索する側にとっては、写真そのものが入口になります。画像で検索して、そこからサイトに入ってくる人がいるからです。

ところが、その入口はたいてい閉じたままになっています。理由は簡単で、写真に何の説明も付いていないからです。

今回は、いま載っている写真を撮り直さずに、付いている情報だけを直す話をします。Googleが検索セントラルで示している画像の扱い方をもとに整理します。

ファイル名が IMG_0023 のままになっていませんか

まず、いちばん見落とされるところからです。ホームページに上げた写真のファイル名です。

スマホやカメラで撮ると、ファイル名は自動で付きます。数字の羅列です。そのまま上げると、その名前がサイトに残ります。

Googleは、ファイル名について短く、しかし内容が分かるものにするとしています。示されている例も分かりやすく、意味のない数字だけの名前より、写っているものを短く書いた名前のほうがよい、という説明です。

あわせて、image1やpicのような、どの写真にも付けられる名前は避けることも挙げられています。中身が分からないからです。

直し方は、上げる前に名前を変えるだけです。日本語のままでも構いませんが、記号やスペースは入れないほうが無難です。ハイフンでつないでおけば間違いがありません。

いちばん大事なのは、代替テキストです

ファイル名よりも重く扱われているものがあります。代替テキストです。alt属性とも呼ばれます。

これは、写真が表示されなかったときに代わりに出る文章です。目の見えない方が読み上げソフトを使うときにも読まれます。そして、検索する側が写真の中身を知る手がかりにもなります。

Googleは、この代替テキストをもっとも重要な情報として挙げています。そのうえで、関係のある言葉を詰め込まないこと、内容に沿った説明を書くこと、としています。

書き方のコツは1つです。その写真を見ていない人に、電話で説明するつもりで書く。これだけです。

「施工事例」では足りません。何を、どこで、どうした写真なのかを短く書きます。逆に、思いついた言葉を並べるのもよくありません。狙った言葉を詰め込む書き方は、Googleがはっきり避けるよう書いています。

WordPressなら、写真を選んだときに右側に代替テキストの欄が出ます。ここが空欄のまま公開されていることが、とても多いです。

写真は、関係のある文章のそばに置きます

もうひとつ、置き場所の話があります。

Googleは、画像を関連するテキストの近くに置くこと、そしてその画像の内容に関係のあるページに置くこととしています。キャプションや写真のタイトルも、内容を読み取るために使われるとされています。

これは、ページの下にまとめて写真を並べるつくりだと効きにくい、ということでもあります。工事の写真なら、その工事を説明している文章のすぐそばに置いたほうがよいわけです。

ギャラリーページを持っている方は、そこを捨てる必要はありません。ただ、1枚ずつに短い説明を添えるだけで、意味が変わります。

写真に付ける説明が思いつかないときは、その写真を撮ったときにお客様と話していたことを書けば足ります。ネタの見つけ方は何を書けばいいか分かりませんと同じ考え方です。

きれいな写真と、重い写真のあいだ

写真の質についても書かれています。ぼやけた不鮮明な画像より、質の高い写真のほうが好まれるという趣旨です。

ただし、これは大きいファイルを載せてよいという意味ではありません。同じところに、ページの表示速度とのつり合いを取るという話が続きます。

大きすぎる写真は、開くのに時間がかかります。特にスマホの回線では待たされます。待たされた人は、内容を見る前に戻ります。

目安としては、撮ったままの写真をそのまま上げないことです。横幅を、サイトで表示される大きさに合わせて縮めてから上げます。この一手間だけで、かなり軽くなります。

WordPressのプラグインで自動的に縮める方法もありますが、入れるものが増えると別の問題が出ます。手作業で足りるうちは、手作業のほうが安全です。

スマホと大きな画面で、出し分けられます

もう少し先の話も書いておきます。同じ写真を、画面の大きさに合わせて出し分けるしくみがあります。

Googleは、srcsetとsizesという指定、またはpicture要素を使うことを勧めています。そのうえで、対応していない環境のためにsrcの指定は残すとしています。

ここは制作会社の領域ですので、ご自身で書き換える必要はありません。ただ、スマホでも同じ大きさの写真を読み込んでいませんかと一度聞いてみる価値はあります。

使える形式についても示されていて、JPEGやPNGのほか、WebPやAVIFといった新しい形式にも対応しています。同じ見た目でファイルを小さくできるので、新しく作り直すときには相談してみてください。

そもそも見つけられていない写真もあります

ここまでは、見つけてもらえた写真をどう伝えるかの話でした。最後に、そもそも見つけられていない写真について書いておきます。

Googleは、画像サイトマップを送ることで、通常の方法では見つからない画像のURLを伝えられるとしています。サイトマップというのは、サイトの中身の一覧を機械が読める形でまとめたものです。

ページの中に普通に貼ってある写真なら、たいてい見つけてもらえます。問題になるのは、スクリプトで後から表示している写真や、別のサービスから読み込んでいる写真です。こうしたものは見落とされることがあります。

写真を別のサービスに置いている場合は、そのドメインの所有権を確認しておくことも勧められています。ここも制作会社に確認する話ですので、画像サイトマップは出ていますかと一言聞くだけで足ります。

ホームページの更新そのものが止まっている方は、更新が続きませんのほうを先にご覧ください。写真の話は、そのあとで構いません。

まとめ

写真は、撮り直さなくても直せるところがあります。ファイル名と、代替テキストと、置く場所です。どれも文章を書く力とは関係ありません。

特に代替テキストは、もっとも重要な情報として挙げられているのに、空欄のまま残っていることが多いところです。ここを埋めるだけで、写真がただの飾りではなくなります。

そして、大きすぎる写真は速度を落とします。質の高い写真を載せることと、軽くしておくことは、両立させる必要があります。

問い合わせが来ない理由の切り分けについては、ホームページを作ったのに問い合わせが来ないもあわせてご覧ください。

どこから手を付けるか迷ったら、いちばん見てほしいページの写真1枚だけで試してみてください。むらたすでは、こうした確認を一緒に画面を見ながら進めています。