当サイト使用テーマ『SWELL』をダウンロード>>

Alt属性(代替テキスト)の書き方【初心者でも〇〇検索で上位連発】

悩む人のアイコン画像悩む人

  • Alt属性(代替テキスト)って何?SEO効果はあるの?
  • 書き方はどんな感じ?

こんな悩みを解消します。

Alt属性(代替テキスト)とは、画像にテキストで説明書きを入れること

Googleは記事をソースコードで認識するため、画像自体では読み込んでくれませんが、Alt属性を書けば万事解決。

さらに、正しい書き方を理解することで、大きなメリットを享受することが可能(間違った書き方をするとペナルティ対象に)。

そこで今回は「Alt属性のSEO効果」に加え、「Alt属性の正しい書き方」を解説します。

本記事を参考にすると、Alt属性(代替テキスト)を使いこなし、よりSEOに強い記事を書くことが可能になります。

記事の内容

  • Alt属性(代替テキスト)とは
  • Alt属性3つのSEO効果
  • Alt属性の書き方
  • Alt属性の書き方:注意点
  • Alt属性以外にすべき画像の設定
目次

Alt属性(代替テキスト)とは

Alt属性(代替テキスト)とは

Alt属性(代替テキスト)とは、画像を表示する際に用いるHTMLタグの「img」要素属性の1つを指します(Alt=オルト)。

Alt属性を書くことで、Googleに画像を文章として認識してもらうことが可能になります。

画像のソースコード

画像は下記のようなソースコードとなっており、赤字の部分がAlt属性。

<img src=”画像のURL” alt=”” />

この赤字の部分に画像の説明を入れるのが代替テキストです。

ここで意味を理解できていなくても、読み進めれば分かってきますのでご安心下さい。

Alt属性(代替テキスト)3つのSEO効果

Alt属性(代替テキスト)3つのSEO効果

Alt属性には大きく分け、下記3つのSEO効果が望めます。

  1. 補助テキストの役割
  2. 画像が表示されない時の対策
  3. 検索エンジンに認識してもらえる

では、順にみていきましょう。

補助テキストの役割

これは視覚障がいのある方が、サイトを音声で読みとる時に活用されます。

が、この時にAlt属性の設定をしていないと、画像を読み上げることができません。

これではユーザビリティが低下、さらにはユーザビリティが低下によりGoogleからの評価も低下します。

Google 画像検索でコンテンツが表示される可能性を高めるには、ユーザーに高い利便性を提供することが重要です。つまり検索エンジンではなく、ユーザーの利便性を最優先に考慮してページを作成することが必要となります。

引用元:サーチコンソールヘルプ

SEOが大切なのはもちろんですが、あくまでも記事を読むのは人間であることを忘れてはいけませんね。

画像が表示されない時の対策

また、Alt属性を書いておくと、ネットワーク上の不備で画像が反映されない時に、代わりにテキストが表示されます。

Googleのスターターガイドには下記のような記述が。

画像にわかりやすいファイル名を付けて、alt 属性の説明を入力します。「alt」属性を使用すると、何らかの理由で画像を表示できない場合の代替テキストを指定できます。

代替テキスト

引用元:検索エンジン最適化スターターガイド

Alt属性を書いていないと読者は全く意味が分かりませんので、ユーザビリティが下がりますし、下手したら記事から離脱してしまいます。

検索エンジンに認識してもらえる

Alt属性を設定すると、画像がGoogleのクローラーに認識してもらえます(Googleは画像自体は認識せず、ソースコードで認識するため)。

そして、何よりもデカいのがGoogleの画像検索に表示されること。

これは私がブログを始めて1ヵ月の頃のツイートです。つまり、ブログ初心者でも画像検索であれば、検索上位のチャンスが大きいということ。

ちなみにGoogleはこう明記しています。

画像のファイル名と alt テキストを最適化すると、Google 画像検索のような画像検索プロジェクトが画像を適切に理解しやすくなります。

引用元:検索エンジン最適化スターターガイド

Googleに認識してもらいやすくなり、さらに画像検索にも表示されるとなったら、Alt属性を書かない手はないですよね。

関連記事 クローラーとは?クローリングを促進させる5つの方法【最重要SEO対策】

Alt属性(代替テキスト)の書き方

Alt属性(代替テキスト)の書き方

Alt属性(代替テキスト)の書き方はスーパー簡単。そして、書き方には2種類あります。

  1. WordPressの機能を使う
  2. ソースコードに直接入れる

順に解説します。

WordPressの機能を使う

  • 画像をインサート
  • 代替テキストの欄に書き込む

①画像をインサートする

まず画像をインサート(挿入)します。

次に画面にカーソルを当て、鉛筆マーク(編集)をクリック。

編集マーク

②代替テキストの欄に書き込む

そしたら、代替テキストという欄に書き込めばOK。

