画像の説明を明確かつ簡潔に記述して、SEOを促進し、コンテンツによりアクセスしやすくします。

代替テキストは、訪問者にとってのアクセシビリティを高めるために画像に追加するテキストです。検索エンジンも画像の内容の識別に代替テキストを使用するため、この手法はサイトのSEOを強化する方法として優れています。場所によっては、代替テキストを手動で追加しない場合、画像のファイル名が代替テキストとして使用されます。画像ブロックと自動レイアウトの場合は、代替テキストを手動で追加する必要があります。

代替テキストは、補助スクリーン リーダーや、画像が無効になっているブラウザーでも役立ちます。ブラウザーで画像を表示できない場合は、代わりに代替テキストが表示されることがあります。代替テキストをページ上にプレーン テキストとして表示しなくても、スクリーン リーダーは代替テキストを読み取れます。代替テキストを追加する場合は、画像を説明する、短くて読みやすい語句を使用します。画像のアクセシビリティを高めるためのヒントを参照してください。

このガイドでは、サイトの画像に代替テキストを追加する方法、および代替テキストが自動的に追加される画像について説明します。

動画を見る

代替テキストのベスト プラクティス

代替テキストを入力するときは、補助スクリーン リーダーを使用している人やブラウザーで画像を無効にしている人に向けたテキストであることを念頭に置いてください。そのためにも、次の点に留意してください。

• わかりやすく役立つものにします。この画像が見えない人に、画像についてどう説明するか考えてみましょう。
• テキストは短くし、通常は 12 語以下にします。
• キーワードを組み込んで、文章を検索用に最適化します。ただし、キーワード スタッフィングは避けてください。
• 実際の文章で書きます。単語の区切りとしてハイフンは使用しないでください。
• 「the」や「a」などの単語、および「写真」や「画像」などの用語は省略できます。たとえば、「緑色の花瓶の画像」の代わりに「緑色の花瓶」を使用します。

画像のファイル名

画像ブロックと自動レイアウトを除き、他の代替テキストが追加されていない場合は、画像のファイル名が代替テキストとして使用されます。画像のファイル名を作成する際には、代替テキストのベスト プラクティスを使用することをおすすめします。

ほとんどの画像の場合、ファイル名を変更するには、新しい名前で画像を再アップロードするか、ブロック エディターでファイル名を変更します。たとえば、画像ブロックの場合は、ブロック エディターを開き、[コンテンツ] タブに移動して、[コンテンツ] タブの [ファイル名] フィールドを更新します。

ヒント: ファイル名にはアルファベット、数字、アンダースコア、ハイフンのみを使用してください。

サイト ロゴ

サイト タイトルは、サイト ロゴの代替テキストとして機能します。

画像ブロック

任意の画像ブロック レイアウトに最大250 文字の代替テキストを追加できます。画像ブロックに代替テキストを追加しない場合、画像はスクリーン リーダーなどの支援技術で認識できなくなります。画像ブロックに代替テキストを追加する方法は、お客様のサイトが使用しているSquarespaceのバージョンによって異なります。

自動レイアウトとギャラリー セクションの画像

自動レイアウトとギャラリー セクションはバージョン7.1 でのみサポートされています。

自動レイアウトとギャラリー セクションに代替テキストを追加できますが、方法はそれぞれ異なります。

自動レイアウト

[画像の代替テキスト] フィールドが表示されない場合は、[要素] タブで [画像を表示] スイッチをオンにします。自動レイアウト セクションで代替テキストを画像に追加する方法は以下のとおりです。

1. ページの編集中に、自動レイアウト セクションにカーソルを置き、[コンテンツを編集] をクリックします。
2. [コンテンツ] タブをクリックします。
3. 代替テキストを追加する画像をクリックします。
4. [画像の代替テキスト] までスクロールし、フィールドに代替テキストを入力します。
5. [戻る] をクリックし、[保存] をクリックします。

自動レイアウトに代替テキストを追加しない場合、代替テキストは表示されません。

ギャラリー セクション

ギャラリー セクションには、主に画像が表示されます。ギャラリー セクションの画像に説明を追加すると、その説明が自動的に画像の代替テキストと画像のキャプションになります。

ギャラリー ブロックの画像

