インライン画像：ルールと例

インライン画像とは、リーディングフローの中に配置された単一の画像であり、その周辺の内容を明確にしたり証明したりするためのものです。ギャラリーやプロモーションパネル、テキストの代わりではありません。その画像を見ることで、周辺の文章だけでは効率的に得られない、読者が理解または確認できることは何かを問いかけてください。

キー付きノッチにより、コネクタが逆向きでソケットに入るのを防ぎます。

上記のレンダリング要素は、読者にコネクタの向きを確認するよう指示する段落の直後に配置されます。切り抜きによりノッチが見えるようになり、キャプションがその重要性を示し、続く指示は読者に大規模で無関係なシーンを解読するよう求めることなく続行できます。

なぜこの要素が重要なのか

読者はスキャンと集中した検査を交互に行います。適切に配置された画像は、抽象的な説明を認識可能な形状に変え、証拠を示し、視覚的な状態を想像するための労力を軽減します。配置は、その画像が近くのテキストを説明することを示唆します。その関係が弱い場合、読者は画像を検査し、追加の意味を見出せず、元の位置に戻る必要が生じます。

関連する心理的原則はシグナリングです。トリミング、キャプション、周囲のテキストは、重要な詳細に注意を向けさせます。機械全体の写真は、2センチのロックタブに関する文章の場合には弱いです。そのタブに焦点を当てたトリミングは、読者に1つの視覚的な質問を与えます。フレーミングだけで被写体を明らかにできる場合、画像に矢印や埋め込み文章は必要ありません。

機械抽出可能性とは、ソフトウェアがユニットを識別し、近くの意味との関係を保持する能力です。セマンティックな<figure>に<img>とオプションの<figcaption>を含めることで、クローラー、支援技術、移行ツール、AI検索システムに安定したユニットを提供します。代替テキストは画像の貢献を述べ、寸法はその形状を記述し、キャプションはピクセルの外側にある解釈や出典を明らかにします。

機械が不可欠な指示、数値、警告、結論を復元するためにコンピュータビジョンを必要としてはいけません。画像に決定的な測定値やラベルが含まれている場合は、その情報を近くのテキストで繰り返すか、構造化テーブルを使用してください。要素作成ルール は、共有ディレクティブ構文、ソースパス、ボディマッピング、優先順位を制御します。このページは、インライン画像のフィールド、サイズ設定、読み込み、キャプション、代替テキストの決定において優先されます。

使用するタイミング

1つのビジュアルが1つの近接するアイデアを直接サポートし、その画像が読み取りカラムの幅でも有用である場合にインライン画像を使用します。適切な用途としては、物理的な詳細の表示、場所や物体の特定、単純なビフォーアフターの提示、テスト済み条件の視覚的証拠の提供、注釈を必要としない出力の見た目の提示などがあります。

追加する前に3つのテストを実施してください：

1. 貢献テスト： 画像が提供する新しい情報、証拠、または認識を明確に述べます。
2. 文脈テスト： 画像がサポートする正確な段落を特定します。3つのセクションが等しくそれを主張できる場合、その目的はおそらく広すぎます。
3. 削除テスト： 画像を非表示にします。意味のあるものが失われない場合は、デザインが本当にそれを必要とする場合にのみ装飾用としてマークし、それ以外の場合は削除します。

類似したケースが誤用の原因の大半を占めます。読者がコントロールを見つけたり、複数の番号付き領域を照合したりする必要がある場合は、注釈付きスクリーンショットを使用してください。コンテンツが目に見える物体ではなく、関係性、順序、システムである場合は図を使用してください。複数の同等の画像を閲覧する必要がある場合はギャラリーを使用してください。差異が繰り返しの基準に依存する場合は比較表を使用してください。画像と実質的な説明が独立した2カラムユニットを形成する場合はイメージボックスを使用してください。

