@intlayer/docs 7.0.7 → 7.0.8-canary.0

package/blog/vi/index.md

@@ -0,0 +1,69 @@
+---
+createdAt: 2024-24-12
+updatedAt: 2025-06-29
+title: Blog
+description: Khám phá tất cả các chủ đề liên quan đến Intlayer, quốc tế hóa và các chủ đề khác
+keywords:
+  - Intlayer
+  - Quốc tế hóa
+  - Blog
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - blog
+  - search
+---
+
+# Áp dụng Quốc tế hóa trong JavaScript: Nâng cao Phạm vi Toàn cầu và SEO
+
+Chào mừng bạn đến với blog của chúng tôi, nơi dành riêng cho tất cả các vấn đề về **quốc tế hóa** cho các ứng dụng JavaScript! Tại đây, chúng tôi khám phá các thực tiễn tốt nhất, chiến lược và công cụ giúp các nhà phát triển mở rộng sản phẩm kỹ thuật số của họ trên toàn cầu.
+
+---
+
+## Tại sao Quốc tế hóa (i18n) lại Quan trọng
+
+Trong thế giới kết nối ngày nay, người dùng mong đợi trải nghiệm liền mạch và được địa phương hóa. Quốc tế hóa (i18n) đảm bảo rằng ứng dụng web của bạn có thể thích ứng với các ngôn ngữ và sắc thái văn hóa khác nhau. Bằng cách áp dụng các thực tiễn i18n ngay từ đầu, bạn sẽ mở khóa nhiều lợi ích, chẳng hạn như:
+
+1. **Cải thiện trải nghiệm người dùng:** Người dùng cảm thấy thoải mái hơn khi tương tác với nội dung bằng ngôn ngữ mẹ đẻ của họ.
+2. **Mở rộng phạm vi thị trường:** Cung cấp nhiều ngôn ngữ giúp bạn tiếp cận các khu vực mới và phát triển cơ sở người dùng.
+3. **Cải thiện khả năng tiếp cận:** i18n được cấu trúc tốt thường phù hợp với các tiêu chuẩn về khả năng tiếp cận, làm cho ứng dụng của bạn trở nên bao quát hơn.
+4. **Tăng hiệu quả SEO:** Nội dung được địa phương hóa có thể nâng cao khả năng hiển thị của bạn trong kết quả tìm kiếm theo vùng.
+
+---
+
+## Giải pháp Quốc tế hóa Mã nguồn mở
+
+Việc xây dựng một ứng dụng quốc tế hóa không nhất thiết phải phức tạp. Cộng đồng mã nguồn mở cung cấp nhiều công cụ và thư viện mạnh mẽ, được hỗ trợ tốt giúp việc địa phương hóa trở nên đơn giản hơn. Các giải pháp phổ biến như **react-intl**, **i18next**, và **FormatJS** cung cấp API linh hoạt và dễ dàng tích hợp với các framework JavaScript hiện đại như React, Vue và Angular.
+
+### Lợi ích chính của các giải pháp mã nguồn mở
+
+- **Tính linh hoạt:** Các thư viện do cộng đồng phát triển tiến hóa nhanh chóng, cung cấp các bản cập nhật và tính năng mới khi cần thiết.
+- **Tiết kiệm chi phí:** Không có phí bản quyền, giúp việc thử nghiệm hoặc mở rộng ứng dụng trở nên đơn giản hơn.
+- **Hỗ trợ cộng đồng:** Cộng đồng lớn thường đồng nghĩa với nhiều hướng dẫn, tài liệu và plugin có sẵn.
+
+---
+
+## Thông báo và những điều sắp tới
+
+Chúng tôi rất vui mừng thông báo về các hướng dẫn sắp tới, các thực hành tốt nhất và **các nghiên cứu điển hình** về cách tối ưu hóa ứng dụng JavaScript của bạn cho đối tượng toàn cầu. Dưới đây là một cái nhìn sơ lược:
+
+- **Mẹo Địa phương hóa Nâng cao:** Thành thạo cách chia số nhiều, định dạng ngày/giờ và nội dung động.
+- **Tối ưu Hiệu suất:** Giảm thiểu kích thước gói trong khi vẫn hỗ trợ nhiều ngôn ngữ.
+- **Nghiên cứu điển hình từ Cộng đồng:** Trình bày các ví dụ thực tế về việc triển khai i18n thành công.
+
+Hãy theo dõi các cập nhật này và nhiều hơn nữa!
+
+---
+
+## Đóng góp cho Blog của Chúng Tôi!
+
+Chúng tôi tin tưởng vào việc chia sẻ kiến thức do cộng đồng dẫn dắt. Nếu bạn có một ý tưởng tuyệt vời cho bài viết blog liên quan đến quốc tế hóa, **SEO**, hoặc bất kỳ chủ đề liên quan nào khác, chúng tôi rất mong được nghe từ bạn. Bạn có thể gửi Pull Request bằng cách thêm bài viết blog đề xuất của mình vào kho GitHub của chúng tôi:
+
+[**Gửi bài viết của bạn tại đây**](https://github.com/aymericzip/intlayer/blob/main/docs/blog)
+
+Những đóng góp của bạn giúp chúng tôi làm phong phú nền tảng này và trao quyền cho các nhà phát triển trên toàn thế giới.
+
+---
+
+**Cảm ơn bạn đã đọc và chào mừng bạn đến với cộng đồng i18n của chúng tôi!** Hãy đón chờ thêm nhiều thông tin chi tiết, mẹo và các thực hành tốt nhất về cách đưa ứng dụng JavaScript của bạn đến thành công quốc tế.

package/blog/vi/internationalization_and_SEO.md

@@ -0,0 +1,363 @@
+---
+createdAt: 2024-12-24
+updatedAt: 2025-06-29
+title: SEO và Quốc tế hóa
+description: Khám phá cách tối ưu hóa website đa ngôn ngữ của bạn cho các công cụ tìm kiếm và cải thiện SEO.
+keywords:
+  - SEO
+  - Intlayer
+  - Quốc tế hóa
+  - Blog
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - blog
+  - SEO-and-i18n
+---
+
+# SEO & I18n: Hướng Dẫn Tối Ưu Để Biến Website Của Bạn Thành Đa Ngôn Ngữ
+
+Muốn tiếp cận nhiều người dùng hơn trên toàn cầu? Việc làm cho website của bạn đa ngôn ngữ là một trong những cách tốt nhất để mở rộng đối tượng người dùng và cải thiện SEO (Tối ưu hóa công cụ tìm kiếm). Trong bài blog này, chúng tôi sẽ phân tích những kiến thức cơ bản về SEO quốc tế, thường được gọi là **i18n** (viết tắt của “internationalization” - quốc tế hóa), bằng những thuật ngữ rõ ràng và dễ hiểu. Bạn sẽ học được về những quyết định quan trọng cần đưa ra, cách sử dụng các yếu tố kỹ thuật như `hreflang`, và lý do tại sao các công cụ như **Intlayer** có thể giúp đơn giản hóa các dự án Next.js đa ngôn ngữ của bạn.
+
+---
+
+## 1. Làm Thế Nào Để Biết Website Của Bạn Đa Ngôn Ngữ?
+
+Một trang web đa ngôn ngữ cung cấp nội dung của nó bằng nhiều hơn một ngôn ngữ. Ví dụ, bạn có thể có phiên bản tiếng Anh (`example.com/en/`), phiên bản tiếng Pháp (`example.com/fr/`), và phiên bản tiếng Tây Ban Nha (`example.com/es/`). Cách tiếp cận này cho phép các công cụ tìm kiếm hiển thị phiên bản ngôn ngữ phù hợp cho người dùng dựa trên sở thích hoặc vị trí địa lý của họ.
+
+Khi bạn làm đúng, bạn sẽ tạo ra trải nghiệm thân thiện hơn nhiều cho những người không nói tiếng Anh, dẫn đến sự tương tác tốt hơn, tỷ lệ chuyển đổi cao hơn và cải thiện SEO ở các khu vực khác nhau.
+
+---
+
+## 2. Lựa Chọn Cấu Trúc URL Phù Hợp
+
+Nếu bạn quyết định có nhiều phiên bản ngôn ngữ, bạn sẽ cần một cách rõ ràng và nhất quán để tổ chức các URL của trang web. Mỗi ngôn ngữ (hoặc khu vực) nên có “địa chỉ” riêng biệt trên internet. Dưới đây là ba cách phổ biến để cấu trúc các trang web đa ngôn ngữ:
+
+1. Tên miền cấp cao theo mã quốc gia (ccTLDs)
+   - Ví dụ: `example.fr`, `example.de`
+   - **Ưu điểm:** Gửi tín hiệu mạnh mẽ đến các công cụ tìm kiếm về quốc gia mà nội dung hướng đến (ví dụ, `.fr` = Pháp).
+   - **Nhược điểm:** Quản lý nhiều tên miền có thể tốn kém và phức tạp hơn.
+
+2. **Subdomains**
+   - **Ví dụ:** `fr.example.com`, `de.example.com`
+   - **Ưu điểm:** Mỗi ngôn ngữ “sống” trên một subdomain riêng, giúp việc thêm hoặc bớt ngôn ngữ trở nên tương đối dễ dàng.
+   - **Nhược điểm:** Các công cụ tìm kiếm đôi khi coi các subdomain như các trang web riêng biệt, vì vậy nó có thể làm giảm uy tín của tên miền chính của bạn.
+
+3. **Thư mục con (Subdirectories)**
+   - **Ví dụ:** `example.com/fr/`, `example.com/de/`
+   - **Ưu điểm:** Dễ quản lý, và tất cả lưu lượng truy cập đều hướng đến một tên miền chính.
+   - **Nhược điểm:** Tín hiệu SEO địa phương không mạnh bằng ccTLDs (mặc dù vẫn rất hiệu quả nếu thực hiện đúng cách).
+
+> **Mẹo:** Nếu bạn có một thương hiệu toàn cầu và muốn giữ mọi thứ đơn giản hơn, thư mục con thường là lựa chọn tốt nhất. Nếu bạn chỉ nhắm đến một hoặc hai quốc gia chính và muốn nhấn mạnh từng quốc gia, ccTLDs có thể là cách nên chọn.
+
+---
+
+## 3. Làm Chủ Việc Nhắm Mục Tiêu Ngôn Ngữ với Hreflang
+
+### 3.1. Hreflang là gì?
+
+Khi bạn có nội dung giống hệt hoặc rất giống nhau bằng nhiều ngôn ngữ, các công cụ tìm kiếm như Google có thể bị nhầm lẫn về phiên bản nào nên hiển thị cho người dùng. **Hreflang** là một thuộc tính HTML cho biết với các công cụ tìm kiếm ngôn ngữ (và khu vực) mà một trang cụ thể hướng đến, cũng như các trang ngôn ngữ/khu vực thay thế.
+
+### 3.2. Tại sao điều này quan trọng?
+
+1. Ngăn ngừa các vấn đề về **nội dung trùng lặp** (khi các công cụ tìm kiếm nghĩ rằng bạn đang xuất bản cùng một nội dung nhiều lần).
+2. Đảm bảo **người dùng Pháp thấy phiên bản tiếng Pháp**, **người dùng Tây Ban Nha thấy phiên bản tiếng Tây Ban Nha**, và tương tự.
+3. Cải thiện trải nghiệm người dùng tổng thể, nghĩa là tăng tương tác và xếp hạng SEO cao hơn.
+
+### 3.3. Cách sử dụng Hreflang trong thẻ `<head>`
+
+Trong HTML của bạn, bạn sẽ thêm như sau:
+
+```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"`**: Chỉ phiên bản tiếng Anh của trang.
+- **`hreflang="fr"`**: Chỉ phiên bản tiếng Pháp của trang.
+- **`hreflang="es"`**: Chỉ phiên bản tiếng Tây Ban Nha của trang.
+- **`hreflang="x-default"`**: Ngôn ngữ “dự phòng” hoặc URL mặc định khi không có ngôn ngữ nào khác phù hợp với sở thích của người dùng.
+
+> **Lưu ý nhanh:** Đảm bảo các URL trong các thẻ này trỏ trực tiếp đến trang cuối cùng, **không** có chuyển hướng bổ sung nào.
+
+---
+
+## 4. Làm cho Nội dung Thực sự “Địa phương” (Không chỉ Dịch)
+
+### 4.1. Định vị hóa so với Dịch thuật
+
+- **Dịch thuật** có nghĩa là chuyển đổi văn bản từ một ngôn ngữ sang ngôn ngữ khác từng từ một.
+- **Định vị hóa** có nghĩa là điều chỉnh định dạng nội dung, tiền tệ, đơn vị đo lường và các tham chiếu văn hóa cho phù hợp với đối tượng địa phương. Ví dụ, nếu bạn nhắm đến thị trường Pháp, bạn sẽ dùng `€` thay vì `---
+  createdAt: 2024-12-24
+  updatedAt: 2025-06-29
+  title: SEO và Quốc tế hóa
+  description: Khám phá cách tối ưu hóa website đa ngôn ngữ của bạn cho các công cụ tìm kiếm và cải thiện SEO.
+  keywords:
+  - SEO
+  - Intlayer
+  - Quốc tế hóa
+  - Blog
+  - Next.js
+  - JavaScript
+  - React
+    slugs:
+  - blog
+  - SEO-and-i18n
+
+---
+
+# SEO & I18n: Hướng Dẫn Tối Ưu Để Biến Website Của Bạn Thành Đa Ngôn Ngữ
+
+Muốn tiếp cận nhiều người dùng hơn trên toàn cầu? Việc làm cho website của bạn đa ngôn ngữ là một trong những cách tốt nhất để mở rộng đối tượng người dùng và cải thiện SEO (Tối ưu hóa công cụ tìm kiếm). Trong bài blog này, chúng tôi sẽ phân tích những kiến thức cơ bản về SEO quốc tế, thường được gọi là **i18n** (viết tắt của “internationalization” - quốc tế hóa), bằng những thuật ngữ rõ ràng và dễ hiểu. Bạn sẽ học được về những quyết định quan trọng cần đưa ra, cách sử dụng các yếu tố kỹ thuật như `hreflang`, và lý do tại sao các công cụ như **Intlayer** có thể giúp đơn giản hóa các dự án Next.js đa ngôn ngữ của bạn.
+
+---
+
+## 1. Làm Thế Nào Để Biết Website Của Bạn Đa Ngôn Ngữ?
+
+Một trang web đa ngôn ngữ cung cấp nội dung của nó bằng nhiều hơn một ngôn ngữ. Ví dụ, bạn có thể có phiên bản tiếng Anh (`example.com/en/`), phiên bản tiếng Pháp (`example.com/fr/`), và phiên bản tiếng Tây Ban Nha (`example.com/es/`). Cách tiếp cận này cho phép các công cụ tìm kiếm hiển thị phiên bản ngôn ngữ phù hợp cho người dùng dựa trên sở thích hoặc vị trí địa lý của họ.
+
+Khi bạn làm đúng, bạn sẽ tạo ra trải nghiệm thân thiện hơn nhiều cho những người không nói tiếng Anh, dẫn đến sự tương tác tốt hơn, tỷ lệ chuyển đổi cao hơn và cải thiện SEO ở các khu vực khác nhau.
+
+---
+
+## 2. Lựa Chọn Cấu Trúc URL Phù Hợp
+
+Nếu bạn quyết định có nhiều phiên bản ngôn ngữ, bạn sẽ cần một cách rõ ràng và nhất quán để tổ chức các URL của trang web. Mỗi ngôn ngữ (hoặc khu vực) nên có “địa chỉ” riêng biệt trên internet. Dưới đây là ba cách phổ biến để cấu trúc các trang web đa ngôn ngữ:
+
+1. Tên miền cấp cao theo mã quốc gia (ccTLDs)
+   - Ví dụ: `example.fr`, `example.de`
+   - **Ưu điểm:** Gửi tín hiệu mạnh mẽ đến các công cụ tìm kiếm về quốc gia mà nội dung hướng đến (ví dụ, `.fr` = Pháp).
+   - **Nhược điểm:** Quản lý nhiều tên miền có thể tốn kém và phức tạp hơn.
+
+2. **Subdomains**
+   - **Ví dụ:** `fr.example.com`, `de.example.com`
+   - **Ưu điểm:** Mỗi ngôn ngữ “sống” trên một subdomain riêng, giúp việc thêm hoặc bớt ngôn ngữ trở nên tương đối dễ dàng.
+   - **Nhược điểm:** Các công cụ tìm kiếm đôi khi coi các subdomain như các trang web riêng biệt, vì vậy nó có thể làm giảm uy tín của tên miền chính của bạn.
+
+3. **Thư mục con (Subdirectories)**
+   - **Ví dụ:** `example.com/fr/`, `example.com/de/`
+   - **Ưu điểm:** Dễ quản lý, và tất cả lưu lượng truy cập đều hướng đến một tên miền chính.
+   - **Nhược điểm:** Tín hiệu SEO địa phương không mạnh bằng ccTLDs (mặc dù vẫn rất hiệu quả nếu thực hiện đúng cách).
+
+> **Mẹo:** Nếu bạn có một thương hiệu toàn cầu và muốn giữ mọi thứ đơn giản hơn, thư mục con thường là lựa chọn tốt nhất. Nếu bạn chỉ nhắm đến một hoặc hai quốc gia chính và muốn nhấn mạnh từng quốc gia, ccTLDs có thể là cách nên chọn.
+
+---
+
+## 3. Làm Chủ Việc Nhắm Mục Tiêu Ngôn Ngữ với Hreflang
+
+### 3.1. Hreflang là gì?
+
+Khi bạn có nội dung giống hệt hoặc rất giống nhau bằng nhiều ngôn ngữ, các công cụ tìm kiếm như Google có thể bị nhầm lẫn về phiên bản nào nên hiển thị cho người dùng. **Hreflang** là một thuộc tính HTML cho biết với các công cụ tìm kiếm ngôn ngữ (và khu vực) mà một trang cụ thể hướng đến, cũng như các trang ngôn ngữ/khu vực thay thế.
+
+### 3.2. Tại sao điều này quan trọng?
+
+1. Ngăn ngừa các vấn đề về **nội dung trùng lặp** (khi các công cụ tìm kiếm nghĩ rằng bạn đang xuất bản cùng một nội dung nhiều lần).
+2. Đảm bảo **người dùng Pháp thấy phiên bản tiếng Pháp**, **người dùng Tây Ban Nha thấy phiên bản tiếng Tây Ban Nha**, và tương tự.
+3. Cải thiện trải nghiệm người dùng tổng thể, nghĩa là tăng tương tác và xếp hạng SEO cao hơn.
+
+### 3.3. Cách sử dụng Hreflang trong thẻ `<head>`
+
+Trong HTML của bạn, bạn sẽ thêm như sau:
+
+```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"`**: Chỉ phiên bản tiếng Anh của trang.
+- **`hreflang="fr"`**: Chỉ phiên bản tiếng Pháp của trang.
+- **`hreflang="es"`**: Chỉ phiên bản tiếng Tây Ban Nha của trang.
+- **`hreflang="x-default"`**: Ngôn ngữ “dự phòng” hoặc URL mặc định khi không có ngôn ngữ nào khác phù hợp với sở thích của người dùng.
+
+> **Lưu ý nhanh:** Đảm bảo các URL trong các thẻ này trỏ trực tiếp đến trang cuối cùng, **không** có chuyển hướng bổ sung nào.
+
+---
+
+## 4. Làm cho Nội dung Thực sự “Địa phương” (Không chỉ Dịch)
+
+, và có thể đề cập đến các ngày lễ địa phương hoặc các chi tiết đặc thù vùng miền.
+
+### 4.2. Tránh Nội dung Trùng lặp
+
+Ngay cả với các bản dịch tốt, các công cụ tìm kiếm vẫn có thể đánh dấu trang web của bạn là nội dung trùng lặp nếu cấu trúc quá giống nhau. Hreflang giúp làm rõ rằng các trang này không phải là bản sao mà là các biến thể ngôn ngữ.
+
+---
+
+## 5. Các Yếu tố Kỹ thuật SEO Cần Thiết
+
+### 5.1. Khai báo Ngôn ngữ (`lang` và `dir`)
+
+Trong thẻ HTML của bạn, bạn có thể khai báo ngôn ngữ như sau:
+
+```html
+<html lang="en"></html>
+```
+
+- **`lang="en"`** giúp trình duyệt và các công nghệ hỗ trợ hiểu được ngôn ngữ.
+
+Đối với các ngôn ngữ viết từ phải sang trái (như tiếng Ả Rập hoặc tiếng Do Thái), thêm:
+
+```html
+<html dir="rtl" lang="ar"></html>
+```
+
+- **`dir="rtl"`** đảm bảo hướng văn bản là từ phải sang trái.
+
+### 5.2. Thẻ Canonical
+
+Thẻ canonical cho các công cụ tìm kiếm biết trang nào là phiên bản “gốc” hoặc chính nếu bạn có các trang gần như trùng lặp. Thông thường, bạn sẽ có một canonical **tham chiếu chính nó** cho các trang đa ngôn ngữ.
+
+```html
+<link rel="canonical" href="https://example.com/fr/produits" />
+```
+
+---
+
+## 6. SEO Trên Trang Đa Ngôn Ngữ
+
+### 6.1. Tiêu đề & Mô tả Meta
+
+- **Được dịch và tối ưu hóa** cho từng ngôn ngữ.
+- Thực hiện **nghiên cứu từ khóa** cho từng thị trường vì những gì mọi người tìm kiếm bằng tiếng Anh có thể khác với tiếng Pháp hoặc tiếng Tây Ban Nha.
+
+### 6.2. Tiêu đề (H1, H2, H3)
+
+Các tiêu đề của bạn nên phản ánh **cụm từ địa phương** hoặc **từ khóa** của từng khu vực. Đừng chỉ đơn giản là dịch tiêu đề tiếng Anh gốc qua Google Translate rồi xong.
+
+### 6.3. Hình ảnh & Media
+
+- Địa phương hóa văn bản thay thế (alt text), chú thích và tên tệp nếu cần.
+- Sử dụng hình ảnh phù hợp với văn hóa mục tiêu.
+
+---
+
+## 7. Chuyển đổi Ngôn ngữ & Trải nghiệm Người dùng
+
+### 7.1. Tự động chuyển hướng hay Bộ chọn ngôn ngữ?
+
+- **Tự động chuyển hướng** (dựa trên IP hoặc cài đặt trình duyệt) có thể tiện lợi nhưng có thể gửi khách du lịch hoặc người dùng VPN đến phiên bản sai.
+- **Bộ chọn ngôn ngữ** thường minh bạch hơn vì người dùng có thể chọn ngôn ngữ của riêng họ nếu ngôn ngữ được tự động phát hiện không chính xác.
+
+Dưới đây là ví dụ đơn giản về 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 { pathname, search } = useLocation(); // Lấy đường dẫn URL hiện tại. Ví dụ: /fr/about?foo=bar
+  const navigate = useNavigate();
+
+  const { locale, availableLocales, setLocale } = useLocale({
+    onLocaleChange: (locale) => {
+      // Tạo URL với locale được cập nhật
+      // Ví dụ: /es/about?foo=bar
+      const pathWithLocale = getLocalizedUrl(`${pathname}${search}`, locale);
+
+      // Cập nhật đường dẫn URL
+      navigate(pathWithLocale);
+    },
+  });
+
+  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>
+              {/* Ngôn ngữ - ví dụ: FR */}
+              {localeItem}
+            </span>
+            <span>
+              {/* Ngôn ngữ trong chính ngôn ngữ đó - ví dụ: Français */}
+              {getLocaleName(localeItem, locale)}
+            </span>
+            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
+              {/* Ngôn ngữ trong Locale hiện tại - ví dụ Francés với locale hiện tại đặt là Locales.SPANISH */}
+              {getLocaleName(localeItem)}
+            </span>
+            <span dir="ltr" lang={Locales.ENGLISH}>
+              {/* Ngôn ngữ bằng tiếng Anh - ví dụ French */}
+              {getLocaleName(localeItem, Locales.ENGLISH)}
+            </span>
+          </a>
+        </li>
+      ))}
+    </ol>
+  );
+};
+```
+
+### 7.2. Lưu trữ sở thích
+
+- Lưu lựa chọn ngôn ngữ của người dùng trong **cookie** hoặc **session**.
+- Lần sau khi họ truy cập trang web của bạn, bạn có thể tự động tải ngôn ngữ ưu tiên của họ.
+
+---
+
+## 8. Xây dựng liên kết ngược địa phương
+
+**Backlinks** (liên kết từ các trang web bên ngoài đến trang của bạn) vẫn là một yếu tố quan trọng trong SEO. Khi bạn vận hành một trang web đa ngôn ngữ, hãy cân nhắc:
+
+- Tiếp cận các trang tin tức địa phương, blog hoặc diễn đàn. Ví dụ, một tên miền `.fr` trỏ đến thư mục con tiếng Pháp của bạn có thể tăng cường SEO địa phương cho tiếng Pháp.
+- Theo dõi các backlink theo từng ngôn ngữ để xem khu vực nào cần nhiều nỗ lực PR/marketing hơn.
+
+---
+
+## 9. Giám sát & Duy trì Trang Web Đa Ngôn Ngữ của Bạn
+
+### 9.1. Google Analytics & Search Console
+
+- Phân đoạn dữ liệu của bạn cho từng thư mục ngôn ngữ (`/en/`, `/fr/`, `/es/`).
+- Chú ý đến các **lỗi thu thập dữ liệu**, **cảnh báo nội dung trùng lặp**, và **vấn đề lập chỉ mục** theo từng ngôn ngữ.
+
+### 9.2. Cập nhật Nội dung Định kỳ
+
+- Giữ cho bản dịch luôn mới. Nếu bạn thay đổi mô tả sản phẩm bằng tiếng Anh, hãy cập nhật nó bằng tiếng Pháp, Tây Ban Nha, v.v.
+- Các bản dịch lỗi thời có thể gây nhầm lẫn cho khách hàng và làm giảm sự tin tưởng của người dùng.
+
+---
+
+## 10. Những Sai Lầm Thường Gặp Cần Tránh
+
+1. **Nội Dung Dịch Máy**
+   Các bản dịch tự động mà không có sự kiểm duyệt của con người có thể chứa nhiều lỗi.
+
+2. **Thẻ `hreflang` Sai hoặc Thiếu**
+   Công cụ tìm kiếm không thể xác định các phiên bản ngôn ngữ nếu thẻ của bạn không đầy đủ hoặc mã sai.
+
+3. **Chuyển Đổi Ngôn Ngữ Chỉ Qua JavaScript**
+   Nếu Google không thể thu thập dữ liệu các URL riêng biệt cho từng ngôn ngữ, trang của bạn có thể không xuất hiện trong kết quả tìm kiếm địa phương chính xác.
+
+4. **Bỏ Qua Các Khía Cạnh Văn Hóa**
+   Một câu đùa hoặc cụm từ có thể phù hợp ở một quốc gia nhưng lại gây phản cảm hoặc vô nghĩa ở quốc gia khác.
+
+---
+
+## Kết Luận
+
+Việc làm cho trang web của bạn đa ngôn ngữ không chỉ đơn thuần là dịch văn bản. Nó còn liên quan đến việc cấu trúc URL một cách hiệu quả, sử dụng thẻ `hreflang` để giúp các công cụ tìm kiếm phục vụ phiên bản đúng, và cung cấp trải nghiệm người dùng xuất sắc với hình ảnh địa phương hóa, bộ chọn ngôn ngữ, và điều hướng nhất quán. Tuân theo những thực hành tốt nhất này sẽ giúp bạn thành công trên thị trường toàn cầu, tăng sự hài lòng của người dùng, và cuối cùng là mang lại kết quả SEO tốt hơn trên các khu vực khác nhau.
+
+Nếu bạn đang sử dụng Next.js (đặc biệt là App Router trong Next.js 13+), một công cụ như **Intlayer** có thể giúp đơn giản hóa toàn bộ quy trình này. Nó hỗ trợ mọi thứ từ việc tạo sitemap địa phương hóa đến tự động xử lý các liên kết `hreflang`, phát hiện ngôn ngữ, và nhiều hơn nữa để bạn có thể tập trung vào việc tạo nội dung đa ngôn ngữ chất lượng.
+
+**Sẵn sàng vươn ra toàn cầu?** Hãy bắt đầu triển khai các chiến lược SEO và i18n ngay bây giờ, và chứng kiến những khách truy cập mới từ khắp nơi trên thế giới khám phá và tương tác với trang web của bạn!

package/blog/vi/intlayer_with_react-intl.md

@@ -49,10 +49,6 @@ Trong khi Intlayer cung cấp một giải pháp i18n độc lập xuất sắc
 
 Hướng dẫn này sẽ chỉ cho bạn cách tận dụng hệ thống khai báo nội dung vượt trội của Intlayer trong khi vẫn duy trì khả năng tương thích với react-intl.
 
-## Mục lục
-
-<TOC/>
-
 ## Hướng dẫn từng bước để thiết lập Intlayer với react-intl
 
 ### Bước 1: Cài đặt các phụ thuộc

package/blog/vi/list_i18n_technologies/CMS/drupal.md

@@ -0,0 +1,143 @@
+---
+createdAt: 2025-01-16
+updatedAt: 2025-06-29
+title: Công Cụ Quốc Tế Hóa (i18n) Tốt Nhất cho Drupal
+description: Khám phá các giải pháp i18n hàng đầu cho Drupal để giải quyết các thách thức dịch thuật, tăng cường SEO và mang đến trải nghiệm web toàn cầu liền mạch.
+keywords:
+  - Drupal
+  - i18n
+  - đa ngôn ngữ
+  - SEO
+  - Quốc tế hóa
+  - Blog
+  - JavaScript
+slugs:
+  - blog
+  - i18n-technologies
+  - CMS
+  - drupal
+---
+
+# Khám Phá Các Giải Pháp i18n Để Dịch Trang Drupal Của Bạn
+
+Trong bối cảnh kỹ thuật số ngày nay, việc mở rộng phạm vi tiếp cận trang web của bạn để phục vụ đối tượng toàn cầu là điều thiết yếu. Đối với các chủ sở hữu trang Drupal, việc triển khai các giải pháp quốc tế hóa (i18n) là chìa khóa để quản lý dịch thuật một cách hiệu quả đồng thời bảo toàn kiến trúc trang, giá trị SEO và trải nghiệm người dùng. Trong bài viết này, chúng tôi sẽ khám phá các phương pháp khác nhau từ việc tận dụng khả năng đa ngôn ngữ tích hợp sẵn của Drupal Core đến việc tích hợp các module đóng góp và các giải pháp tùy chỉnh, giúp bạn quyết định phương án nào phù hợp nhất với nhu cầu dự án của mình.
+
+---
+
+## Quốc tế hóa (i18n) là gì?
+
+Quốc tế hóa (i18n) là quá trình thiết kế trang web của bạn sao cho có thể dễ dàng thích ứng với nhiều ngôn ngữ và bối cảnh văn hóa khác nhau mà không cần phải thiết kế lại cấu trúc của nó. Trong Drupal, điều này bao gồm việc xây dựng một nền tảng nơi nội dung bao gồm các trang, bài viết, menu và các thiết lập cấu hình có thể được dịch và bản địa hóa một cách hiệu quả cho các đối tượng đa dạng.
+
+Tìm hiểu thêm về i18n bằng cách đọc hướng dẫn toàn diện của chúng tôi: [Quốc tế hóa (i18n) là gì? Định nghĩa và những thách thức](https://github.com/aymericzip/intlayer/blob/main/docs/blog/vi/what_is_internationalization.md).
+
+---
+
+## Thách thức dịch thuật cho các trang web Drupal
+
+Việc dịch một trang Drupal bao gồm những thách thức riêng:
+
+- **Độ phức tạp của nội dung:** Các trang Drupal thường bao gồm nhiều loại nội dung khác nhau (node, thuật ngữ phân loại, block và thực thể tùy chỉnh) đòi hỏi quy trình dịch nhất quán.
+- **Cân nhắc về SEO:** Việc triển khai dịch thuật đúng cách giúp cải thiện thứ hạng tìm kiếm bằng cách tận dụng URL bản địa hóa, thẻ hreflang và sơ đồ trang web theo ngôn ngữ.
+- **Trải nghiệm người dùng:** Cung cấp bộ chuyển đổi ngôn ngữ trực quan và đảm bảo thiết kế cùng chức năng nhất quán qua các bản dịch giúp tăng tương tác của khách truy cập.
+- **Bảo trì theo thời gian:** Khi trang web phát triển, việc giữ cho các bản dịch đồng bộ với cập nhật nội dung có thể là thách thức nếu không có công cụ và quy trình phù hợp.
+
+---
+
+## Các giải pháp i18n hàng đầu cho Drupal
+
+Dưới đây là một số phương pháp phổ biến để quản lý nội dung đa ngôn ngữ trong Drupal:
+
+### 1. Các Module Đa ngôn ngữ Cốt lõi của Drupal
+
+**Tổng quan:**  
+Kể từ Drupal 8, hỗ trợ đa ngôn ngữ đã trở thành một tính năng tích hợp sẵn thay vì một phần bổ sung sau này. Bằng cách kích hoạt một bộ các module cốt lõi, bạn có thể biến trang Drupal của mình thành một nền tảng đa ngôn ngữ mạnh mẽ. Bốn module thiết yếu bao gồm:
+
+- **Module Ngôn ngữ:** Cho phép bạn thêm và quản lý các ngôn ngữ.
+- **Module Dịch Nội dung:** Cho phép dịch các node và các loại nội dung khác.
+- **Module Dịch Cấu hình:** Hỗ trợ dịch các cấu hình của trang web, như views và menu.
+- **Module Dịch Giao diện:** Cung cấp bản dịch cho giao diện Drupal và các văn bản của module đóng góp.
+
+**Các tính năng chính:**
+
+- **Tích hợp liền mạch:** Được xây dựng trực tiếp trong lõi, các module này hoạt động hài hòa với kiến trúc của trang web bạn.
+- **Kiểm soát chi tiết:** Quyết định loại nội dung và các phần cấu hình nào nên được dịch.
+- **Thân thiện với SEO:** Cung cấp đường dẫn riêng theo ngôn ngữ, hỗ trợ hreflang và sơ đồ trang web địa phương hóa ngay khi cài đặt.
+
+**Ưu điểm:**
+
+- Không tốn thêm chi phí, vì các tính năng này đã được bao gồm trong Drupal Core.
+- Được cộng đồng Drupal hỗ trợ và duy trì.
+- Cung cấp cách tiếp cận đồng nhất trong quản lý bản dịch.
+
+**Lưu ý:**
+
+- Mặc dù mạnh mẽ, việc thiết lập ban đầu có thể phức tạp do nhiều module và cài đặt cấu hình.
+- Các nhu cầu quy trình làm việc nâng cao có thể cần thêm công cụ bổ sung.
+
+---
+
+### 2. Công cụ Quản lý Dịch thuật (TMGMT)
+
+**Tổng quan:**  
+Đối với các trang web cần quy trình dịch thuật được tối ưu hóa hoặc tích hợp với các dịch vụ dịch thuật chuyên nghiệp, module Translation Management Tool (TMGMT) là một bổ sung tuyệt vời cho hệ thống đa ngôn ngữ của Drupal Core.
+
+**Các tính năng chính:**
+
+- **Quản lý quy trình làm việc:** Cung cấp giao diện thân thiện để quản lý quy trình dịch thuật.
+- **Tích hợp dịch vụ:** Kết nối với các dịch vụ dịch thuật chuyên nghiệp cho việc dịch tự động hoặc quản lý.
+- **Hợp tác:** Hỗ trợ phối hợp giữa các nhóm nội bộ và các dịch giả bên ngoài.
+
+**Ưu điểm:**
+
+- Lý tưởng cho các trang web có cập nhật nội dung thường xuyên hoặc quy mô lớn.
+- Nâng cao trải nghiệm đa ngôn ngữ mặc định với kiểm soát dịch thuật tốt hơn.
+- Hỗ trợ nhiều ngôn ngữ và các quy trình dịch thuật phức tạp.
+
+**Lưu ý:**
+
+- Là một module đóng góp, nó yêu cầu kiểm tra tính tương thích với phiên bản Drupal của bạn.
+- Các tính năng nâng cao có thể cần cấu hình và có thể cần một đội ngũ dịch thuật chuyên trách.
+
+---
+
+### 3. Giải pháp i18n tùy chỉnh thông qua mã nguồn
+
+**Tổng quan:**  
+Đối với các nhà phát triển có yêu cầu đặc thù hoặc cần kiểm soát hoàn toàn, việc triển khai i18n tùy chỉnh có thể là con đường tốt nhất. Drupal cung cấp nhiều API và hook cho phép bạn tùy chỉnh chiến lược đa ngôn ngữ của mình.
+
+**Các kỹ thuật chính:**
+
+- **Sử dụng API của Drupal:** Tận dụng các hàm như `t()` để dịch các chuỗi trong toàn bộ theme và module.
+- **Tích hợp REST API:** Xây dựng các endpoint tùy chỉnh để xử lý dịch động hoặc tích hợp các dịch vụ dịch thuật bên ngoài.
+- **Quy trình làm việc tùy chỉnh:** Tạo các giải pháp riêng biệt phù hợp với kiến trúc trang web của bạn và các nhu cầu đa ngôn ngữ cụ thể.
+
+**Ưu điểm:**
+
+- Linh hoạt hoàn toàn để phát triển một giải pháp phù hợp chính xác với yêu cầu của bạn.
+- Giảm sự phụ thuộc vào các module bên thứ ba, có thể cải thiện hiệu suất.
+- Có thể tích hợp sâu với các tính năng tùy chỉnh của trang web bạn.
+
+**Lưu ý:**
+
+- Yêu cầu kỹ năng phát triển vững chắc và bảo trì liên tục.
+- Giải pháp tùy chỉnh có thể làm tăng thời gian thiết lập ban đầu và độ phức tạp.
+- Không phù hợp lý tưởng cho các dự án có nguồn lực kỹ thuật hạn chế hoặc thời hạn triển khai gấp.
+
+---
+
+## Lựa chọn giải pháp i18n phù hợp cho trang Drupal của bạn
+
+Khi quyết định phương pháp i18n cho trang Drupal của bạn, hãy xem xét các yếu tố sau:
+
+- **Ngân sách:** Các module đa ngôn ngữ của Drupal Core được cung cấp miễn phí từ Drupal 8 trở lên, trong khi các module bổ sung như TMGMT có thể phát sinh chi phí (cho dịch vụ dịch thuật hoặc các tính năng nâng cao).
+- **Chuyên môn kỹ thuật:** Người không phải là nhà phát triển có thể đánh giá cao các tính năng mạnh mẽ, sẵn có của Drupal Core, trong khi các nhà phát triển có thể ưu tiên sự chính xác mà các giải pháp tùy chỉnh mang lại.
+- **Độ phức tạp và quy mô trang web:** Đối với các trang web phức tạp với nhiều loại nội dung và yêu cầu SEO nâng cao, việc tận dụng các module cốt lõi của Drupal cùng với TMGMT có thể là lựa chọn lý tưởng. Đối với các trang web nhỏ hơn hoặc đơn giản hơn, chỉ các module cốt lõi có thể là đủ.
+- **Bảo trì và phát triển tương lai:** Đảm bảo rằng giải pháp bạn chọn có khả năng mở rộng và có thể thích ứng với các thay đổi trong nội dung hoặc thiết kế trong tương lai mà không gây tốn kém đáng kể.
+
+---
+
+## Kết luận
+
+Việc dịch trang Drupal của bạn không chỉ đơn thuần là chuyển đổi văn bản mà còn là kết nối với khán giả toàn cầu, nâng cao trải nghiệm người dùng và tối ưu hóa hiệu suất tìm kiếm quốc tế. Dù bạn tận dụng các tính năng đa ngôn ngữ mạnh mẽ được tích hợp trong Drupal Core, bổ sung chúng với Công cụ Quản lý Dịch thuật (Translation Management Tool), hay đầu tư vào một giải pháp mã hóa tùy chỉnh, điều quan trọng là chọn một phương pháp phù hợp với mục tiêu dự án và nguồn lực của bạn.
+
+Bằng cách đánh giá kỹ lưỡng các lựa chọn và lên kế hoạch bảo trì lâu dài, bạn có thể tạo ra một trang Drupal đa ngôn ngữ có khả năng mở rộng, hiệu quả trong việc kết nối với người dùng trên toàn thế giới. Chúc bạn dịch thuật thành công và chúc trang web của bạn thành công trên thị trường quốc tế!