Multilingual Pages in CMS

How to create multilingual pages with a switcher and correct SEO tags.

Structure

Each language version is a separate page with its own fields:

Site: MyCompany-marketing
├── Page: main (path: "")        → mycompany.com/
├── Page: main-en (path: "en")   → mycompany.com/en
├── Page: Dashboard (path: "Dashboard")  → mycompany.com/dashboard
└── Page: Dashboard-en (path: "Dashboard-en") → mycompany.com/dashboard-en

Required fields for each page

PL Page:

{
  "lang": "pl",
  "current_lang": "pl",
  "page_path_pl": "/dashboard",
  "page_path_en": "/dashboard-en",
  "hreflang_pl": "https://mycompany.com/dashboard",
  "hreflang_en": "https://mycompany.com/dashboard-en",
  "canonical_url": "https://mycompany.com/dashboard"
}

EN Page:

{
  "lang": "en",
  "current_lang": "en",
  "page_path_pl": "/dashboard",
  "page_path_en": "/dashboard-en",
  "hreflang_pl": "https://mycompany.com/dashboard",
  "hreflang_en": "https://mycompany.com/dashboard-en",
  "canonical_url": "https://mycompany.com/dashboard-en"
}

Language switcher in the layout

Simple (links):

<a href="{{ page_path_pl }}" 
   class="{% if current_lang == 'pl' %}active{% endif %}">PL</a>
<a href="{{ page_path_en }}" 
   class="{% if current_lang == 'en' %}active{% endif %}">EN</a>

Dropdown:

<div class="lang-dropdown">
  <button>{{ current_lang \| upcase }}</button>
  <div class="lang-menu">
    <a href="{{ page_path_pl }}">PL - Polish</a>
    <a href="{{ page_path_en }}">EN - English</a>
  </div>
</div>

Navigation menu with language

Links to other pages must consider the current language:

<a href="https://mycompany.com{% if current_lang == 'en' %}/en{% endif %}">
  MyCompany
</a>

<a href="https://mycompany.com{% if current_lang == 'en' %}/dashboard-en{% else %}/dashboard{% endif %}">
  Dashboard
</a>

hreflang tags

Inform Google about language versions:

<link rel="alternate" hreflang="pl" href="{{ hreflang_pl }}">
<link rel="alternate" hreflang="en" href="{{ hreflang_en }}">
<link rel="alternate" hreflang="x-default" href="{{ hreflang_pl }}">

x-default indicates the default version (usually the main language).

Multilingual content

For content in paragraphs, you have two options:

Option 1: Separate paragraphs

• Hero PL (priority 100) assigned to the PL page
• Hero EN (priority 100) assigned to the EN page

Option 2: Variables in one paragraph

{% if lang == 'pl' %}
  <h1>Welcome to MyCompany</h1>
{% else %}
  <h1>Welcome to MyCompany</h1>
{% endif %}

Recommended: Option 1 - easier to maintain.

API - creating pages

# PL Page
curl -X POST "https://domain.com/cms/pages.json?api_token=TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "page": {
      "name": "Dashboard PL",
      "path": "Dashboard",
      "site_id": 1018,
      "layout_id": 1018,
      "fields": {
        "lang": "pl",
        "current_lang": "pl",
        "page_path_pl": "/dashboard",
        "page_path_en": "/dashboard-en"
      }
    }
  }'

Checklist

• Each language version has a separate page
• lang and current_lang set
• page_path_pl and page_path_en on both pages
• hreflang tags in the layout
• canonical_url unique for each page
• Language switcher works correctly