単にテキストを分割するためだけに一般的なストック写真を挿入しないでください。握手はパートナーシップを証明せず、ノートパソコンはソフトウェアを説明せず、電球はアイデアを明確にしません。タイポグラフィを保持するためにテキストを画像として公開しないでください。散文のスクリーンショット、読み取り可能な値のないチャート、ライセンスや出典が不明な画像を使用しないでください。

配置場所

読者が検査すべき内容を紹介する段落の直後に画像を配置してください。最初に理由を述べることで、読者はどこに注意を向けるべきかを知ることができます。画像が証拠であり、その結果が明らかでない場合にのみ、図の後に解釈を続けてください。手順の中では、該当するアクションの後、成功確認の前に配置してください。文とその限定条件、または指示とその警告を分割しないでください。

インライン画像は、見出しと最初の段落がその目的を確立している場合にのみ、H2の下に配置しても構いません。図、キャプション、クレジットは、レスポンシブレイアウトや改ページをまたいでも一緒に保ってください。

段落内、リスト項目内、テーブルセル内、コールアウト内、アコーディオン内、クリッカブルカード内、または他のメディア要素内に配置しないでください。2つのインライン画像を連続して配置しないでください。真のピアはギャラリーにまとめるか、それぞれの役割を区別する説明を追加してください。密度の高いテーブル、ビデオ、チャート、またはコールトゥアクションの隣に配置してはいけません。両方のオブジェクトが注目を競い合うことになります。別個に定義された比較を形成する場合を除き、異なるメディアユニットの間には少なくとも1つの意味のある段落を挟んでください。

デフォルトでは通常のコンテンツ幅を使用し、小さなオブジェクトやポートレートにはより狭い表示を使用してください。承認されたワイドメディアコンテナは、詳細を他の方法では読み取れない場合にのみ使用し、ページレベルの水平スクロールを絶対に作成しないでください。

構造

1. Figure境界： アセット、キャプション、クレジットをドキュメントフロー内の1つのユニットとしてグループ化します。
2. 画像ソース： リモートのホットリンクやプレースホルダーではなく、承認された既存のアセットに解決されます。
3. 代替テキスト： 画像を知覚できない読者のために、その文脈上の機能を代替します。装飾の場合のみ空になります。
4. 内在的寸法： ファイルが到着する前に正しいアスペクト比を確保し、レイアウトの移動を防ぎます。
5. レスポンシブ候補： ブラウザがどこでも最大のソースをダウンロードするのではなく、適切なサイズのファイルを選択できるようにします。
6. レンダリングサイズ： 関連する詳細を判読可能に保ち、オーバーフローや弱いソースの拡大を防ぎます。
7. キャプション： すべての読者に役立つ場合、解釈、識別、日付、スケール、出典を追加します。
8. クレジット： ライセンスや編集ポリシーで必要な場合、作成者とソースを記録します。

画像のファイル名とaltテキストは互換性がありません。安定したファイル名はアセット管理に役立ちます。文脈に応じたaltテキストは、この出現における画像の目的を説明します。したがって、同じ写真でも異なるポイントをサポートする場合には異なるaltテキストを持つことができますが、無関係なポイントに1つの画像を再利用することは警告サインです。

デザイン例

この要素は3つの意味的バリエーションと2つの幅処理をサポートします。読み込み動作は視覚的なバリエーションではありません。

情報提供画像、コンテンツ幅

これがデフォルトです。画像は認識可能な詳細や証拠を提供し、空でないaltテキストを使用し、読み取りコンテナ内に収まります。

情報提供画像、ワイドメディア

承認されたワイドコンテナは、地図、詳細な写真、または判読可能な出力がより多くの水平スペースを必要とする場合にのみ使用してください。周囲のテキストが依然として意味を保持し、モバイル表示も使用可能でなければなりません。

装飾画像

装飾は独自の情報を持たず、alt=""を使用し、説明キャプションはなく、長文のプロダクションコンテンツでは稀であるべきです。ムード、ステータス、アイデンティティ、結果を表現する唯一の手段であってはなりません。

詳細画像（オプション拡大付き）

