I have an image, underneath it is a title and a subtitle. There are a number of these in a list. Clicking on them goes to an article.
<li>
<div class="img-container"><img src="test.jpg"></div>
<h2>The Title</h2>
<p>The sub title</p>
</li>
I need to link the above. I want the user to be able to click on the image, title or subtitle to get to the article page.
Should I wrap each element and create 3 x links:
<li>
<div class="img-container"><a href="/whatever"><img src="test.jpg"></a></div>
<h2><a href="/whatever">The Title</a></h2>
<p><a href="/whatever">The sub title</a></p>
</li>
Or should I wrap the entire block:
<li>
<a href="/whatever">
<div class="img-container"><img src="test.jpg"></div>
<h2>The Title</h2>
<p>The sub title</p>
</a>
</li>
Would either method have an impact on SEO? Usability?
2
Answers
Google used to have a limit on the number of links on a page; reducing the number of link (especially links to the same place) was considered advantageous. Therefore, I’d recommend going with your second option of wrapping the contents of the
<li>
in an<a>
tag.Wrapping the entire contents in an anchor is better as it’s more semantic and provides better code readability. There will be no impact on SEO as googles algorithms take all this into consideration (as wrapping multiple block level elements inside an anchor is allowed by the HTML 5 spec).
More importantly, in this code, make sure you have a title attribute on the anchor, an alt attribute on the img and use a better containing element. In this case you have a list of things, so something more semantic like an
<article>
tag may provide better SEO.