[Resolved] Hero image elements don't bring in the Alt tag

[Carrie]

Good morning! When I use an element to bring in a hero image, it doesn’t seem to carry the alt tag with it. This is important for SEO, especially on the home page when it’s the primary image on the page.

Is there a workaround to get the alt tag included with all hero images?

[Leo]

Hi there,

The home page hero image is a background image so it doesn’t have an alt tag:
https://accessibleweb.com/question-answer/add-alt-text-background-images/

Since you don’t have any content inside the page hero, you can actually consider adding the same image as a static image inside the header element content then you can add an alt tag to it.

[Carrie]

When you say, “adding the same image as a static image inside the header element content,” I’m not sure what you mean. Can you please elaborate?

[Leo]

Add this inside the page hero content:
<img src="IMAGE URL" alt="ALT TAG">

Reference: https://www.w3schools.com/tags/tag_img.asp

[Carrie]

Leo, thank you so much! I had tried that, but it had clutter that I didn’t realize needed removing…
Removing the class junk did the trick.

I appreciate your help – THANK YOU!!

[Leo]

No problem 🙂

[Carrie]

Whoops, I have a new issue – there is a hairline of white space appearing below the static images that I can’t seem to get rid of. It isn’t on the image itself, I’m using .site-content { padding-top: 0 !important; } in the CSS for the page, and I’ve got padding above the fill box underneath the image set to zero and the column top set to zero.

Examples:
https://www.carriemorgan.com/about-carrie-morgan/
https://www.carriemorgan.com/content-seo-brands-agencies/

Could the style of the element be adding that space?

I’d appreciate your help so much, Leo.

[Leo]

Actually come to think of it, can’t you just use the featured image instead of header element?

If you set it to above content then it should be full width exactly like the page hero.
https://docs.generatepress.com/article/adjusting-the-featured-images/

[Carrie]

I could if there were a “cover” setting, but my images are all around 2000-2071 pixels wide, and using featured images ends up with white space on both ends on larger monitors.

Example: https://www.carriemorgan.com/wp-content/uploads/GeneratePress-screenshot.jpg

I didn’t see a setting to help it adjust to the width of a browser window when it’s larger?

[Leo]

We can probably try a bit of CSS.

Can you link me to the page using the featured image?

[Carrie]

Sure – https://www.carriemorgan.com/how-my-custom-keyword-research-works/

This is the CSS currently in use:
.site-content { padding-top: 0 !important; }

[Leo]

The option is set to above content area in the customizer for pages?

If so try this CSS:

.featured-image.grid-container {
    max-width: 100%;
}

[Carrie]

Yes, see it here – https://www.carriemorgan.com/wp-content/uploads/GeneratePress-screenshot-2.jpg.

Is your new code instead of – or in addition to – the original CSS?

[Carrie]

So better, but it still doesn’t cover the full width. Although granted this is an ultrawide monitor…

https://www.carriemorgan.com/wp-content/uploads/GeneratePress-screenshot-3.jpg

[Leo]

It should be 100% of whatever the screen width is – however I don’t see my CSS being added here:
https://generatepress.com/forums/topic/hero-image-elements-dont-bring-in-the-alt-tag/#post-1050732

Make sure to clear any caching plugin you might be using including site ground.

[Author]

Posts