HTML

alt属性を書いてSEOを強化しよう!ケース別書き方サンプルつき

  • このエントリーをはてなブックマークに追加

alt属性とは

alt(オルトと読みます)属性は、imgタグなどの内容が表示できない場合に
「代替テキスト」として指定します。

よく「altタグ」と呼ぶ人もいますが、正しくはタグの中の属性なので、「alt属性」です。

HTMO2.0以降、imgタグとmapタグはalt属性の記載は必須となっています。

今回はその中でも最も多く使われる、imgタグのalt属性について
お話をしたいと思います。

alt属性を記述するとSEOにも効果がある?

alt属性を記述するとSEOにも効果がある?

alt属性はSEO対策になる、という話は聞いたことがありますか?

実はこれは正解で、imgタグでは検索ロボットが画像の内容を認識できないので
代わりに画像や写真の説明をalt属性で指定してあげます。

・・・とは言っても現時点でもだいぶコンピューターが画像を認識できるようになっていますので、
AIがますます発達すると、このタグも意味が変わってくる時が来るのかもしれません。

現状ではaltは必須なので、必ず書くようにしましょう。

写真と文章の場合

写真と文章の場合

このように風景や情景のイメージ、挿絵として挿入される写真は、
その内容をaltに書きます。

この場合単に「富士山」や「富士山の写真」と書くのもOK。

人間はこの写真を見たときに、富士山の他に河口湖が手前にあり、
そして桜が咲いていることも理解できますが、ロボットは今のところそういうわけにいきません。

ロボットに対してもこの写真がどういう描写なのかを伝えるには、
上記ソースコードのように、
「河口湖から桜越しに望む春の富士山」などと記載するとなおよいでしょう。

ロゴの場合

企業、団体、サービス名などのロゴマークはその名称を記載するのが正解です。

ロゴの場合のalt記述例

名称のほかに、サービス名や商品名をわかりやすくするキャッチコピーを入れてもOKです。

例: 「北海道でていねいに作った生乳で作りました 函館MILK SOFT」
例: 「おうちでラクラク印刷 かんたんフォトコピー」

集合写真の場合

集合写真の場合のaltの書き方

「〜の様子」や「〜の風景」というキャプションを見たことがあるかと思います。

ここでもalt属性にはどんな会場なのかを記述するとよいでしょう。

誰かが何かをしている写真の場合

誰かが何かをしている写真のalt属性の書き方

ここも単純に「2月22日開催された少年野球決勝の様子」でもよいかもしれません。

しかし複数写真がある場合は、alt属性が同じになってしまうので、上記ソースコードのような、
状況を説明するキャプションを記述することも、重複記述を避けられるので一つの方法です。

バナーの場合

バナーの場合は、バナー内の要素を記述することが一般的です。

サービスや商品を紹介するバナーの場合は、
その名称とともに、端的な紹介文やキャッチコピーを添えます。

バナー

この場合も説明が長くならないようにして、ワンライン程度で商品やサービスを説明できればベストです。

*余談ですが、当社でベータ版のファイルストレージを開発しました( ´−`)。oO

altを書かなくてよい場合もある

altは必須と言いながらも、実は書かなくてもいい場合があります。

そのケースとして、
・アイコンなどの小さな画像
・スペーサー
が主に挙げられます。

▼アイコン画像を配置する場合
altを書かなくてよい場合

▼アイキャッチ画像を配置する場合
altを書かなくてよい場合

このように特筆すべきことがこのアイコン画像にない場合、alt自体を書かなくてもOKです。

★アイキャッチ画像の例の場合は、本来はcssのbackgroundまたはbackground-imageを
使って記述するほうがHTMLとCSSの構造としてナチュラルです。

とは言っても、最近画像スペーサー(透明なgifやpngの画像)を使って、
レイアウトする人はほとんど見なくなりました。

いまやCSSで調整すべきですからね。

やってはいけない記載例

▼全然ダメなalt属性の記述例

いくらSEO対策だからといって、画像内容とは無関係なキーワードや、
意味のないキーワードを片っ端から書くのは
Googleのペナルティを受ける可能性が大いにあります。

情報はコンパクトにかつ、正しく記載することでSEOとしても最大の効果があがります。

迷ったら見たままのことを書こう

ここまでalt属性の書き方いろいろなパターンを見てきましたが、
どうしてもaltを書きづらい内容もありますよね。

この写真やイラストが何なのかを、子どもに教えるかのように記述すると考えると
よいと思います。

極端な場合として、

(例)花の写真
(例)ネコのイラスト

でもその写真やイラストが、何なのか、ざっくりと分かりますよ。

  • このエントリーをはてなブックマークに追加

Leave a Reply