HTML

HTML

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

alt属性とは alt(オルトと読みます)属性は、imgタグなどの内容が表示できない場合に 「代替テキスト」として指定します。 よく「altタグ」と呼ぶ人もいますが、正しくはタグの中の属性なので、「alt属性」です。 HTMO2.0以降、imgタグとmapタグはalt属性の記載は必須となっています。 今回はその中でも最も多く使われる、imgタグのalt属性について お話をしたいと思います。 alt属性を記述するとSEOにも効果がある? alt属性はSEO対策になる、という話は聞いたことがありますか? 実はこれは正解で、imgタグでは検索ロボットが画像の内容を認識できないので 代わりに画像や写真の説明をalt属性で指定してあげます。 ・・・とは言っても現時点でもだいぶコンピューターが画像を認識できるようになっていますので、 AIがますます発達すると、このタグも意味が変わってくる時が来るのかもしれません。 現状ではaltは必須なので、必ず書くようにしましょう。 写真と文章の場合

このように風景や情景のイメージ、挿絵として挿入される写真は、 その内容をaltに書きます。 この場合単に「富士山」や「富士山の写真」と書くのもOK。 人間はこの写真を見たときに、富士山の他に河口湖が手前にあり、 そして桜が咲いていることも理解できますが、ロボットは今のところそういうわけにいきません。 ロボットに対してもこの写真がどういう描写なのかを伝えるには、 上記ソースコードのように、 「河口湖から桜越しに望む春の富士山」などと記載するとなおよいでしょう。 ロゴの場合 企業、団体、サービス名などのロゴマークはその名称を記載するのが正解です。

名称のほかに、サービス名や商品名をわかりやすくするキャッチコピーを入れてもOKです。 例: 「北海道でていねいに作った生乳で作りました 函館MILK SOFT」 例: 「おうちでラクラク印刷 かんたんフォトコピー」 集合写真の場合

「〜の様子」や「〜の風景」というキャプションを見たことがあるかと思います。 ここでもalt属性にはどんな会場なのかを記述するとよいでしょう。 誰かが何かをしている写真の場合

ここも単純に「2月22日開催された少年野球決勝の様子」でもよいかもしれません。 しかし複数写真がある場合は、alt属性が同じになってしまうので、上記ソースコードのような、 状況を説明するキャプションを記述することも、重複記述を避けられるので一つの方法です。 バナーの場合 バナーの場合は、バナー内の要素を記述することが一般的です。 サービスや商品を紹介するバナーの場合は、 その名称とともに、端的な紹介文やキャッチコピーを添えます。

この場合も説明が長くならないようにして、ワンライン程度で商品やサービスを説明できればベストです。 *余談ですが、当社でベータ版のファイルストレージを開発しました( ´−`)。oO altを書かなくてよい場合もある altは必須と言いながらも、実は書かなくてもいい場合があります。 そのケースとして、 ・アイコンなどの小さな画像 ・スペーサー […]