自社のヒント&ナレッジ共有

vrneuman
HubSpot Employee
HubSpot Employee

ブログのホームページのフィーチャー画像に代替テキストを追加する

一部のテンプレートでは、ブログリスティングページでフィーチャー画像の代替テキストが既定で入力されないことがあります。これにより、ページパフォーマンスツールのリスティングページでSEO警告が表示される場合があります。これを解決する最も簡単な方法は、HubLを使用して、リスティングページに入力するaltタグを追加することです。

 

  • HubSpotアカウントにて、[マーケティング] > [ファイルとテンプレート] > [デザインツール]の順に進みます。
  • ブログテンプレートの名前をクリックします。
  • ブログテンプレートで、[ブログコンテンツモジュールをクリックします。 
  • [編集]タブ内のインスペクター[リスティングテンプレートを編集]をクリックして、コード化されたブログのリスティングテンプレートを開きます。
  • alt="{{ content.featured_image_alt_text }}"をフィーチャー画像のimgタグに追加すると、記事エディターで指定した画像の代替テキストがリスティングページの代替テキストに反映されます。
img src="{{ content.post_list_summary_featured_image }}" class="hs-featured-image" alt="{{ content.featured_image_alt_text }}"
  • または、alt="{{ content.name }}"をフィーチャー画像のimgタグに追加し、リスティングページのaltテキスト属性にブログ記事のタイトルを入力することもできます。
img src="{{ content.post_list_summary_featured_image }}" class="hs-featured-image" alt="{{ content.name }}"

注:ブログ記事テンプレートに{{ content.name }}を含めると、記事でHTMLコードのレンダリングが発生する可能性があります。記事テンプレートにラッパーがないブログ記事タイトルを印刷する場合は、代わりにHubL変数{{ page_meta.name }}を使用します。

 

  • [変更を公開]をクリックします。

*このコンテンツは英語版”Add alt text to the featured image on your blog homepage”を翻訳したものです。

0 いいね!
0件の返信

0 コメント

この投稿にはまだ回答がありません

この投稿にはまだ回答が寄せられていません。しばらく経ってからもう一度ご確認ください。また、役に立つ情報をご存じの場合はぜひ回答を投稿してください。

投稿に回答する

回答の仕方についてご不明な場合は、コミュニティーのガイドラインをご覧ください。