悩む人
- Alt属性（代替テキスト）って何？SEO効果はあるの？
- 書き方はどんな感じ？
こんな悩みを解消します。
Alt属性（代替テキスト）とは、画像にテキストで説明書きを入れること。
Googleは記事をソースコードで認識するため、画像自体では読み込んでくれませんが、Alt属性を書けば万事解決。
さらに、正しい書き方を理解することで、大きなメリットを享受することが可能（間違った書き方をするとペナルティ対象に）。
そこで今回は「Alt属性のSEO効果」に加え、「Alt属性の正しい書き方」を解説します。
本記事を参考にすると、Alt属性（代替テキスト）を使いこなし、よりSEOに強い記事を書くことが可能になります。
✔ 記事の内容
- Alt属性（代替テキスト）とは
- Alt属性3つのSEO効果
- Alt属性の書き方
- Alt属性の書き方：注意点
- Alt属性以外にすべき画像の設定
Alt属性（代替テキスト）とは
Alt属性（代替テキスト）とは、画像を表示する際に用いるHTMLタグの「img」要素属性の1つを指します（Alt＝オルト）。
Alt属性を書くことで、Googleに画像を文章として認識してもらうことが可能になります。
画像のソースコード
画像は下記のようなソースコードとなっており、赤字の部分がAlt属性。
この赤字の部分に画像の説明を入れるのが代替テキストです。
ここで意味を理解できていなくても、読み進めれば分かってきますのでご安心下さい。
Alt属性（代替テキスト）3つのSEO効果
Alt属性には大きく分け、下記3つのSEO効果が望めます。
では、順にみていきましょう。
補助テキストの役割
これは視覚障がいのある方が、サイトを音声で読みとる時に活用されます。
が、この時にAlt属性の設定をしていないと、画像を読み上げることができません。
これではユーザビリティが低下、さらにはユーザビリティが低下によりGoogleからの評価も低下します。
Google 画像検索でコンテンツが表示される可能性を高めるには、ユーザーに高い利便性を提供することが重要です。つまり検索エンジンではなく、ユーザーの利便性を最優先に考慮してページを作成することが必要となります。
引用元：サーチコンソールヘルプ
SEOが大切なのはもちろんですが、あくまでも記事を読むのは人間であることを忘れてはいけませんね。
画像が表示されない時の対策
また、Alt属性を書いておくと、ネットワーク上の不備で画像が反映されない時に、代わりにテキストが表示されます。
Googleのスターターガイドには下記のような記述が。
画像にわかりやすいファイル名を付けて、alt 属性の説明を入力します。「alt」属性を使用すると、何らかの理由で画像を表示できない場合の代替テキストを指定できます。
Alt属性を書いていないと読者は全く意味が分かりませんので、ユーザビリティが下がりますし、下手したら記事から離脱してしまいます。
検索エンジンに認識してもらえる
Alt属性を設定すると、画像がGoogleのクローラーに認識してもらえます（Googleは画像自体は認識せず、ソースコードで認識するため）。
そして、何よりもデカいのがGoogleの画像検索に表示されること。
アイキャッチ画像は自分で作り、代替テキストを用いることで、画像検索で上位を量産中です🎉
画像検索から流入もあるので、まだの人はぜひ！👌
【代替テキスト】https://t.co/spZlfkGMcF
【アイキャッチ画像作成】https://t.co/8ATry8PHHU#ブログ書け #ブログ初心者#ブログ仲間と繋がりたい pic.twitter.com/abm1NsZTzd
— ガオ@ブロガー毎日更新 (@gaolifehack) November 30, 2019
これは私がブログを始めて1ヵ月の頃のツイートです。つまり、ブログ初心者でも画像検索であれば、検索上位のチャンスが大きいということ。
ちなみにGoogleはこう明記しています。
画像のファイル名と alt テキストを最適化すると、Google 画像検索のような画像検索プロジェクトが画像を適切に理解しやすくなります。
Googleに認識してもらいやすくなり、さらに画像検索にも表示されるとなったら、Alt属性を書かない手はないですよね。
関連記事 クローラーとは？クローリングを促進させる5つの方法【最重要SEO対策】
Alt属性（代替テキスト）の書き方
Alt属性（代替テキスト）の書き方はスーパー簡単。そして、書き方には2種類あります。
順に解説します。
WordPressの機能を使う
①画像をインサートする
まず画像をインサート（挿入）します。
次に画面にカーソルを当て、鉛筆マーク（編集）をクリック。
②代替テキストの欄に書き込む
そしたら、代替テキストという欄に書き込めばOK。
最後に右下の更新を忘れずにクリックしましょう。
ソースコードに直接入れる
①画像をインサートする
まず画像をインサート（挿入）します。
これだとまだAltの後の「””」が空欄になっている状態（赤字部分）。
②Alt””の「””」に画像の説明を入れる
次は、「””」の間に画像の説明を書きます。
これで完了。
例えば、ネコの画像だったら、「ネコ」と入れればOK。
Alt属性（代替テキスト）の書き方：注意点
Alt属性を書くのスーパー簡単ですが、書き方を間違えると最悪Googleのペナルティ対象になってしまいます。
まずは、Googleが明記している注意点をみてみましょう。
代替テキストを設定するときは、キーワードを適切に使用して、ページのコンテンツのコンテキストに沿った、情報に富む、有用なコンテンツを作成するようにしてください。alt 属性にキーワードを羅列すること（キーワードの乱用）は避けてください。これによって、ユーザー エクスペリエンスが低下し、サイトがスパムとみなされる場合があります。
引用元：サーチコンソールヘルプ
…
普通にこの文章を読むと、多くの人はホイケル君みたいな顔になると思うので、具体的に解説をしていきます。
この順番でいきますね。
悪いAlt属性の書き方
特に後ろ4つに関しては、ペナルティ対象になる可能性が普通にあるので、必ず避けましょう。
良いAlt属性の書き方
良いAlt属性の書きにおける条件はただ1つ。
画像と関連性があり、簡潔で分かりやすいAlt属性を書きましょう。
Alt属性の書き方：例
これだけだとピンとこない人もいると思いますので、具体例を提示しますね。
下記の画像を参考にAlt属性を書いていきましょう。
悪いAlt属性の書き方
①空白
②長文
③キーワードの羅列
④関係のないキーワード
⑤意味の分からない文字列
良いAlt属性の書き方
これで何となくイメージは持てましたよね。Alt属性は正しく書きましょう。
Alt属性以外にすべき画像の設定
本記事ではAlt属性について解説をしましたが、他にも画像の最適化のためすべき設定が4つあります。
ブログにおいて画像は最適化すれば大きな武器になり、設定をぬかればマイナスになることも。
下記で「画像の役割」と「画像を最適化する方法」をまとめているので、目を通しておくことをオススメします。
>>【ブログ画像】5つの役割と5つの注意点！アクセスアップに繋がる使い方
Alt属性の設定方法を解説！代替テキストとは：まとめ
Googleは画像自体を認識するのではなく、画像をソースコードで認識します。
なので、Googleに認識してもらうためにもしっかりとAlt属性を書きましょう。
また、他の役に立つSEO記事は下記にまとめていますので、ご活用下さい。
コメント