画像検索のために、はてなブログでもalt属性をつけよう!正しい書き方の確認
【2017年12月13日更新】
ゲーマー姉弟の64弟(@64_oto)です。
このテーマは難しそうに見えるかもしれませんが、実際はカンタンです。
はてなブログにアップしている画像ひとつひとつに、それぞれ『alt属性』を設定してあげましょう。
検索エンジンに対して親切なページになりますし、画像検索に引っかかりやすくなります。
【12/13日追記】はてなブログ公式でalt機能が追加されました!
なんと昨日、はてなブログ側でアップデートされて、画像を記に貼り付けるときにカンタンにaltの設定が加えられるようになりました!
はてなブログさんありがとー!!
ただ、下記のやり方でももちろんできるので、
既に記事に画像を大量に貼り付けていて、後から直したいなと思っている場合、
いちいちアップし直すよりラクだと思うので、試してみてください!
『alt』って何? ないとマズイの?
『alt(オルト)属性』とは、画像に付けてあげる説明文のようなものです。
画像一枚一枚につけるべき必須の属性です。
はてなブログでは一応、デフォルトで個々の画像にalt属性がつくようになっているので、セーフではあります!
でもその内容が全く意味のない記号の羅列になっているので、自分で書き直したほうがいいです。
画像の赤字下線の部分がaltです。
- 検索エンジンに画像の情報を認識してもらう(画像検索につながる)
- 画像がリンク切れなどで表示されなかったときに、代わりにaltの内容が文字で表示される
- ボタン画像など、画像にリンクが張ってある場合、そのalt属性がリンクテキスト同様の扱いになる
- 目の不自由な人のための代用テキストとなる(音声ブラウザが画像の代わりにalt属性を読み上げる)
altの効果についてもっと詳しく知りたいときは、こちらが参考になります。
alt属性とは | SEO用語集:意味/解説/SEO効果など [SEO HACKS]
alt属性の書き方とSEO効果教えます
『title』ってのもあるけど必要ある?
『title(タイトル)属性』は画像に対する補足説明をする役割になります。
これは必須ではなく、つけたいときにだけつけるオマケだと思っていいです。
つけた場合、画像にカーソルを乗せるとふきだしでその内容を表示してくれます。
でもPCでしか見ることができないので、スマホだと意味がありませんね。
画像の赤字下線の部分がtitleです。
ちなみに僕のブログでは全く使っていません。
はてなブログで画像の『alt』はどうやってつけるの?
『冬に聴きたい任天堂ゲームミュージック10曲メドレー』の記事で使った画像で説明します。
【はてな記法、Markdown法の場合】カンタン!コードをちょいと足すだけ
記事編集画面で画像の貼り付けをするとこういうコードがでますよね。
[f:id:gamestart:20170927185704j:plain]
このデフォルトのままだと、altとtitleにそれぞれ『画像のコード名そのまま』が勝手に付いている状態です。
こんなもの意味ないし気持ち悪いです!(笑)
こんな記号情報見せる必要ないですよね><
さて、今からこの2つをいっきにやっちゃいましょう!
- titleを消す
- altを正しくする
カンタンです!
コード最後の閉じカッコ( ] ) の前に以下を付け足すだけです!
:title=:alt=●●●●
(辞書登録しておくといいかも!)
titleはナシ、altは●●●●に書き換え、という意味です。
例のマリオの画像ではこういう記述にしました。
[f:id:gamestart:20170927185704j:plain:title=:alt=スーパーマリオ64よりさむいさむいマウンテン]
見た目は変わらないのでわかりにくいかもしれませんが、
カーソルを乗せてもtitleが表示されなくなり、
「スーパーマリオ64よりさむいさむいマウンテン」というaltが付いた状態になっています。
ソースを確認してみましたが、ちゃんとaltも反映されていました!
僕はtitleいらないなと思って空欄にしましたが、付けたい場合は(title=マリオ)といった感じに文言を記述すればOKです。
下記の例では、titleにマリオのセリフを入れてみました。
[f:id:gamestart:20170927185704j:plain:title=マリオ「ヤッフゥー!!神曲!」:alt=スーパーマリオ64よりさむいさむいマウンテン]
PCの場合、カーソルを乗せるとマリオのセリフが出るようになっています。
参考リンク:公式『はてなブログ開発ブログ』による説明
staff.hatenablog.com
【見たままモードの場合】カンタン!ちょいと書き換えるだけ
※PCからの操作方法で説明しております。
スマホからではできないようです(もしやり方があれば教えていただけると嬉しいです!)
はてな記法、Markdown法と違って、見たまま編集の場合では画像がそのまま貼られます。
このただ画像を貼っただけの状態では、altとtitleに変なコードが入ってしまっています。
これはいりませんよね><
なので今から編集してこの2つをやっつけちゃいましょう!
- titleを消す
- altを正しくする
編集画面左上にある『見たまま』になっているタブを、『HTML編集』に切り替えます。
そうするとこのようなコードがズラッと並んだ画面になります。
見慣れていないと「うわっ、なんか複雑そう」と難しく考えてしまいますが、カンタンです!
title=の後ろ、赤字下線の部分をダブルクォーテーション("")を残して消します。
そしてもう一つの赤字下線の部分(alt=の後)には、適切なテキストを入れます。
できた!
これで完成です!
altでは具体的に何て書けばいいの?
『画像の代わりのテキスト』という意識で書くと、親切なaltになると思います。
僕は画像検索用のキーワードを考慮しつつ、目が見えない人に伝える気持ちで書いています。
よくやりがちな悪い例
関係ない内容は書かないようにします。
僕が以前までやっていた悪い例を紹介します。
[f:id:gamestart:20170927185704j:plain:title=:alt=ゲーム 音楽 ミュージック 冬 winter 任天堂 スーパーマリオ64 さむいさむいマウンテン]
ゲーム 音楽 ミュージック 冬 winter 任天堂 スーパーマリオ64 さむいさむいマウンテン……
検索に引っかかりやすいよう、関連性のある単語をいくつも書き連ねていたんですね……。
これだと最悪の場合、Googleからスパムだと認識されてしまって、検索順位を下げられてしまう危険性があります。
というわけで今、全画像のaltを直している最中です(きっつ!!)
例題 この画像はどういうaltがいいかな
せっかくなので例題を用意してみました!
これでaltの付け方のイメージがわかりやすくなるでしょうか。
◯ケーキ
◎お皿に乗った苺のショートケーキ
写真を使う流れによっては、例えば「カフェのイメージ」や「ケーキセットの写真」など、他の言い方が適している場合もあります。
◯バイオハザード5
◎バイオハザード5のタイトル画面
「PRESS ANY KEY」は画像の説明としては不要だと思うので書きません。
◯マリオ
◎マリオの魔法陣の絵
altの書き方の理解をもっと深めたいときは、こちらの記事がとても参考になります。
alt属性の正しい考え方 | SEOとその周辺
alt属性の適切な使用方法と考え方 | SEO Imagination!ブログ
画像1枚1枚にaltをつけるのは面倒かもしれませんし、はてなブログでは一応無視したままでも問題ではありません。
しかし僕のブログの画像も、Google画像検索からヒットするようになったので、つけておくとちょっとお得ですよ!
最後まで読んでくださってありがとうございます!