IT関連

画像のSEO施策|代替テキスト(alt属性・オルト属性)の書き方と画像ファイル名の付け方

視覚障害がある男性と盲導犬の写真

この記事を書いた人🐰
楽しく働くドットコム・べるこさん

2013年からIT関連会社を経営
適格請求書発行事業者登録番号 TA5450001010642

YMAA認証マーク取得
薬機法・医療法適法広告取扱個人認証
KTAA認証マーク取得
景品表示法・特定商取引法取扱個人認証

【資格・スキル・経験】
■証券外務員Ⅰ種/英検2級/医療事務2級
■広告運用(Google・FB・Instagram)
■SEO・動画のSEO(VSEO)対策
■SEOライティング

■セールスライティング
■コピーライティング
■html/css/WordPress
■Illustrator/Photoshop/Premiere Pro
■AWS/Ruby on Railsアプリ開発
■インフルエンサーのプロデュース多数

2013年より、WEBアプリ開発、LP制作、オンライン講座・オンラインサロン構築など、企業さまやインフルエンサーさまのプロデュース業に携わって参りました。企画開発だけではなく、構築から運用までをワンストップでサポート。広告運用から内部SEO対策、動画のSEO(VSEO)対策込のYouTube運用に定評あり。大手WEBメディア・出版社さまからの執筆依頼多数あり。

モットーは、「秘密厳守とコンプラ遵守」。お客さまの魅力を引き出し、輝かせることが何よりの喜びです。

べるこさん
べるこさん
楽しく働くドットコムへようこそ💛画像のSEO対策って知ってた?

ブログ記事を補足するイメージ画像(写真やイラスト)を挿入する際、ただ画像を挿入するだけではなく、alt属性(代替テキスト)と呼ばれるものを入れることで、SEO的によい影響をもたらすと言われています。

テクニックに拘ればSEO効果があるのではなくて、ユーザーのためになる情報だったり、ユーザーのことをよく考えて作り込まれたサイトが評価されるのであって、小手先のテクニックの詰込みは逆効果なので気をつけましょう!
べるこさん
べるこさん

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

alt属性(代替テキスト)とは、画像の内容をテキストで表現することを指します。ワードプレスをお使いの場合は、写真をクリックし下記の赤枠で囲った「代替テキスト」の枠内に、その写真がどんな写真なのかの説明を書きます。

こうすることで、検索エンジンは、何の画像なのかを認識するんですね。

べるこさん
べるこさん
alt属性の読み方は、オルト属性です。
ワードプレスのalt属性(代替テキスト)を入れる部分のスクショ写真

写真にalt属性(代替テキスト)を書くとSEO的に評価されると言われる理由

検索エンジンの理解

検索エンジンはテキストの解釈は得意としますが、画像をそのものを理解することには適していないようです。そこで、alt属性(代替テキスト)を書き込むことで、画像の内容を正確に伝える効果があるんですね。

アクセシビリティ

ウェブサイトにおけるアクセシビリティ(Web Accessibility)とは、コンテンツができるだけ多くの人々にとって利用可能で理解しやすい状態で提供されることを指します。

障害を持つ方や高齢者など、多様なユーザーグループに対してウェブコンテンツが利用しやすい状態で提供されることを目指す原則やガイドラインのことです。

「アクセシビリティが良い」とは、見やすさだったり、わかりやすさだったり、見てくださるかたに配慮されているかということですね。
べるこさん
べるこさん

alt属性の重要な役割

alt属性(代替テキスト)には、検索エンジンへ画像の情報を伝えるほかにも重要な役割があるんです。それは、視覚にハンディキャップをお持ちのユーザーさんへの配慮です。

視覚障害を持つユーザーさんは、 スクリーンリーダーと呼ばれる、コンピューター上のテキストを音声または触覚デバイスに変換して読み上げるツールを利用されます。

従って、画像にも適切なテキストを書き込むことで、視覚にハンディキャップをお持ちのネット利用者さんに対する配慮にもつながるんですね。

画像検索

alt属性(代替テキスト)を書き込むことで、画像検索結果に表示される可能性が高まります。ユーザーが画像検索でキーワードを入力した際に、適切なalt属性がある画像は上位に表示される傾向があります。

あたいもよく画像で検索するよ~
めるみーちゃん
めるみーちゃん

コンテンツの質

検索エンジンはウェブページの”質”を評価します。alt属性が適切に設定されていることも”質”が良いサイトと評価される基準の一つとなるんですね。

alt属性の正しい書き方

どんなことを書き込めばいいのか?

よくある質問

例えば、「なぜ共同経営はうまくいかないのか?」という記事を書いた場合、イメージ写真には、「スーツを着て握手する男性ビジネスマン」の画像を入れています。この場合、alt属性に入れるのは「なぜ共同経営はうまくいかないのか?」なのか?それとも「スーツを着て握手する男性ビジネスマン」なのか?

alt属性には、画像の内容を適切に説明するテキストを入力する必要があります。そのため、イメージ写真が「スーツを着て握手する男性ビジネスマン」の画像である場合、alt属性には「スーツを着て握手する男性ビジネスマン」といった画像の内容を正確に表すテキストを記述するのが適切です。

alt属性は、画像が表示できない場合や視覚障害のあるユーザーに対して、画像の代わりになる情報を提供する役割を持ちます。そのため、alt属性には画像自体の内容を記述することが重要です。

ブログの内容「なぜ共同経営はうまくいかないのか?」は文章で表現されるべきであり、alt属性には画像の内容「スーツを着て握手する男性ビジネスマン」と記述します。

