SEO effects of wrapping block-level elements in links
Sometimes when I am working on a website and the webdesign has something like boxes (online shops' products in grid especially), I tend to hesitate whether to make the whole box a link or not. For example:
<a class="product-box" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/product/123">
<img src="/someimage.jpg">
<h3>My product</h3>
<span class="price">1000$</span>
<button>See detail</button>
</a>
It seems much more user friendly to me when these box-like elements are whole links, because when on mobile devices, it is harder to hit a small button. However I am not convinced if there's no negative effect on SEO after doing this. It just appears odd to me when a large block of HTML is enclosed in a <a>
tag.
It is quite hard to find any discussions on this matter so any opinion is appreciated.
Answer
This is valid in HTML5, so you're ok to wrap block-level elements in a link. Here's another article on the subject.
That said, Google is still on the fence about the practice. According to this thread from the Webmaster Central Help Forum, Google's John Mu says:
That usage [wrapping block-level elements in links] would be fine with us - we'd still pick up the link, and would be able to associate your text as an anchor with that. We're pretty flexible with parsing HTML, so you could probably even use this with HTML4. That said, the clearer you make your anchor text, the easier it is for us to understand the context of the link, so I wouldn't necessarily always use a whole paragraph as the anchor for all of your internal links.
In short, wrapping an entire element in a link makes it hard for Google to understand the context of the link.
Related Questions
- → October CMS create a multi select Form field
- → How to update data attribute on Ajax complete
- → laravel blade templating error
- → should I choose reactjs+f7 or f7+vue.js?
- → How to dynamically add class to parent div of focused input field?
- → Setting the maxlength of text in an element that is displayed
- → Undefined Result for Variable with Javascript innerHTML function
- → Expanding search bar not expanding before search
- → Get the calling element with vue.js
- → Blade: how to include a section in one page but not in another
- → How to print/log reactjs rendered dom?
- → how to write react component to construct HTML DOM
- → How to add a timer in HTML5 and Javascript?