Help with hreflang tags for multilingual site

Publishing help SEO
1

Hi everybody,

I’m working on a multilingual site (English, German, French) and am in the process of figuring out hreflang tags etc and have come across a few things which confuse me.

(Also, I know that weglot is a thing - but I chose not to go with it, because I want more control over the content on individual pages.)

Confusion Point 1: folders

I’ve created folders for each language (EN, FR, DE), so the URLs of the published site will look like:

communify.ch/de/page-title (page title in German)
communify.ch/fr/page-title (page title in French)

My trouble is: what about the homepage? Webflow automatically sets one page as the home page which can’t put it into a language specific folder. So how do I best go about this?

  • Duplicate the home page and put one version into the EN folder?
  • Delete the EN (english) folder and have all english pages not in a folder?

Confusion Point 2: hreflang tags

Does the option I go with change the way I need to set up hreflang tags?

For the home page, currently I’ve set up these two hreflang tags for the french and german version of the site:

< link href=“Accueil | Communify” hreflang=“fr” rel=“alternate” />
< link href=“Home | Communify” hreflang=“de” rel=“alternate” />

How do I go about listing the english version of the site with regards to confusion point 1?

  • If I go with the first option, do I need to use the “canonical” tag to tell Google how it should list the home page? If so, could you tell me, what exactly that would look like? If not - what else do I do?
  • If I go with the second option, what would the hreflang tags for all three pages look like?

Confusion Point 3: subdomains

Does the fact that I’ve set up folders for the specific languages mean that I don’t have to set up sub domains for the specific languages? If I do have to set up sub domains - how would that work?

Thank you guys!!! Your help is much appreciated.

Share Link: https://preview.webflow.com/preview/communify-20804c?utm_medium=preview_link&utm_source=dashboard&utm_content=communify-20804c&preview=f3a3112193b4809ea115a148067fa277&mode=preview

1 Like
2

Hi, that’s a great question you’re asking !!!
I need the answer myself.

Should it be on the “before body” part or the “inside head” part?
I use this :
link rel=“alternate” hreflang=“fr” href=“https://www.mywebsite.com/fr/graphic-design”

3

Hi there! You could set up a default link with your English content. In this way, you could use “x-default” attribute for specifying a page, that does not have any region or language associate with it. It could potentially be your English version content. For example,
link rel=“alternate” href=“http://example.com/” hreflang=“x-default”

If you are interested in more details about how to set up hreflang tag correctly, you may look at the post: https://geotargetly.com/hreflang-seo-guide-for-multilingual-regional-websites

Hope it helps!

1 Like
4

Hi, I am facing the same questions, did you find an answer ?

5

@tans Which part specifically?

For the homepage, the most common setup I see is typically;

/ - primary homepage, default language, usually English for my clients
/zh - language-specific homepage, e.g. Chinese
/zh/... - folder also created, contents are langage-specific, e.g. about, contact, etc.

To cross-reference, place your link hreflang into the <head> custom code.
Each of your homepages refers to all of your other homepages.

Continue this pattern for e.g. your /about/ page, etc. which can reference your variant language versions, even if they’re at different paths.

I also use script to add the lang attribute to the <html> element for each language variant.

Collection pages are a bit tricker, meaning more script, and less path control, but the general approach is similar.

6

Hi, thank you very much for your answer,
What I understood reading about Href is that it does not matter the folder as each page has it’s own Href, is it right ?

So I generated all the href with a tool and pasted in each page the default href (home page) + the actual page in it’s language + the alternate page in the other language, like this :

Capture d’écran 2022-11-15 à 20.04.30
Capture d’écran 2022-11-15 à 20.04.301128×122 53.8 KB

But when I use a href testing tool, it still says for the home page “The Domain/URL https://www.inteamgarage.com/ seemingly does not contain any valid hreflang tag”

Do you know where does it come from?

Also, is it better to put all the href at once in the head custom code? or is it better tou put each page corresponding in each head code?

Here is my shared link:

https://preview.webflow.com/preview/inteam?utm_medium=preview_link&utm_source=designer&utm_content=inteam&preview=05a8754f4f8304646eda3a7e69c2de85&workflow=preview

Website share

7
2 Likes
8

Woaw thank you so much for your explanations Michael, that’s amazing! It makes it much more clear! Actually I’m sorry for this late reply, I didn’t see the notification of your answer…

So I have removed the href linking to its own page and set the English home page in the root of the website. On French pages, I’ve put only the English href. For the moment I’ve left the French href on English pages as I am still questioning on one thing : how google would know that there is french pages if there is not the alternative href in the page?

9

All of the language variants point to all of the other language variants. So your English pages point to your French pages, and your French pages point to your English pages. If these are all pages in Webflow, then both are in your /sitemap.xml as well

10

Hi Michael,

You were briefly going to touch upon hreflang tags for CMS collection pages. I was playing around and found a little workaround to manually adding code to insert the hreflang tags, however despite posting it in the custom code section, it still throws it in the on my actual page. Would you happen to know whether this is an issue from Webflow’s end? Super frustrating as I’ve been trying to get this to work for weeks, and just when I think I found a solution, the code goes in a completely different place! Here are some screenshots!

Screenshot 2022-12-15 at 12.56.55
Screenshot 2022-12-15 at 12.56.551262×418 58.7 KB

Screenshot 2022-12-15 at 12.55.41
Screenshot 2022-12-15 at 12.55.411526×274 88.6 KB

Thank you in advance

11

@HenrikKoos Hi, I can see in your code you managed to reference the urls slug from the translated pages. How did you manage to do this? Did you have a field with a different slugs in your collection or?

12

Hi Henrik, I just saw your message here now. Have we already talked about this in another thread? Déjà vu… just in case though, all code you put in Webflow’s HEAD custom code area goes in the <head> of your page. I’ve noticed some devtools display this incorrectly and shows parts of the <head> code inside of the <body element- no idea why. Are you using Firefox in that screenshot?

It’s probably fine, share your link if you need me to have a look.

13

I’ve added the href langs in the head of every pages but doesn’t show up in the auto-generated sitemap from Webflow? vaneeckhoudtpools.be/sitemap.xml