ひびこれSTUDY

Wakkoの雑記ブログ。 毎日学んだこと、思ったことのアウトプットの場として運営しています。

SEO最初の一歩 画像について考えよう!

スポンサーリンク

Wakkoデェス。

SEOについて考える!7回目となりました!
ここまでをあっさり読むだけでも考え方は理解できるんじゃないかな、と思います。

 

最初の記事

>>SEO最初の一歩 すぐに使える対策手順

前の記事

>>SEO最初の一歩 リンクに気をくばろう!

 

今回は!「画像」について考えていきましょう!

 

長くなっちゃったので先にまとめから申し上げます!

  • 記事の内容に沿った画像を使うこと
  • 画像はなるべく軽くすること
  • alt指定を記入すること

そんなようなことを言っています。

 

それではいってみよっ!

画像と記事は切れない関係

「画像」と「記事」というより
「画像」と「わかりやすい記事」は切れない関係なのです。

 

ところで、新聞は読みますか?

見出しをもっと考えよう!でも例にあげたのですが、新聞から学ぶことは多いので
遠目から眺めてみるのもいい勉強になるんじゃないかな、と思います。
いいよ別にじっくり読まなくて。眺めるだけで。

 

新聞には膨大な量の文字が書かれていますよね。
ですが記事一つ一つが、きちんとわかりやすく整理されているのです。

それはひとえに「写真」が効果的に使われているからかな。と感じる今日この頃。
ただのコラム一つとっても、「この人が書きました」と写真が載っていたら
その記事には権威性があると感じませんか?
小学生でも、おじいちゃんでも。
「この人」が書いたんだ。と繋がりを感じると人は興味を持つものです。

 

 ブログやTwitteryoutubeなどで「顔を出すか出さないか」が度々議論に上がるのはこの権威性に関わってくるからなのだと思います。
顔を出すことによって、より親近感、繋がりを感じさせることができる。安心感がある。
顔まで晒してるんだから下手なことは出来ないな、という自身への抑止力にもなりますし、リスナーの信頼性も上がることになります。

 

 

 

さて。

この辺りでこの記事の文字数がだいたい600文字を突破しました。
真面目に読んでくださった方、ありがとうございます。

 

どうですか?なぁんか飽きてきません?
ともあれ、なぁんか内容が頭に入ってこない感じしません?

 

多分、ここまでに画像がないからです。

 

そこで!!
私の大好きな漫画「ゴールデンカムイ」の、ある1ページをどうぞ。

ゴールデンカムイ 石川啄木

ゴールデンカムイ 118話より

ウィリアム・ハーストってのはアメリカの新聞王だ。

 その新聞王はとにかく絵や写真を紙面に載せることに執着するそうだ。

読者の視覚に与える影響力のデカさをよく知っているんだろうな 。

 

記事に写真や解説画像を差し込む理由は
これでしかないな、と大変納得しました。

 

百聞は一見にしかず。
文章でいくら説明したところで、画像1枚で得られる理解度には敵いません。

 

「画像」と「わかりやすい記事」は切れない関係なのです。

 

画像は「SEO的には」もろ刃のつるぎ

SEO最初の一歩 画像について考えよう!
メリットの大きい「画像」なのですが
見逃せないデメリットもありますので解説します。

画像を使用するメリット

  • 文章にメリハリがつく

ブログの文章の書き方として必要なのは
「語りかける」ことだと思います。

口で、喋って伝えるように、文章を書く。

 

画像は、読者に対して
「ここで一旦ひと呼吸しますね」を伝えるために利用することができます。

 

 

画像はどこに貼ったらいいのか、という質問に対して
SEO的には見出しの下に画像を貼るといいですよ」
って解説をされている方が多いのですが

 

なぜ、見出しの下がいいのか?
なぜ、検索エンジンは見出しの下に画像を貼る事でよしとしてくれるのか?

 

 

とどのつまり、解説を始める前の一呼吸を推奨しているから。
その一呼吸が、記事への理解度を高めるから。


なんじゃないかしら?
なーんて思ったりしたわけです。

 

ほっと一息しましょうや

 

「今から国語の授業を始めます38ページを開いてください今日はごんぎつねを読んでいきましょうまず先生が読んでみます」
と授業を始める先生よりも

 

「今から国語の授業を始めます。」
「38ページを開いてください。」
「今日は「ごんぎつね」を読んでいきましょう。」
「まず、先生が読んでみますね。」

という語り口の先生の方が
多分授業がわかりやすいだろうな。と思いませんか?

 

文章を書きながら、呼吸をしましょう。

 

なんかポエミィな感じにになっちまいました。 

 

  • よりわかりやすく解説できる

 百聞は一見に如かず、ということわざの通り
画像なら一目で理解にいたることができます。

 

「図」や「表」はわかりやすさを追求して生まれた手法な訳ですね。

 

