Tell Google about localized versions of your page, а теперь по-русски:
1.
html lang="ru" должен быть указан и сообщать текущий язык страницы. Отдельный атрибут lang="ru" у элемента перебивает основной, указанный в html lang="ru".
2. В head необходимо указывать мета атрибуты (ссылки) на аналогичные страницы, но на другом языке.
3. В head необходимо указать мета атрибут (ссылку) на текущую страницу.
4. В head необходимо указать мета атрибут (ссылку) на страницу с языком по умолчанию (hreflang="x-default"), если у пользователя в браузере установлен язык, который не обнаружен в мета атрибутах (ссылках) в head нашей страницы, обычно - это английский (стандартный). Здесь же обычно создают механизм выбора языка страницы с последующей переадресацией (если у нас такая имеется), либо перевод авто-переводчиком текущей страницы.
Важно! Гугл в примерах использует поддомены для языковых версий, я же использую поддомены лишь для регионов или отдельной функциональности (админка, личный кабинет итп).
Пример ru страницы (дефолтной):
<html lang="ru">
<head>
<title>This is content ru lang (default)</title>
<!-- link from others lang versions -->
<link rel="alternate" hreflang="en" href="https://example.com/en/page"/>
<link rel="alternate" hreflang="de" href="https://example.com/de/page"/>
<!-- link from current lang versions (ru) -->
<link rel="alternate" hreflang="ru" href="https://example.com/page"/>
<!-- link from not supported lang versions -->
<link rel="alternate" hreflang="x-default" href="https://example.com/en/page"/>
</head>
<body>
<div>This is content ru lang (default)</div>
<div lang="en">This is content en lang</div>
</body>
</html>
Пример en страницы:
<html lang="en">
<head>
<title>This is content en lang</title>
<!-- link from others lang versions -->
<link rel="alternate" hreflang="ru" href="https://example.com/page"/>
<link rel="alternate" hreflang="de" href="https://example.com/de/page"/>
<!-- link from current lang versions (en) -->
<link rel="alternate" hreflang="en" href="https://example.com/en/page"/>
<!-- link from not supported lang versions -->
<link rel="alternate" hreflang="x-default" href="https://example.com/en/page"/>
</head>
<body>
<div>This is content en lang</div>
<div lang="ru">This is content ru lang</div>
</body>
</html>
Пример страницы с не определенным языком (hreflang="x-default"), она же en версия страницы:
<html lang="en">
<head>
<title>This is content en lang</title>
<!-- link from others lang versions -->
<link rel="alternate" hreflang="ru" href="https://example.com/page"/>
<link rel="alternate" hreflang="de" href="https://example.com/de/page"/>
<!-- link from current lang versions (en) -->
<link rel="alternate" hreflang="en" href="https://example.com/en/page"/>
<!-- link from not supported lang versions -->
<link rel="alternate" hreflang="x-default" href="https://example.com/en/page"/>
</head>
<body>
<div>This is content ru lang</div>
<div lang="ru">This is content ru lang</div>
</body>
</html>
Должен ли мой переключатель языка, к примеру, быть в виде ссылок < a>, или < button> + js тоже норм (как по умолчанию в opencart)?
Без разницы, главное, чтобы после действия был выполнен переход на другую страницу с необходимыми метатегами.
Желательно, чтобы каждая страница сообщала свой язык, используя атрибут land в html теге:
<html lang="ru">
Простой
Средний