【SEO対策】画像検索の最適化！alt属性・構造化データ・XML

アップする前の画像SEO
コンテンツ制作時の画像SEO
もう一段上の画像SEO
1. XMLサイトマップで画像を最適化する
2. 構造化データで画像を設定する
  1. 構造化データの確認ツール

アップする前の画像SEO

画像のファイル名を設定する

英語でファイル名を設定
数字は基本排除
アンダーバー派・ハイフン派これは決着つかず

まず、画像が表す単語を英語で設定します。
たとえば、「最適化　英語」で検索をして「optimization」と知ったら、画像のファイル名に含める感じです。

次に、数字は基本排除します。
数字単体では意味を持ちづらいので、Googleも認識しづらいと考えます。

最後に、単語と単語の間をアンダーバーで表現するのか、ハイフンで表現するのか。
これは、決着がついていません。
アンダーバでも、ハイフンでも、画像検索に掲載されます。

画像サイズを圧縮して最適化する

スマートフォンやデジカメで撮影した画像をそのままアップロードするとサイズが大き過ぎて表示速度が遅くなりがちです。

どんなに大きくても1000px以下にサイズ調整をすると極端に表示速度を落とすことは減ります。

画像をWebPに変換する

jpgやpngといった拡張子をWebPに変換するのは、おすすめです。

jpgやpngと比較して、サイズ圧縮ができます。
Googleが推奨している次世代画像フォーマットでもあります。

以下は、Google developersの発表です。

WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.

WebPは、PNG と比較してサイズが26% 小さくなっています。WebPは非可逆画像で、同等のSSIM品質指数で、同等のJPEG画像よりも25 ～34%小さくなっています。

WebP（Google developers）

WEBP変換ツール（SYNCER）は、jpgやpngの拡張子をwebpに変換してくれます。

オリジナル画像を使用する

タイトルや重要キーワードを入れてオリジナル化する

アイキャッチ画像のパターン

タイトルや重要キーワードを入れて、周りを長方形で囲みます。
長方形は、透過性を持たせると格好良くなります。

メインとなる画像素材は、コンテンツと関連のある画像やイラストを入れる、
または、人物を画像にして入れると綺麗な画像が作れます。

分かりやすい図解イラストのパターン

分かりやすい図解イラストは、ユーザーの理解をスムーズにします。
図解イラストのパターンは、本で売ってるので持っておくと便利です。

[カラー改訂版]頭がよくなる「図解思考」の技術

画像をオリジナルにする

オリジナルの画像を使うという話では、以下の方法があります。

自ら画像を撮影しに行く
画像を販売しているサイトで画像を買う

自ら画像を撮影しに行く人は、手間がかかる障壁があるために少ないです。
画像を販売しているサイトで画像を買う人も少ないため、独自性が出るという考え方もあります。

ただし、背景画像はオリジナルのものが良いとされますが、
多くの場合、時間と予算に余裕があれば検討する程度で考えれば問題ありません。

コンテンツ制作時の画像SEO

alt属性（altタグ）の設定

alt属性（altタグ）とは、代替テキストとも呼ばれます。
画像の意味を説明してくれるもので、クローラーの認識をサポートしてくれます。

alt属性のマークアップ方法

ページの顔となる画像を最上部に設置する

アイキャッチ画像は、ページの顔となる画像です。
最上部に設置しましょう。

画像の近くに関連する文章を配置する

画像の近くに関連する文章が配置されているのは、ごく自然なことです。
画像で表現されているからと言って、文章では説明しないのは不自然であり、どうかすると不親切です。

説明図であれば、説明文を近くに記述し、ユーザーの理解を促します。
説明図の説明文となる文章には、説明図内で使われた重要キーワードやユーザーが使いそうな語句を入れるべきです。

画像にキャプション（画像の説明文）を用意する

キャプションは、画像の説明文です。
例えば、画像リンクは、ページ遷移前からリンク先のコンテンツが分かるようにしておくと、ユーザーに対して親切です。
ユーザーファーストの考え方からも、キャプションは価値があります。

画像キャプションのマークアップ方法

<figure>
<img src=”img-caption.webp”
alt=”画像キャプション”>
<figcaption>画像キャプション</figcaption>
</figure>

もう一段上の画像SEO

XMLサイトマップで画像を最適化する

XMLサイトマップに画像も追加すると画像が認識されやすくなります。

XML	使用方法
<image:image>	囲いで使います。
<image:loc>	画像URLをマークアップするHTMLタグです。
<image:caption>	画像キャプション（説明文）を入れます。
<image:geo_location>	地名を入れます。国名、都市名、自治体名を入れます。
<image:title>	画像のタイトルを入れます。
<image:license>	画像ライセンス先のURLを入れます。

<?xml version=”1.0″ encoding=”UTF-8″?>
<urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″
xmlns:image=”http://www.google.com/schemas/sitemap-image/1.1″>
<url>
<loc>http://example.com/sample1.html</loc>
<image:image>
<image:loc>http://example.com/image.jpg</image:loc>
</image:image>
<image:image>
<image:loc>http://example.com/photo.jpg</image:loc>
</image:image>
</url>
<url>
<loc>http://example.com/sample2.html</loc>
<image:image>
<image:loc>http://example.com/picture.jpg</image:loc>
</image:image>
</url>
</urlset>

画像サイトマップ（Google検索セントラル）