COS-Blog

How do I add alt text to featured images on blog listing pages?

Last updated: March 28, 2017

Available For:

Marketing: Basic, Pro, Enterprise
Sales: N/A

At this time, a featured image's alt text is not populated on the blog listing page by default. This can cause SEO warnings on listing pages in Page Performance.

The easiest way to resolve this is to add an alt tag that is populated on the listing page using Hubl. Follow these instructions:

  • From your HubSpot Marketing account, navigate to Content > Design Manager.
  • Locate and click on the name of your blog template.
  • In your blog template, click the Edit Listing Template button within the Blog Content module to access the HTML of your listing template.

Please note that the instructions below are for updating the blog listing template specifically.

  • Add alt="{{ content.featured_image_alt_text }}" to the featured image img tag to populate the alt text on the listing page with the image's alt text as specified in the post editor:
<img src="{{ content.post_list_summary_featured_image }}" class="hs-featured-image" alt="{{ content.featured_image_alt_text }}">
  • Alternatively, you can add alt="{{ content.name }}" to the featured image img tag to populate the alt text attribute on the listing page with the blog post's title. Please note that including {{ content.name }} on the blog post template might result in HTML code rendering on your post:
<img src="{{ content.post_list_summary_featured_image }}" class="hs-featured-image" alt="{{ content.name }}">
  • Click Publish Changes.

Was this article helpful?