お答えします。
alt属性とは、ブログやサイトの画像に設定する「画像の説明文」のようなものになります。最近は、Googleの検索技術があがり画像の評価対象の1つになっているのです。
本日の記事内容
・alt属性とは？
・alt属性の機能
・alt属性を設定する
この記事を読んでいただくと：
画像のファイル名
alt属性の解説の前に「画像ファイル名」について触れておきます。
実はこの画像フアイル名もSEOに関わっています。ですので具体的に連想しやすいものにしておきましょう。
[st-mybox title=”例えば：” fontawesome=”fa-check-circle” color=”#FFD54F” bordercolor=”#FFD54F” bgcolor=”#FFFDE7″ borderwidth=”2″ borderradius=”0″ titleweight=”bold” fontsize=”” myclass=”st-mybox-class” margin=”25px 0 25px 0″]悪い例：1298.jpg良い例：cat.jpg[/st-mybox]
番号だけでは画像がどんなものであるかわからなないですね。猫であれば画像が猫であることがわかります。
alt属性とは？
alt属性は、画像表示に必要なHTMLタグの「img」要素プロパティ（属性）の1つです。
テキスト入力されてる方は、画像を添付するとこんなコードが表示されます。
<img src="画像のurl" alt="○○"/>
「alt=”○○”」のこの○○のところにテキストを入れます。画像がどんなものであるかわかりやすく簡潔な文で説明します。
alt属性の機能
4つの機能があります。
[st-mybox title=”” fontawesome=”fa-list-ol” color=”#757575″ bordercolor=”#f3f3f3″ bgcolor=”” borderwidth=”3″ borderradius=”5″ titleweight=”bold” title_bordercolor=”#757575″ fontsize=”” myclass=”st-mybox-class st-title-under st-list-no st-list-border” margin=”25px 0 25px 0″]- SEOを高める効果あり
- 画像の代わりとして働く
SEOを高める効果あり
Googleにわかりやすく伝える工夫をすることで、画像がGoogleのクローラーに認識してもらえるようになります。
画像の代わりとして働く
万が一不具合により画像が表示されないという時に、画像情報としてalt内に記載した内容が表示されることになるのです。
具体的であればあるほど、本来の画像に近いものが表示されます。
alt属性を設定する
上記の○○の部分にテキストを入れることで設定できます。
○○へのテキスト入力する際の注意点。「悪い例」「良い例」「最適な例」でご紹介します。
悪い例：
<img src="cat.jpg" alt="">
画像ファイル名は入力されていますが、代替テキストがありません。
良い例：
<img src="cat.jpg" alt="猫">
画像ファイル名代替テキスト共に入力されています。
最適な例：
<img src="cat.jpg" alt="餌を食べている猫">
画像ファイル名代替テキスト共に入力されています。さらに猫の状況を説明しています。
[st-mybox title=”注意” fontawesome=”fa-exclamation-circle” color=”#ef5350″ bordercolor=”#ef9a9a” bgcolor=”#ffebee” borderwidth=”2″ borderradius=”0″ titleweight=”bold” fontsize=”” myclass=”st-mybox-class” margin=”25px 0 25px 0″]SEO効果がある代替テキストですが、以下を実施すると逆に評価が下がってしまいますので注意しましょう。
1．何も入れない
2．長すぎる文
3．キーワードの連続入力
4．無関係な言葉や文[/st-mybox]
まとめ
本日は、alt属性代替テキストの意味とテキストの書き方についてご説明してきました。
Googleの技術は日々進歩しています。進化に応じて対応する必要があります。
alt属性代替テキストを設定してSEO効果を上げていきましょう。
以上です。
こんな関連記事も是非ご覧ください。
関連記事SEO効果があるオリジナルアイキャッチ画像を無料で創る【canvaの使い方】
