シングルマザーのミーナ（@mina.tips)です。
ブログ歴2年。現在2種類のワードプレスのブログを運営していまして、月6万円ほどの収入があります。
＞＞＞【初心者さん向け】アフィリエイトブログの作り方【シングルマザーの副収入】
本記事では、ブログで使う画像について、このような疑問にお答えしていきます！
これを読めば、画像SEOについての疑問がきれいサッパリなくなって、作業に打ち込めるようになりますよ♪
目次
実は画像はSEO対策にも役立つ！
Googleのガイドラインに従って、画像をきちんと設定すると、SEO対策に効果的です！
「画像SEO」という言葉も出てきた時代。
画像をなんとなく添付するだけではもったいない！
ポイントをおさえてしっかり設定する習慣をつけましょう。
ワードプレスに画像をアップする前にやっておきたいこと
ブログにアップする前の画像に対する疑問点と、やっておきたいことをまとめました。
画像ファイルの形式（jpgとかpngなど）は何が一番いいの？
Googleが対応している画像形式は、BMP、GIF、JPEG、PNG、WebP、SVG です。
画像をGoogoleにインデックスしてもらう（＝検索結果に出してもらう）にはいずれかの拡張子の画像にします。
中でもよく使われる画像形式が、GIF、JPEG、PNG の三種類。
この3種類の使い分け方は、以下になります。
- ロゴ、イラスト→GIF
- 写真、写真を編集した画像→JPEG
- 透過画像、画質優先したい場合→PNG
PNGは高品質ながら、ファイルサイズが大きくなりやすいデメリットがあるので、読み込み速度を考えると、pngよりもjpgが最適です。
画像ファイル名はどうしたらいいの？
画像ファイル名というのは、○○○.jpg の○○の部分。
Google は、画像のキャプションやタイトルなどのページのコンテンツから画像のテーマに関する情報を抽出します。可能な限り、画像のテーマに関連するページの、関連テキストの近くに画像を配置するようにしてください。
同様に、ファイル名も画像のテーマを判断する材料として使用されます。たとえば、my-new-black-kitten.jpgのほうが IMG00023.JPG よりもテーマを判断するために役立ちます。
このように、Googleは画像ファイル名に関するガイドラインも出しており、画像ファイル名がSEOに関係するのは事実です。
例えば、私が愛用している、商用フリーの画像サイト写真ACとイラストAC。
ここから画像をダウンロードすると、画像ファイル名は「1570515.png」になっています。
この画像を「1570515.png」という画像ファイル名のままアップロードするのは、Google的にはあまりよろしくないということです。
「画像の意味を示すファイル名を、半角英数字で、単語と単語の間にハイフンを入れてつけてください」と推奨されています。
つまり、この画像をシングルマザー関連の記事で使う場合、ベストな画像ファイル名というのは、
- single-mother-pc.png
- single-mother-question.png
などになります。
でも、すべての画像に対して画像ファイル名をつけるのはとても大変な作業になってしまう。
- ダウンロードして
- 画像のファイル名を考えてつけかえて
- ワードプレスにアップする
この3段階をいつも踏めるかっていう話です。
1記事の中に数枚しか画像を使わない場合はまだしも、キャプチャ画像を何十枚も使う場合は・・・かなりの時間をとられてしまう。
なので、ぶっちゃけ、すべての画像に対してGoogleのガイドライン通りにファイル名をつけてからアップするのはムリだよなーと思ってます。
実際、月間10～100万PVレベルのブロガーさんの画像をソースをいくつか見てみましたが、全然気にせず「1570515.png」みたいな無意味な文字や数字の羅列をそのまま使ってる方も多いです。
画像のファイル名に時間を使うよりも、ブログたくさん書くことに時間を使ったほうがいいっていう判断をされているんじゃないかと。
以上のことをふまえて、画像のファイル名に対して出した結論。
「がんばってファイル名をつける画像」と、「ダウンロードしたままのテキトーなファイル名のままの画像」に分けて対応するのがベストです！
- アイキャッチ画像
- 自分で撮影した写真
- 写真素材に自分で文字入れした画像など、画像検索にひっかかってほしい画像
- 写真素材サイトからダウンロードしてきた画像をそのまま使うとき
- 手順を説明するためのキャプチャ画像
SEO対策も、やることとやらないことを取捨選択しないと、限られた時間のなかで全部はできません。
このようにポイントを絞って対策していくのがベストだと思います。
画像の最適な大きさは？
大きすぎる画像をアップしてしまうと、表示速度が遅くなり、「ユーザーをイライラさせてしまう＝画像SEO的によろしくない」と判断されてしまいます。
ざっくりですが、アイキャッチ画像など横長の画像をアップするときは、「1200px×675px（16：9）」くらいにしておけば大丈夫です。
ワードプレスのブログに最適な大きさの画像は、使用しているテーマによって、多少異なりますが、画像の横幅は700px～800pxのものがほとんどです。
（当ブログで使用しているOPENCAGEの「ストーク」というテーマの場合のアイキャッチ画像の最適な大きさは、「728px×435px」です）
「じゃあ、ブログにピッタリの『728px×435px』でアイキャッチ画像を作ろうかな」となりがちですが、実は、それより若干大きめで作っておいたほうが無難です。
Canvaのデザインテンプレートを見るとわかるのですが、各SNSの画像サイズは以下のようになっています。
- Instagramの投稿・・・1080px×1080px
- Twitterの投稿・・・1024px512px
- Facebookの投稿・・・940px×788px
というわけで、ブログ記事を各SNSに投稿することも考えると、ざっくりですが、横幅が1000px～1200pxの画像をアップしておくのが無難ですね。
縦横比については、普通に横向きで撮影した画像を使う場合は特に意識せずそのままでよいですが、自分で画像を作る場合は16：9（黄金比）を採用しているテーマが多いので、横幅を決めたらあとは以下の計算ツールで縦幅を決めればOKです。
＞＞＞アスペクト比計算ツール（横幅を入れると縦がわかります）
＞＞＞【当ブログのワードプレステーマ】OPENCAGEの「ストーク」
ワードプレスにアップした後の画像の設定について
ワードプレスに画像をアップロードした後の設定について説明します。
代替テキスト（altタグ）を入力する
ワードプレスに画像をアップすると、「タイトル」「キャプション」「代替テキスト」「説明」という4つの設定項目があります。
これ、全部入れる必要はありません。
入力必須なのは、「代替テキスト=altタグ」のみです。
| タイトル | 画像ファイル名がそのまま入る。そのままでOK。ここでつけたタイトルは、グーグル画像の検索結果に表示されるようになる。 |
| キャプション | 入力必要なし。挿入した画像の下部にテキストを表示したい時に使う。 |
| 代替テキスト （altタグ） | altタグを書いておくとGoogleの画像検索からユーザー流入を獲得できる。 回線が遅くて読み込みが遅い時にaltタグが表示される。 視覚障害者が音声ブラウザを使用する時にaltタグが読まれる。 検索結果に大きく関係するので入力必須。 |
| 説明 | 入力必要なし。SEOには全く関係ない。画像の管理用に説明文を入力する。 |
代替テキスト（画像について説明するテキスト）は、スクリーン リーダーを使用するユーザーや、低帯域幅のネットワークを使用しているユーザーなど、ウェブページの画像を確認できないユーザー向けの補助機能として役立ちます。
Google では、代替テキストに加えて、コンピュータ ビジョン アルゴリズムやページのコンテンツを使用して、画像のテーマを理解します。また、画像の代替テキストは、画像をリンクとして使用する場合にアンカー テキストとして使用できます。
正しいaltタグの書き方
それでは、具体的に、代替テキスト（altタグ）には何を書けばよいのでしょうか？
Googleのガイドラインでは以下のように言われています。
代替テキストを設定するときは、キーワードを適切に使用して、ページのコンテンツのコンテキストに沿った、情報に富む、有用なコンテンツを作成するようにしてください。alt 属性にキーワードを羅列すること（キーワードの乱用）は避けてください。これによって、ユーザー エクスペリエンスが低下し、サイトがスパムとみなされる場合があります。
これだけ読んでも何がなんだか・・・ですよね（涙）
以下のシングルマザーの画像の場合の例にして、解説します！
// ダメな例（空欄）
<img src="single-mother-pc.png" alt=""/>
// ダメな例（キーワードの羅列）
<img src="single-mother-pc.png" alt="シングルマザー 主婦 パソコン 悩み 疑問"/>
// 正しい例
<img src="single-mother-pc.png" alt="シングルマザー"/>
// 最適な例 ※これが一番良い！
<img src="single-mother-pc.png" alt="パソコンの前で疑問に思っているシングルマザー">
こういった感じで、その画像を具体的に簡潔な文章で説明するのが一番だと、Googleは推奨しています。
ただ、画像ごとに、SEO対策にもなる代替テキスト（altタグ）を考えるのもなかなか面倒ですよね・・・。
SEO効果バツグン！代替テキスト（altタグ）はh2とh3をコピペすればOK！
SEO対策にもなって、時短にもなる、超簡単な代替テキスト（altタグ）の書き方は以下です。
- アイキャッチ画像は、記事タイトルをaltタグに貼り付ける
- 記事内の画像は、見出し（h2、h3）をaltタグに貼り付ける
まとめ：画像もSEOの結果を左右する時代。ポイントをおさえて設定しよう！
読者さんに役に立つブログを作るためには、画像はマストアイテム。
いろいろやることが多くて大変ですが、画像SEOもポイントをおさえてしっかり対策していきましょ♪
ワードプレスでブログを書いているけど、画像の形式やファイル名は何が最適なのかな？
あと、画像をアップしたあとに、「タイトル」「キャプション」「代替テキスト」「説明」の項目が出てくるけど、コレって全部書く必要があるのかな？
全部書くのは面倒だし時間がとられる。
画像SEOに関係がある項目だけバシッとおさえておきたいな。