SEO ブログ運用

ALTとTITLEの使い分け?ワードプレスの画像ファイルを使ったSEO

投稿日:

私はSEOの専門家ではありませんが、これからSEOについての記事を書いていきます。

なぜ、そんなことを始めたのかというと。
私のブログで「All in one SEO pack」の設定をするうえでわからないことが多すぎたということ。

そして、「All in one SEO pack」やSEOについて日本語で書いているブログ記事がたくさんあるんだけど。
結構情報があいまいな記事が多く、何かの記事をコピペして。

僕はこうやって設定しています!どや!

と言っているブログばかりで、困っていたので、自分自身。
どうせ「All in one SEO pack」というプラグインを使ってワードプレスのSEO対策をするなら。
そのプラグインを作っているミカエル・トルバートさんの公式情報を見るべきなのではないかと思ったことから記事を書き始めました。

では早速行きましょう。
今回は、SEOにやさしい画像の設定方法について。
画像がメインのブログを運営されているひとは試してみるとよいかもしれませんね。

ワードプレスSEOテクニック1 画像の正しいSEO設定方法

皆さんのブログには「画像」が使われているでしょうか。
記事のタイトルや、記事のキーワード比率については意識している人はいても、画像をちゃんと設定していこうと考えている人は少ないかもしれません。

実は、画像を介して検索エンジンから流入するアクセスはワードプレスのブログにおいて過小評価されています。
検索エンジンは、現在のところ画像を正確に読むことはできないといわれています。
つまり、検索エンジンが画像を読めるのは、画像につけた記述、タグ、タイトルが中心なのです。

すべての画像には決められたALT属性(ALT代替テキスト)とTITLE属性(タイトル)をつける必要がある?

ちょっと詳しい人であれば、画像にALT属性を設定したほうがいいよ!ってことはごぞんじですよね。

ALT属性とは代替テキストといって、画像がうまく表示されないときに補足してくれる文字情報のことです。

例えば、このように表示されているのがALT属性に設定している文字です。

ALT属性の表示例

画像部分のソースコードはこのようになっています。

a href="https://under-q.com/?attachment_id=5298" rel="attachment wp-att-5298" img src="https://under-q.com/wp-content/uploads/2017/01/IMG_6225-300x225.jp" alt="これもテスト" width="300" height="225" class="alignleft size-medium wp-image-5298" //a

ソースコードで見るとATL属性に「これもテスト」と記載しているので、何かのタイミングで画像がうまく表示されない場合にALT属性が代替して情報を表示してくれているのです。

で画像のSEO的にはALT属性を設定するだけでいいのか?ということです。

実際のワードプレスの管理画面上でメディアの挿入を行うときに「代替テキスト」以外にもいくつか項目があって。
実は多くの人が、その機能を使いこなせていないといわれているのです。

どういうことなのか、実際のワードプレスのメディアを挿入する画面を確認していきます。

メディアを挿入

メディアの挿入を行うときの項目は下記になります。

  1. 画像ファイル名
  2. URL
  3. タイトル
  4. キャプション
  5. 代替テキスト
  6. 説明
  7. 配置
  8. リンク先
  9. サイズ

で、この中で注目しなければならないのがこちらです。

  1. 画像ファイル名
  2. タイトル
  3. 代替テキスト
  4. リンク先

ワードプレスSEO画像編のポイント1画像ファイル名は関連性があるものにする。

まず画像ファイル名には関連性のある名前をつける必要があります。
理想はキーワードを含む名前です。(キーワードに関しては後で説明します)。
例えば、「IMG_6225.jpg」という画像ファイル名はサイト管理者であるあなたにとっては意味がわかるものかもしれませんが、検索エンジンから見れば、全く意味のない名前になってしまいます。
「satoyamanobara.jpg」とした方が、より説明的で関連性のあるファイル名となります。

ワードプレスSEO画像編のポイント2すべての画像にALT属性とTITEL属性をつける。

ワードプレスのメディアを挿入する画面を見ると、「タイトル」、「代替テキスト」という項目があります。

では、タイトル(TITLE属性)に「テスト」代替テキスト(ALT属性)に「これもテスト」と入力して画像を挿入するとどうなるのか?というとソース上はこうなります。

a href="https://under-q.com/?attachment_id=5298" rel="attachment wp-att-5298" img src="https://under-q.com/wp-content/uploads/2017/01/IMG_6225-300x225.jp" alt="これもテスト" width="300" height="225" class="alignleft size-medium wp-image-5298" //a

これは先ほどお見せした代替テキストの表示例と同じものです。
ここで問題なのは、じゃあTITLE属性はいったいどこに行ったんだ?ってことなんです。
そこで、次のアタッチメント機能(添付ファイルのページ機能)がでてきます。

ワードプレスSEO画像編のポイント3画像にリンク先をつける場合は添付ファイルのページを使用する。

まず、ワードプレスで画像を挿入する場合、同じ画像でも4つの種類があります。

これもテスト

これもテスト

これもテスト

これもテスト

実際にクリックしてもらうとわかるのですが、

左上は、そもそもクリックできません。
右上は、画像のメディアファイルのURLへ直接リンクしています。
左下は、ワードプレスのアタッチメント機能(添付ファイルのページ)へリンクしています。
右下は、カスタムリンクなので、同じ記事を表示するようにしています。

で、これはワードプレスの記事にメディアを貼り付けるときに必ず選択しているのですが、多くの人はメディアのファイルに飛ぶと離脱するからといって、画像ファイルにリンクをつけていないと思います。

もちろん、画像によってはリンクをつけないのが正解だと思うのですが、場合によっては超簡単な補足説明があったほうがいい画像もありますよね。

そこで、先ほどのTITLE属性が必要になるというのです。

じゃあ、TITLE属性に指定した「テスト」という文字がどこに表示されているのか?というと。
左下の画像をクリックして、アタッチメントページ(添付ファイルのページ)へ行くと、そのページのタイトルにちゃんと設定されています。

で、そもそも「ALT属性」と「TITLE属性」ってなんなのか?ってことなんですが。

ALT属性:画像を表す単語
TITLE属性:画像の簡単な補足説明文

で、TITLE属性を活用するためには、画像に添付ファイルのページへリンクさせる。
というつかいかたをすることで、画像に関してすばらしいSEOを作ることができるということなんです。

もちろん、一つの記事に画像が100個あって、その画像すべてに添付ファイルのページを生成したりするとタグページの量産のようにSEOのペナルティー対象になるかもしれませんが。

記事の中で結構重要な画像とか、ポイントとなる画像に対しては、ALT属性 TITLE属性を設定したうえで。
画像のリンク先に「添付ファイルのページ」をリンクさせることで、検索エンジンからすると、画像に対してより適切な情報がえられるので、画像のSEOに強くなるということでした。

なので、今回のサンプルで使ったバラ園の画像の場合。

ALT属性:バラ園の画像
TITLE属性:山口県にある里山ローズバラ園の様子

というように設定してあげて、アタッチメントページを活用することで、画像を活用しているページで大幅に画像からの検索流入が望めるかもしれませんね。

ちなみに画像のSEOについてはこのサイトで実証していこうと思います。

スポンサードサーチ

スポンサードサーチ

-SEO, ブログ運用

Copyright© under-Q , 2017 AllRights Reserved.