Streaming live at 10am (PST)

Changing the "lang" attribute of the html tag

Hello,

I’m building a multilingual website with a App that refer to the “lang” attribute of the html tag before the “head”.

In project setting->custom code i can change the tag but i need to change it on specific page, can you explain me the trick to make that append please?

Thanks in advance.!

LanuageCode|690x263

2 Likes

Hi @SmartWeb

Try checking the bottom of your your custom code settings page:

4 Likes

Hello @PixelGeek You didn’t read my post and didn’t see me attached file… I know this option.

I want to change this setting on a single page of the project, do you know how i can do this?

For example:

  • Home page -> FR
  • Product page -> EN

Thanks in advance.

my apologies. I don’t think there is a way to change it per page. I’ll ask the team and see if there is a way.

1 Like

@PixelGeek Ok thank you.

Maybe via JS after the head or before the body section?

Hello, I’m also trying to do the same. We have one website with multiple languages…


Did you manage to do it ?

Haha… classic!!
Been overlooking this for ages… :nerd_face:
Cheers @PixelGeek

The way I’ve done it is simply by defining the lang attribute manually in each page with custom code instead of using the option in project settings.
This is how I did it and some SEO checkers seem to find it correctly:

@harryqover if you have different language versions of the same page, you should also use hreflang tags, as shown in my screenshot, to tell google those are actually different languages. This way google won’t penalize you for duplicate content.

5 Likes

Thanks @TomiLynch. Very helpful. I forgot about the hreflang and penalisation possibilities from Google. :slight_smile:

When I do this, the is ignored (it doesn’t show up in the source code). Did you experience something similar?

The what is ignored?

The lang attribute shows up in my source code.

To verify, press Ctrl + F and search for the word “lang”.
First result should be de html lang attribute as shown in my screenshot.

Thank you, i doesn’t show up in the developer tools. That is why i was irritated.

Thanks for the info, that’s good to know. But I believe it’s Google’s DevTools that moves it to the right place and not Webflow, since when viewing the source code, it is shown as in my previous comment.

Yes, checked the source code and you’re right. I will remove my post above then as it is misleading.

+1

This is a hair-on-fire oversight for multilingual sites with accessibility requirements. The WCAG standard requires the page language to be set in the “lang” attribute of the html tag.

https://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning-doc-lang-id.html

A Web page produced in Germany and written in HTML includes content in both German and English, but most of the content is in German. The default human language is identified as German (de) by the lang attribute on the html element.

It’s simply the state of affairs that audiences are sensitive about issues of language and accessibility. I don’t want to put a client in hot water simply because I chose Webflow to make their site.

For those arriving in this thread in the future, this doesn’t appear to address the issue. It adds a second html tag at the end of the header.

1 Like