スクリーン リーダーや検索エンジンがサイトのコンテンツを理解できるように、画像の説明を記述します。

代替テキストは、訪問者にとってのアクセシビリティを高めるために画像に追加する短い説明文です。通常はページ上にプレーン テキストとして表示されませんが、スクリーン リーダーが訪問者に読み上げたり、画像が読み込まれない場合にブラウザーが表示したり、検索エンジンがサイト上のコンテンツを識別するために使用したりします。

一部の画像では他のテキストが自動的に代替テキストとして使用されますが、画像ブロックと自動レイアウトでは、代替テキストを追加した場合にのみ代替テキストが設定されます。

画像への代替テキスト追加に関する動画

この動画では、代替テキストのベスト プラクティスと、サイト上の様々な画像に代替テキストを追加する手順について説明しています。

効果的な代替テキストを作成する

代替テキストを作成する際には、以下の点に注意してください。

• その画像が見えない人に説明するように、画像について説明します。
• 関連するキーワードを自然に含めますが、キーワード スタッフィングは避けてください。
• テキストは短くし、通常は150～200文字にします。
• 「the」や「a」などの単語、および「写真」や「画像」などの用語は省略できます。たとえば、「緑色の花瓶の画像」の代わりに「緑色の花瓶」を使用します。
• 単語の間にはハイフンではなくスペースを使用します。

Squarespace AIで代替テキストを生成する

Squarespace AIを使用して代替テキストを生成する機能は、 バージョン 7.1の創造エディター セクションでのみ利用可能です。

SEOレポートツールは、サイト上の代替テキストが設定されていない画像を検出し、代替テキストを提案します。提案された代替テキストは、確認、編集、保存が可能です。画像ブロック、ギャラリー セクション、自動レイアウトで欠落している代替テキストをチェックします。このツールは、コレクション アイテムに追加された画像をスキャンしません。

SEOレポートツールで代替テキストを生成する手順は次のとおりです。

1. [SEO/AI可視性] パネルを開きます。
2. [検索エンジン最適化完了スコア] セクションで、[AIで改善] をクリックします。
3. 代替テキストがないとしてフラグが立てられた画像を確認し、[編集] または [再生成] をクリックして提案されたテキストを編集します。
4. 候補のテキストを追加する準備ができたら、[保存して続行] をクリックします。

ヒント: TinyIMGの拡張機能を接続すると、画像のサイズ、ファイル名、代替テキストが検索エンジンと訪問者に対して最適化されます。当社のサポート チームは、Squarespace Extensionsの接続や解除のお手伝いはできますが、使用上の問題に関するトラブルシューティングはできません。その他の質問については、拡張機能のプロバイダーまで直接お問い合わせください。

画像ブロックに代替テキストを追加する

画像ブロックのエディターには、専用の代替テキスト フィールドがあります。そこへ代替テキストを追加しない場合、代替テキストは表示されません。代替テキストがない場合、ブロックはスクリーン リーダーなどの支援技術で認識できなくなります。

画像ブロックに代替テキストを追加する方法は以下のとおりです。

自動レイアウトの画像に代替テキストを追加する

自動レイアウトはバージョン7.1で利用できます。

自動レイアウトのセクション エディターには、専用の代替テキスト フィールドがあります。そこへ代替テキストを追加しない場合、代替テキストは表示されません。代替テキストがない場合、ブロックはスクリーン リーダーなどの支援技術で認識できなくなります。

自動レイアウト セクションで代替テキストを画像に追加する方法は以下のとおりです。

1. [ページ] パネルを開きます。
2. 自動レイアウトがあるページをクリックし、[編集] をクリックします。
3. 自動レイアウト セクションにカーソルを合わせ、[コンテンツを編集] をクリックします。
4. [コンテンツ] タブをクリックします。
5. 代替テキストを追加する画像をクリックします。
6. [画像の代替テキスト] の下に代替テキストを入力します。[コンテンツ] タブに画像が表示されない場合は、[エレメント] をクリックし、[画像を表示] トグルをオンにします。
7. [戻る] をクリックし、自動レイアウト内のすべての画像に対して繰り返します。
8. [保存] をクリックします。

商品画像に代替テキストを追加する

任意の商品画像に最大200文字の代替テキストを追加できます。代替テキストを追加しない場合、商品名が代替テキストになります。

商品画像に代替テキストを追加するには、次の手順に従ってください。

1. [ページ] パネルを開きます。
2. ストア ページをクリックし、カテゴリーをクリックするか、[すべて] をクリックします。
3. 商品画像にカーソルを合わせ、[...] をクリックして、[メタデータを編集] をクリックします。
4. [代替テキスト] フィールドにテキストを追加します。
5. [適用] をクリックし、[保存] をクリックします。

メールキャンペーンの画像、ブログ、商品セクションに代替テキストを追加する

Squarespaceメールキャンペーンでは、キャンペーンに追加する画像、ブログ記事、および商品に、代替テキストを追加できます。これらのセクションに代替テキストを追加しない場合、代替テキストは表示されません。キャンペーン ヘッダーの画像やロゴに代替テキストを追加することはできません。

キャンペーンで代替テキストを追加する方法は以下のとおりです。

1. [メールキャンペーン] を開きます。
2. [下書き] をクリックし、下書きにカーソルを合わせて鉛筆アイコンをクリックします。
3. 下書きで、画像セクション、ブログ セクション、または商品セクションをクリックします。
4. 右側のパネルで、代替テキストを追加する画像、ブログ投稿、または商品をクリックします。
5. [画像の代替テキスト] の下に代替テキストを追加します。代替テキストは自動的に保存されます。

サイト上の画像で、代替テキストとして他のテキストフィールドを使用している場合

サイト上のほとんどの画像には、特定の代替テキスト フィールドがなく、代わりに自動的に関連するテキスト フィールドが代替テキストとして使用されます。たとえば、ギャラリー セクションの画像では、説明が代替テキストとして使用されます。

各画像タイプで使用されるテキストについては、表をご確認ください。

代替テキストを追加しないとどうなりますか？

サイトのほとんどの領域では、他に代替テキストが追加されていない場合、画像のファイル名が代替テキストとして機能します。画像のファイル名を作成する際には、代替テキストのベスト プラクティスに従うことをおすすめしますが、すでに画像をアップロードしている場合は、アセット ライブラリーでファイル名を更新できます。

代替テキストを追加できない画像はありますか？

はい。代替テキストに対応していない画像には、以下のようなものがあります。

• セクションの背景画像 - 抽象的な背景画像やコンテンツを区切るグラフィックなど、装飾的な画像には通常、説明は必要ありません。回避策が必要な場合は、カスタム コードを試してみてください。ただし、コード ベースのソリューションの設定やトラブルシューティングはサポート対象外です。
• 動画ブロックのカスタム サムネイル画像 - ファイル名は画像の静的URLには表示されますが、代替テキストとしては表示されません。