このドキュメントは、Framerを学ぶ国内ユーザーが日本語資料の不足で感じる困難を解決するために、公式ブログの内容を日本語に翻訳し、実務に役立つ情報を追加しました。Framerを使用する皆さんに少しでもお役に立てればと思います。

Alt Tagの役割

“Alt attributes”や“Alt descriptions”とも呼ばれるAlt Tagはアクセシビリティ（例：スクリーンリーダー）とSEOに欠かせない要素です。Googleのような検索エンジンはこのAlt Tagを用いて画像の内容を把握するため、しっかりと設定することが重要です。また、不要なキーワードの繰り返しは、ペナルティの原因になる可能性があるため避けるべきです。

Note: 画像の内容を簡潔な文章で説明することが望ましく、文をピリオドで終えるとアクセシビリティが向上します。
(出典, 出典)

キャンバスでAltタグを追加する方法

Framerキャンバスに直接アップロードした画像には、以下のようにAltタグを追加できます。

1. キャンバスで画像を選択する

2. 右側パネルのStyles > Fill項目をクリックする

3. ポップアップウィンドウが開いたら、Altテキスト入力欄に説明を入力する

CMS画像にAltタグを追加する

CMSで管理される画像にもAltタグを設定できます。

1. CMSページへ移動する

2. 編集したいコンテンツを選び、“Choose Image”をクリックする

3. ポップアップウィンドウでAltテキストを入力し保存する

CMSのテキストフィールドにAltタグを追加

テキストフィールドに画像をアップロードする際もAltタグを指定できます。

1. テキストフィールド内で画像をアップロードする

2. 画像上に現れる“Media Upload”アイコンをクリックする

3. ポップアップウィンドウのAltテキスト入力欄に説明を追加する

まとめ

Alt Tagはささいなようですが、SEOのアクセシビリティを高める優れたツールです。サイトのアクセシビリティを向上させて多くのユーザーを引き込むために、あなたのウェブサイトの画像に適切なAlt Tagを書いてみてください。

本記事はFramer公式ブログの『How to add Alt Tags to images』を翻訳・改作したコンテンツです。