Search code examples
htmlseohrefmultilingualsemantic-markup

HTML5: should hreflang always point to a direct translation?

This is a good practice to place this kind of links in head for multilanguage sites:

<head>
    <link rel="alternate" hreflang="en" href="/en">
</head>

But, according to an answer to the question Semantic markup for language switcher, language switcher should look something like:

<nav>
  <h1>Translations of this page</h1> <!-- could be omitted → usability question -->
  <ul>
    <li>English</li> <!-- could be omitted → usability question -->
    <li><a rel="alternate" href="/pl" hreflang="pl" lang="pl">Polski</a></li>
    <li><a rel="alternate" href="/de" hreflang="de" lang="de">Deutsch</a></li>
  </ul>
</nav>

I've got few semantic markup questions according to that:

  1. Are both of those rules required for SEO? Or, if I've got language switcher on my site, links in head are not needed anymore?

  2. Let's say that I'm on the page: example.com/pl/kontakt. Should translation links inside head (or nav) point to: example.com/en/contact (direct translation), or only example.com/en (English mainpage)?

  3. What about more specific situation: example.com/pl/aktualnosci/id/101. 'aktualnosci' means news. As you can see not all the newses can be translated into every language. And it is sometimes hard to predict the perfect translation URL, based on only parameters. So the question is: where should the translation link (or nav) point for this URL: example.com/pl/artykul/id/101, when:

    1. We are not sure if this resource is translated?
    2. We don't exactly know the translation URL?
    3. Resource is for 100% not translated?

I hope my question is clear. But I will put one more example: Someone is on the page example.com/en/news/2015/03/02/stackoverflow-rules, and this news is not translated to Polish. Is it a mistake to put:

<link rel="alternate" hreflang="pl" href="/pl/aktualnosci">

as a translation? Of course this page is not a translation, but only for example a list of all translated newses.

As for me semantically it is a mistake, as this is NOT a translation, but from UX side, it is great, because it points to the nearest translated resource and make life easier for the user.

Solution

  • alternate+hreflang: link vs. a

    Semantically it makes no difference which one to use. In both cases the link links to a translation of the page.

    But it’s conceivable that a consumer (e.g., a search engine) decides to ignore alternate+hreflang on a elements, for example because some sites allow this markup in user comments. It’s rare that users could edit the head, so they might only look for alternate+hreflang on link elements in the head.

    Unless you have strong reasons not to do this, simply provide both:

    • a language switcher, especially for your human users, in the body (a elements)
    • translations links for bots that only check the head (link elements)

    Page vs. site

    An alternate+hreflang link is defined to point to a translated document, not a site.

    Pages not translated

    If /pl/artykul/id/101 is not translated into other languages (or you don’t know for sure that it is, or you don’t know the URL), simply don’t use alternate+hreflang.

    And yes, it would be wrong to link to a translated parent page in this case: /pl/aktualnosci is not a translation of /en/news/2015/03/02/stackoverflow-rules.

    Of course you could still provide such a link for usability reasons, but you should not use the alternate+hreflang markup for this link.