SEO React: dựng trang, metadata và liên kết cho một ứng dụng React lên top

Bài trắc nghiệm nhanh

SEO có phù hợp với bạn không, và nên bắt đầu như thế nào?

Câu hỏi 1 trên 425%

Mọi người có tìm kiếm trên Google những gì bạn bán không?

Có, tôi nghĩ vậyKhông, đó là thứ mới hoặc rất ngáchTôi không biết

SEO React là công việc làm cho một ứng dụng React có thể được công cụ tìm kiếm và trợ lý AI thu thập, lập chỉ mục và hiểu. Bản thân React là trung lập: vấn đề phát sinh khi mọi thứ được dựng trong trình duyệt. Google xác nhận trong kiến thức cơ bản về SEO JavaScript rằng nó xử lý ứng dụng JavaScript qua ba giai đoạn (thu thập, dựng, lập chỉ mục) và rằng "dựng phía máy chủ hoặc dựng trước vẫn là một ý tưởng rất tốt, vì nó làm website nhanh hơn cho người dùng và crawler, và không phải bot nào cũng chạy được JavaScript."

Vì sao React khó cho SEO?

Một ứng dụng React được tạo dưới dạng ứng dụng một trang gửi một tệp HTML chỉ có một thẻ div gốc rỗng và một thẻ script. Trình duyệt tải JavaScript, chạy nó và dựng trang. Một crawler chỉ đọc HTML sẽ không thấy gì để lập chỉ mục: không có tiêu đề, không có văn bản, không có liên kết.

Googlebot có chạy JavaScript, nhưng trong một bước riêng: trang được thu thập, xếp hàng để dựng, được dựng trong Chromium không giao diện, và chỉ sau đó nội dung và liên kết đã dựng mới được dùng. Mỗi bước thêm là một cơ hội thất bại (lỗi script, API bị chặn, quá thời gian chờ) và làm chậm việc trang mới xuất hiện trên tìm kiếm. Hướng dẫn về SEO JavaScript của chúng tôi trình bày chi tiết quy trình này, còn bài viết về lập chỉ mục trên Google giải thích cách đưa trang vào chỉ mục nhanh hơn.

Các bot khác thì kém kiên nhẫn hơn. Phân tích tháng 12/2024 của Vercel, The rise of the AI crawler, nhận thấy rằng "hiện không có crawler AI lớn nào dựng JavaScript", kể tên GPTBot, ChatGPT-User, OAI-SearchBot, ClaudeBot và PerplexityBot. Một trang React dựng phía client sẽ vô hình với ChatGPT, Claude và Perplexity, ngay cả khi Google đã lập chỉ mục nó.

Một site React nên dùng cách dựng nào?

Đội ngũ React giờ khuyến nghị bắt đầu các ứng dụng mới bằng một framework. Khi ngừng hỗ trợ Create React App vào ngày 14/02/2025, họ viết trong thông báo rằng "dựng phía máy chủ có thể cải thiện SEO", và cũng cải thiện hiệu năng vì giảm lượng JavaScript người dùng phải tải trước khi thấy nội dung. Các lựa chọn, từ yếu nhất đến mạnh nhất với tìm kiếm:

Về dựng động, tài liệu của Google nói rõ: nó "là một giải pháp tạm thời, không phải giải pháp lâu dài", và Google khuyến nghị dựng phía máy chủ, dựng tĩnh hoặc hydrate thay thế. Nếu bạn đang chọn framework, hướng dẫn SEO Next.js của chúng tôi trình bày chi tiết các chế độ dựng, Metadata API và sitemap.

Nếu không thể chuyển đổi, một ứng dụng một trang vẫn có thể được Google lập chỉ mục khi làm cẩn thận. Hướng dẫn về SEO cho ứng dụng một trang của chúng tôi liệt kê các điều kiện; phần còn lại của bài viết này áp dụng cho cả hai trường hợp.

Làm thế nào để đặt tiêu đề và thẻ meta trong React?

Từ React 19 (ổn định từ ngày 05/12/2024), các thành phần có thể render trực tiếp thẻ title, meta và link, và React đưa chúng lên phần đầu của tài liệu. Ghi chú phát hành React 19 nêu rằng hỗ trợ gốc này hoạt động "với các ứng dụng chỉ chạy phía client, SSR có streaming và Server Components". Trước React 19, các thư viện như react-helmet hoặc react-helmet-async làm cùng công việc, và chúng vẫn hữu ích để ghi đè giá trị mặc định theo từng route.

function ProductPage({ product }) {
  return (
    <>
      <title>{`${product.name} | Shop`}</title>
      <meta name="description" content={product.summary} />
      <link rel="canonical" href={`https://example.com/p/${product.slug}`} />
      <h1>{product.name}</h1>
    </>
  )
}

Ba quy tắc áp dụng bất kể phương pháp nào:

• Một tiêu đề cho mỗi trang, duy nhất và mô tả rõ nội dung. Tài liệu của React cảnh báo rằng nếu nhiều thành phần cùng render tiêu đề, "hành vi của trình duyệt và công cụ tìm kiếm là không xác định". Hãy truyền cho nó một chuỗi duy nhất (template literal), không trộn văn bản và biến rời rạc.
• Một mô tả và một canonical cho mỗi URL, được tạo từ dữ liệu trang. Công cụ tạo thẻ meta giúp soạn nháp, và công cụ kiểm tra canonical xác nhận những gì đang hoạt động.
• Thẻ Open Graph có trong HTML ban đầu cho các trang được chia sẻ, vì các bot xem trước liên kết thường đọc HTML thô.

