画像タイトル対代替テキスト：どちらが良いですか？
公開: 2020-12-09新しい検索エンジン最適化の傾向があっても、写真は百万語の価値があるという声明は依然として保持されています。 単一の高品質の画像は、Webサイトのコンテンツに生命を吹き込む可能性があります。 さらに、適切に記述されたHTML imgタイトルは、ユーザーエクスペリエンスを向上させる確実な方法です。
しかし、写真がすべてコンテンツと画像のマッチングに関するものだと思っているのなら、あなたは驚きに満ちています。 画像を使用して、Web訪問者だけでなく、検索エンジンにもアピールできます。 ただし、画像が示す力を最大限に発揮するには、内部を少し覗いて、Webサイトに画像を表示するHTMLコードを理解する必要があります。
画像タグのコンポーネントを確認したら、検索エンジンのランキングに影響を与えるコンポーネントを最適化するために進むことができます。 通常、対象となる項目はimgsrctitleとHTMLimgalttitleです。 あなたはこれらの2つがあなたのウェブサイトで果たす役割を知っていますか？ 答えはこの記事の主題になります。
画像のタイトルと画像の代替テキストを理解する
タイトルと代替テキストの違いを知る最も簡単な方法は、HTML画像タグを調べることです。 あなたのウェブサイトが家具を販売するオンラインショップであるとすると、ロッキングチェアの画像に関するサンプルタグは次のようになります。
img src =” rocking-chair.jpg” alt =”販売中の茶色のロッキングチェア” title =”茶色のロッキングチェア”
Webデザインでは、等号のあるアイテムは名前属性を取得します。 上記の例は単なる例示であることに注意してください。 実際のアプリケーションでは、属性ははるかに多く、クラス、ID、高さ、幅などが含まれる場合があります。
タグから、代替テキストとタイトルを識別するのは簡単です。 alt属性は、HTMLタイトルの画像タグと比較してより有益であることに気付くかもしれません。 両方の属性の使用法を一目見ると、これがなぜそうなのかがわかります。
画像のタイトルは何に使用されますか？
タイトルは、ユーザーがWebサイトの画像にカーソルを合わせると表示されます。 したがって、画像が読み込まれた後にのみ表示されます。 ユーザーがタイトルを見るまでに、ユーザーはすでに画像を表示しています。 したがって、それは非常に説明的である必要はありません。 例えば：
ただし、ユーザーエクスペリエンスを向上させるには、タイトルが非常に重要です。 信じられないかもしれませんが、訪問者は、Webサイトの一部の写真がサイトの特定の部分に表示される理由を理解するのが難しい場合があります。 タイトルは答えを提供するのに役立ちます。
一部のブラウザでは、画像にカーソルを合わせてもタイトルが表示されません。 ただし、訪問者がWebサイトをナビゲートするために何を使用するかわからないため、画像タグにtitle属性を含めることをお勧めします。
代替テキストは何に使用されますか？
代替テキストは複数の目的を果たします。 次のように分類できます。
- 代替テキストは、画像の読み込みに失敗するたびに表示されます。 ほとんどすべてのブラウザでは、空の画像を表す代替の説明が許可されています。 画像ファイル名が間違っているか、URLが壊れている可能性があります。 インターネット接続が不十分な場合も、写真を適切に読み込むことができなくなる可能性があります。 このような場合、img altタイトルが表示され、訪問者に画像についてすべて説明します。
- 代替テキストは、ユーザーが画像をオフにしたときにも表示されます。 画像がWebページを美しくするのと同じように、一部のユーザーはテキストのみのバージョンを好みます。 したがって、彼らは代替テキストを読むことによって写真について知ることができます。
- 目の不自由なユーザーも、よく書かれたimgaltタイトルの恩恵を受けます。 スクリーンリーダーは、それらを使用して、画像を見ることができない訪問者に画像を説明します。 一般的に、代替テキストはサイトのアクセシビリティを向上させるのに役立ちます。 最大限のアクセシビリティの重要性は非常に大きいため、W3Cは代替テキストを提唱しています。 ガイドラインの1行には、「img要素を使用する場合は、alt属性を使用して代替テキストを指定してください。」と書かれています。
- 最後に、検索エンジンは代替テキストを使用して、画像が何であるかをよりよく理解します。 したがって、代替テキストは、Webサイトの他のコンテンツと同じようにクロール可能です。 以下の画像は、代替テキストの例を示しています。
（画像クレジット：MDN-Mozilla）
より重要なもの：画像のタイトルまたは代替テキスト？
タイトルと代替テキストの使用リストを確認した後、alt属性をより重要なものとしてラベル付けするのが安全です。 しかし、タイトルが役に立たないと考えるのは間違いです。 実際には、どちらの項目も、目標に応じて重要になる可能性があります。
ユーザーエクスペリエンスの向上が主な関心事である場合は、タイトルが主な焦点となります。 前述のように、タイトルを使用して画像に関する追加の詳細を提供できます。 ユーザーがその上にカーソルを合わせると、説明がポップアップ表示されます。
あなたは興味があるでしょう
ビジネスを成功させる方法
ウェブサイトの読み込み速度：最適化のためのツール
ウェブサイトのヘルスチェック：ツールとヒント
UXとはどういう意味ですか？
しかし、なぜ検索エンジンは画像のタイトルにあまり注意を払わないのでしょうか。
ええと、答えは検索エンジンの開発と大いに関係があります。 開発者は1999年にGoogleのコードベースのほとんどを書きました。翌年にも重要な追加がありました。 ただし、人気がなく、発見されていないHTML要素を考慮したことはありません。 Webデザイナーはタイトルを頻繁に使用しなかったため、タイトルを提供する理由はありませんでした。 コアコードの更新により、HTMLタイトルの画像タグが他の属性ほど重要になることはありませんでした。
あなたがSEOについて考えているなら、あなたの焦点は代替テキストであるべきです。 Googleは、alt属性内の情報を通常のウェブページコンテンツとして扱うことを忘れないでください。 したがって、インデックスを作成します。 さらに、検索エンジンで画像のクロールに問題が発生する可能性があります。 Altテキストは、画像が何であるかを知るための優れた方法を提供します。
さらに、代替テキストはWebサイトのアクセシビリティをまったく新しいレベルに引き上げます。 遅延読み込みなどの手法にもかかわらず、サイト上のすべての画像が100％の時間で読み込まれることを保証することはほとんど不可能です。 訪問者は、画像をオフにしたり、接続が非常に遅いために画像が読み込まれない場合があります。 代替テキストで武装しているので、ユーザーは画像が読み込まれるかどうかについて画像が何であるかを確実に知ることができます。
結論として、代替テキストの重要性はタイトル属性をはるかに上回っています。 それらの用途は比較的多く、Webサイトのランキングへの影響は注目に値します。 タイトルと代替テキストの両方を最適化することは重要ですが、代替属性の情報をより重視することをお勧めします。
SEOのための代替テキストの最適化
SEOは、高品質のトラフィックを有機的に促進するための最も確実な手段の1つであり続けています。 ウェブサイトを最適化する方法はたくさんありますが、代替テキストを完成させることは、トラフィックを増やすためにサイトの画像を設定するのに理想的です。 幸いなことに、プロセスは簡単です。 考慮すべきいくつかの慣行は次のとおりです。
60秒であなたのサイトのSEOとパフォーマンスをテストしてください！
優れたウェブサイトのデザインは、訪問者のエンゲージメントとコンバージョンにとって重要ですが、ウェブサイトの速度が遅い、またはパフォーマンスのエラーがあると、最適にデザインされたウェブサイトでさえパフォーマンスが低下する可能性があります。 Diibは、世界で最高のWebサイトパフォーマンスおよびSEO監視ツールの1つです。 Diibはビッグデータの力を利用して、トラフィックとランキングをすばやく簡単に増やすことができます。 起業家に見られるように！
- 使いやすい自動SEOツール
- キーワードと被リンクの監視+アイデア
- スピード、セキュリティ、+コアバイタルトラッキングを保証します
- SEOを改善するためのアイデアをインテリジェントに提案します
- 25万人以上のグローバルメンバー
- 組み込みのベンチマークと競合他社の分析
25万を超える企業や組織で使用されています。
と同期します
人間のために書く
代替テキストを書くことになると、親指のルールは「目の見えない人のために書いているように書く」です。 代替テキストが表示される場合を考慮すると、常にルールを遵守しても害はありません。 前述のように、画像を表示できない場合は、imgaltタイトルに含まれる情報が表示されます。 したがって、あなたはそれが隠された絵についてすべてを伝えることを望みます。
そのため、人間が読んで理解できるステートメントを記述します。 さらに重要なのは、説明文を作成することです。 目の見えない人があなたのサイトをナビゲートしている可能性があり、あなたが入力したものだけが通り過ぎるでしょう。 以下の画像は、同じ画像の代替テキストの良い例と悪い例を示しています。
（画像クレジット：Webホスティングハブ）
検索エンジンのために書く
代替テキストは、ユーザーだけでなく検索エンジンにも画像の説明を提供します。 したがって、それにキーワードを含めます。 他のコンテンツと同様に、画像が含まれているWebページの一般的な流れに韻を踏むキーワードが含まれていることに注意してください。
同じように、キーワードの乱用などの不適切なSEO慣行は避けてください。 検索エンジンはあなたのコンテンツにスパムのフラグを立て、それがあなたのランキングを下げ続けます。 キーワードを詰め込むよりも、代替テキストをうまく書かない方が良いです。 チェックとして、画像の70％以上でキーワードを使用していないことを確認してください。
短くしてください
altテキストは画像を説明しているため、alt属性の引用符に多くの単語を入れたくなるかもしれません。 ただし、そうすることは控えてください。 検索エンジンはそれであなたを罰することはありませんが、彼らの関心は代替の説明の最初の16語にあります。 125文字の代替テキストは、ユーザーエクスペリエンスを損なうことなく、画像を適切に説明する必要があります。
ただし、画像に長い説明が必要だと思われる場合は、「longdesc」属性を使用することをお勧めします。 HTML4とその後継では、画像タグでこの属性を使用できます。
代替テキストの例
SEOを始めたばかりの場合、良い代替テキストと不十分な代替テキストの違いを理解するのは少し難しいかもしれません。 したがって、例を見ると便利です。 説明のために、ウェブサイトに赤いスピード違反の車の画像を想像してみてください。
画像タグは次のようになります。
img src =” speeding-car.jpg” alt =” red car” title =” car”
このような場合、代替テキストは理想的ではありません。 画像に関する情報はほとんど提供されません。 より良いバージョンは次のように表示される場合があります。
img src =” speeding-car.jpg” alt =”高速道路でスピード違反の赤い車” title =” car”
高速道路の名前を知っている場合は、代替テキストでそれを言及しても害はありません。 とにかく、キーワードやキーワードの乱用を危うくしないでください。 たとえば、ウェブページのキーフレーズが「赤い車」の場合は、次のような説明を避けてください。
img src =” speeding-car.jpg” alt =”これは赤い車です。 赤い車はとても速く動いていて、とても美しい赤い車です” title =” car”
上記の説明は画像のみに焦点を当てていますが、キーワードの乱用は画像を汚します。 検索エンジンは、そのようなスパムのフレーズに眉をひそめるでしょう。 2番目の文は、画像に関する有用な情報をユーザーに提供できません。 したがって、賢明なことはそれを除外することです。
代替テキストを追加する方法
画像タグに代替テキストを含める手順は、Webサイトの作成に使用した内容によって異なります。 Webサイトのハードコードを記述した場合は、代替属性を手動で追加することをお勧めします。 例えば：
ただし、今日のWeb開発には、ハードコーディングはほとんど含まれていません。 コンテンツ管理システム（CMS）またはWebサイトビルダーを使用した可能性があります。 すべてのテキストを追加するときに、Webデザインツールが使用するプロセスを確認してください。 通常、この方法論には2つまたは3つのステップがあります。
世界で最も人気のあるCMSであるWordPressでは、HTMLimgaltタイトルを追加することは公園を散歩することです。 アカウントにログインしたら、問題の画像を見つけて[編集]ボタンをクリックします。 入力フィールドは、代替属性のデータを受信する準備ができているように見えます。
WordPressのメディアライブラリに代替テキストを含めることができます。 画像を選択したら、画像の添付ファイルの詳細の下に表示される代替の説明入力フィールドを見つけます。 例えば：
（画像クレジット：WPBeginner）
Alt属性を空のままにするタイミング
alt属性がSEOで重要な役割を果たしていることを考えると、それらを空のままにしておくのが良い考えであるとは信じがたいかもしれません。 位置の目的でのみウェブサイトに配置された画像を想像してください。 画像はコンテンツと韻を踏むことも、コンテンツに付加価値を与えることもありません。 Webデザイナーは、ページを装飾することを唯一の目的として、このような画像を使用する場合があります。
このようなデザインのみの画像には、nullの代替属性が含まれる場合があります。 それらを説明することは、利用可能なコンテンツに価値を付加しないため、無分別です。 スクリーンリーダーは画像をスキップします。これは、ユーザーがページをよりよく理解するのに役立たないためです。
単語を含む画像の代替テキストを除外することもお勧めします。 すべての情報は画像にあります。 したがって、単語の説明は関係ありません。
タイトルの最適化
タイトルは検索ランキングに影響を与えないので、それについてすることはあまりありません。 ほとんどの場合、代替テキストよりも短く、説明が少なくなります。 タイトルは、画像に関する詳細情報を提供するのではなく、画像に名前を付けます。
ただし、W3Cは、画像タグにタイトルを含めることを公然と主張しています。 写真にタイトルを付けないと、HTMLコードがW3Cで無効になる可能性があります。
タイトルを書くときは、短いだけでなく、キャッチーなテキストを作成してください。 とは言うものの、一言のタイトルはノーノーです。 画像を説明し、10語以内で構成されるフレーズで十分です。 例えば：
時々省略される可能性のあるaltタグとは異なり、画像タイトルの除外を保証する特別な出現はありません。 無題の画像は、ユーザーエクスペリエンスを損なうだけです。 したがって、ヌルのHTMLタイトル画像タグをレンダリングしないことがSEOスペシャリストの最大の利益になります。
この記事がお役に立てば幸いです。
サイトの状態についてもっと興味深いことを知りたい場合は、個人的な推奨事項やアラートを取得し、DiibでWebサイトをスキャンしてください。 たった60秒です。
その他の画像に関する考慮事項
間違いなく、画像には代替テキストやタイトルよりも多くのものがあります。 前者を最適化し、後者を完成させることは、方程式の一部にすぎません。 画像がSEOに与える影響を十分に活用するには、次のWeb画像のベストプラクティスを検討してください。
重要なテキストデータを画像から遠ざける
画像に言葉を描くよりも、言葉を書くほうがいいです。 検索エンジンは画像を詳細にクロールせず、画像内の単語にアクセスできないことを忘れないでください。 HTMLがテキストデータを希望どおりに出力できない場合を除いて、たとえば、複雑な化学反応式を作成する場合は、単語で埋められた画像を避けてください。
ただし、グラフを表示するために画像を使用しても害はありません。 HTMLが機能を提供する場合がありますが、画像は優れたソリューションです。
コンテキストに注意
表示する画像は、セクションが提供する情報と調和している必要があります。 アウトドアウェアについて説明しているページに車の画像を含めるのは悪い考えです。 同時に、画像をできるだけオリジナルにします。 検索エンジンは、本物のコンテンツを重視するため、オリジナルの写真を重視します。
良い画像ファイル名を書く
ファイル名は、画像タグのimgsrctitle属性に表示されます。 検索エンジンはそれを使用して、サイトの画像について詳しく知ることができます。
デフォルトでは、画像には次のような英数字のファイル名があります。
A00002.jpg
写真の内容を反映するように名前を変更してください。 その間、1語を超えるファイル名をハイフンでつなぐことを忘れないでください。 red-car-on-highyway.jpgのような名前は、ハイフンがない場合、検索エンジンが読み取るのが困難になります。 ただし、画像形式、つまりピリオドの後の文字は変更しないでください。 フォーマットがファイル名で指定されたものと異なる場合、ブラウザが混乱する可能性があります。
あなたの画像にSEOの違いを生み出させましょう
SEOに関しては、コンテンツが王様であるという議論はありません。 しかし、画像は言葉と同じくらいあなたのウェブサイトのコンテンツの一部です。 HTML imgタイトルを完成させ、HTML img altタイトルを最適化する方法を学ぶことで、画像を使用してサイトのランキングを上げることができます。
Diib：今日の画像タイトルを最適化してください！
SEOに画像を使用することに行き詰まった場合は、画像の最適化専用の何百ものツールをチェックすることを忘れないでください。 あなたがあなたのビジネスに集中するときあなたはまたあなたのウェブサイトを手伝うためにSEO専門家を雇うかもしれません。 しかし、これまで考える前に、まず最初に画像を使用して、自分でトラフィックを増やしてください。 次に、Diib Digitalと提携して、画像タイトルを最大限に活用します。 ユーザーダッシュボードには、特に画像のタイトルを最適化するように設計されたアラートと目的が表示されます。
群衆から私たちを際立たせるいくつかの機能は次のとおりです。
- Webサイトのパフォーマンスを向上させるように設計されたカスタマイズされた目標
- ドメインオーソリティのその他の技術的なSEOの問題について通知するアラート
- あなたがバックリンクを持っている壊れたページ（404チェッカー）
- キーワード、バックリンク、およびインデックスの監視および追跡ツール
- ユーザーエクスペリエンスとモバイル速度の最適化
- 画像タイトルの最適化
- プラットフォーム固有のポストパフォーマンス
無料スキャンについてはここをクリックするか、800-303-3510に電話して、成長の専門家の1人に相談してください。