【ブログ初心者】alt属性とは?読み方も分からない私が設定してみた 書き方も紹介【WordPress】

サイト成長記録

読むのにかかる時間:10分くらい

こんにちは。

今回は、Googleアドセンス審査5回目の挑戦に向けての対策の一つである、alt属性の設定をやってみた話です。

とりあえず、alt属性とは?
  • 読み方
    • そのまま「オルト属性
  • 何のために設定するのか
    • 何を表している画像かをGoogleに理解してもらうため
  • どのようにして設定するのか
    • 記事内の画像ひとつひとつにテキストの説明を設定する
  • 設定するとどうなるか
    • 何らかの理由で画像が表示されない時に、画像の代わりに設定した文字が表示される
    • 視覚障害のある方のスクリーンリーダーが読み上げるテキストになる

つまり 「画像の内容をそのまま正しく説明するテキスト」 を正しい箇所に入力すればOKということ。

Googleアドセンスの審査でも「画像に適切なaltが入っているか」は記事評価のポイントになります。

初心者的に、「属性」という響きは玄人感がありカッコ良い。

と同時に、ブログ運営において「執筆」以外のシステム的なことって、

アナログを愛す1983年生まれ現場たたき上げの主婦

は苦手意識を持ってしまうのです。

桃子
桃子

特に「alt属性」のような読むことすらできないワードと対峙した時。

ということで、

負けないで〜もう少し最後まで走り抜けて、遥かな夢を追いかけたいと思います。

少しでも、同じく悩んでいる人の参考になればと思います。

筆者についてはこちら。偏りのある人間ですが、趣味趣向が合えば嬉しい限り♪
自己紹介part1(経歴編)
自己紹介part2(内面編)

WordPressの画像にalt属性を設定する方法(超具体的)

alt属性=画像を説明するテキスト

だということがわかりました。

ではWordPressでalt属性を設定する場合、そのテキストをどこに入力するのか?

方法は2つ。それぞれ解説します。

方法①:投稿画面から設定する(一般的)

投稿画面から設定する手順
  1. 記事編集画面を開く
    • いつも記事を書いてる場所
  2. 記事内の「画像ブロック」をクリック
  3. 右側の「ブロック設定」が開く
  4. 代替テキスト(画像の目的を説明してください)という欄に入力する

ここに、「画像を言葉で説明したもの」を書くだけでOK!

WordPressブロックエディタのalt属性設定場所の画像

ちなみに、この画像↑の代替テキストは

「WordPressブロックエディタのalt属性設定場所の画像」

と入力しました。

桃子
桃子

「代替テキストの書き方」は後半で解説します!

方法②:メディアライブラリから設定する

メディアライブラリから設定する手順
  1. WordPress管理画面の左メニューの 「メディア」 をクリック
  2. 編集したい画像を選択
  3. 右側に詳細画面が出る
  4. 「代替テキスト」欄に入力
WordPressメディアのalt属性設定場所の画像

ここに入力したaltは、再び記事に挿入した時に自動で入ります。

どちらの方法でも良いですが、私は記事の流れから画像の説明文を考えたかったので、①の投稿画面から設定しました。

alt属性の書き方

では次に、alt属性の書き方を解説します。

検索エンジンが理解しやすい説明を書くことがポイントです。

alt設定で気をつけること5つ

以下が、alt設定で気を付けることです。

  1. 画像の内容をそのまま説明すること
  2. 短くてOK
    • 30〜80文字目安(あくまで目安)
    • 名詞のみなど、短すぎはNG
  3. キーワード詰め込みはNG
    • スパム扱いされる可能性あり
  4. 飾り画像(仕切り線など)は alt=”” にする
    • つまり何も入力しない

良いALT ・悪いALTの具体例

悪い例(抽象的)

「刺繍の画像」

→ 抽象的すぎて、これでは内容が理解できません。

良い例(具体的)
  • 「アウトラインステッチで描いた深緑色の葉っぱの刺繍」
  • 「初心者が練習しやすい直線のアウトラインステッチ」
  • 「刺繍枠に白い麻の生地をセットしている手元」
  • 「花の図案をチャコペンで布に書く手元の写真」

どのような画像か、文字だけでイメージできますよね

altを書くときのコツ(私なりの方法)

「画像を説明するという行動」は、日常的にあまり行わないので、慣れない人も多いですよね。

桃子
桃子

私もそうでした。

日常、いかに視覚に頼っているかということに気付かされました。

手が止まってしまった時は、以下2つのことを意識するとやりやすかったです。

