いつまで仕事してるの!ゲームしなさい!

ゲームで育った姉弟による、大人になってもゲームを楽しむブログ。 音楽や絵などの観点からも、作品をもっと味わい掘り下げます!

画像検索のために、はてなブログでもalt属性をつけよう!正しい書き方の確認

【2017年12月13日更新】


altを考慮してGoogle画像検索にヒットした結果の画面

f:id:gamestart:20170523174027p:plain ゲーマー姉弟の64弟(@64_oto)です。


このテーマは難しそうに見えるかもしれませんが、実際はカンタンです。


はてなブログにアップしている画像ひとつひとつに、それぞれ『alt属性』を設定してあげましょう。

検索エンジンに対して親切なページになりますし、画像検索に引っかかりやすくなります。


スポンサーリンク


【12/13日追記】はてなブログ公式でalt機能が追加されました!

staff.hatenablog.com


なんと昨日、はてなブログ側でアップデートされて、画像を記に貼り付けるときにカンタンにaltの設定が加えられるようになりました!
はてなブログさんありがとー!!


はてなブログのaltの設定の例



ただ、下記のやり方でももちろんできるので、
既に記事に画像を大量に貼り付けていて、後から直したいなと思っている場合、
いちいちアップし直すよりラクだと思うので、試してみてください!


『alt』って何? ないとマズイの?

『alt(オルト)属性』とは、画像に付けてあげる説明文のようなものです。

画像一枚一枚につけるべき必須の属性です。


はてなブログでは一応、デフォルトで個々の画像にalt属性がつくようになっているので、セーフではあります!

でもその内容が全く意味のない記号の羅列になっているので、自分で書き直したほうがいいです。


画像の赤字下線の部分がaltです。

はてなブログのaltについてのソースビュー


alt属性の役割
  • 検索エンジンに画像の情報を認識してもらう(画像検索につながる)
  • 画像がリンク切れなどで表示されなかったときに、代わりにaltの内容が文字で表示される
  • ボタン画像など、画像にリンクが張ってある場合、そのalt属性がリンクテキスト同様の扱いになる
  • 目の不自由な人のための代用テキストとなる(音声ブラウザが画像の代わりにalt属性を読み上げる)



altの効果についてもっと詳しく知りたいときは、こちらが参考になります。
alt属性とは | SEO用語集:意味/解説/SEO効果など [SEO HACKS]
alt属性の書き方とSEO効果教えます



『title』ってのもあるけど必要ある?

『title(タイトル)属性』は画像に対する補足説明をする役割になります。

これは必須ではなく、つけたいときにだけつけるオマケだと思っていいです。


つけた場合、画像にカーソルを乗せるとふきだしでその内容を表示してくれます。

でもPCでしか見ることができないので、スマホだと意味がありませんね。


画像の赤字下線の部分がtitleです。

はてなブログのtitleについてのソースビュー


ちなみに僕のブログでは全く使っていません。



スポンサーリンク


はてなブログで画像の『alt』はどうやってつけるの?

冬に聴きたい任天堂ゲームミュージック10曲メドレー』の記事で使った画像で説明します。


【はてな記法、Markdown法の場合】カンタン!コードをちょいと足すだけ

記事編集画面で画像の貼り付けをするとこういうコードがでますよね。

編集画面上でのコード
[f:id:gamestart:20170927185704j:plain]

記事に反映される画像
f:id:gamestart:20170927185704j:plain


このデフォルトのままだと、altとtitleにそれぞれ『画像のコード名そのまま』が勝手に付いている状態です。

こんなもの意味ないし気持ち悪いです!(笑)

PCでみたとき、カーソルを乗せるとこんなtitleが出ちゃう〜!
はてなブログでのデフォルト画像にタイトルが表示される状態
こんな記号情報見せる必要ないですよね><


さて、今からこの2つをいっきにやっちゃいましょう!

  • titleを消す
  • altを正しくする


カンタンです!
コード最後の閉じカッコ( ] ) の前に以下を付け足すだけです!

:title=:alt=●●●●
(辞書登録しておくといいかも!)

titleはナシ、altは●●●●に書き換え、という意味です。


例のマリオの画像ではこういう記述にしました。

編集画面上でのコード
[f:id:gamestart:20170927185704j:plain:title=:alt=スーパーマリオ64よりさむいさむいマウンテン]

記事に反映される画像
スーパーマリオ64よりさむいさむいマウンテン


見た目は変わらないのでわかりにくいかもしれませんが、
カーソルを乗せてもtitleが表示されなくなり、
「スーパーマリオ64よりさむいさむいマウンテン」というaltが付いた状態になっています。


