3

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.

  • 1
    It's clear as day if you read the specification. – Rob Dec 22 '17 at 14:43
4

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:

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:

  1. 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.
  2. 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 at http://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>
2

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

1

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>
  • The area element can also have the hreflang attribute. – unor Dec 23 '17 at 19:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.