ウェブサイト画像の代替テキストとは何ですか？
公開: 2020-09-29序章
Webサイトのコンテンツ内に優れた画像をデザインすることは、オンラインでの存在感を高めるために不可欠です。 ただし、高品質の写真を用意するだけでは、ページで予想されるトラフィック、売り上げ、見込み客を確実に獲得することはできません。 Googleによる画像検索ユーザーインターフェースの再設計により、最高のSEO結果を達成するために写真を最適化する必要があります。 したがって、検索エンジンはそれらを簡単に理解し、ターゲットオーディエンスに対するサイトの可視性を高めます。 SERPでより良い結果を達成するために、画像に代替テキストを利用すると役立ちます。
この記事は、代替テキストとは何か、およびそれをSEO戦略に追加するプロセスについて詳細に説明することを目的としています。 また、画像にnullの代替テキストが含まれるべきかどうか疑問に思う場合は、読み続けてすべての重要な洞察を得てください。
事実：Googleでの検索クエリの22.6％に対して画像が返されます。 さらに、 Z世代とミレニアル世代の消費者の62％は、他のどの新技術よりも視覚的検索を望んでいます。
画像の代替テキストとは何ですか？
代替テキストは、代替属性または代替説明とも呼ばれ、Webページの画像を説明するために割り当てられた約100文字の短いHTML要素です。 頻繁に訪れる人には常に表示されるとは限りませんが、検索エンジンのクローラーが写真の機能と外観を理解するのに役立ちます。 さらに、写真のインデックス作成が改善され、サイトの視認性が向上します。
さらに、画像の代替テキストHTMLは、視覚障害のあるユーザーにより良いWebアクセスを提供するのにも役立ちます。 画像ファイルがページに読み込まれない場合は、代わりに代替の説明が表示され、訪問者にコンテンツの全体像が表示されます。 実際には次のようになります。
代替テキストのベストプラクティス
画像の代替テキストを作成するときは、以下で説明するいくつかのベストプラクティスに従う必要があります。
代替説明でキーワードを使用する
画像に代替の説明を使用する場合は常に、コンテンツ内のキーワードを示す機会を利用してください。 特定の検索クエリに対するページの関連性に関する検索エンジンとの通信を容易にします。
使用する関連性が高く収益性の高いキーワードを決定するのが難しい場合は、代替テキストジェネレーターが非常に役立ちます。 これは、画像の代替説明を最適化するために使用する適切な用語を知るのに役立ちます。 ただし、生成されたすべてのキーワードをalt属性に詰め込むことは避けてください。 その結果、Googleがペナルティを科す可能性のある、巧妙に作成されていない代替テキストが作成されます。 たとえば、下の画像では、優れた代替テキストの例で画像が簡単に説明されていることがわかります。 ただし、下の例では、写真の内容を説明するのにそれほど遠くはありません。
代替テキストは短くしてください
説明的な代替テキストを使用することをお勧めしますが、画像を説明するために段落全体を書くことは避けてください。 ほとんどのスクリーンリーダーは、最大125文字のalt属性をキャプチャするため、簡潔で簡潔なテキストに固執することができます。
要素が多すぎる場合は、ポイントにまっすぐに到達し、画像の最も顕著な特徴を引き出すのが最善です。 重要な側面は、検索エンジンに十分な詳細を提供する必要があり、ユーザーは写真をページのコンテキストに関連付けます。
たとえば、2匹の犬を説明する場合、以下の代替テキストは長すぎます。
- Alt =左側が灰色の犬、右側が長い耳の黒い犬が黄色いカバーでソファに横になっている
優れた代替説明は次のとおりです。
- Alt=ソファに横になっている灰色と黒の犬
また、次のような簡潔な意味を出さないように短すぎる説明は避けてください。
- Alt=2匹の犬
60秒でSEOをテストしてください！
Diibは世界で最高のSEOツールの1つです。 Diibはビッグデータの力を利用して、トラフィックとランキングをすばやく簡単に増やすことができます。 特定のキーワードですでに上位にランク付けする価値があるかどうかもお知らせします。
- 使いやすい自動SEOツール
- キーワードと被リンクの監視+アイデア
- スピード、セキュリティ、+コアバイタルトラッキング
- SEOを改善するためのアイデアをインテリジェントに提案します
- 25万人以上のグローバルメンバー
- 組み込みのベンチマークと競合他社の分析
25万を超える企業や組織で使用されています。
と同期します
具体的に
代替テキストを作成するときは常に、Webページの画像を説明する必要があることに注意してください。 したがって、可能な限り画像に固有のものであることを確認する必要があります。 目的は、すべての検索者が画像を見なくてもすぐに画像を理解できるようにすることです。 画像の代替テキストHTMLをデザインするときは、必ずしも画像を見なくても、説明の関連性を理解できるかどうかを自問してください。
あなたは興味があるでしょう
2021年のeコマースアパレルの市場規模の傾向
有機SEOが重要である理由とその入手方法
ウェブサイトの平均コンバージョン率はどれくらいですか？
あなたのウェブサイトのSEOをあなたの競争相手と比較してください
ページ上のSEOとは何ですか？
SEOを行う方法は？
たとえば、公園で遊んでいる犬の写真を出す場合は、次のように行うことができます。
- Alt=公園で遊ぶオスとメスの黒のジャーマンシェパード犬
説明は、画像が表すものを明確かつ正確に表現します。
一方、次のように書くのは間違いです。
- Alt=芝生で遊ぶ犬
SEOのためだけに代替テキストを書くことは避けてください
代替の説明を書きながら、視認性を高めることを目指すのは理解できます。 ただし、SEOの改善だけに焦点を当てるのではなく、検索者のことも念頭に置いてください。 alt属性は、特定の画像とページのコンテンツに関連したままである必要があることを忘れないでください。 代替テキストは、特に視覚障害者のために使用されます。
引用ボックス：「英国には、失明した人の推定総数（2021年）が2,140,000人います」（SiteLoss Data Tool、RNIB 2021）
したがって、代替テキストにキーワードを詰め込むと、SEOの取り組みを強化するのではなく、検索エンジンのランキングを損なうことになります。 また、両方のシナリオでスパムが発生する可能性があるため、多数の画像に同様のキーワードとalt属性を使用することは避けてください。
フォームボタンを省略しないでください
画像を「送信」ボタンとして使用するフォームがサイトにある場合は、代替テキストを指定するのが最適です。 画像ボタンには、「今すぐ適用」、「検索」、「登録」など、その機能を説明する代替説明が含まれているはずです。
追加の仕様を含めないでください
ユーザーと検索エンジンは、代替テキストがサイト内の画像を参照していると想定していることを忘れないでください。 したがって、「picture of」、「image of」など、alt属性に他の仕様を追加する必要はありません。
longdescを使用することを忘れないでください
あなたはより長い説明を必要とするようにあなたのウェブサイトにいくつかのより複雑な画像を持っているかもしれません。 このような場合は、longdesc='を使用することを忘れないでください。'longdescを使用して探索してください。 これは、技術的にどのように見えるかの良い例です。
画像をテキストとして使用しないでください
SEOに適したウェブ開発では、検索エンジンが画像内のテキストを読み取らないため、単語の代わりに写真を使用することは避けてください。 ただし、必要な場合は、alt属性内で写真の内容を説明するようにしてください。
代替テキストのしくみ
検索エンジンは、私たちと同じように画像を見ることができないことに注意してください。 したがって、写真が何であるかをGoogleが確実に理解できるように、Googleに何らかの支援を提供すると役立ちます。 これは、クローラーがページ上の画像を「見る」のに役立つ代替テキストのアクセシビリティとファイル名を持つように画像に名前を付けることが重要である理由の1つです。
画像に代替テキストを追加する方法
代替テキストの変更を設計および行うために使用できるCMSの大部分は簡単です。 投稿の本文にある写真をクリックするだけで、リッチテキストモジュールまたは画像の最適化を取得して、alt属性を設計できます。
また、ページのWebデザインによっても異なります。 ほとんどの場合、ほとんどのサイトには、写真がアップロードされたときに代替説明を入力するセクションがあります。 さらに、アップロードされた画像に追加の変更を加える機会もあります。 次に、画像テキストHTML形式でページにエンコードされます。
ブラウザの「検査機能」を使用すると、HTMLコードが表示されます。 たとえば、Chromeを使用している場合は、ウェブページの写真をクリックして、ドロップダウンメニューの機能の検査をタップします。 次に、サイトのHTMLタグに「alt=の後にaltの説明」が続くウィンドウが表示されます。
これは、さまざまなプラットフォームで代替テキストを追加する方法の図です。
・WordPress
WordPressを使用する場合、プロセスは簡単です。 エディタウィンドウに移動し、画像をタップします。 「代替テキスト（代替テキスト）」の画像設定に、代替説明を作成または変更するためのフィールドが表示されます。
または、メディアライブラリに移動して、優先する画像をクリックすることもできます。 代替テキストを編集またはデザインできるオプションが表示されます。
（画像クレジット：wpbeginner）
・wix
Wixはまた、プラットフォームをよりSEOに適したものにするための取り組みを強化しました。 ストアの写真に代替説明を追加して、必要な編集を行うことができるようになりました。
編集ウィンドウに移動し、代替テキストを追加する予定の画像を押します。 設定では、「画像の内容」のオプションが表示されます。 この領域に、代替の説明を追加します。 そのページは次のとおりです。
（画像クレジット：wix.com）
・Magento
Magentoは、alt属性を追加するための簡単な手順を提供するもう1つのプラットフォームです。
カタログセクションをタップして、代替テキストを追加する優先製品を選択します。 次に、ビデオと画像のカテゴリまでスクロールし、特定の写真をクリックして、代替の説明を追加または編集します。 Magentoの代替テキスト画面は次のとおりです。
（画像クレジット：Magento）
・Shopify
Shopifyを使用すると、商品とテーマの両方の画像にalt属性を追加できます。
商品写真の代替説明を最適化する場合は、[商品]セクションに移動し、編集する商品リストをクリックします。 アイテムの詳細ページで、メディアアイテムをタップし、プレビューメディアページを探します。 次に、代替テキストを追加します。 例えば：
（画像クレジット：ますます）
テーマ画像にalt属性を追加する場合は、[オンラインストア]セクションに移動し、[テーマ]を見つけて、タップしてストアのテーマをカスタマイズします。 左側にメニューセクションが表示され、画像ブロックと個々の写真をクリックします。 次に、代替の説明を編集または追加できるテキストボックスが表示されます。
Alt Textが優れたSEOに不可欠なのはなぜですか？
画像に代替テキストを追加する方法を学習したので、なぜWebサイトで代替テキストを使用する必要があるのか、誰にメリットがあるのか疑問に思われるかもしれません。 alt属性の最初の受益者である3つの主要なグループは次のとおりです。
- 検索エンジン–代替の説明を使用すると、検索エンジンが特定の画像の主題を解釈するのに役立ちます。 したがって、Googleは、関連する検索結果に写真を含めるタイミングをすばやく判断し、代替テキストの写真が見つかる可能性を高めることができます。
- 視覚障害のある訪問者–代替説明を使用すると、視覚障害のある訪問者に画像の代わりを提供できます。 したがって、ユーザーはテキストを読み上げるプログラムを利用して、写真がコンテンツに何を追加するかを理解できます。
たとえば、そのような人々がナビゲーション画像を使用するWebサイトを閲覧する場合、さまざまなカテゴリを把握するのは困難です。 ただし、写真にalt属性が含まれている場合は、サイト全体を操作できます。
- マーケター–画像に代替の説明を使用すると、ページの検索結果で上位にランク付けされる可能性が高くなります。 その結果、最適化のおかげで、サイトはGoogleでより多くのトラフィックを獲得できます。
特に画像に会社名が含まれている場合は、ブランド認知度を高めるのに役立ちます。 さらに、ページの検索結果が高くなるほど、画像の結果をクリックしてWebサイトにアクセスする人が増えます。
事実：
- WebSpectionのDanMorganは、画像を最適化することにより、4日以内に「カーディフで最高の人物」としてGoogle画像検索で1位にランク付けされた写真の1つを取得しました。
- また、Robbie Richardsは、画像のaltタグを追加したり、画像を圧縮したり、その他いくつかのSEOトリックを行ったりして、150,732回の訪問を生み出しました。
-検索エンジンジャーナル
代替テキストがWebサイトに不可欠である主な理由
- アクセシビリティを改善するには：ほとんどの検索者は通常視覚的に障害があることに注意してください。 したがって、オンラインコンテンツを利用しながら、スクリーンリーダーを使用します。 Altの説明は、ページ上のさまざまな画像を、それらを見ることができない訪問者に説明することになっています。 画像で代替テキスト属性を使用しないと、ユーザーはページのコンテンツを理解できません。 スクリーンリーダーは、そのような写真をスキップしたり、長くて役に立たないファイル名を読んだりすることになります。
- トピックの関連性を高めるために： Googleがページのコンテンツを理解するために、使用されているさまざまな用語を調べます。 一方、サイトに画像を含めると、検索エンジンはその目的を理解できません。 したがって、画像内でコンテキストが「ロックされている」可能性があるため、alt属性が必要です。
- Google画像検索でのランク付けを支援するには：代替テキストを使用すると、Google画像検索エンジンでページを上位にランク付けするのにも役立ちます。 さらに、写真を探す際に、BingやYouTubeなどの他のプラットフォームよりも優先されるようになっています。
- 画像リンクのアンカーテキストとして機能するには：多くのサイトでは、アンカーテキストは1つのページを別のページにリンクします。 検索エンジンはそれらを使用して、Webサイトとそれに伴うものについてより深く理解します。 同じ目的を果たすためにalt属性を使用することもできます。
- 画像にnullの代替テキストを含める必要がある場合：検索エンジンでのランキングを上げるために、画像に常にalt属性を含めるようにすることをお勧めします。 同時に、画像にnullの代替テキストを含める必要があるのはいつかを尋ねる場合があります。
場合によっては、代替テキストを使用する必要はありません。特に、画像に重要な詳細が含まれていない場合や、装飾目的で使用されている場合はそうです。
たとえば、Webサイトでアイコンを使用してさまざまなコンテンツセクションを区切る場合、画像はページをきれいに見せるためのものです。 したがって、代替テキストを追加する必要はありません。スクリーンリーダーでユーザーを煩わせる可能性があり、ページにSEO値が追加されないためです。
さらに、ストック画像と一般的な画像にも代替テキストのアクセシビリティは必要ありません。 その上、それを挿入することは視覚障害のある読者にとっては役に立ちません。
この記事がお役に立てば幸いです。
サイトの状態についてもっと興味深いことを知りたい場合は、個人的な推奨事項やアラートを取得し、DiibでWebサイトをスキャンしてください。 たった60秒です。
代替テキストの問題を見つけて修正する方法
代替テキストでより良い結果を達成したい場合は、トラフィックのあるページで監査を実施して必要な機能強化を行うと役立ちます。 精査を行うために使用できる手順は次のとおりです。
最も訪問されたページを見つける
まず、オーディエンスが最も有機的にアクセスしたページを知るために徹底的なチェックを行うことから始めます。 Google Search Console、Google Analytics、またはAhrefsサイトエクスプローラーの「トップページ」のレポートなど、さまざまなプラットフォームを利用できます。
altの説明を監査する
alt記述の監査を行うときは、Alt TextTesterChrome拡張機能を使用できます。 無料のツールをインストールすることから始め、次にトラフィックが最も多いページをロードして、拡張機能をアクティブにします。 これは次のようになります。
写真をロールオーバーすると、プラットフォームに代替の説明が表示されます。 alt属性が欠落している場合は、「altテキストが欠落しています」という警告が表示されます。
コンテンツ内のすべての代替テキストについて、画像内のそれらのいくつかを調べてください。 数回のチェックの後、ツールは、写真が不十分または十分に最適化されているかどうかを判断するのに役立ちます。
さらにページを繰り返す
最後のプロセスでは、最も多くのトラフィックを生成したページに対して同じ手順を繰り返す必要があります。 このプロセスにより、代替記述の最適化が優れているのか、それともいくつかの機能強化が必要なのかがわかります。
Diib：代替テキスト統計と監視を提供します！
Webサイトの所有者として、使用するWebプラットフォームに関係なく、代替の説明を追加するのは簡単です。 また、検索エンジンや視覚障害のある人には意味がないため、ページ上のすべての画像に代替テキストが必要なわけではないことに注意してください。 Diibユーザーダッシュボードは、WebサイトとFacebookプロファイルのすべての代替テキストを分析し、改善のための実用的な洞察を提供します。 これがあなたが気に入ると私たちが知っている機能のいくつかです：
- カスタムアラート。ウェブサイトの状態や、トラフィックパターンに影響を与える可能性のあるGoogleアルゴリズムの変更について通知します。
- あなたのウェブサイトの健康と有機的なトラフィックを改善する方法に関するカスタマイズされた提案を伴う目的。
- あなた自身の代替テキストの健全性だけでなく、主要な競合他社の健全性への洞察。
- Facebookプロファイルを同期して、ソーシャルメディアキャンペーンの詳細についての洞察を提供します。 個々の投稿のパフォーマンス、ユーザーの人口統計、投稿するのに最適な時間帯、コンバージョンなど。
- Diibの成長の専門家との毎月の共同セッションを提供して、SEOの取り組みを微調整し、Shopifyの成長と成功に導くことができます。
今日800-303-3510に電話するか、ここをクリックして無料の60 Webサイトスキャンを取得し、SEOの長所と短所について詳しく学んでください。