はてなブログで画像にaltを付けたときのソース

ソースを確認してみましたが、ちゃんとaltも反映されていました!


僕はtitleいらないなと思って空欄にしましたが、付けたい場合は(title=マリオ)といった感じに文言を記述すればOKです。

下記の例では、titleにマリオのセリフを入れてみました。

編集画面上でのコード
[f:id:gamestart:20170927185704j:plain:title=マリオ「ヤッフゥー!!神曲!」:alt=スーパーマリオ64よりさむいさむいマウンテン]

記事に反映される画像
PCの場合、カーソルを乗せるとマリオのセリフが出るようになっています。
スーパーマリオ64よりさむいさむいマウンテン



参考リンク:公式『はてなブログ開発ブログ』による説明
staff.hatenablog.com



【見たままモードの場合】カンタン!ちょいと書き換えるだけ

※PCからの操作方法で説明しております。
スマホからではできないようです(もしやり方があれば教えていただけると嬉しいです!)


はてな記法、Markdown法と違って、見たまま編集の場合では画像がそのまま貼られます。

編集画面上での見栄え
はてなブログ見たままモード編集でのtitleとaltの付け方の説明


このただ画像を貼っただけの状態では、altとtitleに変なコードが入ってしまっています。

また、PCで画像にカーソルを乗せたとき、titleが表示されてしまいます!
はてなブログでのデフォルト画像にタイトルが表示される状態
これはいりませんよね><


なので今から編集してこの2つをやっつけちゃいましょう!

  • titleを消す
  • altを正しくする


編集画面左上にある『見たまま』になっているタブを、『HTML編集』に切り替えます。
そうするとこのようなコードがズラッと並んだ画面になります。

はてなブログHTML編集でのtitleとaltの付け方の説明


見慣れていないと「うわっ、なんか複雑そう」と難しく考えてしまいますが、カンタンです!

はてなブログHTML編集でのtitleとaltの付け方の説明

title=の後ろ、赤字下線の部分をダブルクォーテーション("")を残して消します。

そしてもう一つの赤字下線の部分(alt=の後)には、適切なテキストを入れます。


はてなブログHTML編集でのtitleとaltの付け方の説明

できた!
これで完成です!



スポンサーリンク


altでは具体的に何て書けばいいの?

『画像の代わりのテキスト』という意識で書くと、親切なaltになると思います。

僕は画像検索用のキーワードを考慮しつつ、目が見えない人に伝える気持ちで書いています。


よくやりがちな悪い例

関係ない内容は書かないようにします。


僕が以前までやっていた悪い例を紹介します。

NGなaltの付け方
[f:id:gamestart:20170927185704j:plain:title=:alt=ゲーム 音楽 ミュージック 冬 winter 任天堂 スーパーマリオ64 さむいさむいマウンテン]


f:id:gamestart:20170523174027p:plain ゲーム 音楽 ミュージック 冬 winter 任天堂 スーパーマリオ64 さむいさむいマウンテン……

検索に引っかかりやすいよう、関連性のある単語をいくつも書き連ねていたんですね……。

これだと最悪の場合、Googleからスパムだと認識されてしまって、検索順位を下げられてしまう危険性があります。


というわけで今、全画像のaltを直している最中です(きっつ!!)



例題 この画像はどういうaltがいいかな

f:id:gamestart:20170523174027p:plain せっかくなので例題を用意してみました!

これでaltの付け方のイメージがわかりやすくなるでしょうか。


例題1
altの付け方の例題その1、お皿に乗った美味しそうなショートケーキ
◯ケーキ
◎お皿に乗った苺のショートケーキ

写真を使う流れによっては、例えば「カフェのイメージ」や「ケーキセットの写真」など、他の言い方が適している場合もあります。


例題2
altの付け方の例題その2、バイオハザード5のタイトル画面
◯バイオハザード5
◎バイオハザード5のタイトル画面

「PRESS ANY KEY」は画像の説明としては不要だと思うので書きません。


例題3
altの付け方の例題その3、マリオの魔法陣の絵
◯マリオ
◎マリオの魔法陣の絵



altの書き方の理解をもっと深めたいときは、こちらの記事がとても参考になります。

alt属性の正しい考え方 | SEOとその周辺
alt属性の適切な使用方法と考え方 | SEO Imagination!ブログ



f:id:gamestart:20170523174027p:plain 画像1枚1枚にaltをつけるのは面倒かもしれませんし、はてなブログでは一応無視したままでも問題ではありません。

しかし僕のブログの画像も、Google画像検索からヒットするようになったので、つけておくとちょっとお得ですよ!



最後まで読んでくださってありがとうございます!

© 2016 64姉弟