画像

注:本記事は完全に社内用です。なので極端な話を書いている部分も有ります。あと、基本的にWordPressで画像を入れる時の話です。

そして画像の話をしているにも関わらず本文内の画像の数は少なめです。悪しからず。

東雲です。

本記事では、私が記事の中に画像を入れる時に“注意していること”及び“注意したいなーこうしたいなー”と思っている事を書いて行きたいと思います。

記事の中に画像を入れる目的・役割

記事の中に画像を入れる目的・役割は色々とあるとは思いますが、わたし的には以下のような目的で挿入しています。

  • サイトの見栄えを良くするため【賑やかし!】
  • 被リンクを貰うため
  • アクセスを増やすため
  • 情報をスムーズに理解してもらう為の補助資料

一点ずつ簡単に見ていきます。

サイトの見栄えを良くするため【賑やかし!】

私の場合、記事に画像を入れる一番の目的はサイト及び記事の見栄えを良くするためです。まぁ要は賑やかしの為に入れてるって感じ。

良く言われる事ですが、文字だけの記事だと離脱率が高くなる可能性が高いです。ユーザーからすると一休みするタイミングが無いですからね。なので、私は記事内に適宜画像を入れるようにしています。

あと文字だけの記事って目が痛くなりませんか?

もちろん、適宜挿入する画像が文脈に即した適当な画像で有れば尚良いです。後述する「情報をスムーズに理解してもらう役割を果たす画像」みたいなのね。

ただ、そうは言っても全ての画像を「意味のある画像」にするのは結構骨が折れます。それこそ画像の選定・作成だけで数時間経っちゃうことも有るでしょう。しかし画像の選定等に数時間も時間をかけるのは忙しいアフィリエイターには土台無理な話です。

“意味のある画像”“賑やかしの画像”を適宜使い分けてコンテンツを作成していくのが望ましいと言えます。

被リンクを貰うため

最近私の中では、”被リンクGETの為に画像を挿入する”という考え方も重要度を増してきました。

というのも、キュレーションサイトの登場により画像引用(*)のハードルが圧倒的に下がったからです。キュレーションサイトがやってるなら私も!という個人ブロガーさんも増えたので、ちゃんとした画像を使っていると被リンクを貰える可能性はグッと高まります。

* 画像の盗用とも言えますけどね(笑)私は盗用とかしないけど。

この辺りは別途記事にしているので、そちらも参照して下さい。

参考:綺麗な画像やためになる画像・イラストを使って自然被リンクを貰う【記事未了】

画像への直リンクは評価向上には繋がらない!?

こういう記事が出ていました。

画像への直リンクは、ページ評価にならない!? | SEOラボ

まとめるとGoogleのジョンミュラー氏が画像への直リンクはページ評価には役立たない!と言ったそうでございます。

東雲のサイトでも、画像に直接リンクくれている媒体はサチコ上で被リンクとして認識されていません。直リンクではなくページにリンクを貼ってもらうための対策をした方が良いですね。

アクセスを増やすため

これはGoogle画像検索とかからのアクセスの流入を期待しての事です。

私自身はこの目的にそこまで重きは置いてませんが、実際、稀に画像検索から結構なアクセスが来ることも有ります。

情報をスムーズに理解してもらう為の補助資料

まぁこれは単純な画像と言うよりは、加工したイラストとかそういうのをイメージして下さい。

例えば、外国為替の仕組みとかを図示したイメージ図なんかが該当します。難しい話を文字だけで理解してもらうのは難しいです。そこで理解を助けるためのイメージ図・イラストなんかが貼り付けられてたら、めっちゃ有り難いでしょ。そういうやつです。

しかも、こういう理解を助けるイメージ図って被リンク貰いやすいです。ただ、制作に時間もコストもかかります。

画像を入れる時の注意点

SEO的な話も考えると画像だけでもかなりの注意点が有ります。ただ、それを逐一記事に書き起こしていると、非常に長くなってしまうので箇条書きチックに適度に書いていきます。

最低でも画像は一つ入れる

一つの記事の中に最低でも一つは画像に入れるようにして下さい。まだテスト段階ですが、モバイルの検索結果にサムネイルが表示されるクエリが有るそうです。記事の中に一つも画像がないとサムネイルは表示されません。

