もくじ

imgタグ周りのSEO対策・小ワザ集

ハウツー
蛙のicon

こんにちは、蛙です。
今回は画像周りのSEO対策についての記事です! とはいえ、私でもできる範囲の話なので、そこまで上級者向けの内容ではありませんよ。 どれもちょっとの工夫でできるので、お時間のあるときにぜひ取り組んでみてください。

画像を適度に圧縮する

画像のファイル容量が大きいと、ページの読み込み時間が遅くなるなどの悪影響があります。 画質を下げ過ぎない程度に圧縮してからアップロードするようにしましょう。
私は普段、以下のサイトを利用して画像の圧縮を行っています。

alt属性を記入する

<img src="frog.jpg" alt="カエル">
何らかの理由で画像が表示されない場合には、altに記入したテキストが代わりに表示されます。 alt<img>タグには必須です。
インスタのタグのごとくaltにキーワードをいっぱい詰め込むとスパムとみなされ、SEOに悪影響が出ることもあるので注意してください。 装飾用の画像など、特に意味のない画像の場合は、alt属性は空白でもかまいません。
Wordpressの場合、メディア情報の「代替テキスト」の部分に記入したテキストがalt属性として使用されます。

画像の遅延読み込み

<img src="frog.jpg" alt="カエル" loading="lazy">
loading="lazy"の記述を追加すると画像が遅延読み込みになります。 非常に簡単ですよね!
Wordpressの最新バージョンでは、自動的に<img>タグにloading="lazy"が挿入されるようになっているので、こちらで何か設定する必要はありません。

width・height属性を記述する

<img src="frog.jpg" alt="カエル" width="100" height="100">
画像サイズはCSSで調整することが多いと思いますが、HTML側でもきちんと設定してあげるのがおすすめです。 サイズを記述しておけば、画像の表示スペースを確保した状態でコンテンツが読み込まれるため、ページの表示が安定します。
HTMLでwidthheightを指定する際には、pxなどの単位は必要ありません。

pictureタグの使い方

<picture>タグを使えば、条件に合わせて表示する画像の差し替えをすることができます。 基本の書き方は以下の通り。
<picture> <source srcset="frog_01.jpg" alt="画像1"> <source srcset="frog_02.jpg" alt="画像2"> <img src="frog_03.jpg" alt="画像3"> </picture>
全体を<picture>タグで囲み、その中に<source><img>が入ります。 <img>は1つしか入れることができませんが、<source>はいくつでも入れることが可能です。 <source>の画像パスはsrc属性ではなくsrcset属性となるので注意しましょう。
上に書いてある画像ほど優先度が高く、画像1がダメな場合は画像2を、画像2もダメな場合は画像3を…という風に、条件に合うものを1つだけ選んで表示してくれます。

PCとスマホで別の画像を表示する

<picture> <source media="(max-width:480px)" srcset="sp.jpg" alt="スマホ用画像"> <img src="pc.jpg" alt="PC用画像"> </picture>
条件としてmedia属性を指定することで、画面サイズに合わせて画像の差し替えができます。 上の書き方では、幅480px以下の場合にはスマホ用画像が、それ以上の画面サイズではPC用画像が表示されます。 PCとスマホでバナーサイズを変更したい場合などに便利です。

Webpなど次世代フォーマットの画像を使う

WebPやJPEG2000などの圧縮率の高い次世代フォーマットの画像がもてはやされています。 しかし、これらの次世代フォーマット画像はすべてのブラウザに対応しているわけではありません。 サイトの画像をすべて次世代フォーマットに差し替えてしまうと、非対応ブラウザで見た場合には画像が全く表示されなくなってしまいます。
このような場合も、<picture>タグを使うと便利です。
<picture> <source type="image/webp" srcset="frog.webp" alt="WebP画像"> <img src="frog.jpg" alt="PC画像" alt="JPEG画像"> </picture>
type="image/webp"の部分が条件分岐です。 こうすることで、WebPに対応しているブラウザではWebP画像が、非対応のブラウザではJPEG画像が表示されるようになります。
WebPなどの次世代フォーマット画像の作成には、以下のサイトが便利です。

画像の無断転載を防ぐ

img { pointer-events: none; }
CSSでpointer-events: none;を指定することで、右クリック(スマホ・タブレットでは長押し)しても「画像を保存」「新しいタブで画像を開く」「画像アドレスをコピー」などの選択肢が出なくなります。 写真やイラストがメインのポートフォリオサイトなどは、こちらの記述を書いておくと画像を盗まれるリスクが減るのでおすすめです。
ただし、デベロッパーツールなどを使えば画像のパスはわかりますし、スクリーンショットを撮られてしまえばどうしようもありません。 これだけでは完璧な無断転載対策にはなりませんので注意しましょう。

まとめ

私はこの業界に入って日が浅いので過去のことはあまり知りませんが、ひと昔前は画像のSEO対策はほとんどされていなかったそうです。 サイト内に画像が挿入されていても、そもそも検索エンジンはそれがどんな画像なのかさえ判断できなかったためです。
そのため、とにかくキーワードを詰め込む、被リンクを増やすなどの施策が中心でしたが、このようなSEO対策はどれも現在ではNGとなっています。 このあたりもいつか記事にまとめたいですね。
現在はGoogle自体にも画像検索機能がありますし、AIによる画像解析技術もかなり向上しています。 画像を制するものはSEOを制する!とまでは言いませんが、余裕があればぜひ画像周りにも気を配ってみてください。
蛙のicon
ひょんなことからIT業界に迷い込んだ1匹のカエル。知識ゼロからのスタートで四苦八苦。特にJavaScriptが怖い…。