バージョン7.1 では、ブログ記事、商品アイテム、個別のイベントにのみギャラリー ブロックを追加できます。

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

1. ギャラリー ブロックをダブルクリックするか、[編集] をクリックします。
2. 編集する画像を見つけてカーソルを合わせ、 をクリックします。
3. [画像のタイトルを入力] フィールドに代替テキストを追加します。画像のタイトルを追加しない場合、説明フィールドのテキストが代替テキストになります。
4. [保存] をクリックします。

ブログ記事とイベントのアイキャッチ画像

ブログ記事やイベントのタイトルは、投稿やイベントのアイキャッチ画像の代替テキストとして使用されます。イベント ページの場合、これはリスト レイアウトとカレンダー レイアウトの両方に適用されます。

ページのアイキャッチ画像

ファイル名は、ページのアイキャッチ画像の代替テキストとして表示されます。アップロードする前に、表示したい名前を必ずすべてのアイキャッチ画像に付けてください。

動画ブロックのサムネイル画像

URLを使用して動画ブロックをページに追加すると、そのブロックは自動的にサムネイル画像を生成し、オーバーレイとして表示されます。カスタム サムネイルを追加した場合、ファイル名は静的URLには表示されますが、代替テキストとしては表示されません。動画ブロックのサムネイル画像には代替テキストを追加できません。

商品画像

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

1. ストア ページで、商品にカーソルを合わせ、ダブルクリックします。
2. 商品画像の上にカーソルを置き、3つの点をクリックして、[メタデータを編集] をクリックします。
3. [代替テキスト] フィールドにテキストを追加します。
4. [適用] をクリックします。

カバー ページの画像 (バージョン 7.0)

カバー ページの画像に代替テキストを追加する方法は以下のとおりです。

1. カバー ページ メニューで [メディア] パネルをクリックします。
2. 画像にカーソルを合わせ、 をクリックします。
3. [代替テキストを入力] フィールドに代替テキストを追加します。
4. [保存] をクリックします。

ギャラリー ページの画像 (バージョン 7.0)

ギャラリー ページの画像に代替テキストを追加する方法は以下のとおりです。

1. [ページ] パネルでギャラリー ページをクリックします。
2. 編集する画像を見つけてカーソルを合わせ、 をクリックします。
3. [画像タイトル] フィールドに代替テキストを追加します。画像のタイトルを追加しない場合、説明フィールドのテキストが代替テキストになります。
4. [保存] をクリックします。

メール キャンペーンの画像、ブログ、商品セクション

Squarespace メール キャンペーンでは、キャンペーンに追加する画像、ブログ記事、および商品に、代替テキストを追加できます。

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

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

セクションの背景画像

背景画像に代替テキストを追加することはできません。抽象的な背景画像やコンテンツを区切るグラフィックなど、純粋に装飾的な画像には説明は必要ありません。詳細については、「Webコンテンツのアクセシビリティ ガイドライン」を参照してください。

それでも背景画像に代替テキストを追加することを希望する場合は、回避策の1つとして、画像ブロックをセクションの背景として使用し、ブロックを塗りつぶし、そこに代替テキストを追加するという方法があります。

また、カスタム コードを追加することにより、背景画像に代替テキストを追加することもできます。詳細については、Squarespace Forumのこちらの投稿をご覧ください。ただし、カスタム コードの変更は弊社サポートの範囲外です。つまり、コード ベースのソリューションのセットアップやトラブルシューティングはサポート対象外です。

次のステップ

• SEOに関するその他のヒントについては、「検索エンジンでのサイトの視認性を高める方法」を参照してください。
• サイトのアクセシビリティを高める方法については、「Squarespaceサイトのアクセシビリティを高める」を参照してください。

ヒント: TinyIMG の拡張機能を接続すると、画像のサイズ、ファイル名、代替テキストが検索エンジンと訪問者に対して最適化されます。TinyIMG は、画像SEOに影響を及ぼす問題を特定するSEO監査サービスも提供しています。当社ではサードパーティーのサービスと連携して Squarespace Extensions が適切に動作するよう努めていますが、拡張機能に関するサポートは提供しておりません。拡張機能の接続や接続解除に関してのサポートには対応いたします。その他の質問については、拡張機能のプロバイダーまで直接お問い合わせください。