Altテキスト

Altテキストとは何ですか?

Alt text(代替テキスト)は、”alt属性”、”alt説明”、または技術的には”altタグ”としても知られており、HTMLコード内でページ上の画像の外観と機能を記述するために使

Altテキストは

1を使用します。 写真に代替テキストを追加することは、まず第一にwebアクセシビリティの原則です。 スクリーンリーダーを使用する視覚障害者は、ページ上の画像をよりよく理解するためにalt属性を読み取られます。

2., 画像ファイルを読み込めない場合は、画像の代わりにAltテキストが表示されます。

3. Altテキ

強調表示されたテキストは、画像のaltテキスト(alt属性)を左に表示します。

Altテキストの例

<img src="https://moz.com/learn/seo/pupdanceparty.gif" alt="Puppies dancing">

最適なAltテキスト形式

altテキストの最適な形式は十分に説明的ですが、キーワードスタッフィング, 目を閉じて、誰かにaltテキストを読んでもらい、画像の合理的に正確なバージョンを想像することができれば、あなたは正しい軌道に乗っています。

ブルーベリーパンケーキの美味しそうなスタックのこの画像のaltテキストのいくつかの例を見てみましょう:

Okay:<img src="https://moz.com/learn/seo/pancakes.png" alt="pancakes">

このaltテキストは”okay”それは非常に説明的ではないので。 はい、これはパンケーキの積み重ねのイメージです。 しかし、このイメージについて言われるべき多くがある。,

良い:

<img src="https://moz.com/learn/seo/pancakes.png" alt="Stack of blueberry pancakes with powdered sugar">

このaltテキストは、画像の内容をはるかに説明的であるため、より良い選択肢です。 これは単なる”パンケーキ”のスタックではありません(最初のaltテキストの例で示されているように);それは粉砂糖の散布とブルーベリーパンケーキのスタック

推奨されません:

<img src="https://moz.com/learn/seo/pancakes.png" alt="">

または

<img src="https://moz.com/learn/seo/pancakes.png" alt="pancake pancakes pan cake hotcakes hotcake breakfast food best breakfast top breakfasts breakfast recipes pancake recipe">

これらの例はどちらも推奨されません。, コードの最初の行には、実際にはaltテキストがまったく含まれていません(引用符が空であることに注意してください)。

Altテキストが重要なのはなぜですか?

アクセシビリティ

Altテキストは、アクセシブルなwebデザインの教義です。 その元の(そしてまだ主な)目的は、それらを見ることができない訪問者に画像を記述することです。 これには、画像をブロックするスクリーンリーダーやブラウザーが含まれますが、視覚障害や画像を視覚的に識別できないユーザーも含まれます。, を含むaltテキストと画像を確保すべてのユーザー、視力を鑑賞できるコンテンツサイトです。

Image SEO

画像にaltテキストを使用すると、ユーザーエクスペリエンスが向上しますが、明示的および暗黙的なSEOの両方の利点を得ることもできます。 対して、画像のタイトルおよびファイル名の付けるベストプラクティスを含むaltテキストに貢献する可能性もあります画像です。,

検索エンジンの画像認識技術は長年にわたって大幅に改善されていますが、検索クローラーはまだウェブサイトのページ上の画像を”見る”ことができませんので、解釈を自分の手だけに任せることは賢明ではありません。 決めなければならないわやかですがランクのための意図しないキーワードまたは見逃ランキング。

ここに例があります:Googleは次の画像を見て、それが机に座って、ネクタイとメガネを身に着けている男だと解読することができるかもしれません。,

オフィスのジム-ハルパート(米国版)

“ジム-ハルパートのドワイト-シュルートの偽装”をランク付けしようとしている場合は、検索エンジンに救いの手を貸す必要があります。

その意味で、altテキストはあなたのターゲットキーワードを含める別の機会を提供します。, ページ上のキーワードの使用法がまだサーチエンジンのランキングの要因として重量を引っ張っていて、それはイメージを記述し、可能であれば、あなたが目標と

良いaltテキストを書くにはどうすればよいですか?

  1. できるだけ具体的にイメージを記述します。 Alt textは、何よりもまず、画像を見ることができないユーザーに画像のテキスト説明を提供するように設計されています。 画像が本当に意味/価値を伝えず、デザイン目的のためだけに存在する場合は、HTMLではなくCSS内に存在する必要があります。,

  2. それを(比較的)短くしてください。 最も人気のあるスクリーンリーダーは、約125文字でaltテキストをカットオフするので、その文字数またはそれ以下に保つことをお勧めします。

  3. あなたのキーワードを使用しなさいAltのテキストはページにあなたのターゲットキーワードを含める別の機会を提供し、こうしてあなたのページが特定の調査の問い合わせに非常に関連していること, あなたの最優先事項は、画像にコンテキストを記述し、提供する必要がありますが、それがそうすることが理にかなっている場合は、ページ上の少なくと

  4. キーワードの詰め込みを避けます。 Googleは不完全に書かれたaltのテキストのためのポイントをつながないが、それにについて考えることができると同様に多くの関連したキーワードを詰め 書く記述altテキストを提供するコンテキスト、イメージできれば、目標をキーワードにしたいです。

  5. 画像をテキストとして使用しないでください。, これは、altテキスト固有のベストプラクティスのより少なく、一般的なSEOに優しいweb開発の教義の多くです。 検索エ そうする必要がある場合は、altテキスト内で写真が何を言うかを説明してください。

  6. “の画像”、”の画像”などを含めないでください。 あなたのaltテキストで。 すでにaltテキストが画像を参照していると想定されているため、指定する必要はありません。

  7. longdesc=””を忘れないでください。 より長い説明を必要とするより複雑な画像には、longdesc=””タグを使用して検討してください。,

  8. フォームボタンを無視しないでください。 ウェブサイト上のフォームが画像を”送信”ボタンとして使用している場合は、alt属性を指定します。 画像ボタンには、”検索”、”今すぐ適用”、”サインアップ”などのボタンの機能を説明するalt属性が必要です。

良いaltテキストはどのように見えますか?,3″>

大丈夫altテキスト:<img src="https://moz.com/learn/seo/kwe.png" alt="kw explorer">

より良いaltテキスト:<img src="https://moz.com/learn/seo/kwe.png" alt="keyword research in Keyword Explorer">

ベストaltテキスト:<img src="https://moz.com/learn/seo/kwe.png" alt="Moz Keyword Explorer tool for SEO keyword research">

学習を続ける

  • googleの画像公開ガイドライン
  • ページ上のランキング要因
  • メタ説明

スキルを働かせる

moz proのページ最適化セクションでは、完全な検索可視化の可能性に応じていないページを強調しています(ページにaltテキストがないかどうかなどが含まれています)。)である。, それを試してみてください>>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ツールバーへスキップ