Hướng dẫn SEO Kỹ thuật cho Website Đa ngôn ngữ (i18n) bằng thẻ Hreflang trong Next.js

Khi mở rộng thị trường ra nước ngoài, nhiều doanh nghiệp triển khai **Website Đa ngôn ngữ (Multi-language Website)** hỗ trợ cả Tiếng Việt và Tiếng Anh. Tuy nhiên, nếu không cấu hình chuẩn SEO kỹ thuật, Googlebot có thể đánh giá website của bạn bị lỗi trùng lặp nội dung (Duplicate Content) hoặc hiển thị sai phiên bản ngôn ngữ cho người tìm kiếm.

1. Thẻ Hreflang là gì? Tại sao bắt buộc phải có cho Web Đa ngôn ngữ?

Thẻ Hreflang (rel="alternate" hreflang="x") là một thuộc tính HTML dùng để khai báo cho Googlebot biết phiên bản ngôn ngữ và khu vực địa lý tương ứng của từng đường link URL.

Ví dụ: Khi người dùng tại Mỹ tìm kiếm trên Google, Google sẽ ưu tiên hiển thị URL phiên bản Tiếng Anh (/en/) thay vì URL Tiếng Việt (/vi/).

2. 3 Bước cấu hình SEO Đa ngôn ngữ trong Next.js (App Router)

Bước 1: Xây dựng cấu trúc URL chuẩn mực

Sử dụng thư mục định tuyến động dạng src/app/[lang]/page.tsx để tạo cấu trúc URL sạch:

• Phiên bản Tiếng Việt: domain.com/vi/about
• Phiên bản Tiếng Anh: domain.com/en/about

Bước 2: Khai báo Metadata Hreflang trong Next.js

Trong file layout.tsx hoặc page.tsx, xuất đối tượng Metadata chứa khai báo alternates:

export async function generateMetadata({ params }) {
  return {
    title: 'Thiết kế website chuyên nghiệp',
    alternates: {
      canonical: 'https://uwmee.com/vi',
      languages: {
        'vi-VN': 'https://uwmee.com/vi',
        'en-US': 'https://uwmee.com/en',
      },
    },
  };
}

Bước 3: Khai báo Hreflang trong Sitemap.xml

Đính kèm thông tin ngôn ngữ thay thế vào file Sitemap.xml động của Next.js để con bọ Google cào dữ liệu chính xác 100%.

Kết luận

Cấu hình thẻ Hreflang chuẩn xác sẽ giúp website đa ngôn ngữ của bạn phủ sóng từ khóa trên toàn cầu mà không lo án phạt trùng lặp nội dung. Uwmee Software chuyên lập trình website Next.js đa ngôn ngữ chuẩn SEO kỹ thuật. Xem thêm bài viết phân biệt SEO Onpage và Offpage.