hreflang - do I need to prefix links on the different versions of my pages?

Question

hreflang has proven extremely frustrating for me to implement with my previously clean site layout. I've finally bitten the bullet to risk it because Google still doesn't index our translated versions with hreflang: I'm putting things like /ja/ before the URLs.

My question is this:

The links used to be very simple. You could watch a piece of content by visiting

/watch/<slug>

or see a user by visiting

/user/<slug>

read a news article by visiting

/news/<slug>

You can log in by visiting

/login/

And once logged in, there's additional things you can do like visit

/watch/edit/<slug>

to edit your own content.

When I now have things like /ja/watch/<slug> to deal with, what should be done with the actual links on the page? Should they also have the language code prefix added to the URL?

For example, linking to a user's profile from a piece of content that they've created, and accessing it from /ja/watch/<slug>:

<a href="/ja/user/<slug>">Username</a>

Or is it fine just to leave them as is, e.g

<a href="/user/<slug>">Username</a>

I built the site using a template system (Twig). I don't fancy having to go in and drop a piece of code before every single navigation link, nor having to deal with duplicate/broken content because of one that's missing or is generated outside of Twig.

If there is no langcode in the URL, the site will still switch languages based upon your browser's Accept-Language header.

Answer 1

You should update all your links to include the language. This is because:

• Googlebot doesn't send a variety of Accept-Language headers to the same URL. It expects the language to be specified in the URL. If you link to URLs that are auto-language, Google will only index one of your languages.
• Once somebody has specified their language, it shouldn't change when the click on links. If somebody is on a German page, they would expect clicking links to take them to other German pages, even if their browser is set to prefer English.

I don't know if it is possible in your homegrown template system, but in my experience, it is usually best build URLs from a central function. So instead of <a href="/user/username"> I would recommend <a href="$urls.user('username')"> Where urls.user is a centrally defined function that builds all URLs for user URLs. It would typically be implemented as

urls.user(name){
    return urls.base("/user/"+name)
}
urls.base(slug){
    return "/" + context.page.lang + slug;
}

That way there is a central place to ensure that every URL on your site is built consistently.

I'm also wondering how you are internationalizing user created content. Are you having somebody translate all the content? If not, it should be available only in one language to Google. It is not a good idea to mix the template language and the content language for Google. There could be some exceptions for language agnostic content such as photographs or classical music videos that don't have words. In cases where the main content of the page isn't translated, you should not be implementing hreflang, instead you should tell Google that the canonical place for the content is where the language of the template matches the language of the content.