I am trying to use <h1> tags on my blog for the post title and came across one problem. Title is hyperlinked.
Case 1:
<h1> <a href=""> xyz </a> </h1>
case 2:
<a href=""> <h1> xyz</h1> </a>
Which one is better in terms of SEO?
Add a comment
|
8 Answers
If you are using HTML5, just pick one; they're equivalent.
HTML5 does allow block-level links, but in your case there's no particular reason to do it, since there's only one block-level element. Personally, I wouldn't do it here, because having the <h1> tag on the outside would make it easier to scan for in source code.
Anything else (XHTML, HTML4, etc) and the second one is just plain wrong. It wouldn't be valid code, and on some level that's bad for your search optimization [Insert standard disclaimer about how much any single offense really affects anything, etc.].
-
I have a question: <h1>hello<h1> // 5 characters <h1><a>hello</a></h1> // 5 characters or google reads it as 12 characters?– hfarazmCommented Jul 19, 2016 at 13:40
They're both correct in html5, html allows block elements in inline elements. This also has no effect on SEO, both cases the text is wrapped in the heading, so it remains to have the same value.
It's not a choice of validness, but a preference in User Interface:
- Wrapping the header around the anchor: Only the text is clickable.
- Wrapping the anchor around the header: The whole header row turns clickable.
They're the same as far as SEO is concerned. (Usually block level elements contain inline elements and not vice-versa so you should use the first example but it won't affect SEO).
answered Oct 3, 2011 at 12:43
-
3Actually inline elements must not contain block elements as per the HTML spec. Commented Oct 3, 2011 at 15:03
-
3
-
@Su' which doctypes allow block elements inside inline elements? Commented Oct 3, 2011 at 23:17
-
4@DisgruntledGoat HTML5 allows links (formerly just inline elements) to surround block elements like headers and paragraph tags. This is where doctype is important. If you're using HTML5, by all means use the pattern
<a><h1></h1></a>. Otherwise, use the traditional pattern of<h1><a></a></h1>. Google will pay attention to both methods equally, but some browsers may not play along nicely with the non-standard pattern UNLESS you have the correct doctype (HTML5). Commented Jun 20, 2012 at 12:31 -
so the above will apply for named anchor tags too. isn't it? it is good to have <h1><a name='intro'>Introduction</a></h1> other than <a name='intro'><h1>Introduction</h1></a>. Commented Aug 23, 2013 at 7:34
I find that with Case 2 the href insert is often out of line with the rest of my page. But that could be the way I set my margins in my .css. Thus I would favour Case 1.
What's said here's is insightfull, thank you all. Let's take it up one more notch: adding microdata and such into the equation.
Let's say we've got
<h1 itemprop="name"><a href="http://goldenage.com/maths.html"
itemprop="url">Mathematics in The Muslim Golden Age</a></h1>
competing with
<a href="http://goldenage.com/maths.html" itemprop="url"><h1
itemprop="name">Mathematics in The Muslim Golden Age</h1></a>
To me, 'regardless of the performance', example 2 makes more sense. Because the link is never part of the name. The difference boils down to the difference between innerHTML and textContent, DOMwise. Looking at it through innerHTML, the anchor gets in the way. If textContent were the way, tags would be stripped. So that also puts the question: innerHTML or textContent.
So I would say, taking microdata into account, having the anchor on the outside is more pure.
based on: http://thenewcode.com/617/How-To-Add-Microdata-To-Your-Blog
Block level links should be avoided for SEO purposes - from the horse's mouth: https://www.seroundtable.com/block-level-links-google-seo-16369.html
Update: Takeaways from the link...
Having either linking construct, as others have said, is fine for linking. However, for SEO purposes, you should keep the anchor text clean so Google can interpret the anchor better and assign the appropriate relevance.
John Mueller (Webmaster Trends Analyst at Google) goes on to say...
That usage would be fine with us (Google) - 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.
TL;DR For SEO, don't use block-level link.
-
With the hope you will update your answer, it shows, in part, why both examples are NOT equivalent as others have said.– RobCommented May 26, 2017 at 12:24
<h1> <a href=""> xyz </a> </h1> This example is correct.
-
4
If the purpose is to have additional clickable elements inside the link (like a picture etc.) and still validate with html<5, you can have it both ways with javascript:
<div onclick="if (this.getElementsByTagName('a')[0]) location=this.getElementsByTagName('a')[0].href;">
<img src="/foo" alt="" />
<h1>
<a href="#">
linked-heading
</a>
</h1>
</div>
else, simply:
<h1 onclick="if (this.getElementsByTagName('a')[0]) location=this.getElementsByTagName('a')[0].href;">
<a href="#">
linked-heading
</a>
</h1>
add cursor:pointer to parent element's css to make the trick complete.
-
2
-
Why would you even do this? Just wrap the header in the anchor. This is just bad practice– MartijnCommented Jun 22, 2015 at 11:21
-
Read the comment carefully, you'll find your answer spelled right there ;) Html 4.01 actually is as old as 1999. When you try to validate your suggestion under that doctype you'll get the following error: "[D]ocument type does not allow element "H1" here (...) One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>")." Of course, one doesn't absolutely have to care about what validators say, hence the "if" at the very beginning of the comment.– lucianCommented Jun 22, 2015 at 16:04