サルでき流 WordPressではじめる企業サイトの作り方

第29回 はじめてのSEO入門。検索エンジンにウケる画像の貼り方とは?

この記事を読むのに必要な時間:およそ 5 分

ウケる画像の貼り方:属性情報編

では次。次は「属性情報」のお話です。

実はですね。Webサイトで扱う画像には,ファイル名に加えて,いくつかの「属性情報」を,コードにより設定することができるようになっています。

画像をコンビニで売っているおにぎりにたとえると,⁠明太子おにぎり」というファイル名に加えて,⁠カロリー」「消費期限」のような,そのおにぎりに対する属性情報が設定できる,そんなイメージです。

設定できる代表的な属性情報には,⁠alt」と言うものと,⁠title」というものがあります(厳密に言うと,titleは画像だけに設定できる属性情報ではないのですが……まあ画像で使うのがわかりやすいので,ここで覚えちゃいましょう)⁠

「alt」とは,alternate(代わりのもの)の略で,ここでは代替テキストという意味になります。言葉の通り,指定された画像が何らかの都合で表示されなかった時に,代わりに表示する文字のことです。

「title」とは,そのままズバリタイトルのことです。これを設定しておくと,その画像にマウスを乗せた時に,⁠ツールチップ(フキダシ)⁠を表示してくれます。

こういうの,見たことありますよね

こういうの,見たことありますよね

それにしても,代替テキストとタイトル。なんだか似たような項目ですね。実際にブラウザの種類やバージョンによっては,titleではなく,altをツールチップとして表示するものもあります。うーむ,こうなるともう何がなんだか。

ですがご安心ください。ここでは,SEOに役立つのはaltの方と覚えておけばOKです。altは画像の代替テキストとして,ファイル名同様,キーワードを入れておけば検索エンジンに引っかかります。

逆に,titleはSEOにはあまり役に立たないようです。まあツールチップが出てくるところを見ても,どちらかというと「人間にとって役立つ機能」なんでしょう。

では,実際にWordPress上で,altやtitleの属性情報をどうやって設定するかを見ていきましょう。いつものようにWordPressにログインして,何か適当な画像ファイルを,メディアライブラリにアップロードしてくださいませ。

画像の上下に注目

画像の上下に注目

よく見ると,画像の上下にいろいろな項目がありますね。

  • タイトル
  • キャプション
  • 代替テキスト
  • 説明

これが,WordPress上で画像に対して設定できる項目です。

先ほど出てきた要素,⁠title」「画像のタイトル」⁠⁠alt」「代替テキスト」に対応しています。画像に対する属性情報としては,まずこの2つを覚えておけば大丈夫です。

残った2つ,「キャプション」「説明」って何でしょうね?

まず「キャプション」ですが,この項目に文字を入れてから記事に貼り付けると,こんな感じになります。

画像の下に文字が入りました

画像の下に文字が入りました

画像のキャプション(コメント)⁠というわけです。これはWordPress特有の機能ですので,SEOにはさほど影響しない……可能性が高いです。が,見栄えが良くなりますので,使えるケースでは遠慮無く使っていきましょう。

次に「説明」ですが,この項目は,文字を入れてもどこにも反映されません。これは,Webサイトに必要な項目ではなく,管理者が「この画像ってなんだったっけ?」ということを忘れないようにするための「メモ欄」です。安心してメモ書きにお使いください。

ではでは,項目の謎がスッキリしたところで,各項目に文字を入れてから,画像を記事に貼り付けてみましょう。

どういう情報がどんな形で付加されたのかわかりやすいように,テキストエディタ版で見ています

どういう情報がどんな形で付加されたのかわかりやすいように,テキストエディタ版で見ています

「img」からはじまるコードが,画像を表示するためのコードです。この中に,⁠alt」という部分があるのが見えると思います。

ここです。ここ

ここです。ここ

こういう風に書かれていれば,この画像に対して,⁠代替テキスト」が設定されたことになります。WordPressでは,記事に画像を貼り付ける前に,項目に文字を入力しておけば,貼り付け時に自動的にコードが追加されます。

コードを見ていくと,⁠キャプション」に設定した文字は見えますね,で,⁠説明」に設定した文字は見えない,と。うんうん。想定通りです。

……あれ?「タイトル」がありませんね。

実はですね……残念なお知らせなのですが,WordPressの3.5というバージョンから,タイトルは,項目に文字を入力しても,自動的にコードが追加されないようになりました。

