ブログ運営

利便性の高い記事で集客化!alt属性の意味とその書き方について

記事のタイトルで『利便性の高い記事で集客化!alt属性の意味とその書き方について』

 

☝ウシ・・?
☝ウシ・・?
ブログをやってると『alt(オルト)属性』っていう言葉が出てくるけど・・いったいなんなのだろう?意味も分からないし、使用する目的も分からないので教えて欲しい

 

と疑問に思っている方は是非読んでください。牛にも分かるぐらい丁寧に説明します

 

普段生活をしていく中では全く聞き慣れない言葉、でもユーザーの利便性を考えるとなくてはならないもの・・

alt属性これは何かと言いますと『画像が何を意味・表現しているかを、文章でその画像情報をユーザーに伝える役割』を担うアイテムです。

チャン太郎もブログをするまで、言葉自体聞いたことあっても意味まで全然分かっていませんでした。長年生きてきて恥ずかしい話です、これだけでもブログをやってて良かったとお思います。

では早速

この記事でお伝えしたい内容

  • alt属性の意味・設定する目的
  • alt属性の書き方・注意点
  • alt属性のSEO効果

では一緒にやっていきましょう(^^♪

これだけ勉強しておけばバッチリ!バッチこいです🐶

 

alt属性の読み方・意味・設定する目的とは

弓矢が的の中心に当たっている

alt属性の読み方・意味

まずは読み方ですが『オルト属性』と読みます。別名『代替テキスト』とも呼ばれてます。

Webサイト上では様々なイラストや写真の画像があるのは皆さんもご存じですよね。その画像には全てalt属性というテキスト情報が入っているのです。

意味合いは冒頭でも記述しましたが画像が何を意味・表現しているかを、文章でその画像情報をユーザーに伝える役割を果たします。

まあ要は画像の内容を文章に置き換えて表示するってことですね。

 

alt属性を設定する目的とは

設定する目的は大きく3つありますので説明していきます。

スクリーンリーダーに対応する為

スクリーンリーダーとはWeb画面(テキスト)を読みあげるのに使用されるソフトウェアになります。目が見えない視覚障害者の方にとっては、なくてはならないものなのです。

スクリーンリーダーは、テキストは読みあげることができても、画像を読みあげることができないのです。なのでここで登場するのが代替テキストであるalt属性です。

これを設定することでスクリーンリーダーは、代替テキストを読みあげることができますので、画像の内容を視覚障害者の方へバッチリと伝えることができます。

ユーザーの利便性向上に繋がります。

 

未表示画像に対応する為

Webの画像で小さい『☒印』を見たことがないでょうか?なんらかの異常で画像が開けない場合に出てくる表示です。

こういった場合alt属性(代替テキスト)が表示され、どんな画像がそこにあったかが分かるようになりますので、記事の内容がユーザーに伝わりやすくなります。

 

検索エンジンのクローラーに対応する為

検索エンジンのクローラー(ロボット)とは、Webページを巡回し、我々が作ったブログサイトの情報収集してデータベースに登録する役割をしてます。

ここで問題なのが、検索エンジンのクローラーは画像の内容を理解できないのです。だからalt属性の設定(代替テキスト)で伝えてあげる必要があるのです。

上記操作でGoogleの画像検索にも表示されるようになります。

 

alt属性の書き方、注意点

女性が紙にペンで字を書いている

altの書き方、その際の注意点について説明していきます。

alt属性の書き方

何点か具体例をあげながら書き方を説明していきますね。

例1)段落途中にイメージ画像として入れたい美しい風景画です。

alt属性は『青い空、緑の草原の中で道が1本続いている』になります。

alt属性設定例その1

例2)なんか悪そうなワンちゃんです🐶

alt属性は『灰色の犬が険しい顔で1点を見つめている』こんな感じで。

alt属性設定例その2

例3)2色トーンのあまり意味をなさないイメージ画です

こういったalt属性は、alt=””←この中を空欄にしておけば大丈夫です。

alt属性設定その3

例4)名前入りのロゴイラストです

alt属性は書いてある通りの『チャン太郎Blog』でOKです。

alt属性設定例その4

どんなこと書いたらいいのか、ぐらいのイメージは掴んでもらえましたでしょうか。

alt属性の入力方法なのですが、下記のやり方が一般的です。もちろんテキストソース文にいって直接入力してもらってもいいです。

ワードプレスなら、画像をアップロードする時に下記赤枠内の代替テキスト欄に打ちます。無料ブログでも画像をアップロードする際に、同じような感じで打てるかと思います。

※alt属性の話から少し脱線しますが、写真の画像ファイル名は下記青枠内のように、英語表記のハイフン繋ぎにしてください。日本語で入れようものなら、画像のアップロード際にファイルの表記がぐちゃぐちゃの文字の羅列に変わってしまいます。

写真アップロード画面

 

alt属性を書く上での注意点

書き方を前章で説明してきましたが、その際の注意点について話しておきます。

・alt属性(代替テキスト)は画像と関係のある内容にしましょう。関係性が無いと話が繋がらなくなり、逆にユーザーの混乱を招きます。

・できるだけ多くの検索流入を得たいからと、関係のないキーワードを入れまくるのは止めましょう。ユーザーはこのようなサイトにきても直ぐに離れていってしまいますよ。そりゃそうです、自分が求めている情報ではないからです(汗

 

 

期待されるalt属性SEO効果とは

鉄棒の隙間から芽がでた

alt属性をしっかり設定するとgoogle殿からの評価もあがり、検索上位表示されるのではないかと甘い期待をしてしまいそうですよね。

でも残念ながら・・直接的にはそんなに効果がないと言われることが多いです。

『じゃーやってもしょーがないじゃん』って言われるとそうじゃないです。

このalt属性に関わらず、goolge殿の検索エンジンの評価を考えるのではなく、ユーザーの役に立つかどうかに視点をおきましょう。

今回の場合どうなのか?ってなると間違いなくユーザーの役に立っているでしょう!

インターネットができなくて困っている視覚障害者の手助けにもなりますし、途中で画像が消えた場合代替テキストが表示されれば分かりやすいからです。

そもそもGoogle殿の細かい評価基準項目(SEOに関する)は公開されていないので、結論が無いことを『あーだ、こーだ』ずっと考えても仕方ないっス(;´Д`)

そんなことを考えるよりも常にユーザーの立場になって、検索意図に沿ったコンテンツを作っていった方がよっぽど有意義だと思います。

 

まとめ:ブログで画像を扱う際は、alt属性の設定を習慣づけよう

ではまとめに入りまーす🐶

画像を挿入する際は、画像の意図・表現をワード化したalt属性(代替テキスト)を必ず設定しましょう。

目的としては

  • ネットワーク上の異常で画像が開かない際テキストで表示できる
  • 視覚障害者が使用するスクリーンリーダーで読み取ることができる
  • Google殿のクローラーが画像を理解できるようになる

 

alt属性の設定にしても、こうしたことの1つ1つの積み重ねが読まれる記事に繋がってくると思います。

まずGoogle殿の評価を念頭に置くのではなく、ユーザー第1に考えましょう。そうすれば間接的にまわりにまわって自分のところに恩恵(ベネフィット)がかえってきます。

目先の利益は追わない!私自身も道を踏み外しそうになったら、この言葉を思い出し一度原点に戻ります。

 

それでは今回は、この辺で

お付き合いありがとうございました(‘ω’)ノ

また次の記事でお会いしましょう!

 

こちらの記事もおすすめ!

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA