Мета-теги для разных языков

Локализация пользовательского интерфейса является лишь одной частью интернационализации веб-приложения. Для полноценной поддержки нескольких языков необходимо адаптировать содержимое страницы, которое используется поисковыми системами, браузерами и социальными платформами. К таким данным относятся:

  • заголовок страницы (title);
  • описание страницы (meta description);
  • ключевые Open Graph-теги;
  • Twitter Card-теги;
  • атрибуты языка документа;
  • канонические ссылки;
  • альтернативные языковые версии страницы.

В проектах, использующих I18next, перевод мета-информации обычно осуществляется через те же механизмы локализации, что и перевод интерфейса.

Локализация тега <title>

Наиболее распространённая задача — перевод заголовка страницы.

Структура переводов:

{
  "meta": {
    "home": {
      "title": "Главная страница"
    }
  }
}

Для английской локали:

{
  "meta": {
    "home": {
      "title": "Home Page"
    }
  }
}

Получение перевода:

import i18next from "i18next";

document.title = i18next.t("meta.home.title");

После переключения языка:

i18next.changeLanguage("en").then(() => {
  document.title = i18next.t("meta.home.title");
});

В результате браузерная вкладка автоматически отображает локализованный заголовок.

Локализация meta description

Описание страницы активно используется поисковыми системами.

HTML:

<meta name="description" content="">

Переводы:

{
  "meta": {
    "home": {
      "description": "Каталог товаров и услуг компании"
    }
  }
}

Обновление значения:

const descriptionTag = document.querySelector(
  'meta[name="description"]'
);

descriptionTag.setAttribute(
  "content",
  i18next.t("meta.home.description")
);

Для английской версии:

{
  "meta": {
    "home": {
      "description": "Company products and services catalog"
    }
  }
}

После смены языка содержимое мета-тега изменяется автоматически.

Организация переводов для SEO

Удобно хранить SEO-переводы отдельно от интерфейсных строк.

Пример структуры:

{
  "meta": {
    "home": {
      "title": "Главная",
      "description": "Описание главной страницы"
    },
    "catalog": {
      "title": "Каталог",
      "description": "Просмотр товаров"
    },
    "contacts": {
      "title": "Контакты",
      "description": "Контактная информация"
    }
  }
}

Такой подход обеспечивает:

  • удобный поиск переводов;
  • логическое разделение данных;
  • простую поддержку большого количества страниц.

Использование namespace для SEO-переводов

В крупных приложениях SEO-данные часто выносятся в отдельный namespace.

Файл:

{
  "home": {
    "title": "Главная",
    "description": "Описание главной страницы"
  }
}

Инициализация:

i18next.init({
  lng: "ru",
  ns: ["common", "seo"],
  defaultNS: "common"
});

Получение значений:

i18next.t("home.title", {
  ns: "seo"
});

i18next.t("home.description", {
  ns: "seo"
});

Преимущества:

  • SEO-переводы не смешиваются с интерфейсом;
  • уменьшается размер загружаемых файлов;
  • упрощается работа переводчиков.

Динамические мета-теги для страниц товаров

Во многих приложениях мета-информация зависит от данных, полученных с сервера.

Переводы:

{
  "product": {
    "title": "{{name}} — купить по выгодной цене",
    "description": "{{name}}. Доставка по всей стране."
  }
}

Использование:

const product = {
  name: "Ноутбук ProBook"
};

document.title = i18next.t(
  "product.title",
  {
    name: product.name
  }
);

Описание:

descriptionTag.setAttribute(
  "content",
  i18next.t(
    "product.description",
    {
      name: product.name
    }
  )
);

Для английского языка:

{
  "product": {
    "title": "{{name}} — buy online",
    "description": "{{name}}. Fast worldwide delivery."
  }
}

Благодаря интерполяции шаблоны остаются универсальными для любого количества товаров.

Локализация Open Graph

Open Graph используется социальными сетями для формирования превью ссылок.

HTML:

<meta property="og:title" content="">
<meta property="og:description" content="">

Переводы:

{
  "meta": {
    "home": {
      "ogTitle": "Добро пожаловать",
      "ogDescription": "Лучшие предложения компании"
    }
  }
}

Обновление тегов:

document
  .querySelector(
    'meta[property="og:title"]'
  )
  .setAttribute(
    "content",
    i18next.t("meta.home.ogTitle")
  );

document
  .querySelector(
    'meta[property="og:description"]'
  )
  .setAttribute(
    "content",
    i18next.t("meta.home.ogDescription")
  );

Теперь при публикации ссылки в социальных сетях пользователи разных языков будут видеть локализованные описания.

Локализация Twitter Card

Twitter Card работает аналогично Open Graph.

HTML:

<meta name="twitter:title" content="">
<meta name="twitter:description" content="">