検索クエリに関連する画像を記事中に挿入しておけば、そのサムネイルを見たユーザーの目を引けるのでSERPs(サープス)上でのCTRが高まる可能性が有ります。最低でも一個は入れておいた方が良いでしょう。

詳細:Google、モバイル検索結果にサムネイル画像を表示。CTRアップに期待? | 海外SEO情報ブログ

当社では必ず複数の画像を入れているので特に問題なし。

記事本文に関連した画像を入れる

賑やかしに画像を入れる場合でも、記事の内容に関連した画像を探して挿入するようにして下さい。私は賑やかしに画像を入れると宣言していますが、そもそもの画像の役割は「本文の理解を助けるためのもの・コンテンツの一部となり得るもの」という部分に有ります。

記事本文と関連の無い画像を挿入するのは、あまりよろしくありません。でも、そこまでセンシティブになる必要は有りません。

例えば、「車のエンジンの構造」という記事の中に”お風呂に浸かっている女性”の画像を入れるな、というレベル。出来ればエンジンの画像が欲しいし、最悪車関連の画像にしてくれというレベルです。

画像は基本的にjpgファイルでOK

画像ファイルは「png」「jpg」「gif」の3つが主要なファイル名(拡張子)です。この中で最も画像サイズが小さくなるのはgifファイルです。

しかし、私達のサイトに挿入する画像は基本的にはjpgファイルでOKです。

参考:画像ファイル形式の基礎と特徴まとめ(JPEG・GIF・PNGなど) | 株式会社LIG

ちなみに、後述するように画像を含めた記事のファイル数は小さければ小さいほど良いです。(軽ければ軽いほうが良いとも言う)。というのもページの表示スピードが早いとSEO的に有利になるからです。物凄い軽いサイトを作るとそれだけ結構順位が上昇することも有ります。

表示速度の高速化の重要性はGoogleがAMP対応に躍起になっている事からも分かりますね。

2017年3月28日には以下の発表もなされました。

参考:「MFIでは表示速度をランキング要因にしない」をGoogleが撤回、速いページを評価する #SMX West 2017 | 海外SEO情報ブログ

画像を軽くする

先程も書いたように、サイトの表示速度はSEO的にも非常に大事ですし、ユーザビリティー的にも非常に大事です。

特に最近はモバイル検索が主流になっていますよね。スマホユーザーは重いページに敏感です。ファイルサイズが重すぎるせいで中々ページが開かないとなると、すぐに戻るボタンを押されてしまいます。

せっかく自分のページを見に来てくれたユーザーを“サイトの表示速度が遅い”というしょうもない理由で失うのは嫌ですよね。表示速度が遅いのは記事のファイルサイズが大きいからです。ファイルサイズには当然画像も含まれます。

なら、画像のファイルサイズを小さくしましょう。HTMLサイトなら

Online Image Сompressor

こういうサイトでファイルを軽くしてからアップしましょう。あとサイズも小さくしたほうが良いですよ。

WordPressなら以下の2つのプラグインは必須です。

・Imsanity
・EWWW Image Optimizer

ImsanityはWordPressに画像を取り込む段階で画像自体をリサイズしてくれます。EWWW Image Optimizerは先程紹介した「Online Image Сompressor」のようにファイルサイズを圧縮してくれます。

注(社内向):画像を軽くするという観点から言えばWordPressにあげる画像も「Online Image Compressor」にかけてからアップロードした方が良いのですが、言うてもEWWW Image Optimizerが自動で圧縮してくれるので、WordPressに画像を上げる場合は「Online Image Сompressor」を使う必要は有りません。

画像は有料素材を積極的に利用する

画像は有料素材を積極的に利用します。Googleのヘルプ記事にも以下のような事が記載されています。

高品質の写真は、ピンボケで不鮮明な画像よりユーザーを引き付けます。また、他のウェブマスターは質の高い画像にリンクしようとします。リンクされると、サイトの閲覧者が増えます。鮮明ではっきりした画像は、Google の検索結果に表示されるサムネイルでもきれいに表示されるため、ユーザーがクリックしやすくなります。

もちろん、無料素材でも綺麗な写真は有りますけど、有料素材サイトの写真と比べると綺麗な写真の比率は下がりますね。また、無料素材は誰でも利用できるので、その他のサイトとの差別化が図れません。なので被リンクも得にくいです。