例)

うちの太文字ね、ちょっとはてなブログ的には凝ってるんですよ。
あ、太文字ってタグでいうと<strong>ってやつなんだけど
この要素をCSSでちょっといじってマーカーっぽくしてるんです。
蛍光緑のマーカーにしてます。
ワードプレスのブログとかによくあるやつ。
太文字+マーカーってわかりやすいなーって思ってたから
真似してみたんですよねぇ。つい多用しちゃいます。気を付けなきゃ。

これがうちの太文字です


 御託はいいからモノ見せろ。ってなもんで。

 

  • 画面が華やかになる

 今回の記事の冒頭でやらかしましたが
ただ文字だけが並んでいる文章は
読みづらいし
飽きるし
画面がつまらんのですよ。

 

文章を読むのが好きなひとは別に平気かもしれませんが
そうではない人も一定数いるわけです。

あまりにもカラフルでキラキラしている画面はさすがに読みづらいと思いますが
要所で文字以外の要素を入れてあげると、読みやすさが格段にUPするわけですね。

 

「文字だけでめちゃくちゃ面白いブログ書く人」っていますけど
その人はどうやって書いたら人が興味を持ってくれるかをめちゃめちゃ考えて、言い回しも工夫して、改行で読みやすさも意識して…ってやってると思います。

 

どっちもやれると最強ですよね

 

画像を使用するデメリット

ランブータン

ランブータン。フィリピンとかで食べられる。

 

  • 文章が負ける

 画像から得られる情報量が多いのはメリットなのですが
やっぱり画像はインパクトが大きいです。
「一息ついてもらおう」と配置した画像のせいで、文章の解説が頭に入らないなんてことにならないようにしましょう。

 

具体的には、記事の内容に沿った画像を配置するのが無難です。

 

ところでランブータン南国のフルーツです。食べたことありますか?
見た目はグロテスクなのですが味は美味しいんですよ。

  • 記事の読み込み速度が遅くなる

おそらくこれが最大のデメリットです。
日本は4G回線が主流で比較的画像の読み込みはスムーズな方だと思いますが
忙しい現代人は、5秒、10秒の読み込み時間が待てません。


せっかく開いたのに、読み込みが遅いとイライラしちゃいますよね。
私なら読み込み遅いとページを閉じちゃいます。直帰以前の問題です。

 

この「ページ読み込み速度」は検索エンジンも評価対象として見ています。

 

画像はできる限り軽くしよう

じゃあ結局なんbiteならいいの??

って話になるんですけど、これは感覚の問題になってくると思います。ご利用の回線によって読み込み速度は人それぞれなので…。
これもまた詳しく解説したいので、別に記事を立てさせていただきますね。

 

ということで
今回はJPG<PNGの順で画像容量が大きくなる、というところを押さえておけばOKです。

 おまけでGIFも紹介します。

JPG形式

透過処理はできませんが、1670万色の色を使うことができます。
画質を指定して保存することができ
画質が高いほど容量は大きく、低いほど小さくなります。

webにアップする画像形式は昔っからこれが一番多い印象です。万能選手。

 

JPG形式例

JPG画像例

41KB。
グラデーションは保持されるが輪郭がぼやける。
特に赤色は劣化が激しい傾向にあります。

PNG形式

これも背景透過の処理が可能です。

が、いかんせん容量が大きくなってしまいます。
その分、画質としては最高。写真や図形の輪郭までくっきり見えます。

 

JPG例と比べると背景混色部分がなめらか。 

PNG画像の例

PNG形式例

171KB。高画質でお届けしたい写真やイラストに。

おまけ:GIF形式

使える色の数が256色に限られてしまいますが
これも背景の透過ができるメリットがあります。

さらにアニメーションが作れます

 

GIF画像の例

GIF形式例

127KB。グラデーションが保持されません。
アイコンやドット絵などはこの形式がGood!

 

必要に応じて使いこなしてくださいね。

 

画像に代替文字を指定しよう 

これが代替文字でーす!

 

 画像の指定がうまくできていない時に、代わりに表示される文字のことです。

htmlタグで指定することができ、<alt>指定と言います。

 

この代替文字は、検索エンジンの「画像検索」に表示される際に表記される場合があるので、検索して欲しいキーワードを含んでおくことが大事です。

<img  src="ここに画像のURL" alt="ここに代替文字" />

 

各ブログサービスにも
「画像のalt指定」を記入する機能がついていると思いますので利用してください!

 

SEO的画像のまとめ

伝えたいことが多くて、ちょっと長くなってしまいました。
お疲れ様でした。

  • 記事の内容に沿った画像を使うこと
  • 画像はなるべく軽くすること
  • alt指定を記入すること

以上の3つを意識して画像を効果的に取り入れてくださいね!

 

次の記事

>>サーチコンソールを活用しよう!