@intlayer/docs 5.5.9 → 5.5.11

package/blog/ru/what_is_internationalization.md

@@ -0,0 +1,165 @@
+---
+createdAt: 2025-01-16
+updatedAt: 2025-06-29
+title: Что такое интернационализация (i18n)? Определение и представления
+description: Узнайте, почему интернационализация вашего веб-сайта является важной. Узнайте ключевые принципы для ускорения SEO, улучшения пользовательского опыта и расширения вашего глобального достижения.
+keywords:
+  - i18n
+  - многоязычный
+  - SEO
+  - интернационализация
+  - блог
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - blog
+  - what-is-internationalization
+---
+
+# Что такое Интернационализация (i18n)? Определение и вызовы
+
+![i18n illustration](https://github.com/aymericzip/intlayer/blob/main/docs/blog/assets/i18n.webp)
+
+## Понимание Интернационализации (i18n)
+
+**Интернационализация**, часто сокращаемая как **i18n**, , это процесс проектирования и подготовки приложения для поддержки нескольких языков, культур и региональных норм **без** значительных изменений в кодовой базе. Название i18n происходит от того, что между **i** и **n** в слове "интернационализация" находится 18 букв.
+
+## Почему i18n имеет значение
+
+### SEO
+
+Интернационализация играет критическую роль в улучшении поисковой оптимизации (SEO) веб-сайта. Поисковые системы, такие как Google и Bing, анализируют язык и культурную релевантность вашего контента, чтобы определить его рейтинг. Адаптируя ваш сайт для поддержки нескольких языков и региональных форматов, вы можете значительно улучшить его видимость в результатах поиска. Это не только привлекает более широкую аудиторию, но и помогает вашему сайту занять более высокие позиции, поскольку поисковые системы признают усилия, направленные на обслуживание разнообразной пользовательской базы.
+
+### Глобальное Охват
+
+Не менее важен глобальный охват, который предлагает интернационализация. Устраняя языковые барьеры и проектируя ваше приложение с учетом различных культурных норм, вы открываете двери для миллионов потенциальных пользователей со всего мира. Предоставление локализованного контента и пользовательских интерфейсов отличает ваш продукт от конкурентов, которые могут предложить поддержку лишь ограниченного количества языков. Этот инклюзивный подход обеспечивает ощущение признания и ценности пользователей, независимо от их местоположения, что в конечном итоге расширяет рынок вашего продукта и увеличивает его конкурентоспособность в глобальном масштабе.
+
+### Пользовательский Опыт
+
+Еще одним значительным преимуществом i18n является улучшение пользовательского опыта. Пользователи, как правило, чувствуют себя более комфортно и связанными с программным обеспечением, которое общается на их родном языке и уважает местные привычки, такие как форматы дат, валюты и единицы измерения. Этот персонализированный опыт является ключом к построению доверия и удовлетворенности, способствуя долгосрочной удерживаемости пользователей. Когда пользователи могут без труда ориентироваться в приложении и понимать его, они с большей вероятностью будут активно взаимодействовать с ним, что проложит путь к положительным отзывам, рекомендациям и устойчивому росту.
+
+## Интернационализация (i18n) против Локализации (l10n)
+
+**Интернационализация (i18n)** , это процесс проектирования вашего продукта так, чтобы он мог легко поддерживать множество языков и региональных отличий. Например, если вы создаете веб-сайт с учетом интернационализации, вы убеждаетесь, что текстовые поля поддерживают различные наборы символов, даты следуют различным местным форматам, а макеты подстраиваются под расширение текста при переводе на другие языки.
+
+**Локализация (l10n)** , это работа, выполняемая после интернационализации. Она включает в себя перевод контента и адаптацию культурных деталей для удовлетворения потребностей определенной аудитории. Например, после интернационализации веб-сайта вы можете локализовать его для франкоязычных пользователей, переводя весь текст, изменяя формат даты на день/месяц/год и даже корректируя изображения или иконки, чтобы лучше соответствовать французским культурным нормам.
+
+В кратком изложении, интернационализация подготавливает ваш продукт к глобальному использованию, в то время как локализация адаптирует его для конкретного рынка.
+
+## Что должно быть интернационализировано на сайте?
+
+1. **Текстовый контент:** Все письменные элементы, такие как заголовки, основной текст и кнопки, требуют перевода. Например, заголовок "Welcome to our website" должен стать "Добро пожаловать на наш сайт" для русскоязычной аудитории.
+
+2. **Сообщения об ошибках:** Четкие и лаконичные уведомления об ошибках важны. Если ошибка формы говорит "Invalid email address," она должна отображаться на русском, как "Неверный адрес электронной почты," чтобы помочь пользователям понять проблему.
+
+3. **Электронные письма и уведомления:** Автоматические сообщения, такие как сброс пароля или подтверждения заказа, должны быть локализованы. Электронное письмо подтверждения заказа может приветствовать пользователя фразой "Dear Customer" на английском и "Уважаемый клиент" на русском для соответствующей аудитории.
+
+4. **Метки доступности:** Метки и альтернативный текст для изображений необходимо переводить, чтобы вспомогательные технологии функционировали правильно. Изображение с альтернативным текстом "Smiling child playing" должно быть адаптировано как "Улыбающийся ребенок играет" на русском.
+
+5. **Нумерация:** В различных регионах числа форматируются по-разному. В то время как **“1,000.50”** работает для англоязычных регионов, многие европейские форматы требуют **“1.000,50,”** что делает местную адаптацию важной.
+
+6. **Валюта:** Цены должны отображаться с правильными символами и форматами для региона. Например, предмет, стоящий **“$99.99”** в Соединенных Штатах, должен быть преобразован в **“€97.10”** при нацеливании на европейских клиентов.
+
+7. **Единицы измерения:** Единицы измерения, такие как температура, расстояние и объем, должны отображаться в соответствии с местными предпочтениями. Например, приложение для прогноза погоды может показывать **“68°F”** для пользователей из США, но **“20°C”** для других.
+
+8. **Направление текста:** Порядок чтения и макет должны быть скорректированы для языков с другим направлением. Веб-сайт на английском (слева направо) должен сменить выравнивание при локализации для арабского языка, который читается справа налево.
+
+9. **Дата и время:** Форматы различаются в разных регионах. Событие, отображаемое как **“12/25/2025 at 3:00 PM”** в США, может потребовать отображения как **“25/12/2025 at 15:00”** в других местах, чтобы избежать путаницы.
+
+10. **Часовой пояс:** Учет местных часовых поясов гарантирует, что чувствительный ко времени контент, такой как **расписания мероприятий, время доставки или часы работы службы поддержки клиентов**, представлен точно. Например, онлайн-вебинар, запланированный на **"3:00 PM EST"**, должен переводиться на соответствующее местное время, например, **"8:00 PM GMT"** для пользователей из Великобритании.
+
+Этот краткий обзор охватывает основные элементы, которые должны быть интернационализированы, обеспечивая доступность контента, культурную уместность и легкость понимания для глобальной аудитории.
+
+## Общие вызовы i18n
+
+![i18n pain illustration](https://github.com/aymericzip/intlayer/blob/main/docs/blog/assets/pain_i18n.webp)
+
+- **поддерживаемость**  
+  Каждое обновление веб-сайта должно быть отражено на всех языках, требуя эффективных рабочих процессов и тщательной координации для обеспечения согласованности во всех версиях.
+
+- **Склеивание строк**  
+  Избегайте конструирования сообщений, таких как `"Hello, " + username + "!"`, поскольку порядок слов может различаться в зависимости от языка; вместо этого используйте заполнители, такие как `Hello, {username}!`, чтобы учесть языковые вариации.
+
+- **Плюрализация**  
+  В разных языках существуют различные правила плюрализации, иногда с несколькими формами. Использование библиотек типа ICU MessageFormat может упростить решение этих сложностей с плюрализацией.
+
+- **Длина текста и интерфейса**  
+  Некоторые языки, например, немецкий, могут содержать текст длинее, чем английский. Это может нарушить макеты, если дизайн не является гибким, поэтому адаптивный дизайн является ключевым.
+
+- **Кодировка символов**  
+  Использовать правильную кодировку символов (например, UTF-8) необходимо для корректного отображения различных алфавитов и символов, предотвращая неправильный или поврежденный текст.
+
+- **Жесткие макеты**  
+  UI-компоненты фиксированного размера могут плохо адаптироваться к более длинным переводам, что приводит к переполнению текста. Гибкий адаптивный макет помогает смягчить эту проблему.
+
+- **Динамическое переключение языков**  
+  Пользователи ожидают возможность переключения языков без перезагрузки приложения или повторной аутентификации. Эта функция требует безупречной и тщательно спланированной реализации в архитектуре.
+
+- **Поддержка направления языка**  
+  Игнорирование поддержки языков с направлением справа налево (RTL) может создать значительные проблемы с редизайном позже. Лучше запланировать совместимость с RTL с самого начала.
+
+- **Культурные нюансы**  
+  Иконки, цвета и символы могут иметь разные значения в разных культурах. Важно адаптировать визуальный и текстовый контент, чтобы уважать местные культурные нюансы.
+
+---
+
+## Лучшие практики для реализации i18n
+
+- **Планируйте заранее**  
+  Внедряйте интернационализацию на самом раннем этапе вашего проекта. Решение проблем i18n заранее менее дорогостоящее и проще, чем ретрофитинг его позже, что обеспечивает более гладкий процесс разработки с самого начала.
+
+- **Автоматизируйте управление переводами**  
+  Используйте основанные на ИИ сервисы перевода, такие как те, что предоставляет Intlayer, для эффективного управления вашими переводами. С автоматизацией, когда вы публикуете новую статью, все переводы создаются автоматически, экономя время и уменьшая количество ошибок.
+
+- **Использование визуального редактора**  
+  Реализуйте визуальный редактор, чтобы помочь переводчикам видеть контент в его реальном контексте пользовательского интерфейса. Инструменты, такие как визуальный редактор Intlayer, минимизируют ошибки и путаницу, обеспечивая точные переводы, отражающие окончательный дизайн.
+
+- **Повторное использование переводов**  
+  Организуйте свои файлы переводов так, чтобы они могли использоваться повторно на нескольких сайтах или приложениях. Например, если у вас есть многоязычный подвал или заголовок, создавайте специальные файлы переводов, чтобы общие элементы могли быть легко применены ко всем проектам.
+
+---
+
+## Объявление контента локалей против внешней локализации контента CMS
+
+При создании веб-сайта **Система управления контентом (CMS), такая как WordPress, Wix или Drupal, обычно предлагает улучшенную поддерживаемость**. Особенно для блогов или целевых страниц благодаря их интегрированным функциям i18n.
+
+Однако для приложений со сложными функциями или бизнес-логикой **CMS могут оказаться слишком негибкими, и вам, возможно, придется рассмотреть библиотеку i18n**.
+
+**Проблема со многими библиотеками i18n заключается в том, что они часто требуют, чтобы переводы были жестко закодированы в кодовой базе**. Это означает, что если менеджер контента хочет обновить перевод, ему приходится модифицировать код и пересобирать приложение. Чтобы смягчить эту проблему, некоторые инструменты появились как "Git-ориентированные CMS" или "i18n CMS", чтобы помочь менеджерам контента. Тем не менее, даже **эти решения обычно требуют обновления кодовой базы и пересборки при внесении изменений в контент**.
+
+Учитывая эти проблемы, часто выбирают безголовую CMS для внешней локализации контента и оптимизации управления переводами. Тем не менее, при использовании CMS для интернационализации есть заметные недостатки:
+
+- **Не все CMS предлагают функции i18n:** Некоторые популярные платформы CMS лишены надежных возможностей интернационализации, вынуждая вас искать дополнительные плагины или обходные пути.
+- **Дублирующая конфигурация:** Управление переводами часто требует настройки как CMS, так и кода приложения, что приводит к дублированию усилий и потенциальной несоответствию.
+- **Сложно поддерживать:** При разбросанных переводах между CMS и кодом поддержание согласованной и безошибочной системы может со временем стать проблематичным.
+- **Цена лицензий:** Премиум-платформы CMS или дополнительные инструменты i18n могут добавить дополнительные лицензии, которые могут быть неприемлемы для каждого проекта.
+
+Важно выбрать правильный инструмент для ваших потребностей и спланировать стратегию интернационализации с самого начала. **Intlayer предлагает привлекательное решение, совмещая декларацию контента локалей с безголовой CMS, что обеспечивает лучшее из обоих миров.**
+
+---
+
+### Смотрите список библиотек и инструментов i18n по технологиям
+
+Если вы ищете список библиотек и инструментов i18n по технологиям, ознакомьтесь со следующими ресурсами:
+
+### Для Систем Управления Контентом (CMS)
+
+- WordPress: [Смотрите список библиотек и инструментов i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ru/list_i18n_technologies/CMS/wordpress.md)
+- Drupal: [Смотрите список библиотек и инструментов i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ru/list_i18n_technologies/CMS/drupal.md)
+
+### Для JavaScript Приложений (Frontend)
+
+- React: [Смотрите список библиотек и инструментов i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ru/list_i18n_technologies/frameworks/react.md)
+- Angular: [Смотрите список библиотек и инструментов i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ru/list_i18n_technologies/frameworks/angular.md)
+- Vue: [Смотрите список библиотек и инструментов i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ru/list_i18n_technologies/frameworks/vue.md)
+- Svelte: [Смотрите список библиотек и инструментов i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ru/list_i18n_technologies/frameworks/svelte.md)
+- React Native: [Смотрите список библиотек и инструментов i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ru/list_i18n_technologies/frameworks/react-native.md)
+
+---
+
+## Заключение
+
+Интернационализация (i18n) , это больше чем просто техническое задание; это **стратегические инвестиции**, которые позволяют вашему программному обеспечению говорить на языке ваших пользователей , буквально. Путем абстрагирования элементов, специфичных для локали, учета лексических и культурных различий и планирования будущих расширений вы позволяете вашему продукту процветать на глобальном рынке.
+
+Будь то мобильное приложение, SaaS-платформа или корпоративный инструмент, **i18n гарантирует, что ваш продукт сможет адаптироваться и привлекать пользователей со всего мира**, без необходимости постоянных переделок кода. Используя лучшие практики, надежные фреймворки и непрерывные стратегии локализации, разработчики и продуктовые команды могут предлагать **истинно глобальные** программные решения.

package/blog/zh/index.md

@@ -0,0 +1,69 @@
+---
+createdAt: 2024-24-12
+updatedAt: 2025-06-29
+title: 博客
+description: 了解所有与 Intlayer、国际化和其他相关的主题
+keywords:
+  - Intlayer
+  - 国际化
+  - 文档
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - blog
+  - search
+---
+
+# 在 JavaScript 中拥抱国际化：提升全球范围和 SEO
+
+欢迎来到我们的博客，专注于 JavaScript 应用程序的所有**国际化**内容！在这里，我们探索最佳实践、策略和工具，以帮助开发人员扩展其数字产品到全球各地。
+
+---
+
+## 为什么国际化 (i18n) 很重要
+
+在当今互联的世界中，用户期待无缝的本地化体验。国际化 (i18n) 确保您的 Web 应用程序能够适应不同的语言和文化细微差别。通过从一开始就融入 i18n 实践，您可以解锁众多好处，例如：
+
+1. **增强的用户体验：** 用户更愿意用母语参与内容。
+2. **更广泛的市场覆盖：** 提供多种语言有助于您进入新地区并扩大用户群。
+3. **改善可访问性：** 结构良好的 i18n 通常符合可访问性标准，使您的应用程序更具包容性。
+4. **更好的 SEO 表现：** 本地化内容可以提升您在特定区域搜索结果中的可见性。
+
+---
+
+## 开源国际化解决方案
+
+构建国际化应用程序并不一定复杂。开源社区提供了许多强大、支持良好的工具和库，使本地化变得更加简单。热门解决方案如 **react-intl**、**i18next** 和 **FormatJS** 提供灵活的 API，并与现代 JavaScript 框架（如 React、Vue 和 Angular）轻松集成。
+
+### 开源解决方案的主要好处
+
+- **灵活性：** 社区驱动的库快速发展，提供更新和新功能以满足不断变化的需求。
+- **成本节约：** 没有许可费用，使您更容易测试或扩展应用程序。
+- **社区支持：** 大型社区通常意味着更多教程、文档和现成插件。
+
+---
+
+## 公告及未来计划
+
+我们很高兴地宣布即将推出的教程、最佳实践和 **案例研究**，内容涵盖如何优化您的 JavaScript 应用程序以服务全球受众。以下是一些预告：
+
+- **高级本地化技巧：** 掌握复数、日期/时间格式化和动态内容。
+- **性能优化：** 在支持多种语言环境的同时最小化包大小。
+- **社区的案例研究：** 展示成功实施 i18n 的真实实例。
+
+敬请关注这些更新和更多内容！
+
+---
+
+## 为我们的博客做贡献！
+
+我们相信社区驱动的知识分享。如果您有一个与国际化、**SEO** 或其他相关主题有关的精彩博客文章创意，我们很想听听您的想法。您可以通过将提议的博客文章添加到我们的 GitHub 仓库来提交 Pull Request：
+
+[**在这里提交您的文章**](https://github.com/aymericzip/intlayer/blob/main/docs/blog)
+
+您的贡献帮助我们丰富这个平台，赋能全球的开发人员。让我们共同创建一个以全球为首的应用程序社区。
+
+---
+
+**感谢您的阅读，欢迎加入我们的 i18n 社区！** 敬请关注更多洞察、技巧和最佳实践，助力您的 JavaScript 应用程序走向国际成功。

package/blog/zh/internationalization_and_SEO.md

@@ -0,0 +1,298 @@
+---
+createdAt: 2024-12-24
+updatedAt: 2025-06-29
+title: SEO和国际化
+description: 了解如何为搜索引擎优化您的多语言网站，并提升您的SEO。
+keywords:
+  - SEO
+  - Intlayer
+  - 国际化
+  - 文档
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - blog
+  - SEO-and-i18n
+---
+
+# SEO & I18n: 为您的网站提供多语言支持的终极指南
+
+想要在全球范围内吸引更多用户吗？让您的网站支持多语言是扩展您受众和改善 SEO（搜索引擎优化）的最佳方法之一。在这篇博客文章中，我们将以清晰易懂的术语分解国际 SEO 的基础知识, , 通常称为 **i18n**（国际化的缩写）。您将了解需要做出的关键决策，如何使用 `hreflang` 等技术元素，以及像 **Intlayer** 这样的工具如何简化您的多语言 Next.js 项目。
+
+---
+
+## 1. 什么是让您的网站支持多语言？
+
+一个多语言网站以多种语言提供内容。例如，您可以拥有一个英文版（`example.com/en/`），一个法文版（`example.com/fr/`）和一个西班牙版（`example.com/es/`）。这种方法使搜索引擎能够根据用户的偏好或地理位置显示正确的语言版本。
+
+当您做到这一点时，您将为非英语用户创造一个更加友好的体验, , 这将导致更好的参与度、更高的转化率，以及不同地区的 SEO 改善。
+
+---
+
+## 2. 选择正确的 URL 结构
+
+如果您决定拥有多个语言版本，您将需要一种清晰、一致的方式来组织网站的 URL。每种语言（或地区）都应该在互联网上有其独特的“地址”。以下是三种常见的多语言网站结构方式：
+
+1. 国家代码顶级域名（ccTLDs）
+
+   - 示例：`example.fr`，`example.de`
+   - **优点：** 向搜索引擎发送关于内容目标国家的强烈信号（例如，`.fr` = 法国）。
+   - **缺点：** 管理多个域名可能会更昂贵且复杂。
+
+2. **子域名**
+
+   - **示例：** `fr.example.com`，`de.example.com`
+   - **优点：** 每种语言“生活”在其自己的子域名上，相对容易添加或删除语言。
+   - **缺点：** 搜索引擎有时将子域名视为独立网站，这可能会稀释主域名的权威性。
+
+3. **子目录（子文件夹）**
+   - **示例：** `example.com/fr/`，`example.com/de/`
+   - **优点：** 管理简单，所有流量指向一个主域名。
+   - **缺点：** 不像 ccTLDs 那样强烈的本地 SEO 信号（虽然如果做得当，它仍然非常有效）。
+
+> **提示：** 如果您有一个全球品牌并希望保持简单，子目录通常效果最佳。如果您只针对一两个主要国家，并希望真正强调每一个，ccTLDs 可能是更好的选择。
+
+---
+
+## 3. 精通 Hreflang 的语言定位
+
+### 3.1. 什么是 Hreflang？
+
+当您在多种语言中拥有相同或非常相似的内容时，像 Google 这样的搜索引擎可能会对向用户显示哪个版本感到困惑。**Hreflang** 是一个 HTML 属性，它告知搜索引擎特定页面的目标语言（和地区）是什么，以及其他语言/地区页面是什么。
+
+### 3.2. 为什么这很重要？
+
+1. 它可以防止 **重复内容** 问题（当搜索引擎认为您多次发布相同内容时）。
+2. 它确保 **法语用户看到法语版本**，**西班牙语用户看到西班牙语版本**，等等。
+3. 它改善了整体用户体验，意味着更好的参与度和更高的 SEO 排名。
+
+### 3.3. 如何在 `<head>` 标签中使用 Hreflang
+
+在您的 HTML 中，您将添加如下内容：
+
+```html
+<link rel="alternate" hreflang="en" href="https://example.com/en" />
+<link rel="alternate" hreflang="fr" href="https://example.com/fr" />
+<link rel="alternate" hreflang="es" href="https://example.com/es" />
+<link rel="alternate" hreflang="x-default" href="https://example.com/en" />
+```
+
+- **`hreflang="en"`**：指示页面的英文版本。
+- **`hreflang="fr"`**：指示页面的法文版本。
+- **`hreflang="es"`**：指示页面的西班牙文版本。
+- **`hreflang="x-default"`**：当没有其他语言与用户的偏好匹配时的“回退”语言或默认 URL。
+
+> **快速提示：** 确保这些标签中的 URL 直接指向最终页面，**无**其他重定向。
+
+---
+
+## 4. 使内容真正“本地化” （不仅仅是翻译）
+
+### 4.1. 本地化 vs. 翻译
+
+- **翻译** 指的是逐字将文本从一种语言转换为另一种语言。
+- **本地化** 是指将内容的格式、货币、测量和文化参考调整为当地受众。例如，如果您针对法国，您将使用 `€` 而不是 `You are an expert in internationalization and content management. Your task is to translate the following documentation into the specified locales.
+
+1. **Requirement:**
+
+   - You should only translate the text, and titles of the file.
+   - You should not alter the structure of the file.
+   - You should not alter the code logic of code elements.
+   - You should transform urls as `https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/**/*.md` to `https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/**/*.md`
+   - You should not transform url as `https://github.com/aymericzip/intlayer/blob/main/docs/assets/**/*`
+   - You should transform locale urls as `/**/*` to `/{{locale}}/**/*`
+   - In the code elements, the naming of the variables should be made in English. But the comments should be in 中文.
+   - You should return the translated file content without any additional comments or explanations.
+   - You should be sure to do not forgot to translate any content
+
+2. **Locales:**
+
+   - Base file locale: en: English (US)
+   - Desired Locales: {{locale}} : {{localeName}}
+
+**File to Translate:**
+
+，并可能提到当地节日或地区特有的细节。
+
+### 4.2. 避免重复内容
+
+即使有良好的翻译，如果它在结构上看起来过于相似，搜索引擎可能会将您的网站标记为重复内容。Hreflang 有助于澄清这些页面不是重复的，而是语言变体。
+
+---
+
+## 5. 技术 SEO 必备事项
+
+### 5.1. 语言声明 (`lang` 和 `dir`)
+
+在您的 HTML 标签中，您可以这样声明语言：
+
+```html
+<html lang="en"></html>
+```
+
+- **`lang="en"`** 帮助浏览器和辅助技术了解语言。
+
+对于从右到左的语言（例如阿拉伯语或希伯来语），添加：
+
+```html
+<html dir="rtl" lang="ar"></html>
+```
+
+- **`dir="rtl"`** 确保文本方向为从右到左。
+
+### 5.2. 规范标签
+
+规范标签告诉搜索引擎哪一页是“原始”或主要版本，如果您有近重复的页面。通常，对于多语言网站，您会有一个 **自引用** 的规范。
+
+```html
+<link rel="canonical" href="https://example.com/fr/produits" />
+```
+
+---
+
+## 6. 多语言的页面 SEO
+
+### 6.1. 标题和元描述
+
+- **针对每种语言进行翻译和优化**。
+- 对每个市场进行 **关键词研究**，因为人们在英语中搜索的内容可能在法语或西班牙语中有所不同。
+
+### 6.2. 标头（H1, H2, H3）
+
+您的标题应反映每个地区的 **本地短语** 或 **关键词**。不要仅仅把原始英语标题通过 Google 翻译，然后就算完成了。
+
+### 6.3. 图片和媒体
+
+- 如有需要，本地化 alt 文本、标题和文件名。
+- 使用与目标文化产生共鸣的视觉效果。
+
+---
+
+## 7. 语言切换与用户体验
+
+### 7.1. 自动重定向还是语言选择器？
+
+- **自动重定向**（基于 IP 或浏览器设置）可能方便，但可能会将旅行者或 VPN 用户发送到错误的版本。
+- **语言选择器** 通常更为透明, , 用户可以选择自己的语言，如果自动检测的语言不正确。
+
+以下是一个简化的 Next.js + Intlayer 示例：
+
+```tsx
+import { useLocation, useNavigate } from "react-router-dom";
+import {
+  Locales,
+  getHTMLTextDir,
+  getLocaleName,
+  getLocalizedUrl,
+} from "intlayer";
+import { useLocale } from "react-intlayer";
+import { type FC } from "react";
+
+const LocaleSwitcher: FC = () => {
+  const location = useLocation(); // 获取当前 URL 路径。示例：/fr/about
+  const navigate = useNavigate();
+
+  const changeUrl = (locale: Locales) => {
+    // 构造带有更新语言的 URL
+    // 示例：/es/about，当语言设置为西班牙文
+    const pathWithLocale = getLocalizedUrl(location.pathname, locale);
+
+    // 更新 URL 路径
+    navigate(pathWithLocale);
+  };
+
+  const { locale, availableLocales, setLocale } = useLocale({
+    onLocaleChange: changeUrl,
+  });
+
+  return (
+    <ol>
+      {availableLocales.map((localeItem) => (
+        <li key={localeItem}>
+          <a
+            href={getLocalizedUrl(location.pathname, localeItem)}
+            hrefLang={locale === localeItem ? "x-default" : localeItem}
+            aria-current={locale === localeItem ? "page" : undefined}
+            onClick={(e) => {
+              e.preventDefault();
+              setLocale(localeItem);
+            }}
+          >
+            <span>
+              {/* 语言在其本地化中 - 例如法语 */}
+              {getLocaleName(localeItem, locale)}
+            </span>
+            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
+              {/* 语言在当前语言中 - 例如法语，当前语言设置为 Locales.SPANISH */}
+              {getLocaleName(localeItem)}
+            </span>
+            <span dir="ltr" lang={Locales.ENGLISH}>
+              {/* 语言用英语表示 - 例如法语 */}
+              {getLocaleName(localeItem, Locales.ENGLISH)}
+            </span>
+            <span>
+              {/* 语言在其本地化中 - 例如 FR */}
+              {localeItem}
+            </span>
+          </a>
+        </li>
+      ))}
+    </ol>
+  );
+};
+```
+
+### 7.2. 存储偏好
+
+- 在 **cookie** 或 **会话** 中保存用户的语言选择。
+- 下次他们访问您的网站时，您可以自动加载他们的首选语言。
+
+---
+
+## 8. 构建本地反向链接
+
+**反向链接**（来自外部网站指向您的链接）仍然是一个重要的 SEO 因素。当您运行一个多语言网站时，考虑：
+
+- 联系当地新闻网站、博客或论坛。例如，一个指向您法语子目录的 `.fr` 域可以提升您在本地法国的 SEO。
+- 监控每种语言的反向链接，以查看哪些地区需要更多的公关/营销努力。
+
+---
+
+## 9. 监控和维护您的多语言网站
+
+### 9.1. Google Analytics 和 Search Console
+
+- 为每个语言目录（`/en/`，`/fr/`，`/es/`）细分您的数据。
+- 查看每种语言基础上的 **爬取错误**、**重复内容标记** 和 **索引问题**。
+
+### 9.2. 定期内容更新
+
+- 保持翻译的新鲜感。如果您在英语中更改了产品描述，请在法语、西班牙语等中进行更新。
+- 过时的翻译会让客户感到困惑，并损害用户信任。
+
+---
+
+## 10. 常见陷阱
+
+1. **机器翻译的内容**
+   没有人工审核的自动翻译可能会充满错误。
+
+2. **错误或缺失的 `hreflang` 标签**
+   如果您的标签不完整或代码错误，搜索引擎无法自行确定语言版本。
+
+3. **仅通过 JavaScript 切换语言**
+   如果 Google 无法爬取每种语言的唯一 URL，您的页面可能不会出现在正确的本地搜索结果中。
+
+4. **忽视文化细微差别**
+   在一个国家有效的笑话或短语，在另一个国家可能是冒犯或毫无意义的。
+
+---
+
+## 总结
+
+让您的网站支持多语言不仅仅涉及翻译文本。它还关乎有效地构建 URL，使用 `hreflang` 标签帮助搜索引擎提供正确的版本，并提供卓越的用户体验, , 包括本地化视觉内容、语言选择器和一致的导航。遵循这些最佳实践将使您在全球市场取得成功，提升用户满意度，并最终在各个地区改善 SEO 结果。
+
+如果您使用 Next.js（特别是 Next.js 13+ 中的 App Router），像 **Intlayer** 这样的工具可以简化整个过程。它可以处理从生成本地化站点地图到自动处理 `hreflang` 链接、语言检测等所有工作, , 这样您就可以专注于创建高质量的多语言内容。
+
+**准备好走向全球吗？** 立即开始实施这些 SEO 和 i18n 策略，看看来自世界各地的新访客如何发现并与您的网站互动！