しかし、有料素材であれば、その画像を利用している人も少ないので「綺麗&インパクトが有る&意図が伝わる」ような画像を適切に配置できれば、リンクを貰える可能性がグッと高くなります。

利用する有料素材サイトは「pixta」がメイン。次点で「Fotolia」でしょうか。Fotoliaはpixtaよりは安いけれど、無料素材サイトからでも入手できるような写真も結構含まれている印象が強いのでpixtaメインです。

pixtaは価格と質のバランスが結構上手く取れているような気がします。(アフィリエイトサイトに利用する画像としてはですが。)

注:ちなみに同じ有料素材でもサイトによって価格が違います。Google画像検索等を活用すれば同じ素材を一番安くで売っているサイトを発見することも難しくないですが、正直そこに時間を費やすのは無駄。なので、うちとしては基本pixtaメインで画像を使います。
注2:無料素材を利用する場合はWordPressの投稿画面から著作権フリーの綺麗な画像が手に入る「Pixabay Images」を利用すると良いと思います。ただ、素材数はアレですが。

Simple Colorboxの利用は基本的にしない

WordPressだとSimple Colorboxというプラグインを利用する事で、記事内の画像をポップアップ表示させる事が可能です。

このプラグインは基本的には利用しません。というのも画像をポップアップさせて画像だけを連続で表示させた方が良いコンテンツってジャンル的に限られるからです。特にグルメ系のサイト・ブログなら重宝されますが、私が攻めようと思ってる金融系ジャンルでは好ましく有りません。

なので、利用しません。

画像のアスペクト比(縦横比率)は4:3ではなく4:2.7くらいがベスト

注:このセクションは完全に東雲の主観
これはPCの場合の話です。モバイルの場合はそもそも画像も小さくなるのであまり気にしてないです。

問題はPCで記事を見た場合の画像の大きさ。
個人的に「4:3」のアスペクト比の画像を使うと、どうしても縦に長い画像になっちゃって、記事本文自体が目立たなくなってしまう可能性が有ると思っています。なんか、画像の方が主役感出ちゃうみたいな。

それが嫌なので、「4:3」ではなく「4:2.7」位の画像を使うようにして下さい。2.7はまぁ適当です。元画像が4:3の画像だったら、別途加工してから取り込むようにして下さい。

[640:480]ではなく【640:424】くらいの縦横比が個人的には好き。

画像のサイズはどれくらいがベストか?

記事カラムの横幅全面に画像を貼り付けるか、それとも多少の余白を持たせて画像を貼り付けるのか?これは結構迷うところです。

個人的には少し余白をもたせた方が窮屈感が無くて良いかなと思っています。

例えば記事カラムの横幅が「620px」だったら画像の横幅のサイズは「500px」くらいにするという感じ。まぁ、でもこの辺はサイトによっても変わりますし、画像の内容によっても変わります。

サイト毎に指示するようにするので、そっちを優先させて下さい。

サイト単位で画像のサイズを共通化するのであれば、WordPress管理画面から「設定」⇒「メディア」の画面で画像サイズを指定すると、イチイチ自分でリサイズする必要が無いので便利です。

alt属性とtitle属性の付け方~alt属性は必須だがtitle属性は別に必要ない

画像を挿入する時の属性タグとして「alt属性」と「title属性」が有名です。alt属性は何らかの理由で画像がダウンロード出来ない場合に「説明文」の代わりも果たしてくれるので、記事の内容をユーザーに理解してもらうためにも必須。SEO的にも必須。

一方でtitle属性は画像にマウスオンした時に出てくるアレ。SEO的にもそこまで重要視されるものではないので、うちでも重要視していない。

ちゃんと使い分けてる?alt属性とtitle属性の違いについて

なお、WordPressの場合、画像をアップロードする時に以下の「タイトル」のところに適切な文字を入れていないと、あとで画像を使いまわす時に画像検索でヒットしないので、ここはちゃんと入れるようにする。

WordPressでアップロードした画像には適切な文字をタイトルの所に入れる

alt属性は出来る限り具体的に書くのが望ましい

画像 – Search Console ヘルプによると、以下のように記載されています。

alt 属性は、画像ファイルのコンテンツを説明するために使用されます。この属性は、次のような理由から重要です。

