Images as hyperlinks and SEO implications

Question

I manage several websites, one of which is an e-commerce site with a lot of images. At the top of some product category pages, there are image links to specific products (think image banners).

I am curious how others handle images as links and what SEO considerations you make when doing so? Specifically, there are 2 ways one can code an image link:

• #1 The image can be the background of the actual anchor tag, like so:

  <a href="thelinkaddress.com" title="Visit My Link" style="background-image:url('link-image.png');background-size:100%;display:block;">My Image Link</a>
  

• #2 The image can be contained within the anchor tag as another HTML element:

  <a href="thelinkaddress.com" title="Visit My Link"><img src="link-image.png" alt="My Link Image"/></a>
  

My understanding is that method #1 will not index the image with a search crawler because it is considered a style, but I suspect that text content is more important to a search crawler than an image with alt text.

Does anyone have insight into how either way impacts the SEO of a web site?

Answer 1

From the very beginning, Google primarily utilized three perspectives when using semantics and ranking: one, link text and value to the target page; two, the title tag of the target page; and three, the content itself. One of the interesting research results the project found was that performing a search against the title tag was about 2% more effective than performing a search against the content itself. The notion of blended results was implemented where two searches were made using the search query against the title tag and the content separately along with ranking scores applied and the results of both queries blended into a single result. This is a fundamental tactic that I am sure still applies. This is one of the reasons why the title tag is so important.

Why did I tell you that?

The third most valuable semantic signal is link text. In effect, the same process for link text just like title tags could be applied with highly accurate results setting aside low quality links such as read more. This means that the title tag and the link text (targeting the page) are of significant importance.

The image alt text primarily benefits the image which it is designed to do. Many SEOs over emphasize the semantic effects of image alt text giving the impression that it carries a more significant weight where this is simply not true. Any semantic benefit that an image alt text gives is significantly less than the content. Remember the three most significant semantic signals are the title tag, link text, and the content itself. Image alt text, while a clue and can help broaden the semantic profile for any page, is significantly less important than other signals such as header tags which carry significant weight following the content block theory that has also existed since the beginning.

Setting aside the importance if the alt text, the link text is a far stronger signal for the target page.

Today, there are a ton of semantic signals used and each have it's value in evaluating the topic of a page. Still, the most important two signals are the title tag and the link text to the target page.

Based upon this, your first example...

<a href="thelinkaddress.com" style="background-image:url('link-image.png');background-size:100%;display:block;">My Image Link</a>

...sends a much stronger signal for search assuming that the link text properly matches the page topic and reflects the most important keyword elements of the target page and are not over optimized or too optimistic. Any title tag should do the same.

Answer 2

Run an A/B test, it's the only way to really know--regardless of what has worked for others or what has worked in the past--nothing beats testing.

If you don't want to test and just want an answer you might be in the wrong line of work but let me share my totally untested opinions anyway:

Considerations

Panda punished sites with too many ads "above the fold," as long as these images are on the same domain they probably won't be considered ads.

Actual <img /> images are considered content (unless quite small) and therefore should have alt text, they are also given higher priority in loading and rendering than CSS background images so there are accessibility and (contradictory) performance considerations. It's easier to scale HTML images but to control the cropping/positioning of background images.

Plain Ol' Semantic HTML

If these images are repeated frequently and mostly identical throughout the site then they are probably better suited to background images as they aren't really content, they are really navigation.

If these images are more targeted--offers that are highly relevant to the places where they are located--then they are part of the "content" of those pages and should be <img /> images with alt text (for accessibility and usability).

Title attribute?

I think @closetnoc is referring to title attributes (which are valid on any HTML element and generally display as tootltips on hover) but it's plausible he means the <title> element of the page that the link points to.

I'm going to assume that he means title attribute and the jury is out on how much, if any, significance Google gives the title attribute (google it).

Google encourages using the title attribute on images, but nothing on using it on links (if you go the CSS background image method).

And there's plenty of claims that the title attribute is ineffective at influencing ranking and indexing, see here and here.

I don't know if I believe it has any SEO value at all (might have value to users) or not, which is why I encourage you to test and see.

Pattern Detection

Google is great at detecting and discounting patterns: think "duplicate content."

The more "unique" content you have the better so I suspect a mixture of the 2 techniques, with as much variation as possible in images, alt text and anchor text as possible will be the most effective.

A/B Testing to the Rescue!

Why guess when you can test?