読者です 読者をやめる 読者になる 読者になる

日常はネタ帳

ネタにあふれる楽しい日常

イラスト・漫画など画像の検索エンジン最適化はどうすればいいの?

ブログの話 イラスト 漫画
スポンサーリンク

f:id:rikudra:20150801092404j:plain

こんにちは、テストの勉強も部屋の片付けも帰省の準備も全くできていない陸龍斗です。

 

今回はイラストや漫画のSEOについて考えてみたいと思います。

 

 

イラストの検索対策

 

やっぱりなにかを描くなら人にみてもらいたいですよね。

でも、漫画とかイラストの場合って文字に比べて検索されにくいじゃないですか。

 

たとえば冒頭のこの画像。

f:id:rikudra:20150801092404j:plain

このページを見た人は、これが「裸で逆立ちして股間にモザイクが入った変態が『一体どうすればいいんだ…』と言っているイラスト」というのがわかると思います。

 

しかし、困ったことに検索エンジンであるGoogle先生やYahoo兄さん達には「そこになんかわからんけど画像がある」ぐらいにしか認識してもらえません。

 

このままでは裸で逆立ちした変態の画像を探している人(いません)や、様々な「一体どうすればいいんだ…」なシチュエーションを探している人(いません)がこのページを検索エンジンから探すことは大変困難です。

 

 

一体どうすればいいんだ…

 

 

 

alt属性を使う

 

alt属性とは、HTMLで規定されている要素の属性の一つで、画像などが表示できない場合に代わりに表示する文字列を定義するもの。alt属性で定義した文字列のことを「代替テキスト」(alternate text)などと呼ぶ。画像を埋め込むためのimgタグや、入力フォームのareaタグ、inputタグなどで用いられる。

alt属性とは|代替テキスト|alternate attribute - 意味/解説/説明/定義 : IT用語辞典

 

はい、こんなものがあるんですね。

 

 

はてなブログで画像を挿入すると、デフォルトではこんなhtmlタグが挿入されます。

 

<img class="hatena-fotolife" title="f:id:rikudra:20150801092404j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/r/rikudra/20150801/20150801092404.jpg" alt="f:id:rikudra:20150801092404j:plain" />

 

class属性では画像のある階層を指定、title属性では画像のタイトル(マウスオンで表示されるやつ)を指定、src属性ではファイルの場所、alt属性では代替テキストを指定します。

ざっくりいうとこんな感じ。さらに要素(画像の表示サイズとか)を追加したり減らしたりすることもできるんですが、CSSとかで自動的にいい感じに表示してくれるので、大体これぐらいあれば画像のタグとしてはいいと思います。

表示速度を考えると表示サイズも自分で入力したほうがいいらしいですが別に見た目にこだわりがない場合は問題ないと思います。

 

 

ここで、alt属性が"f:id:rikudra:20150801092404j:plain"となっているので、検索エンジンからするとf:id:rikudra:20150801092404j:plainって書いた画像がある」と認識されるわけです。

こんな自動生成された文字列には誰も興味ないのでここを書き換えます。

 

 

<img class="hatena-fotolife" title="f:id:rikudra:20150801092404j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/r/rikudra/20150801/20150801092404.jpg" alt="裸で逆立ちして股間にモザイクが入った変態が『一体どうすればいいんだ…』と言っているイラスト" />

 

はい!こうすることでこのページを見た人だけでなく検索エンジンにもこの画像が「裸で逆立ちして股間にモザイクが入った変態が『一体どうすればいいんだ…』と言っているイラスト」とわかるようになりました!

これで裸で逆立ちした変態の画像を探している人や、様々な「一体どうすればいいんだ…」なシチュエーションを探している人でもこのページが見つけやすくなりましたね!一安心!

 

 

せっかくなのでtitle属性も書き換えます。

<img class="hatena-fotolife" title="裸で逆立ちして股間にモザイクが入った変態が『一体どうすればいいんだ…』と言っているイラスト" src="http://cdn-ak.f.st-hatena.com/images/fotolife/r/rikudra/20150801/20150801092404.jpg" alt="裸で逆立ちして股間にモザイクが入った変態が『一体どうすればいいんだ…』と言っているイラスト" />

※調べるとtitle属性でalt属性と同じものを書くとキーワードの詰め込みとみなされる場合がありよくないらしいですが、読んだ人がたまたまマウスオンしたときにちょっとでも面白いテキストが表示されたらいいなあって感じで。

 

 

 

実際にこのタグで表示される画像がコチラ。

 

裸で逆立ちして股間にモザイクが入った変態が『一体どうすればいいんだ…』と言っているイラスト

 

 

デフォルトではこっち。

f:id:rikudra:20150801092404j:plain

 

