SEO Blog Đa ngôn ngữ trong Next.js: Xử lý Thẻ Canonical, Hreflang & Dynamic Routing i18n

Xây dựng một trang Blog đa ngôn ngữ (Multilingual Blog) là chiến lược tuyệt vời để đưa thương hiệu của bạn tiếp cận với độc giả toàn cầu. Tuy nhiên, việc vận hành một hệ thống Blog hỗ trợ nhiều ngôn ngữ (như Tiếng Việt /vi/blog, Tiếng Anh /en/blog, Tiếng Nhật /ja/blog) đặt ra những thách thức kỹ thuật SEO rất lớn.

Nếu không xử lý thẻ Canonical Tag và bộ thẻ Hreflang đúng nguyên tắc, website của bạn sẽ đối mặt với nguy cơ bị Google đánh dính lỗi trùng lặp nội dung đa ngôn ngữ (Duplicate Content) và phân tán sức mạnh PageRank. Bài viết này sẽ hướng dẫn bạn cấu hình chuẩn SEO cho Blog đa ngôn ngữ trong Next.js App Router.

1. Kiến trúc Cấu trúc Đường dẫn i18n trong Next.js App Router

Trong Next.js App Router, cấu trúc thư mục tối ưu nhất cho SEO đa ngôn ngữ là sử dụng thư mục động app/[lang]/blog/[slug]/page.jsx.

Ví dụ sơ đồ đường dẫn chuẩn SEO:

• Trang tiếng Việt: https://uwmee.com/vi/blog/huong-dan-seo-nextjs
• Trang tiếng Anh: https://uwmee.com/en/blog/nextjs-seo-guide
• Trang tiếng Nhật: https://uwmee.com/ja/blog/nextjs-seo-guide

Read thêm bài viết Cách tối ưu SEO cho Web đa ngôn ngữ i18n trong Next.js.

2. Viết Code generateMetadata tự động tạo bộ thẻ Hreflang & Canonical đa ngôn ngữ

Dưới đây là đoạn mã thực tế trong file app/[lang]/blog/[slug]/page.jsx giúp tự động sinh chính xác thẻ Canonical tự trỏ và bộ thẻ Hreflang liên kết 2 chiều chuẩn mực:

import { getPostBySlug } from '@/lib/blog';

export async function generateMetadata({ params }) {
  const { lang, slug } = await params;
  const post = await getPostBySlug(slug, lang);

  if (!post) return {};

  const baseUrl = 'https://uwmee.com';
  const currentCanonical = baseUrl + "/" + lang + "/blog/" + slug;

  return {
    title: post.title,
    description: post.description,
    // 1. Thẻ Canonical tự trỏ (Self-referential Canonical)
    alternates: {
      canonical: currentCanonical,
      // 2. Bộ thẻ Hreflang chỉ báo các phiên bản ngôn ngữ khác
      languages: {
        'vi-VN': baseUrl + "/vi/blog/" + post.translations.viSlug,
        'en-US': baseUrl + "/en/blog/" + post.translations.enSlug,
        'ja-JP': baseUrl + "/ja/blog/" + post.translations.jaSlug,
        'x-default': baseUrl + "/en/blog/" + post.translations.enSlug,
      },
    },
  };
}

export default async function BlogPostPage({ params }) {
  // Giao diện render bài viết blog
}

View bài hướng dẫn chuyên sâu Thẻ Hreflang x-default là gì trong SEO Quốc tế.

3. 3 Quy tắc "Bất di bất dịch" khi làm SEO Blog Đa ngôn ngữ

Quy tắc 1: Mỗi ngôn ngữ có thẻ Canonical tự trỏ về chính nó

TUYỆT ĐỐI KHÔNG đặt thẻ Canonical từ trang tiếng Anh /en/blog/post-a trỏ về trang tiếng Việt /vi/blog/post-a. Mỗi phiên bản ngôn ngữ là một trang web riêng biệt và phải sở hữu thẻ Canonical trỏ về đúng URL ngôn ngữ đó. Xem bài Canonical Tag và chống trùng lặp nội dung.

Quy tắc 2: Bản dịch nội dung phải chuẩn văn phong bản địa (Localization)

Đừng dùng Google Dịch tự động rập khuôn. Mỗi bài viết bản dịch phải được người bản ngữ biên tập lại cho phù hợp với văn hóa, thói quen tìm kiếm và từ khóa của quốc gia đó. Read Localization địa phương hóa nội dung.

Quy tắc 3: Tách biệt Sitemap XML theo từng ngôn ngữ

Tạo các file sitemap XML riêng biệt cho từng ngôn ngữ: sitemap-vi.xml, sitemap-en.xml và khai báo chúng trong file sitemap-index.xml tổng. Đọc bài hướng dẫn Cách tạo Dynamic Sitemap XML trong Next.js.

Kết luận

SEO Blog đa ngôn ngữ trong Next.js là cầu nối đưa thương hiệu của bạn vươn tầm thế giới. Việc thiết lập chuẩn xác bộ thẻ Hreflang và Canonical sẽ giúp các bài viết của bạn xuất hiện chính xác trước đối tượng độc giả mục tiêu tại từng quốc gia.