Streaming live at 10am (PST)

Alt tags for background images for SEO


#1

Hey guys, does anyone know if there is away to add alt tags to background images? I’m optimizing a site that I designed for SEO but it doesn’t look like there’s a way to add alt tags to background images.


#2

No. Not an option in HTML.
https://www.w3.org/TR/html52/


#3

Here’s an answer from a similar post Alt Tags for Background Images:


#4

Oh ok perfect, all tags will only work within the html doc and are not possible since bg images are stored in css file. Get it.

Yea, the title tag is not the same as the alt tag when it comes to SEO. In the case of an image not showing up when a page loads, the title tag will not appear as an alt tag would. Best solution is to add an image element and add the alt tag to the image.


#5

This might be a good workaround: (starting at 40:55)

You can add an actual image in a div and set it as a background image with custom code!


#6

In general this is the “rule”:

Replace non-decorative CSS background with standard inline images. css-background-images-and-accessibility.

In practice, a lot of times, sites use background images and not inline images (The main reason is the "background-size: cover;" it’s harder/tricky to create the same effect for inline images).

Summary: Inline images better for SEO & accessibility.


#7

cool, thanks for resources.


#8

AND webflow responsive image magic does not apply to Background images so you will warning from page speed tests


#9

Hello,

To that adding title to the div is the only way for you to do a background image CSS.

you can cheat a little by then loading a transparent image in the container that the background image is in,
make this image have an alt tag and title tag for whatever your background image is about.

if you are doing this for SEO purpose this should work, if you are doing it to have the HTML well formatted,
there is only the div tag.

Thank You,

Web Development Technologies


#10

If it is a gallery block image the best way to add alt tag is
1.Double click the gallery block
2.Click on the image to be added with alt tag.
3.Add alt tag in the image title box.
4.Click on save.


Virtual Personal Assistant


#11

Optimizing Your Images for SEO ( Alt Text )

  • Get your images found on Google by adding text to them to drive more traffic to your site!
  • Since search engines cannot “read” images , they search for alternative text to describe them. This text is called “ alt text ”. …
  • You can optimize your images for SEO by adding alt text to an image or gallery.
    Thank you
    Rahul Kapoor