コツは2つ!意識すれば劇的に書きやすくなる
  • 「見たものを電話で相手に伝える」イメージで書く
    • 例:「青い糸で縫ったアウトラインステッチの曲線」
    • 例:「白い犬が黄金色の草原を疾走している」
  • 読者が画像を見て得られる「情報」を書ければOK
    • やり方:例「針に糸を通す手元の画像」
    • 手順:例「alt属性設定の手順をチャートで表した図」
    • 完成例:例「赤と白のバラの刺繍が施された白い巾着袋の全体写真」

ブログ全体のaltを整える手順と最低限の知識

「よし!さっそくブログ全体のaltを整えよう!」

と思った時に、まず何をすれば良いか。

最低限の知識と共に、私がやった通りに解説します。

  • まず全記事をチェック
    • 画像が「意味のある写真」なら具体的に説明する
    • 意味のない装飾画像は alt=””
      • つまり何も入力しない

全記事をチェック

画像の数だけ「どんな写真か?」を書き出す必要があります。

そのため、記事に使用している画像を一つずつチェックしていきます。

  • それは意味のある画像か?(つまり、文字だけの状態よりその画像があった方が読者に伝わりやすいか)
桃子
桃子

私の場合、古い記事は特に「意味もなく必要でもない画像」が多くて驚きました。

「文字ばかりでは読みにくい」

そう思い込んでいたので、「1見出し1画像」を目指してせっせと画像を差し込んでいましたから・・

このローラー方式のチェック作業、正直けっこう大変。

記事数が多い場合は特に根気のいる作業ですよね。

アドセンス合格した自分を想像し、歯を食いしばって頑張りましょう。

画像が「意味のある写真」なら具体的に解説

例:刺繍の手順についての記事
→ 「針に糸を通して玉結びを作っている様子」

同じ画像を使い回すなら altも統一する

Googleは統一性を評価するため、例え別の記事であっても、同じ画像を使う場合はaltを統一してください。

意味のない装飾画像は alt=””(何も入力しない)

検索エンジンに「無視していい画像」と判断してもらうため、代替テキストの箇所を空白にします。

  • あまりにテキストばかりで読みにくい、など意味はないけど必要な画像であれば、 alt=””(何も入力しない)
  • 意味もなく必要でもない画像の場合は、無駄にサイトを重くするだけのため、削除っ

削除対象画像の例:とにかく装飾のためだけに貼っていた無料サイトの画像

alt属性が整っている状態とは?

自分のサイトが以下を満たしていれば、「alt属性が整っている状態」と言えるでしょう。

alt属性が整っているかチェックしよう!
  • 記事内の画像すべてに 意味のある alt が入っている
    • 読者にとって役立つ画像
    • 読者の理解を助ける画像
  • 装飾画像は alt=””(何も入力しない)
  • 短かすぎず(10文字以内の名詞のみ、などNG)30文字くらいが目安
  • 長すぎず(80文字までが目安)
  • 説明が具体的で正確
  • 同じ画像には別に記事でも同じaltを設定している

これだけで、Googleアドセンスの審査において「コンテンツの質」評価が底上げされて、合格しやすくなります。

まとめ:作業自体は簡単!

ALT属性を整える作業は、記事数が多い場合どうしても手間がかかります。

とはいえ、実際の作業そのものはとてもシンプルですし、

ひとつずつ進めていけば必ず終わる

あたりまえ体操。

アドセンス合格だけがゴールではありませんが、「できる対策はしておく」という姿勢はブログ運営において大きなプラスになります。

桃子
桃子

そして何より、適切なalt設定は読者にとっても大切な配慮です。

この記事を書いている今、私自身は半分ほどしか設定が終わっていませんが、コツコツ作業を進めていきたいと思います。

地味な作業を夢への階段のように感じたいので、不朽の名作『天使なんかじゃない』ラストでの志乃ちゃんの送辞をお借りしましょう。

自分を信じること
周りを愛すること
明日を夢見ること

矢沢あい『天使なんかじゃない』より

いつ読み上げても良い言葉ですね。

志乃ちゃんの言う通り、ほんと幸せの三原則ですよこれは。

どれも気付けば忘れがち。

42歳、自分を信じて明日を夢見ようと思います。

次の記事では、「画像をWEBP化する」という、alt設定に続き、読めもしない作業について解説しようと思います。

読み方、ウェブピーであってる?

何かの略か・・?

ではまた。

コメント

タイトルとURLをコピーしました