お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。
Blog

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

更新日時 2019年 10月 31日

対象製品

Marketing Hub  Professional, Enterprise
Basic

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

注:この手順には、HTMLの基本的な理解が必要です。コードテンプレートを編集しない場合は、HubSpotデザインパートナーにお問い合わせください。

  • HubSpotアカウントにて、[マーケティング] > [ファイルとテンプレート] > [デザインツール]の順に進みます。
  • ブログテンプレートの名前をクリックします。
  • ブログテンプレートで、[ブログコンテンツ]モジュールをクリックします。 
  • [編集]タブのインスペクター[リストテンプレートを編集]をクリックして、コードブログリストテンプレートを開きます。

edit-listing-template

  • 記事エディターで指定された画像の代替テキストを使用してリストページの代替テキストを入力するには、フィーチャー画像のimgタグにalt="{{ content.featured_image_alt_text }}"を追加します。
img src="{{ content.post_list_summary_featured_image }}" class="hs-featured-image" alt="{{ content.featured_image_alt_text }}"
  • または、alt="{{ content.name }}"をフィーチャー画像のimgタグに追加し、ブログ記事のタイトルを持つリストページに代替テキスト属性を入力することができます。 
img src="{{ content.post_list_summary_featured_image }}" class="hs-featured-image" alt="{{ content.name }}"

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

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