WebflowでAltテキストを設定する方法
![WebflowでAltテキストを設定する方法](https://cdn.prod.website-files.com/65dec6ef42b2729fc9d06211/665d82a4095ff7498856729b_Blog-Thumbnail-20240603_4-min.avif)
今回はWebflowでAltテキストを設定する方法について解説します。AltタグはSEO対策において非常に重要な要素です。Altテキストを正しく設定しなければ、苦労してWebflowで作成したサイトでも、SEO評価で上位に表示されない可能性があるため、注意が必要です。
ここからは手順に沿って、Altテキストの設定方法をご紹介します。
Altテキストの設定手順
1. 画像を選択する
まず、設定したい画像を選択します。例えば、以下の画像で例を挙げますと、Webflowのロゴ画像を選択します。
![設定したい画像を選択](https://cdn.prod.website-files.com/65dec6ef42b2729fc9d06211/665d7b46f6fddb65423ce65b_AD_4nXcWh4jVzSP2TV6BTvSOffYNoBaWNcpALcFEt2LSzDnCvQNydfRwLMOYzbB1d4i8mXJ0y08C4UyNClxWfVqnLdqj7vNVel4Hm1gmnGXOO82FIaZyUoifPW49FfKEUqImKZlOAbWThbIjmSsRBLsWLWKQg3c.avif)
2. 右パネルの設定を開く
画像を選択した状態で、右パネルの「Settings」を開くと「Alt Text」という項目があります。
![Settings画面](https://cdn.prod.website-files.com/65dec6ef42b2729fc9d06211/665d7b461997097461e3cc46_AD_4nXf_q_aGLqQnoSIBBgI3aI61uiA5dTJnfngQCCcZGQozlaU4a09hbTZJq5h4-gA-vIT3Qi7RU-l5p04H8VTV9Zr0iJz9NnWgCgg877j2V-TAtLLosorFd4vj9gIff0JXWMgSn4KUJfgaSCxBo2yak4vi74gW.avif)
3. Alt Textの項目を表示
「Alt Text」をクリックすると
- Use alt text from asset
- Decorative
- Custom Description
の3つの選択肢が表示されます。
![Alt Textの種類](https://cdn.prod.website-files.com/65dec6ef42b2729fc9d06211/665d7b4667ae5a6a791161d5_AD_4nXeGvtxpye-XUauF-Xz-Kto_4jhuxOdE6zisHlrT1dPHVATY39zGZzWqO0599hVomeRg24rtoygNdGX9S90_1Q51S7i86i_R_QmLZ77K7EifCuVgMFvhiRLB8PoJsdG-ebB9ghmwLwrHAV2R65Q1E6NQ3PDb.avif)
4. Altテキストの入力方法を選ぶ
上記でご紹介した3つの選択肢の中から、適したAltテキストの入力方法を選んでください。以下では、それぞれの特徴について解説いたします。
Use Alt Text from Asset
これは画像をアップロード後、Assets内の画像一覧から歯車アイコンをクリックして入力したAltテキストが自動で反映される方法です。一番効率的でおすすめの方法です。
![Assets内の歯車アイコン](https://cdn.prod.website-files.com/65dec6ef42b2729fc9d06211/665d7b466d0288bd5e70b450_AD_4nXdnW74d20V01j8JOCp-sUyIHmXixj-op2mRsg-73OCebmfE1HVjGtSr0AvJg09owL1_a-I8WhLkoA5m8ZN9QSFI4P5gpP3BGFGxc-nVuiOgjpTKjG9xiTT7rpeppQA-EKtliUSx1od5qMZFtpHILZMQ6LA.avif)
![Asset detailsの画面](https://cdn.prod.website-files.com/65dec6ef42b2729fc9d06211/665d7b4646a6066c640931e5_AD_4nXfF_gnrxJX9EsSA6dcn0ixzKRTPjxirDjUPIxqfHt74EgGQ4ftg4E_0iQwQRB4N5EKfI7-XJykkn2h_1zLwnhtGHrch6cvP6ZfnxiyIxbf6d9DYMta8NoH6dIHB2MPUn6L8lqtZHamcR9b4msZB6OSuh5k.avif)
Decorative
これは、画像が装飾的な目的で使用されており、情報伝達のためではないことを示すために使用されます。具体的には、視覚的な装飾やデザイン要素として使用される画像に対して、このオプションを選択します。装飾的な画像にはAltタグが不要であり、スクリーンリーダーなどの支援技術によって無視されます。
![Decorativeの設定](https://cdn.prod.website-files.com/65dec6ef42b2729fc9d06211/665d7b46dd35906c5baf4cf3_AD_4nXfujE3MepEJ8U9RgIZ5kNfLa055yYfQcxOq2iUgD3mIeVtmA1Li6MHhgkg0NRGV0H5PcehMh2n2T5OOXMhCNrx8fpyjI7oQDRWRu-ojJfZ1oU5zzD_M_wU25-vKcr2AH3NILwjgDv5dLx6drihJo0Bby7eG.avif)
Custom Description
こちらを選択すると、下に入力フォームが表示され、任意のAltテキストを入力できます。ただし、すべての画像をCustom Descriptionで設定すると手間がかかってしまうため、AssetsパネルからAltタグを入力してUse Alt Text from Assetを選択することをお勧めします。
![Custom Descriptionの設定](https://cdn.prod.website-files.com/65dec6ef42b2729fc9d06211/665d7b48b482f130a63658ab_AD_4nXdTUFSVBrUu6Z0V8AbnD0Fx-KhaI1TcsTWJrF9jH44JJxETl2Ngsm5b6APWJlX_deo3v4Fr8Oqj9KZOxeVdBN8dhf2yWsswAYTiKe0_eUau-zDI4Zf4n48aB_AgH4H3s_n_lrKZUpX_1XhAwKtCVb3X159s.avif)
Altテキストが設定されていない場合
1つでもAltタグが設定されていない画像があると、右側に赤い四角のアイコンが表示されます。この場合は、Altテキストが設定されていないことを示す警告です。「Missing Alt Text」という表示が出るため、
![Altテキストが設定されていないエラー表示](https://cdn.prod.website-files.com/65dec6ef42b2729fc9d06211/665d7b45797ea53840ea4e10_AD_4nXdn9EQ5yufbpBMVa-gXBvvvXw5vnV82iRsOPdA6vi3dTGTgE1tgfSFzWlcePADLnPzyGoYm5rIpWnO5dP_B8PCiOEy1yZmiXSUvdvKyROg_hq-BvBil5DJa6TxeYEj7fgSxT8jmXMZjFjwx9XRMFtYtroo.avif)
![Missing Alt Text](https://cdn.prod.website-files.com/65dec6ef42b2729fc9d06211/665d7b47fb1f1386291d8010_AD_4nXeGaRB-_UIs4JNC6HaAClZUejF_V99MaCp8OPtWP4pR-C8VsBwmvL5uDTAs5K5e7P0UTD2uNj9lhZHmW42T9a23-aV8ibISvliEq9DBd_yWJep8XeJgFB1gQLhUQlpANCaQluLF8fEOhxjs1gUGRQCSoOU.avif)
このアイコンをクリックすると、該当の画像にジャンプするため、Altテキストの修正をスムーズに行えます。
![該当の画像へ移動するアイコン](https://cdn.prod.website-files.com/65dec6ef42b2729fc9d06211/665d7b46e935e85ab21d96e8_AD_4nXeRoRnPwDGll11lAoc3LP5mWCqfa__VR3wdPM6BMG0MeLeTKy1TWpkbh2fZ0WiXeVQjF2jMDiotc8tFcuadxz6T2eti7_i-A67-YeMSPIv0U6x7vNbmMlzUt_0MjrgaMNvJ41Abx1b8XUqWlCHPziCFUEAO.avif)
![該当の画像にジャンプ](https://cdn.prod.website-files.com/65dec6ef42b2729fc9d06211/665d7b45bda4e92adec5b907_AD_4nXeHSiOdx2t-JLfR5aqXjtFiNUEO0aIl6frIAmYpbkj5D2IGzFjZQfeGb5dKekZvZ-oPDFpjaU6qsGSfKuOXF8OAqDQpO4Kmk7yr0DiCRNHjgQVwMB1XJ_Ipx-I6F2GSCJcL93-rVCvevAK4HMvmWZsLJm8j.avif)
Altテキストの設定が完了したら、左下のマークがチェックに切り替わります。
![Altテキスト設定完了のマーク](https://cdn.prod.website-files.com/65dec6ef42b2729fc9d06211/665d7b4802efe9d670cd98b6_AD_4nXdovulMUyCXBUn-1q80akyuG2R8DqnyRDcioJqnCB26Lg2DleSgavL0elYM0Xkw7I8cMbOYqMbtW6eJTV0oswPF9Sr3Y_WAz_73IS_3zBqQLWYKTmUwm59OQki6CdXKTismQ-NFvYlT82_qRtcQ7gyvPf8g.avif)
また、Altテキストが設定されていない場合、Publishする際にも警告が表示されるため、見落としを防ぐことができます。以下の赤枠の部分にAltテキストが設定されていないということが表示されます。
![Publishする際の警告表示部分](https://cdn.prod.website-files.com/65dec6ef42b2729fc9d06211/665d7b4676594a3e893687d5_AD_4nXd7yC2g6WcK_Th5Hq6Dc1Mx__L7b65naa9Czs4D9mctHIj4-Xh3mVQhPM_Ia4V1iXjUlrKYVCffX6LSb1wG9oKIeYjo6DrockPAMuYIzt0WXpcOWiO6EksqSKnAs5c-xotcZaeiyWaPPOH8J10vrqW9LipM.avif)
公開前に必ずAlt設定を行いましょう
Webflowで効率的にAltテキストを設定することは、SEO対策の一環として非常に重要です。Altテキストを適切に設定することで、検索エンジンがサイトの内容を正確に把握し、検索結果の順位が向上することにも繋がります。また、画像が正しく表示されなかった場合でもユーザーが内容を理解できるようになります。
さらに、WebflowではAltテキストが設定されていない画像に対して警告が表示されるため、公開前に見落としを防げます。これにより、サイトの品質を維持し、SEO効果を最大化し、競争力を高めることができます。公開前にはAltテキストの設定を必ず確認し、最適な状態で公開するよう心掛けましょう。
お困りの際には、Booos7から気軽にお問い合わせください。Webflowに関する疑問を解決できるようなサポートを行います。