感想みかん

感想、レビュー、実体験等を書くブログ

はてなブログの過去記事画像にalt属性をつけ加える方法。画像を言葉で伝える表現力が試される


Search Consoleのスターターガイドで気付いたalt属性の必要性

先日、Google Search Consoleのヘルプに書かれている「検索エンジン最適化(SEO)スターター ガイド」が更新された。

検索エンジン最適化(SEO)スターター ガイド - Search Console ヘルプ

ブログの内容は人それぞれでスタイルも様々であり、記事はほんの少しの友達が見てくれればそれでいいぜ!という人もいるし、ブログタイトルから詩的な感じにしたい人もいるし、そういう場合は今回のスターターガイドのルールなんてのは関係ない。しかし僕のブログは記事によるけど幅広い人に読んでほしいと思っていることもあるので、検索エンジン最適化はかなり重要なテーマのひとつだ。疲れているときはそんなことは考えずに適当に書くことももちろんあるけどね。

それでスターターガイドをざっと見たところ、自分がすでにやっているのもあるし、はてなブロガーなら設定不要なところもあるし、自分がやってない部分もあった。

読んでいて一番やってないけどやったほうがいいなと思ったのは、「画像のalt属性をつける」という項目。これを過去の記事に少しずつ付けていこうと思う。

なぜalt属性をつけなくてはいけないの?

これはスターターガイドにも書いてあるけど、alt属性は付けた方が様々な人(又はロボ)にとってやさしく理解しやすいブログになる。ちゃんと付ければGoogleの検索結果を決めるロボちゃんが読んで良い評価してくれる(僕の理解はこの程度のレベル)。
そして視覚に障害を持つ人にも内容が伝わりやすいブログになる。視覚に頼らずにインターネットをすると画像がわからないので、どんな画像であるのかを説明する記述があるととても嬉しい。その説明がalt属性でできる。alt属性はやさしさの証だったのだ。

ただ、alt属性にはどのように書けば正しいのだろう?どんな風に書けば良いのかわからなかったけど、こちらの記事が非常に参考になった。

docs.google.com

僕はこのスライドを一体どなたが書いたのかわからないのだけど、先日はてなブックマークアプリを見ていてたまたま目にすることができた。作者様、ありがとうございます。感謝します。目から鱗な内容だったので、alt属性がわからない人も一度読んでおくと非常に有益であると思います。

このスライドを見終わった後に思ったのは、alt属性は場合によって結構長い文を書かなくてはいけないのだな、と。かなり手間が増えます。しかし、このスライドを見たからには次から是非やりたい。

しかしここでひとつ気になるのは、スターターガイドのalt属性について避けるべき方法として載っているこの一文。

スパムと見なされるような長すぎる alt テキストを記述する。

これがNG行為として載っているのが気になる。長い文でしか説明がつかない場合はどうしたらいいのか悩みどころ。
長すぎることだけでもスパムとみなされるのであれば上記スライドの説明通りにしても不安が残る。
ただ「長すぎる」のが具体的に何文字以上なのかも不明確なので、altの中に10000文字ぐらい書いたらそりゃスパムだろうと思うけど長すぎるというのはそういう意味なのかもしれない。判断がやや分かれるところだが説明を誠実に書いたらダメなわけがないし僕は多少長くなっても説明をちゃんと書く方を選ぶことにする。

では、はてなブログでalt属性を簡単に挿入するにはどういう方法があるだろうか?

はてなブログにはalt属性をつける方法が2つ用意されている

はてなブログには画像にalt属性をつける方法が僕の知る限りで2つ用意されている。

1つ目の方法。記事を書いて画像を挿入するときに、alt属性を付けられる機能

画像を貼り付ける際に、代替テキスト(alt属性)を指定できるようにしました - はてなブログ開発ブログ

この機能は2017年12月12日に使えるようになった新しい機能だ。これを使えば難なく追加できる。

記事執筆中に画像を追加する場合に、上級者向けの機能として、画像を選択後にチェックボックスにチェックを入れて説明文を加えるだけで画像にalt属性を簡単に付けられる機能がある

PCで画像を選択する際に貼り付けボタンのすぐ上にある ☑️貼り付け時に詳細を設定する にチェックを入れておくと、上の画像のように詳細を記入できる。上級者向けの機能としてalt属性の挿入が簡単にできる。

これは上級者向けの機能とあるけど、誰でも簡単に付けられる。僕もついに上級者になってしまったのだろうか。いや違うと思う。

新規に記事を作るときはここで書くとして、では過去記事はどうしようか。すでに公開済みの画像にalt属性を追加するにはどうしたらいいだろう?

2つ目の方法。画像のコードの末尾に付け加える機能

はてなフォトライフの画像を貼り付けるときに、フォトライフ記法でaltとtitleを指定できるようにしました(はてな記法モード、Markdownモード) - はてなブログ開発ブログ

僕はmarkdown記法でブログを書いているのでmarkdownのやり方。
これは画像を貼り付けた後、[ ]の末尾に、:alt=を追加してその後ろに説明文を書くことができる。markdownだけじゃなくてはてな記法でも同じみたい。見たまま編集の場合は画像のhtmlを探して後ろにつければいいが、面倒くさいね。

markdownの具体例としては、 [f:id:mikanumay:1234123412341234j:plain]の後ろにこれを追加すると、
[f:id:mikanumay:1234123412341234j:plain:alt=説明文なんでも]という感じに変更する。
title属性(画像の上にマウスを合わせるとポップアップしてくる文字)も追加するときは、:title=も入れられる。でもこっちは必須でもないから気が向いたらでいいかな。

ちょっとめんどくさいから、辞書登録に「おると」を入れると:alt=という風に出るようにしておいた。:alt=に続く言葉は日本語なので、「おると」で呼び出せたほうが便利かなと思って。

そして僕はalt属性における表現力の世界へ

Macで全然使ったことがなかった読み上げ機能もオンにした。Macの設定のアクセシビリティからスピーチ機能をオンにすれば選択した部分をoption + esc で読み上げられる。たしかにaltに設定した文を読んでくれるね。
あとは地道に過去記事の画像にaltを追加していこうと思う。しかし僕のブログはすでに200記事以上あるから挫折するかもしれない。文だけの記事もたくさんあるけどね。
そう思いながらすでにいくつかalt属性をつけてみたが、これは結構難しいぞ!文章をつくるのが!画像を言葉だけで表現するのはなんて難しいんだ。写真のバームクーヘンの大きさを説明しようとしてなぜかうまい棒で例えてしまった。この作業はやりがいがあるし面白いですね。alt属性は表現力がものを言う世界でした。