Speaker 1: How do you serve a page with content on multiple languages? This is the question for today. My name is Maxim and let's figure this out. Serving web pages in multiple languages is a very big topic and for me it breaks down in three main parts. First, we need to recognize what language is preferred by current users. Essentially, you have two options. Either let users specify explicitly the preferred language or make the best guess based on the data that you already have about the user. Let's begin with setting language explicitly. First way to allow users to pick the language of the page is to include the locale inside the URL. You can see this approach on developermozilla.org. It also provides some additional benefits. For example, it provides consistency when sharing multilingual content. So if I decide to share this page by copying the URL, I can be sure that my friend will receive same version of it because the locale was included into the URL. Alternatively, you can create some language selection mechanism that will store picked language in current session so that you can use this information to serve the localized version of the page. This is good. It allows users to specify the preferred language and does not require them to know that this functionality already exists in the browser. There is special accept language header that you can use to get the language preference of your user. This header has a list of locales with weights, like priority for each of them, where default priority is one. So if priority is not set, then it's the biggest priority. All major browsers allow users to specify their preferred languages. For example, in Firefox, you go to about preferences, you go to general tab, you scroll down to language section and you will see choose your preferred language for displaying pages. You click choose and then you can add new locales. You can move them up or down and this way you will add them to accept language header or change the priority. After you finish, this information will end up in accept language header. After we know what language is preferred, we need to serve the page properly, which includes specifying the proper encoding and also providing meta information in headers and HTML tags telling what is the language of the content we are serving. Why is it so important to properly set the chair set? Well, if you don't do it, browser might use the default one, which is either latent one or Windows 12 52, both of them being single byte encodings, therefore providing only 256 characters. As you can imagine, it's not enough to display text containing characters from multiple alphabets. First thing browser will check when trying to get the chair set is content type header. The syntax for it is the following. First goes the MIME type. In our case, it's text HTML. And then after a semicolon goes the chair set. In our case, UTF-8. Another way to provide the chair set for HTML document is by using meta tag. In this case, meta chair set UTF-8. Actually you should always do this. I mean to provide the meta chair set tag, even if the server is already providing the header. In this case, you just need to make sure they match. So in our case, they both should be UTF-8. I also recommend you to read the absolute minimum every developer absolutely positively must know about Unicode and character sets, no excuses by Gilles Polsky. It is pretty good article explaining all the stuff about encodings and character sets. I will provide the link to this article in the description. There is also an HTML attribute lang that allows you to provide the language that current document is using. It can be applied to the whole document when you apply it to the HTML tag or parts of it because you can also apply it to individual paragraphs. If main language of your page is English, but you have a couple of paragraphs in other languages like German or French, you can specify language of those paragraphs using the lang attribute of the P tag. It can be useful for several reasons. You can apply specific styling for some languages. Also this way you're making your page more accessible because you're providing more metadata and you allow this page to be more easily parsed by screen readers. So it's a good thing. And lastly, we need to make sure that we let the search engines know that we have localized versions of some page, so they won't treat those translated pages as duplicates of the main one. Because serving some page in multiple languages can lead to a lot of duplicated content, which in turn might lead to your page having lower ranks in search engines. To avoid that, you need to specify the canonical URL which will lead to the main version of your page and also links to alternate versions with provided reflang specifying the language of this alternative page. Here you can see example from Mozilla website. They have canonical URL for English version and then they have a bunch of alternative pages for other languages. Thank you for watching this video. I hope you found it useful. You can also check out the text version by following the link in the description. Leave a sweet sweet like if you like this video or leave a dislike and let me know in the comments if you know how could I improve these videos.