検索エンジンはalt属性を通じて画像の内容を理解し、関連する検索結果に表示することがありますが、キーワードスタッフィングを避けるようにして、自然な表現を心掛けることが大切です。

キーワードスタッフィングとは?

キーワードスタッフィングとは、SEOを意識するあまり、ウェブページやコンテンツに不自然に多くのキーワードを詰め込むことを指します。

検索エンジンはキーワードスタッフィングを検出し、ペナルティを与えることがあると言われています。

キーワードスタッフィングは、ページのランキングを低下させたり、サイト全体の信頼性を損なったりする可能性があります。そのため、キーワードを適切に使い、コンテンツの質を向上させることが重要です。

小手先のSEOテクニックよりも、ユーザーに価値ある情報を提供することが、良いSEOの基本だということは、しっかりと頭にいれておきましょう!

イラストと文字がメインのブログアイキャッチにもalt属性入れたほうがいい?

たとえばこんな感じのアイキャッチだと迷ってしまいますよね?

スマートフォンを持つ手と「LINE公式アカウントどんな感じ?」の文字

alt属性は写真でもイラストでも同じ考え方で設定できます。なぜなら、alt属性の主な目的は、画像に対するテキストの代替として機能しているからです。

画像の内容を理解しやすく、アクセシビリティを向上させるためには、写真だけでなくイラストに対しても同じ考え方が適用されます。

上記のアイキャッチに対しては、”スマートフォンを持つ手のイラストと「LINE公式アカウントどんな感じ?」の文字”とalt属性を入れました。

アイキャッチの文言をalt属性に含めたほうがいいのか?

アイキャッチは、コンテンツや主要なメッセージを要約しているため、alt属性にそれを含めることで、画像の内容を理解しやすくし、アクセシビリティを向上させることができます。

ただし、alt属性は簡潔で具体的なテキストが要求されるため、メインの文言を要約して記述する必要があります。キーワードを含めることも考慮し、alt属性を適切に設定していきましょう。

alt属性を入れる必要がない画像

例えば、リボンやレースの画像など、装飾目的の画像に対しては、コンテンツ内容と関係ないため、alt属性を入れる必要は特にありません。

コンテンツ内容と関係のない装飾目的の画像にalt属性は特に必要なし

画像そのものにつけるファイル名もSEO効果がある!?

サムネイルをつくって保存するときなど、画像につける名前はテキトーでいいの? 9999ffh.png とか💦
めるみーちゃん
めるみーちゃん

私もそれよくやります!めんどうなので、何も考えずにキーボード早打ちして「999999999kkjj.png」など適当につけてしまうこともよくありますが、実はこれSEO的にはあまりよくないのです。

画像の情報を伝えるための代替テキスト(alt属性)を入れる理由は、テキスト以外の情報の理解を苦手とするクローラー(Googleの巡回ロボット)に画像の情報を認識してもらうためでしたよね?

画像がどんなものなのかをテキストで伝える「代替テキスト(alt属性)」と同様に、画像ファイルに付ける名前も意味のあるものにすることで、クローラーが理解しやすくSEO的にも有利と言われています。

Googleに、テキストでわかりやすく情報を伝えることで、自分のサイトを発見してもらおう!という意識を持つと良いかと思います。

そうなると、mp3(音声ファイル)やmp4(動画ファイル)でも同じことが言えますよね。

SEOに効果的な画像ファイル名の付け方

「pppp」や「s1.jpg」のようなテキトーにつけた意味不明なものは好ましくありません。

ファイル名にはキーワードを盛り込むと良いと言われています。日本語よりも英語の方がクローラーが理解しやすいと言われていますよ。

LPやHPのデザイナーさんは、コーダー(html,cssのコードを書くひと)も兼任されている方が少なくないのですが、そのようなプロが作った画像のファイル名は必ず英語で見やすいものになっています。

因みに、htmlはHPなどの見た目の部分をつくるコードなのですが、汚いコードより綺麗に整理されたコードの方がクローラーの解析が早くすすむためSEOにも有利などと言われています。

このような事情を鑑みて、画像ファイル名は、写真のキーワードを盛り込んだ英語にするクセをつけておくのが良いかと思います。

例えば、下記の画像のファイル名なら、「cherry-blossoms.jpg」にして、代替テキストを「淡いピンクの桜」と入れました。

淡いピンクの桜

まとめ

イメージ写真だったり、イラストと文字を組み合わせたアイキャッチだったり、ビジネス交流会の時の写真だったり、ご自身の顔写真を載せることもあるでしょう。

このように、画像にも色々とパターンがあるので、alt属性(代替テキスト)をどう記述するか、都度迷ってしまいますよね?

考えすぎて悩んだ時は、「アクセスビリティを意識」してみるとよいかと思います。

アクセスビリティとは、あなたのサイトが障害をお持ちの方や高齢者など、あらゆるユーザーグループに配慮しているか?という部分でしたね。

視覚障害のあるユーザーさんに、挿入した画像の内容をどのようにして伝えるか?を意識してalt属性(代替テキスト)を書くのが一番良いと私は個人的に思います。

もしも、あなたが、視覚にハンディキャップをお持ちなら、画像にも説明があるとよりそのブログを楽しめますよね?説明がないと「どんな画像なんだろう・・」とモヤモヤしてしまいませんか?「画像にも説明があったらな」と感じるかもしれません。

要は、そういうことなんです。

もしかすると、視覚にハンディキャップをお持ちの方が、あなたのブログをいつも楽しみにしていてくださるかもしれませんよ(*^-^*)