Những lỗi định tuyến và liên kết nào chặn việc lập chỉ mục?

Google nêu rõ rằng nó "chỉ có thể khám phá liên kết của bạn nếu chúng là phần tử HTML a có thuộc tính href" và khuyên không dùng phần băm (fragment) của URL để tải nội dung khác nhau. Phần lớn lỗi SEO React đến từ các chi tiết định tuyến:

Để xem Google dựng những gì, dùng công cụ Kiểm tra URL trong Search Console và xem HTML của trang đã kiểm tra, hoặc chạy công cụ kiểm tra khả năng lập chỉ mục trên các mẫu trang chính.

Làm thế nào để xử lý sitemap và dữ liệu có cấu trúc trong React?

React không có sitemap sẵn. Hãy tạo sitemap.xml lúc build từ các route và dữ liệu của bạn (hoặc từ tính năng sitemap của framework), chỉ liệt kê các URL canonical trả về 200, và tham chiếu đến nó trong robots.txt. Công cụ tạo sitemap XML phù hợp với các site tĩnh nhỏ.

Dữ liệu có cấu trúc tuân theo cùng quy tắc với metadata: render script JSON-LD cùng trang, từ cùng dữ liệu, lý tưởng là trên máy chủ. Google có thể đọc JSON-LD được chèn bằng JavaScript sau khi dựng, nhưng đánh dấu không có trong HTML ban đầu thì vắng mặt với các crawler không dựng trang. Dùng Article cho bài viết, Product cho thương mại điện tử, Organization cho toàn site và BreadcrumbList cho các trang sâu.

Hiệu năng ảnh hưởng thế nào đến SEO React?

Các gói JavaScript lớn làm hại Core Web Vitals: trình duyệt phải tải, phân tích và hydrate mã trước khi trang phản hồi, điều này ảnh hưởng đến Largest Contentful Paint và Interaction to Next Paint, nhất là trên di động. Thông báo về Create React App của đội ngũ React ghi rằng dựng phía máy chủ gửi ít JavaScript hơn và một tài liệu HTML đầy đủ, giúp First Contentful Paint nhanh hơn và có thể giảm INP. Các đòn bẩy thực tế: tách mã theo route bằng React.lazy, cung cấp hình ảnh với kích thước rõ ràng, tải lười các thành phần nằm dưới màn hình đầu, và rà soát các script bên thứ ba.

Danh sách kiểm tra SEO React nên có những gì?

1. Mọi URL có thể lập chỉ mục trả về HTML đầy đủ (dựng phía máy chủ hoặc dựng trước), kiểm tra bằng curl.
2. Một tiêu đề, một mô tả và một canonical tự trỏ về chính nó cho mỗi URL, đều duy nhất.
3. Route dựa trên lịch sử, không có URL dạng hash, và mọi liên kết nội bộ đều được render thành thẻ a có href.
4. Mã trạng thái thật: 404 cho trang không tồn tại, 301 hoặc 308 cho trang đã chuyển.
5. Một sitemap.xml được tạo từ cùng dữ liệu với các route, được liệt kê trong robots.txt.
6. JSON-LD được render cùng trang, đã kiểm tra bằng Rich Results Test.
7. Các script, kiểu dáng và API cần để dựng được cho phép trong robots.txt.
8. Mã được tách theo route, và Core Web Vitals được theo dõi trên người dùng thật.

Làm thế nào để một site React hiển thị trong câu trả lời AI?

GEO (generative engine optimization) bắt đầu từ khả năng truy cập. Vì crawler AI tải HTML thô, một trang React phải cung cấp văn bản, tiêu đề và JSON-LD mà không cần JavaScript thì mới được đọc, tóm tắt và trích dẫn. Kiểm tra AI về khả năng thu thập của website cho thấy những bot này nhận được gì từ trang của bạn. Điều kiện thứ hai là nội dung đáng được trích dẫn: các trang trả lời một câu hỏi mỗi phần, có nguồn, số liệu và định nghĩa rõ ràng.

Phần nội dung đó là thứ Sorank, sản phẩm của chúng tôi, tự động hóa. Sorank là phần mềm SEO và GEO chạy theo chế độ autopilot: trình tạo bài viết blog của nó viết và xuất bản 20, 60 hoặc 120 bài mỗi tháng kèm nguồn, liên kết nội bộ và hình ảnh, và nó kết nối với các hệ thống tùy chỉnh như site React hoặc Next.js qua webhook. Trò chuyện SEO của nó trả lời các câu hỏi về hiệu suất tìm kiếm của site bạn qua hội thoại.

Tóm lại: gửi HTML từ máy chủ, cho mỗi URL một tiêu đề, mô tả và canonical riêng, và dùng liên kết thật. Khi đó React xếp hạng như mọi site khác, và trợ lý AI có thể đọc nó. Để giữ site đó luôn có bài viết được viết cho Google và AI, xem các gói của Sorank, từ $49 mỗi tháng và có bản dùng thử miễn phí 3 ngày.