「Alt属性」の版間の差分

Alt属性 (ソースを閲覧)

2023年3月1日 (水) 13:53時点における版

6,474 バイト追加、 2023年3月1日 (水)

編集の要約なし

Masahiko Tsuji

ビューロクラット、インターフェース管理者、管理者

884

回編集

@@ 1行目: / 1行目: @@
 alt属性とは、画像の変わりとなるテキスト情報のことを指す。何らかの事情で画像が表示できない場合にテキストが表示され、代替テキスト、altタグとも呼ばれる。
-Google検索においては、画像にリンクを貼る場合にはalt属性が「アンカーテキスト」と同様に扱われる。
+Google検索においては、画像にリンクを貼る場合にはalt属性が「[[アンカーテキスト]]」と同様に扱われる。
-alt属性がランキング要因であることやSEOに有効であることGoogleは伝えていないが、alt属性を使うことでユーザーエクスペリエンスが向上する点や、画像SEOに関しては、画像のファイル名（タイトル）とalt属性をセットで正しく設定することで、Googleの画像検索結果にも貢献する可能性が高いことから、SEOでは有効だと考えられている。
+== SEOのベストプラクティス ==
+=== alt属性のファイル名の書き方 ===
+良いalt属性の書き方として、Googleは「'''簡潔でわかりやすいファイル名と alt テキストを使用する'''」ことを伝えている。
+また、サイトナビゲーションとして画像のリンクのみを使用することも避けるべき方法としているの。
+=== alt属性の書き方の注意点 ===
+* 画像を具体的に説明すること
+* alt属性の文字数を短くすること
+* 画像SEOのためのキーワードの乱用は避けること
+* キーワードを並べた書き方を避けること
+* alt属性に「~の画像」などを含めないこと
+* 文章全体や一部の内容をコピーして貼り付けないこと
+ボタンなど、すべての画像にはalt属性を利用することを心がけ、「'''最大約125文字以下（日本語の場合は62文字程度）'''」で記載する。
+また、画像により長い説明が必要な場合は「[[longdesc属性]]」を利用する。
+=== ファイル名の注意点 ===
+画像のファイル名は日本でも「英文」で伝えたほうが良く「簡潔でわかりやすいファイル名」を指定する。
+例えば、「image1.jpg」「pic.gif」「1.jpg」など一般的なファイル名をつけることは避ける。
+== 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]]