画像の見た目は全く変わりませんが、これで検索エンジンに画像の内容を理解してもらえ、マウスオンでいい感じのテキストが表示されるようになりました!

 

 

 

 

漫画の検索対策

 

このように単純なイラストや画像の場合は、alt属性を指定すればOKだと思います。

しかし、漫画の場合はどうでしょうか。

 

漫画はその特性上から、セリフが多いですよね。

 

例えばぼくが描いたこの4コマ漫画。 

f:id:rikudra:20150720203217j:plain

 

セリフが多いににもかかわらず、このままでは記事やタイトルに書いてある、「ゆるいひと」「ゴキブリ」「4コマ漫画」というキーワードしか検索エンジンには拾ってもらえません。

 

もしかしたら「ゴキブリ 死傷者」「ゴキブリ かわいい」などで検索する人がいた場合、この漫画を見つけるのは難しいですね。

 

 

裸で逆立ちして股間にモザイクが入った変態が『一体どうすればいいんだ…』と言っているイラスト

 

 

 

台詞をalt属性で指定する

 

 元々のhtmlタグはこちら。

<img class="hatena-fotolife" title="f:id:rikudra:20150720203217j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/r/rikudra/20150720/20150720203217.jpg" alt="f:id:rikudra:20150720203217j:plain" />

 

 

さっきの要領でセリフをalt属性に指定したのがこちら。

<img class="hatena-fotolife" title="【4コマ漫画】「ゴキブリ」 - ゆるいひと" src="http://cdn-ak.f.st-hatena.com/images/fotolife/r/rikudra/20150720/20150720203217.jpg" alt="ゴキブリ警報 ゴキブリ警報 ゴキブリがあらわれました 至急ここから避難してください 繰り返します ゴキブリがあらわれました 至急ーーー ゴキブリが出たって!どうしよう早く逃げなきゃ!しかしこれだけ人が多いと警察が到着するのに時間がかかるな…そんなこと言ったって…ゴキブリの前ではぼくら一般人は無力だよ…だからって逃げるのか!?警察が来る前に死傷者が出たらどうするんだ!たよりない警察なんかに頼ってられるか!おれがたたかう!!お、おい!!かわいい" />

 

うん。薄々分かってたけど長い。

 

実際はこの画像一枚にこの文字+絵の分の情報量が詰まっているわけですが、これだけ長いとGoogle先生に詰め込みすぎと怒られそうな感じです。

  

 

裸で逆立ちして股間にモザイクが入った変態が『一体どうすればいいんだ…』と言っているイラスト

 

 

 コマごとに画像を分割し、alt属性

 

画像を用意していないんですが、一コマごとに画像を貼り、コマごとにセリフをalt属性で指定するとマシになるかもしれません。

 

単純に考えると画像一枚あたり四分の一のテキストになるので、Google先生のペナルティから逃れるには良い方法かもしれません。

 

 

しかし今回は単純なコマ割りの四コマ漫画だからいいものの、そうでない場合はこの方法は使えません。

Web用にcomicoのように縦読み形式の漫画を描くのも一つの手ですが、やっぱり漫画はコマ割りあってのものだと思います。

 

 

 

もう普通に書き出しちゃう

 

画像に入れて怒られるんだったら普通に記事にセリフを書き出せばいいじゃないか。

 

f:id:rikudra:20150720203217j:plain

 

セリフ

 

ゴキブリ警報 ゴキブリ警報

ゴキブリがあらわれました 至急ここから避難してください

繰り返します ゴキブリがあらわれました 至急ーーー

 

ゴキブリが出たって!

どうしよう 早く逃げなきゃ!

しかしこれだけ人が多いと警察が到着するのに時間がかかるな…

そんなこと言ったって…ゴキブリの前ではぼくら一般人は無力だよ…

だからって逃げるのか!?警察が来る前に死傷者が出たらどうするんだ!

 

たよりない警察なんかに頼ってられるか!おれがたたかう!!お、おい!!

 

かわいい

 

 

 

…はい。

美しくないというか、なんだかなあって感じですね。

 

小島アジコ先生の「はてな村奇譚」ではこの方法が使われているのでやっぱり一番妥当なんでしょうか…

 

 

 

 

まとめ

 

イラストの場合はalt属性で決まりって感じですけど漫画は微妙だなって感じです。

文字を書くより労力使ったのにタイトル勝負で全然見てもらえない…っていうのも寂しいのでどうにかはしたいところです。

 

あと、はてなフォトライフでタイトルつけてアップロードしても画像URLはおろか、title属性も自動生成した文字列が使われるなど、ちょっと使い勝手が悪いのではてなさんには改善してもらいたいですね。

 

おわり

 

広告を非表示にする