「Alt属性」の版間の差分
Masahiko Tsuji (トーク | 投稿記録) (ページの作成:「alt属性とは、画像の変わりとなるテキスト情報のことを指す。何らかの事情で画像が表示できない場合にテキストが表示され、代替テキスト、altタグとも呼ばれる。 Google検索においては、画像にリンクを貼る場合にはalt属性が「アンカーテキスト」と同様に扱われる。 alt属性がランキング要因であることやSEOに有効であることGoogleは伝えていない…」) |
Masahiko Tsuji (トーク | 投稿記録) |
||
| (同じ利用者による、間の5版が非表示) | |||
| 1行目: | 1行目: | ||
alt属性とは、画像の変わりとなるテキスト情報のことを指す。何らかの事情で画像が表示できない場合にテキストが表示され、代替テキスト、altタグとも呼ばれる。 | alt属性とは、画像の変わりとなるテキスト情報のことを指す。何らかの事情で画像が表示できない場合にテキストが表示され、代替テキスト、altタグとも呼ばれる。 | ||
Google検索においては、画像にリンクを貼る場合にはalt属性が「[[アンカーテキスト]]」と同様に扱われる。 | |||
また、正しいalt属性を利用することにより、ウェブアクセシビリティが向上し、SEOに与える影響があるものだと考えられている。 | |||
< | == SEOのベストプラクティス == | ||
alt属性におけるSEOのベストプラクティスは以下の通り。 | |||
* alt属性を使用し、正しく記載する | |||
* 画像周りのテキストと画像の内容が一致していること | |||
* 画像のキャプションが必要であれば、入れること | |||
* そのページの[[titleタグ]]と関連がある画像であること | |||
=== alt属性のファイル名の書き方 === | |||
良いalt属性の書き方として、Googleは「'''簡潔でわかりやすいファイル名と alt テキストを使用する'''」ことを伝えている。 | |||
また、サイトナビゲーションとして画像のリンクのみを使用することも避けるべき方法としているの。 | |||
=== alt属性の書き方の注意点 === | |||
* 画像を具体的に説明すること | |||
* alt属性の文字数を短くすること | |||
* 画像SEOのためのキーワードの乱用は避けること | |||
* キーワードを並べた書き方を避けること | |||
* alt属性に「~の画像」などを含めないこと | |||
* 文章全体や一部の内容をコピーして貼り付けないこと | |||
ボタンなど、すべての画像にはalt属性を利用することを心がけ、「'''最大約125文字以下（日本語の場合は62文字程度）'''」で記載する。 | |||
また、画像により長い説明が必要な場合は「[[longdesc属性]]」を利用する。 | |||
=== ファイル名の注意点 === | |||
画像のファイル名は日本でも「英文」で伝えたほうが良く「簡潔でわかりやすいファイル名」を指定する。 | |||
例えば、「image1.jpg」「pic.gif」「1.jpg」など一般的なファイル名をつけることは避ける。 | |||
=== Googleは画像の中のテキストも認識が可能 === | |||
Google検索において、OCR（光学文字認識）を利用して、画像の中の文字を抽出はできる。（また、AIを活用して、何が写っているかを理解することも可能。） | |||
しかし、画像の情報をGoogleに伝えるためには、alt属性を利用することが推奨される。 | |||
これらの情報はYouTubeの「[https://www.youtube.com/watch?v=BFHB0WbQyMk English Google SEO office-hours from March 2023]」の中で、リッジィ・サースマン（Lizzi Saasman）が質問に回答した。 | |||
<youtube>BFHB0WbQyMk</youtube> | |||
== alt属性・ファイル名等の書き方例 == | |||
=== 書き方例1 === | |||
[[ファイル:Pancake-alt.png|代替文=はちみつとブルーベリーのパンケーキ|サムネイル|はちみつとブルーベリーのパンケーキ]] | |||
ブルーベリーのパンケーキ画像の例を元に、説明していく。 | |||
==== 悪いalt属性・ファイル名 ==== | |||
//悪いalt属性・ファイル名 | |||
<img src=”111.png” alt=”パンケーキの画像“> | |||
alt属性に「パンケーキ」を入れていますが、「の画像」と入っている駄目な例。 | |||
また、画像のファイル名に数字が入っており、一般的なファイル名を使用する駄目な例。 | |||
==== 良いalt属性・ファイル名 ==== | |||
//良いalt属性・ファイル名 | |||
<img src=”pancake.png” alt=”はちみつとブルーベリーのパンケーキ“> | |||
alt属性に「はちみつとブルーベリーのパンケーキ」と画像の詳細内容を説明。 | |||
はちみつとブルーベリーのパンケーキを想像して、画像を見るとその通りだと感じれる内容が良い。 | |||
また、ファイル名も「pancake.png」と画像との関連性があるファイル名に指定してる。 | |||
=== 書き方例2 === | |||
[[ファイル:Escalator.png|代替文=エスカレーターにキャリーバックを持って乗っている男性|サムネイル|エスカレーターにキャリーバックを持って乗っている男性]] | |||
エスカレーターに乗っている男性の画像のalt属性、ファイル名の例。 | |||
==== 悪いalt属性・ファイル名 ==== | |||
//悪いalt属性・ファイル名 | |||
<img src=”image.png” alt=”“> | |||
alt属性が空欄となっており、画像のファイル名一般的なファイル名を使用している駄目な例。 | |||
==== 良いalt属性・ファイル名 ==== | |||
//良いalt属性・ファイル名 | |||
<img src=”escalator.png” alt=”エスカレーターにキャリーバックを持って乗っている男性“> | |||
alt属性に画像の具体的で簡潔な情報を説明があり、ファイル名も「escalator（エスカレーター）」とシンプルで画像と関連がある。 | |||
== SEOに与える影響 == | |||
SEOに与える影響は、Google正確にはランキング要因であることや（画像SEOを除く）SEOに有効であることは伝えていない。 | |||
ただし、alt属性がSEOに有効な（[[ランキングシグナル]]）理由としては、以下のことが考えられる。 | |||
* 画像を表示しないブラウザの場合変わりにAlt属性が表示される（[[ウェブアクシビリティ|ウェブアクセシビリティ]]） | |||
* 音声ブラウザの場合、alt属性が読まれる（ウェブアクセシビリティ） | |||
* 画像の読み込み完了前に表示される（ウェブアクセシビリティ） | |||
画像が何らかの事情で見ることが出来ないユーザーの場合でも、alt属性が入っていることで視覚的な能力に関係なくコンテンツを評価することが出来る。 | |||
そのため、alt属性を使うことでユーザーエクスペリエンス（利用者の体験）が向上する。 | |||
=== スクリーンリーダー等の技術に対応できる === | |||
Google「[https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ja 検索エンジン最適化（SEO）スターター ガイド]」において、以下の回答をおこなっている。<blockquote>この属性を使用するのは、ユーザーがスクリーン リーダーのようなサポート技術を使ってサイトを閲覧する場合に、<code>alt</code> 属性の内容が画像についての情報を提供するためです。</blockquote> | |||
=== 画像をリンクで利用する場合、アンカーテキストと同様に扱われる === | |||
Google「[https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ja 検索エンジン最適化（SEO）スターター ガイド]」において、以下の回答をおこなっている。<blockquote>画像をリンクとして使用する場合、その画像の alt テキストが、テキストリンクのアンカー テキストと同様に扱われることです。ただし、テキストリンクで同じ目的を果たせる場合は、サイトのナビゲーションに画像を使いすぎることはおすすめしません。</blockquote> | |||
=== Google画像検索が適切に理解しやすくなる === | |||
Google「[https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ja 検索エンジン最適化（SEO）スターター ガイド]」において、以下の回答をおこなっている。<blockquote>画像のファイル名と alt テキストを最適化すると、Google 画像検索のような画像検索プロジェクトが画像を適切に理解しやすくなります。</blockquote> | |||
== 良くある質問 == | |||
=== altテキストは何文字で入力することがベターか？ === | |||
英語の場合は最大約125文字以下のため、日本語では62文字程度で具体的な説明を入れる。 | |||
altテキストを長くても20文字から30文字を目安にすることを推奨。 | |||
=== altテキストは単語か文章どちらで入れる？ === | |||
句読点がない文章で入れる。 | |||
== 出典 == | |||
* [https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ja 検索エンジン最適化（SEO）スターター ガイド]（Google検索セントラルブログ） | |||
* [https://moz.com/learn/seo/alt-text Alt Text What is Alt Text?]（Moz） | |||
[[Category:画像のSEO]] | |||
2023年3月20日 (月) 18:07時点における最新版
alt属性とは、画像の変わりとなるテキスト情報のことを指す。何らかの事情で画像が表示できない場合にテキストが表示され、代替テキスト、altタグとも呼ばれる。
Google検索においては、画像にリンクを貼る場合にはalt属性が「アンカーテキスト」と同様に扱われる。
また、正しいalt属性を利用することにより、ウェブアクセシビリティが向上し、SEOに与える影響があるものだと考えられている。
SEOのベストプラクティス
alt属性におけるSEOのベストプラクティスは以下の通り。
- alt属性を使用し、正しく記載する
- 画像周りのテキストと画像の内容が一致していること
- 画像のキャプションが必要であれば、入れること
- そのページのtitleタグと関連がある画像であること
alt属性のファイル名の書き方
良いalt属性の書き方として、Googleは「簡潔でわかりやすいファイル名と alt テキストを使用する」ことを伝えている。
また、サイトナビゲーションとして画像のリンクのみを使用することも避けるべき方法としているの。
alt属性の書き方の注意点
- 画像を具体的に説明すること
- alt属性の文字数を短くすること
- 画像SEOのためのキーワードの乱用は避けること
- キーワードを並べた書き方を避けること
- alt属性に「~の画像」などを含めないこと
- 文章全体や一部の内容をコピーして貼り付けないこと
ボタンなど、すべての画像にはalt属性を利用することを心がけ、「最大約125文字以下（日本語の場合は62文字程度）」で記載する。
また、画像により長い説明が必要な場合は「longdesc属性」を利用する。
ファイル名の注意点
画像のファイル名は日本でも「英文」で伝えたほうが良く「簡潔でわかりやすいファイル名」を指定する。
例えば、「image1.jpg」「pic.gif」「1.jpg」など一般的なファイル名をつけることは避ける。
Googleは画像の中のテキストも認識が可能
Google検索において、OCR（光学文字認識）を利用して、画像の中の文字を抽出はできる。（また、AIを活用して、何が写っているかを理解することも可能。）
しかし、画像の情報をGoogleに伝えるためには、alt属性を利用することが推奨される。
これらの情報はYouTubeの「English Google SEO office-hours from March 2023」の中で、リッジィ・サースマン（Lizzi Saasman）が質問に回答した。
alt属性・ファイル名等の書き方例
書き方例1
ブルーベリーのパンケーキ画像の例を元に、説明していく。
悪いalt属性・ファイル名
//悪いalt属性・ファイル名 <img src=”111.png” alt=”パンケーキの画像“>
alt属性に「パンケーキ」を入れていますが、「の画像」と入っている駄目な例。
また、画像のファイル名に数字が入っており、一般的なファイル名を使用する駄目な例。
良いalt属性・ファイル名
//良いalt属性・ファイル名 <img src=”pancake.png” alt=”はちみつとブルーベリーのパンケーキ“>
alt属性に「はちみつとブルーベリーのパンケーキ」と画像の詳細内容を説明。
はちみつとブルーベリーのパンケーキを想像して、画像を見るとその通りだと感じれる内容が良い。
また、ファイル名も「pancake.png」と画像との関連性があるファイル名に指定してる。
書き方例2
エスカレーターに乗っている男性の画像のalt属性、ファイル名の例。
悪いalt属性・ファイル名
//悪いalt属性・ファイル名 <img src=”image.png” alt=”“>
alt属性が空欄となっており、画像のファイル名一般的なファイル名を使用している駄目な例。
良いalt属性・ファイル名
//良いalt属性・ファイル名 <img src=”escalator.png” alt=”エスカレーターにキャリーバックを持って乗っている男性“>
alt属性に画像の具体的で簡潔な情報を説明があり、ファイル名も「escalator（エスカレーター）」とシンプルで画像と関連がある。
SEOに与える影響
SEOに与える影響は、Google正確にはランキング要因であることや（画像SEOを除く）SEOに有効であることは伝えていない。
ただし、alt属性がSEOに有効な（ランキングシグナル）理由としては、以下のことが考えられる。
- 画像を表示しないブラウザの場合変わりにAlt属性が表示される（ウェブアクセシビリティ）
- 音声ブラウザの場合、alt属性が読まれる（ウェブアクセシビリティ）
- 画像の読み込み完了前に表示される（ウェブアクセシビリティ）
画像が何らかの事情で見ることが出来ないユーザーの場合でも、alt属性が入っていることで視覚的な能力に関係なくコンテンツを評価することが出来る。
そのため、alt属性を使うことでユーザーエクスペリエンス（利用者の体験）が向上する。
スクリーンリーダー等の技術に対応できる
Google「検索エンジン最適化（SEO）スターター ガイド」において、以下の回答をおこなっている。
この属性を使用するのは、ユーザーがスクリーン リーダーのようなサポート技術を使ってサイトを閲覧する場合に、
alt属性の内容が画像についての情報を提供するためです。
画像をリンクで利用する場合、アンカーテキストと同様に扱われる
Google「検索エンジン最適化（SEO）スターター ガイド」において、以下の回答をおこなっている。
画像をリンクとして使用する場合、その画像の alt テキストが、テキストリンクのアンカー テキストと同様に扱われることです。ただし、テキストリンクで同じ目的を果たせる場合は、サイトのナビゲーションに画像を使いすぎることはおすすめしません。
Google画像検索が適切に理解しやすくなる
Google「検索エンジン最適化（SEO）スターター ガイド」において、以下の回答をおこなっている。
画像のファイル名と alt テキストを最適化すると、Google 画像検索のような画像検索プロジェクトが画像を適切に理解しやすくなります。
良くある質問
altテキストは何文字で入力することがベターか？
英語の場合は最大約125文字以下のため、日本語では62文字程度で具体的な説明を入れる。
altテキストを長くても20文字から30文字を目安にすることを推奨。
altテキストは単語か文章どちらで入れる？
句読点がない文章で入れる。
出典
- 検索エンジン最適化（SEO）スターター ガイド（Google検索セントラルブログ）
- Alt Text What is Alt Text?（Moz）