通常のインラインレンディションで文脈が確立されるが、細部を確認するためにより大きなビューが必要な場合にのみ拡大を使用してください。リンクをアクティブにしなくても画像自体は理解可能であり、コントロールのアクセシブルな名前がアクションを説明します。

狭いビューポートでの動作

すべてのバリエーションはビューポート内で縮小し、アスペクト比を維持し、キャプションを付けたままにします。意味のあるテキストが読めなくなる場合は、モバイル用の切り抜きを提供するか、画像を構造化テキストに置き換えてください。ピンチツーズームを強制することはデフォルトの解決策ではありません。

パラメータ

コントラクトは編集上および配信上の決定を保存します。境界線、影、スペーシング、ブレークポイントの値はレンダラーに属します。

ディレクティブにタイトルフィールドはありません。インライン画像は新しいセクションを作成するのではなく、周囲のセクションに属します。本文の最初の段落がcaptionにマッピングされます。最初の見出しは受け入れられません。クレジットは、利用可能な場合は信頼できるアセットメタデータから取得され、作成者がライセンス情報を静かに変更することを防ぎます。

構文とコード例

以下の3つの表記法は、同じソース、代替テキスト、内在的寸法、サイズ、キャプション、読み込み意図をマッピングします。アセットパスの例はコントラクトを示すのみであり、本番ソースは既存のファイルに解決されなければなりません。

ポータブルMarkdownディレクティブ

:::inline-image{src="/cdn-assets/seo-playbook/examples/keyed-connector.webp" alt="キー付きノッチが対応するソケットのリッジに揃っている様子を示すコネクタ接写" width=1600 height=1000 size=content loading=lazy}
キー付きノッチにより、1つの向きでのみ挿入可能です。
:::

最初の段落がキャプションです。追加の段落、見出し、リスト、ボタン、ネストされたメディアは、焦点を絞った図を一般的なコンテンツコンテナに変えてしまうため拒否されます。

Hugoショートコード

{{< inline-image src="/cdn-assets/seo-playbook/examples/keyed-connector.webp" alt="キー付きノッチが対応するソケットのリッジに揃っている様子を示すコネクタ接写" width="1600" height="1000" size="content" loading="lazy" >}}
キー付きノッチにより、1つの向きでのみ挿入可能です。
{{< /inline-image >}}

名前付きパラメータのみが使用されます。これはポータブルなアダプター仕様であり、ローカルショートコードが登録されていることを主張するものではありません。アダプターが存在するまでは、パブリッシングシステムの確立されたセマンティックfigure実装を使用し、壊れたショートコード呼び出しをプロダクションコンテンツに追加しないでください。

WordPressブロック

