Templune / Pixabay
どうも、ゆーきです
以前、画像を貼り付ける際には圧縮して張り付けた方が重くならなくていいよーってことを話したんですが、それをやるならこれも一緒にやっちゃえばいいんじゃね？っていうのがあるので紹介します
-
-
【ブログ】ページの表示速度を改善して検索上位表示を目指そう！【画像圧縮】
422737 / Pixabay 検索エンジン？というかグーグルさんは表示速度の遅いサイト（ページ）を嫌うようです。嫌われるとどうなるかというとサイトの評価が落とされて、検索エンジンで下位表示…最悪圏 ...
これもまたSEO的な話で私個人としての効果はわからないレベルですが、そこじゃないところに魅力を感じたのでこれを導入しました！
それでは見ていきましょう！
altタグって？
そもそもaltタグって何？って話になりますが、
IMGタグの属性。 意味は、画像が表示されない（できない）ブラウザにおいて、alt属性に書かれている内容を表示させる。あるいは音声読上げツールではここに書かれている内容を読上げる。
ちょっと概要とは意味合いが変わってしまいますが、画像にカーソルを持っていったときに表示される文字です（ブラウザによると思います）
16’10.10追記
このロールオーバーで表示される表示はtitleタグだそうです。alt・titleタグは別々に設定できるようですが、今回紹介するものは両方同じ名前に変更されます。別名に設定する必要はないと思うので大丈夫だと思いますが…
実際みなさん画像にカーソルを持っていったときになんて表示されていますか？id:数字の羅列 になっていませんか？はてなブログで普通に画像を貼りつけたらこうなります
altタグがそのままだと何がいけないのか？
意味のない数字の羅列とかになってるとグーグル検索エンジンさんのしもべであるクローラーが巡回した際に、なんだこの意味の分からん数字は！あやしいぞ！順位下げたる！ってなるみたい…詳しくはわからんけど、とりあえずSEO対策になるんだってー
SEO対策的なのはもっとコンテンツ充実させてからやりゃいい、むしろやる必要にあるのかな？とも思ってるんだけど、私がこれを導入しようと思ったきっかけはSEO対策ではない！（こんな弱小ブログがSEO対策したところで醜いだけですねｗ）
altタグって？の概要説明のところにあるんだけど、音声読み上げツールではaltタグの文字が読み上げられるってところ！altタグを何も設定してないと、はてなの場合そのまま数字の羅列で読み上げられちゃうってことです。そうすると、そんな数字の羅列読み上げられたって聞いてる人は何が何だかわからんよね…
でもaltタグに「〇〇の画像」って入ってればそれを読み上げてくれるからなんの画像なのか分かりやすいってわけ！
普通の人は音声読み上げツールなんて使わないからいいじゃん！なんだけど、じゃあなんでそんなツールがあるのか？
目に障害のある方なんかが使ったりするんだよね！
現状、私のブログがそんなにいろんな人に読まれるわけじゃないから必要あるか？って言われたらないんだけど、もしかして！万が一！もっと多くの人に読まれるようになって目の不自由な方にも当ブログが知れ渡ったとしたら…やっと効果が発揮されますｗ
ユニバーサルブログを目指して
ユニバーサルデザインって聞いたことありますよね？
ユニバーサルデザイン
高齢であることや障害の有無などにかかわらず、すべての人が快適に利用できるように製品や建造物、生活空間などをデザインすること。アメリカのロナルド＝メイスが提唱した。その7原則は、（1）だれにでも公平に利用できること。（2）使う上で自由度が高いこと。（3）使い方が簡単ですぐわかること。（4）必要な情報がすぐに理解できること。（5）うっかりミスが危険につながらないデザインであること。（6）無理な姿勢を取ることなく、少ない力でも楽に使用できること。（7）近づいたり利用したりするための空間と大きさを確保すること。
これよこれ！だれにでも公平で快適に利用できる…ブログ！なんかかっこええと思っちまったのがすべての始まりだ…
と、ここまで長々と話してきましたが、次から実際の導入の仕方を説明します
altタグの編集
クロームの拡張機能
ここで厄介なのがはてなフォトライフ！
はてなの場合ここを経由（リンクしている）するので、単純にHTML編集からいじくろうとしても無理！なのでクローム拡張機能からはてブロimageTitleを導入します。ブラウザでクロームを使っていない人は使えません！！
実は違うブラウザでも使える！？
参考超便利！はてなブログで画像の「alt属性」を編集する方法！これでSEO対策もバッチリ！ - 晴れ時々晴天なり
こちらにクロームを使っていない方でもできるやり方が載っていますので参考にしてください！クロームでのやり方も丁寧に説明されているので、こっちを見たほうがわかると思います
あとはとっても簡単！
普通に、記事を書く→写真を投稿 に行ってもらうと、
見たことないこんな画面が表示されると思います。これが出ていれば導入成功です！
あとは画像を選択して「タイトル」部分に好きな名前を付ける、それから選択した写真を貼り付ければaltタグが変わっています。HTML編集で見てみると元が、
alt="f:id:yuuulog:20161005205602j:plain"
だったものが、
alt="美女"
になっています。だいぶスマートになりましたね！
さいごに
画像圧縮のときもそうでしたが、やるならお早めに～！
画像圧縮からやる方はこちらも合わせてやってみてはいかがでしょうか？
-
-
【ブログ】ページの表示速度を改善して検索上位表示を目指そう！【画像圧縮】
422737 / Pixabay 検索エンジン？というかグーグルさんは表示速度の遅いサイト（ページ）を嫌うようです。嫌われるとどうなるかというとサイトの評価が落とされて、検索エンジンで下位表示…最悪圏 ...
みんなに使いやすいブログを目指して！！
