画像リンク：四つのHTMLを比較する

架空の学習用事例です。ページや画像の取得、実際のリンクや順位の検証は行いません。

リンクのない画像

ブラウザーが画像ファイルを要求しても、アンカーのリンク先はありません。画像の再利用や別サーバーからの読み込みだけでは、作者のページへのクリック可能な被リンクは生まれません。

リンク元ページ: https://publisher.example/story
画像ファイル: https://images.example/atlas.svg

テキストとして表示するHTML例

<img src="https://images.example/atlas.svg" alt="段差のない交通経路の地図を開く">

目的が分かる画像リンク

アンカーは地図の説明ページを指します。代替テキストは色ではなくリンク先の目的を示しています。画像ファイルとリンク先は異なるURLです。

リンク元ページ: https://publisher.example/story
画像ファイル: https://images.example/atlas.svg
リンク先: https://target.example/atlas

テキストとして表示するHTML例

<a href="https://target.example/atlas"><img src="https://images.example/atlas.svg" alt="段差のない交通経路の地図を開く"></a>

名前のない画像リンク

アンカーは存在しますが、空のaltとリンクテキストの欠如により目的が伝わりません。意味のあるアクセシブルな名前を付けます。ファイル名にキーワードを足してもリンクの名前は直りません。

リンク元ページ: https://publisher.example/story
画像ファイル: https://images.example/atlas.svg
リンク先: https://target.example/atlas

テキストとして表示するHTML例

<a href="https://target.example/atlas"><img src="https://images.example/atlas.svg" alt=""></a>

説明文を伴う画像リンク

同じアンカーに明確なテキストがあるため、空のaltによって名前の重複を防げる場合があります。alt属性だけでなくアンカー全体を確認してください。

リンク元ページ: https://publisher.example/story
画像ファイル: https://images.example/atlas.svg
リンク先: https://target.example/atlas

テキストとして表示するHTML例

<a href="https://target.example/atlas"><img src="https://images.example/atlas.svg" alt=""> 交通経路の地図を見る</a>

独自の視覚資料を作るための企画

地図の企画：日付と出典を確認できるデータを使い、利用者が段差のない経路を比較できるようにします。図とともに文字の表、調査方法、出典、版の日付、訂正窓口を公開してください。明確な再利用条件を付けた画像と、安定した説明ページを提供します。推奨する出典表示は説明に向け、宣伝用のアンカーを強制しません。有用な訪問や訂正と、実際に確認できた引用を分けて測定します。採用実績や検索順位への効果を創作してはいけません。