<!-- wp:image {"id":412,"width":"auto","height":"auto","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large">
  <img src="/cdn-assets/seo-playbook/examples/keyed-connector.webp"
       alt="キー付きノッチが対応するソケットのリッジに揃っている様子を示すコネクタ接写"
       width="1600" height="1000" loading="lazy">
  <figcaption class="wp-element-caption">キー付きノッチにより、1つの向きでのみ挿入可能です。</figcaption>
</figure>
<!-- /wp:image -->

メディアライブラリのメタデータを使用しますが、この配置における文脈に応じたaltテキストを見直してください。デフォルトで添付ファイルページにリンクしないでください。

例

良い例：焦点を絞った画像が視覚的な問いに答える

インストールガイドに次のように書かれています：「電源を入れる前に、キー付きノッチをソケットのリッジに合わせてください。コネクタを無理に押し込むとピンが曲がる可能性があります。」その後、次の図を配置します：

ノッチとリッジがロックタブが係合する前に揃います。

これが機能する理由は、画像が検査する理由の後に配置され、切り抜きに両方の対応する特徴が含まれ、キャプションが「コネクタ画像」と言うのではなく関係性を説明しているからです。指示と結果はテキスト内に残ります。内在的寸法によって読み込み中の移動が防止され、最初のビューポートよりかなり下に表示されるため、画像を遅延読み込みできます。

悪い例：装飾が説明なしに中断する

アナリティクスの設定に関する記事で、ステップとその警告の間に、カラフルなチャートを見ている人物の全幅ストック写真が挿入されています。そのaltテキストは「アナリティクスダッシュボードSEO最適化レポートデータ」で、ソースは5000ピクセル幅、寸法は宣言されておらず、ファイルはページの途中で eager 読み込みされます。

この画像は、設定状態を証明せず、リスクのあるアクションをその警告から分離し、キーワードをaltテキストに詰め込み、レイアウトが使用できる以上のピクセルをダウンロードし、高さが判明したときに警告が移動する可能性があるため悪いです。削除してください。実際のインターフェースにあいまいなコントロールが含まれている場合は、焦点を絞った現在のスクリーンショットに置き換え、警告をアクションに付けたままにしてください。

スキーママークアップとアクセシビリティ

インライン画像は、デフォルトでは特別なスキーマエンティティを作成しません。意味のある画像は、Article、HowTo、Product、Review、または他の適切なエンティティのimageプロパティを提供する場合があります。ImageObjectは、安定したcontentUrlと、キャプション、寸法、作成者、ライセンスなどの真実の利用可能なメタデータがある場合にのみ使用してください。装飾や未検証の権利をマークアップしないでください。

適切なaltテキスト は、すべての見える物体ではなく、文脈における機能を説明します。画像の読み込みに失敗した場合にどのような文が画像を代替するかを考えてください。「キー付きノッチが対応するソケットのリッジに揃っている様子を示すコネクタ接写」はインストールガイドで有用です。「灰色の背景に黒と銀の物体」は視覚的に文字通りですが、機能的には弱いです。「〜の画像」「〜の写真」は避けてください。ただし、写真とシミュレーションを区別するなど、メディア自体が重要な場合を除きます。

すべての<img>にはalt属性が必要です。情報提供画像には空でないテキストを使用し、装飾にはalt=""を使用してください。属性を省略することは同等ではありません。一部のスクリーンリーダーはファイル名を読み上げます。不可欠な散文、指示、引用、長いデータ系列をピクセル内に配置しないでください。画像内の表示テキストが重要な場合は、周囲のコンテンツで繰り返してください。

キャプションが画像に属する場合は、<figure>と<figcaption>を使用してください。figureロールを手動で追加しないでください。拡張可能な画像には、可視でキーボード操作可能な、説明的な名前を持つコントロール、予測可能なフォーカスの移動、モーダルを開く場合のEscapeキーサポート、拡大サイズでも同じaltテキストとキャプションへのアクセスが必要です。すべての画像をソースファイルへのラベルなしリンクでラップしないでください。

レスポンシブ配信は、画像SEO とアクセシビリティの一部であり、コンテンツを不必要な遅延なく利用可能にします。srcsetとsizes、または同等の画像パイプラインを使用して、レスポンシブデザイン が適切な候補を選択できるようにします。アスペクト比を維持し、内在的なwidthとheightを設定し、レンダリングされる最大幅をそのコンテナに制約します。これらの寸法はスペースを確保し、リソースの読み込み中にページコンテンツが移動する累積レイアウトシフト を軽減します。

遅延読み込み は、オフスクリーンのリソースを読者が近づくまで延期します。初期ビューポートより下の画像にはloading="lazy"を使用してください。すぐに表示される可能性が高い画像を遅延読み込みしないでください。最大の可視コンテンツの到着が遅れる可能性があるためです。測定とテンプレートの位置がその画像を主要な上部アセットとして特定する場合にのみ、eager読み込みとfetchpriority="high"を使用してください。複数の高優先度画像はシグナルを無効にします。

作成ルール

インライン画像の周囲の文章が解釈作業の大部分を担うため、要素内での簡潔さは曖昧さを意味しません。

• 図の前に、近くの1つの段落で理由を導入してください。レスポンシブやシンジケートされたレイアウトでアセットが移動する可能性がある場合、「以下」などの位置を示す言葉を使わないでください。
• この正確な文脈における画像の機能のために、情報提供のaltテキストを作成してください。目標は40～160文字とし、複雑さが本当に必要とする場合のみ最大250文字まで使用してください。
• キャプションは5～30語、可能であれば1文に抑えてください。画像の識別、解釈、日付、スケール、クレジットを示し、単にaltテキストを繰り返さないでください。
• 1つの主要な被写体または関係性を示してください。読者が3つ以上の独立した領域を検査する必要がある場合は、注釈付きスクリーンショット、図、表、またはギャラリーを使用してください。
• アメリカ英語のスペリング、平易な言葉、周囲のセクションと同じ用語を使用してください。代替テキストはキーワードフィールドではありません。
• すべての不可欠な指示、警告、測定値、価格、日付、結論は、ピクセル内にも表示される場合でも、HTMLテキスト内に保持してください。
• 見出し、複数の段落、リスト、テーブル、ボタン、フォーム、ビデオ、オーディオ、または別の画像を要素本文内に決して配置しないでください。
• 空のキャプションをスペーシングのために使用したり、架空のクレジット、リモートホットリンク、ライセンスなしアセット、許可のない顧客データ、存在しないプレースホルダーパスを使用しないでください。
• デザインスロットを埋めるために画像を伸ばしたり、歪めたり、拡大したりしないでください。テキストが論じる証拠と文脈が保存される場合にのみトリミングしてください。

使用する投稿タイプ

フロントマターのpostTypes配列が正規の結合です。投稿タイプは要件を狭めることがありますが、要素のフィールドやアクセシビリティの契約は変更しません。

QAチェックリスト

• 目的： レビュアーが画像が追加する独自の情報、証拠、認識を述べることができる。
• 配置： 直前の段落で検査すべき内容を確立しており、警告、限定条件、引用がその主張から分離されていない。
• 正しい要素： 単一のインライン画像が、注釈付きスクリーンショット、ギャラリー、図、表、イメージボックスよりも適切である。
• アセットの有効性： ソースが存在し、承認された形式とルート相対パスを使用し、権利と出典が確認されている。
• プライバシー： 画像に承認されていない顧客データ、名前、メールアドレス、トークン、ブラウザ情報、位置情報の手がかりが含まれていない。
• トリミングと品質： 被写体がレンダリング幅とモバイル幅で歪み、避けられる空白、破壊的な圧縮なしに判読可能である。
• 代替テキスト： alt属性が存在し、文脈に応じて情報提供的であるか、装飾用に意図的に空である。ファイル名、キャプションの重複、キーワードリストではない。
• キャプション： 存在する場合、5～30語で識別、解釈、日付、スケール、出典を追加する。
• 寸法： 内在的な幅と高さがソースの比率と一致し、安定したレイアウトスペースを確保する。
• レスポンシブ配信： 候補サイズが現実的な表示幅と一致し、最大のソースがデフォルトですべてのビューポートに送信されない。
• 読み込み： 画面外の画像は遅延読み込みされ、初期表示される画像は遅延読み込みされない。高いフェッチ優先度は測定された主要候補に限定される。
• モバイル動作： 画像がページレベルの水平スクロールなしに収まり、意味のある詳細が強制ズームなしで読み取り可能である。
• テキストフォールバック： 不可欠な指示、警告、測定値、結論がピクセル内だけでなくページテキストにも存在する。
• 構造化データ： スキーマプロパティは正確であり、可視コンテンツによってサポートされ、装飾では省略される。
• ポータブルパリティ： Markdown、Hugo、WordPressが同じソース、altテキスト、寸法、キャプション、クレジット、読み込み意図を保持する。
• 保留中のスクリーンショット： 存在しないパスはレンダリングされず、要求された各例はscreenshotsPending = trueの間、SCREENSHOTコメントのままである。

FAQ

アカデミーテンプレートは、このページの[[faq]]フロントマターに保存された5つのレビュー済み質問をレンダリングします。これらは、代替テキスト、遅延読み込み、キャプション、サイズ設定、および何も追加しない画像を削除する判断をカバーしています。