……え?どゆこと?

どうもですね……ぱっと見便利そうに見える,⁠ツールチップ」が,WordPress的には「チラチラ画像の上に出てきて,美観を損ねる」と判断されてしまったらしく,⁠追加したい人は,自分でコードを書いてください」という扱いになってしまったようなのです。

仕方がありません。ツールチップを表示したい人は,テキストエディタに切り替えて,altの設定の後にでも,こんな感じで書いておきましょう。

こんな感じ

こんな感じ

そうすると,マウスを乗せた時にちゃんとツールチップが表示されます

そうすると,マウスを乗せた時にちゃんとツールチップが表示されます

「SEOにはホントにaltしか関係ないの?titleだって文字なんだから,何かしらの役に立つんじゃない?」

そう思う人,結構いるんじゃないかと思います。ワタシも同じように思っていました。今でも若干……思っています。

でもですねー。Webサイト作成ツールの最大手,WordPress様が「邪魔」って言ってバッサリ機能を切るくらいなんですから,おそらくそれほど重要視しなくていい項目だと,そう考えていいと思うんです。なんだかせっかくの機能なのに勿体無いとも思うのですが。

信じましょう,ワタシではなくWordPress様を。

ではでは,今回の内容を整理しますね。

サルでき流 検索エンジンにウケる画像の貼り方ルール
  • ファイル名に,1~2個キーワードを入れておく
  • alt属性に,1~2個キーワードを入れておく
  • 画像が添付されている記事の,⁠記事タイトル」「記事内容」に,キーワードを入れておく(これはタイトル編記事編参照)

まとめ

いかがでしたか?

4回に渡ってお届けました「はじめてのSEO入門」⁠わかりにくいSEOを攻略する何かしらのヒントになったでしょうか?

「なんだよ~,ほとんど『キーワード』の力技じゃん」⁠という声が,ディスプレイ越しに聞こえてきそうですが。まあ,実のところワタシ自身「SEOって結局そんなもん」と思っていたりしまして。

いやね。そう思えるのは,ある意味幸せなことだと思うのです。

今回お話した画像についても,今のところはこうやって,ファイル名や属性情報を文字としてしっかり書く,という「文字中心の考え方」でなんとかなるので,やりようはあるのですが。

もしかしたら将来は,⁠何らかの仕組みにより,本当に画像自体を検索エンジンが判断できるようになってしまって,プロのカメラマンが撮ったステキな写真以外は,検索結果の上位にまったく出てこなくなる」という可能性もあるわけです。

小市民の努力を嘲笑うが如く,キーワード無用の検索システムをGoogleが作らないとも限りません。むしろあの会社ならやりそう。すっごくやりそう。

そうなると最終的には,⁠少しでもいい記事を書き,少しでもいい写真を撮り,少しでもいいイラストを描く」という,どうしようもなく真っ当で,シンドイ方法に辿りつきます。

それと比べれば,まだ今の状況はできることが沢山ありますので,その辺を上手く活用しつつ,書き慣れて,撮り慣れて。いつか来る将来にじっくり備えておく,という感じでいきましょう。

……おっと。

と,いうところで終了の時間です。

ではでは,今回はここまで!

次回をお楽しみに~。

画像

著者プロフィール

カワサキタカシ(かわさきたかし)

元アイ・ビー・エムERPコンサルタント,元アップル教育ソリューション開発者兼営業,他にも様々な経験を経て,人材育成会社『株式会社マイウェイ』を夫婦で起業。現在,同社の取締役兼なんでも担当。

「Webサイト」から「iPhoneアプリ」,「ビジネスサービス」から「会社」まで,『作ること』が好き。そして作る楽しさを誰かに『教えること』も好き。楽しく作る技術を学ぶコミュニティ,『サルでき.jp』をぐーたら管理中。

著書に『iPhoneアプリ開発塾』(技術評論社),『サルにもできるiPhone同人誌の創り方』(飛鳥新社)がある。

株式会社マイウェイ Webサイト
株式会社マイウェイ Facebook
カワサキタカシ Facebook
サルでき.jp


企業サイト作り(運用)にお困りの経営者さま・Webご担当者さま。ワタシ,『企業サイトを楽しく作る(育てる)ためのサポートサービス』もやっております。困り果てて現実逃避の小旅行に出かける前に,是非一度弊社Webサイトまでお気軽にご相談くださいませ。