Can hreflang be placed on the body of the HTML? Or has it to be in the head?
I can't find clear information about this.
-
1It's clear as day if you read the specification.– RobCommented Dec 22, 2017 at 14:43
Add a comment
|
3 Answers
Google supports:
Using <link rel="alternate" href="#" hreflang="en-ie" /> within the <body>and not the <head>, testing it in W3C validator fails and reports the following:
A link element must not appear as a descendant of a body element unless the link element has an itemprop attribute or has a rel attribute whose value contains dns-prefetch, pingback, preconnect, prefetch, preload, prerender, or stylesheet
It has been mentioned by Rob and Boldewyn, in both answers and comments that hreflang can be used within a <a>, since these tags are allowed within the body. This is true and both users make good points, however...
It can be very complex using hreflang within <a> and its unclear if its supported by Google:
- You need to make all links to page use the markup, so if you have many articles interlinking one another, it can become complex, very complex if having more than 2 language options. Adding markup to the page rather than links is less complex because you simply do a GET URL and plant that variable into link canonical, link hreflang, Facebook opengraph, Twitter cards etc.
- The main issue however is Google's Search Console Help mentions nothing of using
<a>for Multiple languages, this isn't to say its not supported, its just that I can say for sure it is.
Google specific says it supports:
HTML link element in header. In the HTML section of
http://www.example.com/, add a link element pointing to the Spanish version of that webpage athttp://es.example.com/, like this:<link rel="alternate" hreflang="es" href="http://es.example.com/" />HTTP header. If you publish non-HTML files (like PDFs), you can use an HTTP header to indicate a different language version of a URL:
<http://es.example.com/>; rel="alternate"; hreflang="es"To specify multiple hreflang values in a Link HTTP header, separate the values with commas like so:
<http://es.example.com/>; rel="alternate"; hreflang="es">, <http://de.example.com/>; rel="alternate"; hreflang="de">Sitemap. Instead of using markup, you can submit language version information in a Sitemap.
I recommend that you verify your MARKUP on-going using W3C validator, for example using this direct input code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simon Hayter Rocks!</title>
<link rel="stylesheet" href="example.css">
<script src="example.js"></script>
</head>
<body>
<link rel="alternate" href="http://example.com/en-ie" hreflang="en-ie" />
</body>
</html>
answered Dec 22, 2017 at 13:01
-
2This is not true. You can place
@hreflangequally well on<a>elements. The specification: html.spec.whatwg.org/multipage/…– BoldewynCommented Dec 22, 2017 at 13:55 -
And the W3C version: w3.org/TR/html5/textlevel-semantics.html#the-a-element– BoldewynCommented Dec 22, 2017 at 13:56
-
1@Boldewyn Browser vendors have all defected to WHATWG, for HTML at least, unfortunately. Use WHATWG as a reference.– RobCommented Dec 22, 2017 at 14:41
-
@Rob Google supports
<head><link></head>, HTTP Header or Sitemap and at no point does it say it will support BCP 47 tags. Commented Dec 22, 2017 at 17:01 -
No.
The only Link elements permitted in the <body> section are ones that are specified in the 'body-ok' list. You can find a copy of the table here:
https://www.w3.org/TR/html5/links.html#body-ok
You can use hreflang as attribute on both <link> elements and <a> elements exclusively. So, in a nutshell, no, you cannot short-circuit by putting hreflang on the <body> (like you could, e.g., with <base> for relative URLs).
Example in the page header, referencing an alternate language version for search engines:
<head>
<link rel="alternate" href="?lang=en" hreflang="en">
</head>
Example in the page body, clickable by users:
<body>
<a rel="alternate" href="?lang=en" hreflang="en">View this information in English</a>
</body>
