どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。
ブログやサイトを運営されている方は、テキストだけの記事ではなく画像を使って読みやすくしたり、アイキャッチを設定して読者に印象付けをしていることが多いと思います。
画像はユーザービリティの向上だけでなく、GoogleのSEO対策としてもかなり重要になってきていますね。
そこで画像SEOと言えるのが「alt(オルト)属性」になるんですが、これを設定することはGoogleも推奨しているので、画像を多用する方は設定しておくべきでしょう。
ただ、画像に設定できるalt属性はあまり目立たない機能なので、「alt属性って初めて聞いたんだけど。」とか、「どこで設定したらいいの？設定方法は？」とわからない人も多いんじゃないでしょうか。
今回はそういった人向けに、画像SEOのalt属性を適切に設定する方法や、画像を利用するにあたってのポイントなども一緒にご紹介していきます。
画像のSEO「alt属性」とはなに？
alt属性とは画像ファイルの情報をテキストとして認識させることができ、画像の閲覧ができないような環境下において、画像情報をalt属性によって正しく理解することが可能になります。
つまり、簡単に言うと画像の内容をテキストに変換して表示してくれるという訳ですね。
通常の場合はブログに画像をアップロードして記事に挿入すると、以下のようなURLリンクになっています。
| <img src=”ブログURL/年/月/画像ファイル名.jpg” alt=”” width=”” height=”” /> |
この赤色の部分にあたる「alt＝””」がalt属性であり、画像をアップロードした段階では空白の状態になっています。
このalt属性は「代替テキスト」と呼ばれていて、画像に関連するテキストを手動で入力していきます。
| alt＝”パソコンでブログを見ている男性“ |
代替テキストに画像から読み取れる情報を設定することで、万が一画像が見れなかったとしても、「この画像はパソコンでブログを見ている男性だったんだな。」と理解できます。
画像の閲覧環境がない又はできない人にとっては、非常にありがたい情報になりますよね。
画像もGoogle検索の評価対象になる
Googleの自動巡回プログラム「クローラ」が、ブログやサイトを巡回することで情報を収集していますが、一昔前まではテキストの情報しか認識できず、画像の内容までを正確に認識するのが困難でした。
ですが、Googleは常に進化を続けながらAI技術の急速成長も影響して、現在では画像の内容を自己分析して動物なのか人物なのか、笑っているのか泣いているのか、画像上に書かれた文字などを認識できるようになってきています。
2016年2月に公開された「ついに Google Cloud Vision API のベータ版リリース！」では、Googleが提供するAPIを使って画像情報を読み取ることができます。
これは画像上の女性の表情と書かれている文字が、APIによってテキスト化されたものになります。
１年以上前の段階でこのレベルですから、どれくらい進化を続けているのかは未知数ですね。
また、代替テキストで画像の内容をより正確に伝えることで、「この画像に近い情報を検索していたユーザーがいたな。」とGoogleが認識し、ユーザーに必要な情報を提供できる可能性が高くなります。
つまり、ブログやサイトで扱っている画像を、Googleの検索エンジンに上手く伝えることができれば、SEOにも良い影響を与えることに繋がります。
最も影響力があるのは、記事のテキストコンテンツであることに変わりはありませんが、画像SEOも今後はさらに影響力が増していくかもしれません。
Googleが推奨している画像設定
それではGoogleがどのような画像設定を推奨しているのかというと、このようになります。
- 画像の情報がわかるファイル名にする
- alt属性(代替テキスト)を設定する
その他の細かな画像に関する情報は、「Search Console ヘルプ」の方で確認することができます。
画像をアップロードしてそのまま挿入しているだけだという人は、それぞれの設定内容を参考にしながら、画像SEOをぜひ実践されてみて下さい。
画像の情報がわかるファイル名にする
Googleの画像認識能力が向上したと言っても、やはりテキスト情報の方がダイレクトで正確に認識できる他、Googleが画像を見なくても識別できるような環境にしておくに越したことはありませんよね。
オリジナルな画像(自分で撮影した画像)などでなければ、基本的にはフリー素材サイトでダウンロードできる画像を使われているかと思います。
その場合はまず素材サイトから、ブログ内容に関連している画像を探して、一旦自分のパソコンに画像ファイルを取り込みますよね。
利用するサイトにもよりますが、ダウンロード後のデフォルトのファイル名は、以下のような英数字になっていることが多いです。
| matterhorn-3019429_1920 |
英字の部分は画像内容と一致していれば特に変更の必要はありませんが、もし関連した単語じゃなかったり数字のみだった際は、画像内容に適したワードに変更しておきましょう。
英字に続く数字は特に必要のないものなので、ファイル名が重複しない限りは削除しておく方が、Googleに余計な情報を伝えずに済みます。
ファイル名を英字ではなく日本語にするとモバイル端末の中には、上手く画像の読み込みができない可能性があります。
また、文字化けして意味のない文字列になってしまうので、できれば英字表記で１～３語程度の単語内で、画像の内容が伝わるように設定しておくことをオススメします。
alt属性(代替テキスト)を設定する
alt属性(代替テキスト)は最初の方で一度説明しましたが、画像情報をテキストとして設定しておくことで、Googleが代替テキストの情報から画像を正しく認識できます。
伝わる情報が正確であればあるほど、検索上でユーザーに対して有益な情報を的確に提供することが可能になります。
これはブログ運営者・Google・一般ユーザーにとってメリットがあるので、画像に代替テキストを設定しておいて損はありませんね。
ただし、代替テキストはどんな内容でもいいという訳ではなく、適切なものでなければ検索エンジンに悪影響を与えてしまうので、設定の際は以下の内容を覚えておきましょう。
１つの例として、以下の画像ファイルをブログで使用するとします。
この画像に代替テキストを設定するとしたら以下のようになります。
| 不適切なalt：<img src=”beautiful-girl.jpg” alt=”” /> 適切なalt：<img src=”beautiful-girl.jpg” alt=”美しい女性” /> 最適なalt：<img src=”beautiful-girl.jpg” alt=”葉に横たわる美しい女性” /> NGなalt：<img src=”beautiful-girl.jpg” alt=”葉っぱ,枯れ葉,女性,綺麗な女性,可愛い女の子,美しい,長い髪” /> |
この場合の理想的な代替テキストは「最適なalt」のパターンになり、「NGなalt」のようなキーワード乱用の設定をしてしまうと、スパムとみなされてGoogleにマイナス評価を与えてしまうことになります。
そこまで大きな影響はないかもしれませんが、SEOを考えるのであれば最適な代替テキストの設定を心掛けましょう。
ファイル名・alt属性(代替テキスト)を設定してみよう
それでは実際にフリー素材サイトを利用して画像のダウンロードから、ファイル名とalt属性(代替テキスト)の設定、画像を記事内に挿入までを図解していきたいと思います。
ここで使う素材サイトは「pixabay」で、ブログサービスは「ワードプレス」で行っていきますね。
ワードプレスで画像SEOを設定する手順
まずはブログで使いたい画像をpixabayで探して、見つかったら右側の「無料ダウンロード」⇒「サイズ選択」⇒「ダウンロード」の順に進めましょう。
この時pixabayに無料登録されている場合はキャプチャが表示されず、「認証欄にチェック」⇒「ダウンロード」で対象画像がパソコンにダウンロードされます。
ダウンロード後は画像内容に関連した「ファイル名」の設定や編集をして、ワードプレスにアップロードしたら、右側に表示されている項目内の「タイトル(ファイル名)」の確認と、「代替テキスト」を入力しましょう。
今回私が選んだ画像ファイルはこちらになります。
この画像にファイル名と代替テキストを設定するなら、私の場合だとこのようにしました。
- ファイル名：sunset-cat
- 代替テキスト：日没の光に照らされた猫のシルエット
これで画像SEOの設定は完了となるので、今後画像を追加する際は同様の流れで忘れずに設定していきましょう。
すでにアップロード済み画像はどうしたらいいの？
もうすでにかなりの画像枚数をアップロード済みで、今までに一度も設定したことがないという人もいるでしょう。
私も実はファイル名とalt属性(代替テキスト)を意識し出したのは最近の話なので、未設定の画像総数は1,000枚以上と気が遠くなる数になっているんです。笑
それにメディアライブラリから設定自体は可能ですが、そこで画像のファイル名を変更してしまうと、記事内に貼っている画像URLと異なって表示されなくなってしまいます。
つまり、ファイル名を変更した画像は全て貼り直しが必要になるということです。
また、代替テキストに関しては変更しても、画像は正常に表示されてはいるんですが、これはあくまでメディアライブラリ内にある代替テキストが設定できただけです。
つまり、すでに記事内に貼っている画像の方には反映されず、これまた貼り直しを行うか各記事の画像編集から１枚１枚直接設定しないといけないんですよね。
この問題の解決策はあった！
「そんな面倒で時間のかかることはやってられない！」と誰もが思うはず。
そこでもっと簡単に変更できないものかと探していると、なんともありがたいプラグインを発見しましたよ！
- Media File Renamer：ファイル名の編集
- Media Alt Renamer：代替テキストの編集
| 参考：画像のファイル名と代替テキストをまとめて編集変更できるプラグイン |
この２つのプラグインをワードプレスでインストール＆有効化すれば、メディアライブラリからまとめて設定や変更ができるんです。
１つ１つ画像を開くこともなく、一覧表示されている画像から未設定のものに入力していくだけで、すでに記事内に貼られている画像にもしっかり反映されます。
なので、画像の貼り直しも一切必要なくなるので、かなり時間効率良くファイル名と代替テキストの設定を行うことが可能です。
ただ、私のように1,000枚以上の規模になってくると、それでも結構な時間が必要になってきますし、とりあえずはユーザーの目に入る可能性の高いアイキャッチ画像から変更していくのが良さそうです。
画像サイズや画質も重要になるよ
Facebook・TwitterのOGP設定をされている方は知っていることですが、特に記事の顔になるアイキャッチの画像サイズや、画質はユーザビリティに大きく影響することです。
OGPとは簡単に説明すると、SNSでもアイキャッチ画像が適切に表示されているか、ということを意味しています。
このOGPはプラグインを使うことで簡単に設定できるので、私の場合は「All in One SEO Pack」プラグインを使っています。
「ソーシャルメディアの設定」からOGPの設定ができ、もし気になる方はこちらの記事内で設定方法を詳しくご紹介しているので参考にされてみて下さい。
| 参考：All in One SEO Packを正しく設定してSEOを効果的に機能させる方法 |
また、画像サイズはブログごとで多少最適なものが変わってくることですが、基本的にはブログとSNSに共通して利用できるサイズが好ましいですね。
例えば、ブログだけを意識してサイズを決めているとFacebookやTwitter、はてなブックマークで表示した時に不自然な部分で画像が切れていたりします。
このままではSNSの方で上手くユーザーに伝わらないので、アイキャッチ画像をどこで表示してもキレイに見えるようなサイズに設定しておく必要があります。
画質は言うまでもありませんが、粗い画像より高画質で鮮明な方が良いので、なるべく使用する画像は大きめのピクセルで、ブログの画像設定でも大きめのサイズに変更しておくといいかと思います。
| 参考：ブログとSNSに共通して使えるアイキャッチ画像の最適なサイズとは |
まとめ
画像SEOに影響するalt属性ですが、実際のところGoogleの評価にそこまで大きな影響はまだないといった感じですね。
私のブログでも今まであまり意識していなかったので、基本的にファイル名や代替テキストの設定をしていない画像がほとんどです。
それでもブログはしっかり成長してきていますし、極端に評価が下がったという印象もないので、一番意識すべきSEO対策は「記事の内容」ということに変わりはないでしょう。
ただ、検索シェアを独占している天下のGoogle様が推奨している以上は、しっかり設定しておいた方が確実にプラスにはなるかと思います。
画像のファイル名とalt属性(代替テキスト)は面倒なものですが、少しでも検索エンジンの評価が上がる可能性はあるので、画像追加時は手間を惜しまずに設定していきましょう。
| 合わせて読んでほしい 画像のファイル名と代替テキストをまとめて編集変更できるプラグイン |
