seo Question posted in
Some basic information to get you started with this can be found here.

What is the best way to use alt-text when you use background-image regarding SEO

I want to make sure the below solutions are optimized for SEO or at least able to be detected in the whole HTML code.

The site I’m working at is all about only pictures so mainly this is the most important question I have to worry about.

1.The first method and the one I like the most because when I’m with the mouse over the picture you can already tell that by clicking on the picture you will be redirected to another page because of the in-browser default link animation:

<div class="table">
    <a href="NEW LINK" alt="TAGS" class="thumbnail" style="background-image: url(LINK);">Tags</a>
</div>

As can you see above I added the tags in two locations.

  • created an alt
  • INSIDE the tags
    1. The second method I found on internet while looking for the same question I’m asking right now:
    <div class="table">
    <span onclick="NEW LINK" class="thumbnail" role="img" style="background-image: url(LINK);" aria-label="TAGS"></span>
</div>
    Tags:

    2

    Answers


    1. 0

      <a> tag doesn’t support an alt attribute. If you are using a background your best bet is using aria-* attributes, which is as you found role="img" and aria-label=""

      Login or Signup to reply.
    2. 0

      You can add an actual image in a div and set it as a background image with custom code! In general, this is the “rule”: Replace non-decorative CSS background with standard inline images.

      Login or Signup to reply.
    Please signup or login to give your own answer.

    Back To Top
    Search