Переводы:

{
  "meta": {
    "article": {
      "twitterTitle": "Новая статья",
      "twitterDescription": "Подробный разбор технологии"
    }
  }
}

Обновление:

document
  .querySelector(
    'meta[name="twitter:title"]'
  )
  .setAttribute(
    "content",
    i18next.t(
      "meta.article.twitterTitle"
    )
  );

Автоматическое обновление мета-тегов при смене языка

Создание отдельной функции значительно упрощает сопровождение приложения.

function updateMeta(page) {
  document.title = i18next.t(
    `meta.${page}.title`
  );

  document
    .querySelector(
      'meta[name="description"]'
    )
    .setAttribute(
      "content",
      i18next.t(
        `meta.${page}.description`
      )
    );
}

Использование:

updateMeta("home");

После переключения языка:

i18next.on(
  "languageChanged",
  () => {
    updateMeta("home");
  }
);

Все SEO-данные будут синхронизированы с текущей локалью.

Работа с React и react-i18next

В React обычно используется библиотека React Helmet или её современные аналоги.

Пример:

import { Helmet } from "react-helmet";
import { useTranslation } from "react-i18next";

function HomePage() {
  const { t } = useTranslation();

  return (
    <>
      <Helmet>
        <title>
          {t("meta.home.title")}
        </title>

        <meta
          name="description"
          content={
            t(
              "meta.home.description"
            )
          }
        />
      </Helmet>
    </>
  );
}

При изменении языка компонент автоматически перерисовывается, а мета-теги получают новые значения.

Использование нескольких языковых версий страницы

Для поисковых систем важно указывать альтернативные версии документа.

Пример:

<link
  rel="alternate"
  hreflang="ru"
  href="https://site.com/ru/"
>

<link
  rel="alternate"
  hreflang="en"
  href="https://site.com/en/"
>

I18next может использоваться для определения текущего языка:

const currentLanguage =
  i18next.language;

На основе этого значения сервер или клиентская часть может формировать соответствующие ссылки.

Атрибут lang для документа

Поисковые системы и браузеры используют атрибут языка документа.

Обновление значения:

document.documentElement.lang =
  i18next.language;

При переключении языка:

i18next.on(
  "languageChanged",
  lng => {
    document.documentElement.lang =
      lng;
  }
);

Результат:

<html lang="ru">

или

<html lang="en">

Это повышает корректность индексации и улучшает доступность приложения.

Использование fallback-переводов для мета-тегов

Некоторые языки могут содержать неполный набор переводов.

Настройка:

i18next.init({
  lng: "de",
  fallbackLng: "en"
});

Если перевод отсутствует:

i18next.t(
  "meta.home.description"
);

будет автоматически использована английская версия.

Это предотвращает появление пустых мета-тегов.

Серверный рендеринг и SEO

Для поисковой оптимизации важно, чтобы мета-теги присутствовали в итоговом HTML ещё до загрузки JavaScript.

На сервере:

const title = i18next.t(
  "meta.home.title"
);

const description =
  i18next.t(
    "meta.home.description"
  );

Генерация HTML:

<title>Главная</title>

<meta
  name="description"
  content="Описание главной страницы"
>

Такой подход обеспечивает:

  • корректную индексацию;
  • быстрое получение SEO-данных поисковыми роботами;
  • правильное формирование превью ссылок.

Централизованный менеджер мета-тегов

В крупных проектах создаётся отдельный модуль управления SEO.

Пример:

export function setMeta({
  title,
  description
}) {
  document.title = title;

  document
    .querySelector(
      'meta[name="description"]'
    )
    .setAttribute(
      "content",
      description
    );
}

Использование:

setMeta({
  title: i18next.t(
    "meta.catalog.title"
  ),
  description: i18next.t(
    "meta.catalog.description"
  )
});

Преимущества такого решения:

  • единая точка управления;
  • отсутствие дублирования кода;
  • простое масштабирование;
  • удобное подключение Open Graph и Twitter Card;
  • централизованная обработка смены языка.

Рекомендуемая структура SEO-переводов

Пример организации файлов локализации:

{
  "home": {
    "title": "Главная",
    "description": "Описание главной страницы",
    "ogTitle": "Главная",
    "ogDescription": "Описание для соцсетей"
  },
  "catalog": {
    "title": "Каталог товаров",
    "description": "Просмотр ассортимента",
    "ogTitle": "Каталог",
    "ogDescription": "Полный список товаров"
  },
  "product": {
    "title": "{{name}}",
    "description": "{{name}} — подробное описание товара"
  }
}

Подобная структура позволяет хранить все мета-теги в одном месте, использовать возможности интерполяции I18next, автоматически обновлять SEO-информацию при смене языка и поддерживать единообразие многоязычного приложения независимо от количества страниц и локалей.

Оглавление