Google Cautions On HTML5 Block-Level Links Usage

Feb 15, 2013 • 8:30 am | comments (10) by twitter Google+ | Filed Under Google Search Engine Optimization

HTML5A Google Webmaster Help thread has one webmaster asking if it would be a bad thing for him to use block-level links in his HTML5 web site.

First let me explain what it is by referencing HTML5 Doctor:

Imagine you have a front page with lots of teasers for news articles, each of which leads to a page devoted to the full text of that article. Obviously, each story needs a heading and you’ll want an image too, and you’ll want them all clickable. In current mark-up you’ll probably have something like this:

<div class="story"> <h3><a href="story1.html">Bruce Lawson voted sexiest man on Earth</a></h3> <p><a href="story1.html"><img src="bruce.jpg" alt="full story. " />A congress representing all the planet's women unanimously voted Bruce Lawson as sexiest man alive.</a></p> <p><a href="story1.html">Read more</a></p> </div>

Note that you have three identical links (or two if, like the BBC News site, you assume your readers don’t need a “read more” link).

In <abbr>HTML</abbr> 5, you code it like this: <pre><code><article> <a href="story1.html"> <h3>Bruce Lawson voted sexiest man on Earth</h3> <p><img src="bruce.jpg" alt="gorgeous lovebundle. ">A congress representing all the planet's women unanimously voted Bruce Lawson as sexiest man alive.</p> <p>Read more</p> </a>

Now the single link surrounds the whole teaser, removing duplication and creating a much wider hit area to click.

Google's John Mueller kind of cautioned against using this technique. He wrote:

That usage 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, since the whole paragraph is one big link, there is a ton of anchor text to associate to the link. So it may be confusing for Google to understand what that link is really about.

Forum discussion at Google Webmaster Help.

Previous story: A Shortcut To Uploading Photos To Your Google Maps Business Listing


Scott McKirahan

02/15/2013 02:05 pm

So, "read more" is bad because it tells the search engines nothing (but is perfectly clear to the reader). The whole paragraph is bad because it confuses the search engine (and again, the user isn't a consideration). Sure sounds like Google isn't all that concerned with what is best for the user here at all. I guess, if it were me, I'd change the alt text to something like "Bruce Lawson voted sexiest man on Earth - read more ..." (kind of repetitive, don't you think?) Pretty friggin' awkward!


02/15/2013 03:51 pm

Don't use exact match links! Don't use long links! Don't use block-level links! I guess "read more" is just the kind of thing that helps Google "understand" what the link is about then, right? Makes perfect sense if you're drinking your bathwater. Any more, I tend to put whatever I feel like in a link and let Google sort it out if they want to, or not.


02/15/2013 04:29 pm

I wish Google would just tell us what they want us to use as anchor text and stop changing their bloody minds all the time. First it's don't use generics, then it's use generics, then it's don't use keywords, now they don't want us to use paragraphs even if it's fully descriptive of the link at hand... I give up, I really do.


02/15/2013 04:43 pm

The basic rules haven't changed in a long time, keep your anchor text relevant and varied. just because there is a different method encoding a link doesn't change that. Making a link have a whole paragraph as anchor text simply means Google can't easily understand what topic that link is relevant to from the anchor text. Google is not as advanced as they like to pretend, or people generally think. They still rely on people using short snippets of relevant text in things like anchor text to add authority to content. They can understand that if you write "shoes" then that is still relevant to the page about trainers it links to, they can do this from a basic ontology - but they struggle to understand "check out these amazing new kicks" as having anything to do with the content, unless of course it uses the term "kicks" on it - I'm sure in the future that after seeing enough instances of it they will be able to learn that association - but I've seen no evidence they are there yet (would love to see it though) Put this advice in that context and it's really not that surprising, and it makes life much esier when thinking about all the different do's and don'ts around anchor text

josh bachynski (SEO)

02/15/2013 04:53 pm

Could also be keyword stuffing if you had too many keywords in that paragraph

Michael Merritt

02/15/2013 07:02 pm

I'm slightly baffled as to why this is considered a good practice at all. Even the very old HTML 3.2 validator doesn't like paragraph tags within anchors. In general I like to have anchors within one area, or you're more likely to make unintended text an anchor as well, and then have to hunt for the place to put the closing tag which, if there's a lot of code in-between, could be very far away. Why did the WHATWG decide to make this more permissive? That said, I wish they had decided to go with the plan to make anything an anchor. Then you could make your H3 tag a link and not have to worry/care about putting block-level elements within a (primarily) inline element.

Dario Petkovic

02/16/2013 08:46 am

Although a little over my head, it makes sense to me what John M is saying


02/16/2013 03:09 pm

I think the problem here is one of usability for mobile. If I'm reading the page on a nice big desktop monitor, it makes sense to me that the heading should anchor the link. It makes sense to the user and the search engine. But if I'm reading the page on my smartphone, I need a link that's easy to click, and when I have to click with my thumbs, I'm truly all thumbs. If the link is anchored by the entire introduction to the article, that's going to make things a lot easier for me, but I can see why it's going to confuse the search engine.


02/18/2013 04:32 pm

Thanks for the follow up guys ! :)

Smart Cards

11/13/2013 01:03 am

Didn't think about that, now I have three reasons for nesting.

blog comments powered by Disqus