代替テキスト

最後に右下の更新を忘れずにクリックしましょう。

ソースコードに直接入れる

  1. 画像をインサートする
  2. Alt””の「””」に画像の説明を入れる

①画像をインサートする

まず画像をインサート(挿入)します。

これだとまだAltの後の「””」が空欄になっている状態(赤字部分)。

<img src=”https://gaosnote.com/wp-content/uploads/2019/10/~とは-300×169.png” alt=”” width=”300″ height=”169″ class=”alignnone size-medium wp-image-865″ />

②Alt””の「””」に画像の説明を入れる

次は、「””」の間に画像の説明を書きます

<img src=”https://gaosnote.com/wp-content/uploads/2019/10/~とは-300×169.png” alt=“Alt属性の設定方法とは” width=”300″ height=”169″ class=”alignnone size-medium wp-image-865″ />

これで完了。

例えば、ネコの画像だったら、「ネコ」と入れればOK。

Alt属性(代替テキスト)の書き方:注意点

代替テキスト設定の注意点

Alt属性を書くのスーパー簡単ですが、書き方を間違えると最悪Googleのペナルティ対象になってしまいます。

まずは、Googleが明記している注意点をみてみましょう。

代替テキストを設定するときは、キーワードを適切に使用して、ページのコンテンツのコンテキストに沿った、情報に富む、有用なコンテンツを作成するようにしてください。alt 属性にキーワードを羅列すること(キーワードの乱用)は避けてください。これによって、ユーザー エクスペリエンスが低下し、サイトがスパムとみなされる場合があります。

引用元:サーチコンソールヘルプ

ホイケル
ホイケル

普通にこの文章を読むと、多くの人はホイケル君みたいな顔になると思うので、具体的に解説をしていきます。

  • 悪いAlt属性の書き方
  • 良いAlt属性の書き方
  • Alt属性の書き方:例

この順番でいきますね。

悪いAlt属性の書き方

  1. 空白
  2. 長文
  3. キーワードの羅列
  4. 関係のないキーワード
  5. 意味の分からない文字列

特に後ろ4つに関しては、ペナルティ対象になる可能性が普通にあるので、必ず避けましょう。

良いAlt属性の書き方

良いAlt属性の書きにおける条件はただ1つ。

  • 簡潔で分かりやすい

画像と関連性があり、簡潔で分かりやすいAlt属性を書きましょう。

Alt属性の書き方:例

これだけだとピンとこない人もいると思いますので、具体例を提示しますね。

下記の画像を参考にAlt属性を書いていきましょう。

びっくりしているおじさん

悪いAlt属性の書き方

①空白

alt=”

②長文

alt=”ある日、おじさんは銃を持って狩りに出かけました。が、そこには衝撃の光景が..ジミー君がなんとライオンに~

③キーワードの羅列

alt=”おじさん オジサン びっくり 焦る 銃 猟師 ハンター

④関係のないキーワード

alt=”美女大国ウクライナ

⑤意味の分からない文字列

alt=”ヒヒヒヒヒヒヒヒヒヒヒヒヒヒヒヒ

良いAlt属性の書き方

alt=”びっくりしている銃を持ったおじさん

これで何となくイメージは持てましたよね。Alt属性は正しく書きましょう。

Alt属性以外にすべき画像の設定

Alt属性以外にすべき画像の設定

本記事ではAlt属性について解説をしましたが、他にも画像の最適化のためすべき設定が4つあります。

  1. Alt属性を書く
  2. 画像を圧縮する
  3. 引用時はルールを守る
  4. 画像の大きさを調整する
  5. むやみに画像を挿入しない

ブログにおいて画像は最適化すれば大きな武器になり、設定をぬかればマイナスになることも。

下記で「画像の役割」と「画像を最適化する方法」をまとめているので、目を通しておくことをオススメします。

>>【ブログ画像】5つの役割と5つの注意点!アクセスアップに繋がる使い方

Alt属性の設定方法を解説!代替テキストとは:まとめ

Alt属性の書き方

Googleは画像自体を認識するのではなく、画像をソースコードで認識します。

なので、Googleに認識してもらうためにもしっかりとAlt属性を書きましょう。

また、他の役に立つSEO記事は下記にまとめていますので、ご活用下さい。

SEO記事一覧へ≫

人気記事 検索順位チェックツールGRCの評判・評価は?メリット・デメリットを解説

この記事が気に入ったら
フォローしてね!

ガオの画像
ガオ
22歳。Webマーケター【経歴】❶海外40ヶ国に渡航→❷ブログを開設→❸3ヵ月で月間14万pv達成→❹書籍出版やSEOコンサルの依頼→❺マイナビより取材→❻企業より多数スカウト→❼Webマーケティング会社に就業
《 当サイト使用テーマ 》

コメント

コメントする

CAPTCHA


目次
閉じる