: Can hreflang be placed on the body of the HTML? 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.
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.
More posts by @XinRu657
3 Comments
Sorted by latest first Latest Oldest Best
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>
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: www.w3.org/TR/html5/links.html#body-ok
Google supports:
Link Hreflang
HTTP Header Hreflang
Sitemap Hreflang
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:
W3C
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 www.example.com/, add a link element pointing to the Spanish
version of that webpage at 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>
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.