Google にとって代替テキストは、画像の題材についての有用な情報です。Google はこの情報を使用して、ユーザーのクエリに最適な画像を判断します。

視覚障害がある、スクリーン リーダーを使用する、接続速度が遅いなどの理由から、ウェブページの画像を見ることができないユーザーも多くいます。代替テキストはこのようなユーザーに重要な情報を提供できます。

適切ではない例:
<img src="puppy.jpg" alt=""/>

適切な例:

<img src="puppy.jpg" alt="子犬"/>
最適な例:

<img src="puppy.jpg" alt="持ってこいをするダルメシアンの子犬"> 

はい、わかりましたね。その画像が意味するところをなるべく具体的に書くのが望ましいって事です。面倒くさいですが、頑張ってしっかりと設定しましょう。以下の記事も参考に。

参考:画像検索の上位表示に重要な3つのテキスト要素 〜 日本語ファイル名は評価されるのか? | 海外SEO情報ブログ

あと、2017年3月14日にGoogle検索品質評価ガイドラインが更新されました。詳細はSEOラボの記事で確認して下さい。

記事によると画像のalt属性に関連した以下の文言が追加されたようです。

・alt属性
画像内容と異なるalt属性を記述することで検索順位に悪影響

これは以前サチコの品質に関するガイドライン – Search Console ヘルプにも記載があったような記憶があります(品質に関するガイドラインに載ってたかどうかは定かではないが、良くない例として”画像内容と異なるalt属性”がどこかのヘルプに記載されていた事は確か。で、いつのまにか消えてた。)

alt属性は画像内容を端的に表す文言を入れるように徹底して下さい。うちは”賑やかしの画像”を入れる事が多いですが、その場合でもできる限り記事本文内のテキスト文脈に出来る限り近い画像を使用し、尚且つその画像を端的に表す文言を入力するようにして下さい。

画像ファイル名の付け方(ローマ字or日本語ならどっちが良いの?)

WordPressの場合、画像ファイル名が日本語でも取り込む時に自動でエンコードしてくれるので、労せずして日本語名を付けた画像ファイルをアップロードすることが出来ます。

では、ファイル名はローマ字と日本語どっちが良いのでしょうか?

結論:⇒どっちでもいい!

参考:大発見!?、Googleは日本語ファイル名の画像を認識できる | 海外SEO情報ブログ

いずれにしても、ファイル名はファイル内容に関連したものにして下さい。

車の画像なら「beauty.jpg」ではなく「car.jpg」の方が良いって事。

社内的には画像のファイル名は「日本語」にする方向で進めます。日本語.jpgの状態でWordPressの記事の「メディアを追加」ボタンから挿入。日本語だとどうしてもファイル名がエンコードされて意味不明なものになっちゃうので、後からFTP等で修正したい時に大変ですが、取り敢えず現時点ではその方向で進めています。

どれくらいの頻度で画像を入れるべきか?

これは文脈にもよる。画像が絶対に必要なのであれば、なんぼでも入れたら良い。

賑やかしで入れる場合は、PCで記事を見た時にスクリーンが全て文字で埋まってる状態なら最低でも1個は入れる。この辺は自己判断で。

アイキャッチ画像には何を設定するか?

こちらは別途記事にしました。そちらをご参照下さい。

アイキャッチ画像は設定すべき?設定するならどんな画像を使うべきか!?

AMP対応の為にすべきこと

AMPではwidthとheightは必ず指定しないとエラーが出る。但しWordPressは勝手に入れてくるので気にする必要はない。

但し、AMPカルーセルに対応させる為には横幅696px以上のものが必要。

参考:AMPカルーセルの画像サイズは幅が696px以上、縦は最小要件なし | 海外SEO情報ブログ

画像専用サーバーの利用も検討する

画像を軽くする」セクションで書いたことを進化させたもの。画像だけ別サーバーが取ってくることで、記事のファイルサイズが小さくなるので表示速度が高速化します。

大きく育てるつもりが有るサイトなら最初から導入するのも有り。但し、金銭的な問題も有るのでサイトが完成してから考えてもOK。私は現時点ではしていない。

まとめ

最後の方は面倒くさくなって、やっつけ記事になっちゃいました。

まぁでも取り敢えずこれくらいの事を網羅してたら画像に関しては今のところ大丈夫です。