Eleventy Baseline
English Nederlands Français
|
Table of Contents
Page 4 of 5

Build a multilingual site

The layout

src/_includes/layouts/base.njk needs no changes, and one line in it is the reason. You wrote lang="{{ lang or settings.defaultLanguage }}" two pages ago, when both halves resolved to the same value and the fallback looked like belt and braces. It stops looking that way now. The two files you just wrote put a lang on everything under en/ and nl/, so each page declares its own language and Dutch pages stop claiming to be English, while the homepage takes the other branch and falls back. Both halves of that line are now load-bearing, on the same site.

The rest of the head follows without you. With multilingual on and a translationKey on both homepages, the hreflang links go in automatically. No for loop in your layout.

If you do not have the file, add a layout and a stylesheet is where it gets written.

Hreflang

Baseline emits the alternates automatically once two things are in place:

  1. Multilingual mode is on (options.multilingual: true plus defaultLanguage and languages in settings).
  2. The page has a translationKey in its front matter, matched by its translations.

Both homepages have the key, so the rendered <head> on each of them contains:

<link rel="alternate" hreflang="en" href="http://localhost:8080/">
<link rel="alternate" hreflang="x-default" href="http://localhost:8080/">
<link rel="alternate" hreflang="nl" href="http://localhost:8080/nl/">

A page points at its translations and at itself, which is why English is in its own list. x-default is the one to fall back to when none of the languages match the visitor, and Baseline puts the default language there.

That is the whole setup. All that is left is to watch it work, in dev and then in a build.