Site languages: lang, hreflang and translation

lang is an HTML attribute that gives the language of a page or phrase to screen readers and browsers. hreflang links versions in different languages.

The language of a page

A page in English must say so. You put the lang attribute on the html element in the very first lesson. What is it really for?

• A screen reader picks its voice and pronunciation rules by language. French text read in an English voice is gibberish.
• The browser uses it for hyphenation and quotation marks, for spell checking, and to decide whether to offer a translation.
• A search engine uses it to confirm the language of the page.

A language is set on more than the page. If a phrase in another language sits inside English text, give it a lang of its own: <span lang="fr">bonjour</span>. A screen reader will pronounce the word in French instead of spelling out English letters. A language is given as a two- or three-letter code (en, fr, de), with a region when needed (en-GB, pt-BR).

Check yourself: why mark a word in another language with lang inside the text?

So a screen reader reads it in the right voice instead of as a string of English letters.

A site in two languages

If your brief has two languages, you have two versions of every page. Three questions: how to tell the addresses apart, how to connect the versions, and how to translate.

Addresses

Three ways:

• a subfolder is example.com/en/ and example.com/de/: the simplest, everything on one domain;
• a subdomain is de.example.com: handy if different people run the versions;
• a separate domain is example.com and example.de: useful for the markets of different countries, but everything has to be run twice.

Choose one way and stick to it. It also helps to name the pages in each version after the language: /en/services/ and /de/leistungen/. The address then reads naturally, and search engines understand it well.

The connection between versions

A search engine can’t work out by itself that two pages translate each other. You tell it in the head of every version:

<link rel="alternate" hreflang="en" href="https://example.com/en/">
<link rel="alternate" hreflang="de" href="https://example.com/de/">
<link rel="alternate" hreflang="x-default" href="https://example.com/">

The rules: the addresses are complete; the connection is mutual (if the English page points to the German one, the German page points back to the English one, or the link is ignored); a page lists itself too; and the x-default entry shows which one to pick when the visitor’s language doesn’t fit. It is a hint to the search engine, not a command. Google documents the rules, and other search engines use these signals differently, so check each one’s webmaster help.

Play with the diagram: change the visitor’s language and the connection.

Visitor’s language: EnglishFrenchGerman

hreflang connection: mutualone way onlynone x-default present

/en/

<html lang="en"> hreflang="en" (itself) hreflang="fr" → /fr/ hreflang="x-default" → /en/

/fr/

<html lang="fr"> hreflang="fr" (itself) hreflang="en" → /en/

The visitor will be shown: the French version. The visitor’s language is French, and the connection is mutual: the French version fits.

Check yourself: what happens to a one-way hreflang connection?

The search engine ignores it. The connection must be mutual: both pages have to point to each other.

The switcher

People need a link to the other version in the header. Label it in its own language: “Français”, not “FR” and not a flag. A person who knows French will find it even if they can’t understand the rest of the page. Give the link hreflang="fr" and lang="fr".

Don’t force a redirect by IP address or browser language: a person may be traveling, abroad or on someone else’s computer. Offer, but leave the choice.

Translation

Translating an interface (buttons, menus) is easy. Translating real text is much harder, and here is what to know.

• Machine translation is good for understanding what a text is about, but not for publishing. Have someone who knows both the subject and the language proofread it.
• Legal and professional texts are a special risk area. The same term means different things in different countries: a job title, a qualification, a document or a kind of expertise has no exact equivalent. A solicitor in England, an attorney in the United States and an avocat in France don’t do quite the same job, and a chartered surveyor is not a licensed land surveyor. One word in translation can change an obligation or mislead a client. For experts, lawyers and doctors, give the translation to someone who knows the field, and have it checked.
• Not everything needs translating. Names, titles of documents and addresses are better left as they are and explained.

One last thing: both versions have to be kept up. One language you maintain is better than two, one of them out of date.

Practice

Mark up the languages of your page. If your brief has one language, still add the self-reference and x-default: when the second language comes, the structure is ready. If it has two, add the link to the other version too.

What was wrong with 2014

Sites in two languages were built as a single page with a script switch and a single address: a search engine saw only one version, and a screen reader read everything in one voice. An automatic translation widget was dropped onto pages with terms and contracts. Today it is better to have two complete versions with mutual links, and a human translation wherever obligations depend on the words.