不動産のSEO【画像の最適化：プラグインとalt属性】

こんにちは。
インスタグラムでこんな投稿をしました。

疲れたときに。

植物や緑には人を癒す効果があり
木々の緑を見ると、気分が中和されると言います。

この投稿をInstagramで見る

【疲れたら緑を】目が疲れた時に木々の緑を見ると疲れが取れるとも言われますが、これは医学的にも根拠があります。「緑の色は目に入った時、凝り固まった目の筋肉を緩ませリラックスさせると言われています。また、緑は青と黄色の中間色で、中立の色です。疲れた時に緑を見ると、気分が中和されるのです。#リラックス #緑 #疲れ #目の疲れ #relax #floralarrangement #flowerarrangement

mocoさん(@yukidaluma.ss)がシェアした投稿 – 2018年 1月月4日午前8時12分PST

先日。お仕事で作詞をされている方が。

「公園の見えるマンションに引越をしたい」と話されていました。自然を目にするといいフレーズが浮かんでくるのだそうです。

そんな時には。

Googleの画像検索で「公園の見える　マンション」で検索してみます。

窓から公園の見える眺望のいいマンションの画像がたくさん検索されてきます。

最近の傾向として。

画像がメインのコンテンツが増えてきたり・・・。
商品によっては画像検索から検索をしたり・・・。

せっかく画像を使うのなら。

アイキャッチ画像で見た目で記事に誘導したり。
（３Bの法則ではBeauty・Baby・Beastは好感がもたれやすいとされています。）

コンテンツに画像を使うのならば、最大限に活用していきましょう。

1 画像を利用するときのポイント【ファイル名・alt属性・figcaption要素】
2 画像はaltタグが大事：もう一歩進めてfigcaptionタグも
3 ワードプレスで画像を軽量化するプラグイン
- 3.1 よく使われているのはこの３つ
- 3.2 イメージや離脱防止には画像が！SEOには文章が効果的

画像を利用するときのポイント【ファイル名・alt属性・figcaption要素】

画像を利用するときのポイントは・・・・・・。

・わかりやすく簡潔な「ファイル名」をつける
→バグやエラーを起こさないように英語の方がよい

・画像の内容と一致しているalt属性を記述する
→長すぎず20文字以内で

・データサイズを小さくして、保存形式も最適なものにする
→スマートフォンの画面サイズはさまざまなため、表示サイズを幅の変化に対応できるコードをhead内に記述する（viewport)

・figcaption要素を入れてキャプションを記述する
→画像に説明文（キャプション）をつけ、figure要素で画像の内容を伝える

・重要でないimgはdecoding=“asyncc”を設定しておく
→decoding属性は、ブラウザによって動作しない可能性があります。
<img src=”” alt”” decoding=”async”>

つい、画像のファイル名を「1.jpg」や「01.jpg」などとしたりしますが、数字の羅列はGoogleが何の画像かが理解できないので、「ファイル名」と「alt属性」はわかりやすく簡潔に記載します。

そして。
画像に説明文（キャプション）をつける事で、検索エンジンに画像の内容を伝える助けにもなります。

画像はaltタグが大事：もう一歩進めてfigcaptionタグも

画像には適切なタグの書き方が決まっています。（HTMLの場合）

<img src ="/img/house.jpg"　width=" 200" height="300"　alt="スヌーピーの家です"/>

<img src ="/画像のある場所/画像ファイル名"　width=" 幅" height="高さ"　alt="代替テキスト"/>

imgタグ(画像を出力せよという指令）・srcタグ(どの場所にあるどんなファイル）
→imgフォルダにあるhouse.jpgファイルを幅200/高さ300で出力せよ！

という意味です。

☑️width・height・altは記載しなくても画像は表示されますが、省略すると読み込み時間が遅くなってしまう事がありますので、しっかり記述します。

☑️altは検索エンジンにどんな画像が表示されているのかを伝える意味をもっているのであまり意味のない画像の場合には[alt=” ○○ “]のように空の属性値にすることも。

alt属性に画像の説明を記述したら。
もう一歩、効果を高めるには。
figcaptionタグにキャプションを記述してみましょう。

ワードプレスの場合は簡単に入力ができます。

さらに。
構造化タグを使うのも。

画像（img)の中でも、メインビジュアルとして「mainimg」のように構造化タグを使用することも。

ワードプレスで画像を軽量化するプラグイン

WordPressでは、1枚の画像をアップロードすると、勝手に複数枚さまざまなサイズの画像が作成されてしまいます。

文章に比べて画像は、どうしてもデータの容量が大きくなってきます。

「重い画像をアップロードしていると、表示速度が遅くなってしまった」
「画像を一枚づつリサイズするのが、手間がかかる」

そんなときに。
ワードプレスの画像を圧縮したり軽量化するプラグインとして有名なのは

よく使われているのはこの３つ

ワードプレスのプラグインで画像を軽量化するのによく使われているのは

・EWWW Image Optimizer→何枚でも無料
・Compress JPEG & PNG images→月500枚まで無料

・Imsanity→画像を自動にサイズ変更してくれる

「EWWW Image Optimizer」は利用している方も多いと思いますが、同じサーバー内で処理をするためサーバーによっては、サーバーに負荷を与えてしまいます。

月500枚までは無料で圧縮できる「Compress JPEG & PNG images」はサーバーへの負荷がかかりませんが、画像のノイズが少し目立ちやすいようです。

サーバーへの負荷や画質などにこだわる場合には、有料版がおすすめです。

画像を自動でリサイズしてくれるプラグインが「Imsanity」です。高解像度の画像をアップロードする場合には便利なプラグインです。ただし、リサイズ前の画像がサーバーに残らないのでバックアップをとっておくなどするのが安心です。

その場合。ソフトを利用するのも。
サーバーにファイルをアップロードするための「ＦＦＦＴＰソフト」は無料でダウンロードできますので、プラグイン、テンプレートなどもサーバーにあげることができて使いやすいです。（ウインドウズのみ）

イメージや離脱防止には画像が！SEOには文章が効果的

コンテンツのビジュアルにも影響する「画像」ですが。
裏では、色々なタグなどを使って、検索エンジンに画像の情報を知らせています。

画像だけでも、文章だけでも

効果的なコンテンツを作ることは難しいので、バランスよくいきましょう。

☑️検索エンジンは、文章量が少ないと情報が少なくて内容が薄いページとして判断しますので、SEOにはやはりブログなどの文章で対応する。

☑️さらにユーザーの興味を引いて、ページから離脱させないためには画像を活用する。

この両者のバランスと使い分けが・・・・・・。

なかなか。
難しいのです。