ReactJS: Chiến lược SEO React và các phương pháp hay nhất

Mặc dù React thường được ca ngợi vì giúp phát triển front-end hiệu quả hơn, nhưng thư viện phổ biến này có thể là vấn đề đối với các công cụ tìm kiếm. Trong bài viết này, ta sẽ xem xét lý do tại sao React lại thách thức đối với SEO và vạch ra những gì các kỹ sư phần mềm có thể làm để cải thiện thứ hạng tìm kiếm của các trang web React.

React được phát triển để tạo ra các giao diện người dùng tương tác có tính chất khai báo, mô-đun và đa nền tảng. Ngày nay, nó là một trong những framework JavaScript phổ biến hơn — nếu không muốn nói là phổ biến nhất — để viết các ứng dụng front-end hiệu quả. Được phát triển ban đầu để viết Ứng dụng trang đơn (SPA), React hiện được sử dụng để tạo các trang web và ứng dụng di động chính thức.

Nếu bạn có nhiều kinh nghiệm trong việc phát triển web thông thường và chuyển sang React, bạn sẽ nhận thấy ngày càng nhiều mã HTML và CSS chuyển sang JavaScript. Điều này là do React không khuyên bạn nên trực tiếp tạo hoặc cập nhật các phần tử giao diện người dùng mà thay vào đó mô tả “trạng thái” của giao diện người dùng. React sau đó sẽ cập nhật DOM để phù hợp với trạng thái một cách hiệu quả nhất.

Do đó, tất cả các thay đổi đối với giao diện người dùng hoặc DOM phải được thực hiện thông qua công cụ của React. Mặc dù thuận tiện cho các nhà phát triển, điều này có thể có nghĩa là thời gian tải lâu hơn cho người dùng và nhiều công việc hơn cho các công cụ tìm kiếm để tìm và lập chỉ mục nội dung.

Trong bài viết này, chúng ta sẽ giải quyết những thách thức phải đối mặt khi xây dựng các ứng dụng và trang web React hoạt động SEO, đồng thời chúng ta sẽ phác thảo một số chiến lược được sử dụng để vượt qua chúng.

Cách Google thu thập thông tin và lập chỉ mục các trang web

Google nhận được hơn 90% tất cả các tìm kiếm trực tuyến. Hãy xem xét kỹ hơn quá trình thu thập dữ liệu và lập chỉ mục của nó.

Ảnh chụp dưới đây được lấy từ tài liệu của Google có thể giúp ích cho chúng ta. Xin lưu ý rằng đây là một sơ đồ khối được đơn giản hóa. Googlebot thực tế phức tạp hơn nhiều.

Sơ đồ Googlebot lập chỉ mục một trang web.

Điểm cần lưu ý:

1. Googlebot duy trì một hàng đợi thu thập thông tin chứa tất cả các URL mà nó cần để thu thập thông tin và lập chỉ mục trong tương lai.
2. Khi trình thu thập thông tin không hoạt động, nó sẽ chọn URL tiếp theo trong hàng đợi, đưa ra yêu cầu và tìm nạp HTML.
3. Sau khi phân tích cú pháp HTML, Googlebot xác định xem nó có cần tìm nạp và thực thi JavaScript để hiển thị nội dung hay không. Nếu có, URL sẽ được thêm vào hàng đợi kết xuất.
4. Sau đó, trình kết xuất tìm nạp và thực thi JavaScript để hiển thị trang. Nó gửi HTML được kết xuất trở lại đơn vị xử lý.
5. Đơn vị xử lý trích xuất tất cả các URL (từ thẻ <a>) được đề cập trên trang web và thêm chúng trở lại hàng đợi thu thập thông tin.
6. Nội dung được thêm vào chỉ mục của Google.

Lưu ý rằng có sự phân biệt rõ ràng giữa giai đoạn Xử lý phân tích cú pháp HTML và giai đoạn Trình kết xuất thực thi JavaScript.

Sự khác biệt này tồn tại bởi vì việc thực thi JavaScript rất tốn kém, do các robot của Google cần phải xem xét hơn 130 nghìn tỷ trang web. Vì vậy, khi Googlebot thu thập dữ liệu một trang web, nó sẽ phân tích cú pháp HTML ngay lập tức và sau đó xếp JavaScript để chạy sau. Tài liệu của Google đề cập rằng một trang nằm trong hàng đợi hiển thị trong vài giây, mặc dù nó có thể lâu hơn.

Cũng cần đề cập đến khái niệm ngân sách thu thập thông tin. Việc thu thập thông tin của Google bị giới hạn bởi băng thông, thời gian và tính khả dụng của các phiên bản Googlebot. Nó phân bổ ngân sách hoặc tài nguyên cụ thể để lập chỉ mục từng trang web. Nếu bạn đang xây dựng một trang web lớn chứa nhiều nội dung với hàng nghìn trang (ví dụ: trang web thương mại điện tử) và các trang này sử dụng nhiều JavaScript để hiển thị nội dung, Google có thể đọc ít nội dung hơn từ trang web của bạn.

Lưu ý: Bạn có thể đọc các nguyên tắc của Google để quản lý ngân sách thu thập thông tin của mình tại đây.

Tại sao việc tối ưu hóa React cho SEO lại là một thách thức

Tổng quan ngắn gọn của chúng tôi về Googlebot, thu thập thông tin và lập chỉ mục chỉ làm nổi bật bề mặt. Tuy nhiên, các kỹ sư phần mềm nên xác định các vấn đề tiềm ẩn mà các công cụ tìm kiếm đang cố gắng thu thập thông tin và lập chỉ mục các trang React phải đối mặt. Bây giờ chúng ta có thể xem xét kỹ hơn điều gì khiến React SEO trở nên thách thức và những gì các nhà phát triển có thể làm để giải quyết và vượt qua một số thách thức này.

Nội dung đầu tiên trống

Chúng tôi biết các ứng dụng React phụ thuộc rất nhiều vào JavaScript và chúng thường gặp sự cố với các công cụ tìm kiếm. Điều này là do React sử dụng một mô hình trình bao ứng dụng theo mặc định. HTML ban đầu không chứa bất kỳ nội dung có ý nghĩa nào và người dùng hoặc bot phải thực thi JavaScript để xem nội dung thực của trang.

Cách tiếp cận này có nghĩa là Googlebot phát hiện một trang trống trong lần chuyển đầu tiên. Nội dung chỉ được Google nhìn thấy khi trang được hiển thị. Điều này sẽ làm trì hoãn việc lập chỉ mục nội dung khi xử lý hàng nghìn trang.

Thời gian tải và trải nghiệm người dùng

Tìm nạp, phân tích cú pháp và thực thi JavaScript mất nhiều thời gian. Hơn nữa, JavaScript có thể cần thực hiện các cuộc gọi mạng để tìm nạp nội dung và người dùng có thể cần đợi một lúc trước khi họ có thể xem thông tin được yêu cầu.

Google đã đặt ra một tập hợp các quan điểm web liên quan đến trải nghiệm người dùng, được sử dụng trong các tiêu chí xếp hạng của mình. Thời gian tải lâu hơn có thể ảnh hưởng đến điểm trải nghiệm người dùng, khiến Google xếp hạng trang web thấp hơn.

Chúng ta đánh giá chi tiết hiệu suất trang web trong phần sau.

Siêu dữ liệu trang

Thẻ <meta> rất hữu ích vì chúng cho phép Google và các trang web truyền thông xã hội khác hiển thị tiêu đề, hình thu nhỏ và mô tả phù hợp cho các trang. Nhưng các trang web này dựa vào thẻ <head> của trang web đã tìm nạp để lấy thông tin này. Các trang web này không thực thi JavaScript cho trang đích.

React hiển thị tất cả nội dung, bao gồm cả thẻ meta trên máy khách. Vì giao diện ứng dụng giống nhau cho toàn bộ trang web / ứng dụng, nên có thể khó điều chỉnh siêu dữ liệu cho các trang riêng lẻ.

Sơ đồ trang web

Sơ đồ trang web là một tệp nơi bạn cung cấp thông tin về các trang, video và các tệp khác trên trang web của bạn và mối quan hệ giữa chúng. Các công cụ tìm kiếm như Google đọc tệp này để thu thập dữ liệu trang web của bạn một cách thông minh hơn.

React không tích hợp cách để tạo sơ đồ trang web. Nếu bạn đang sử dụng một thứ gì đó như React Router để xử lý định tuyến, bạn có thể tìm thấy các công cụ có thể tạo sơ đồ trang web mặc dù nó có thể cần một chút nỗ lực.

Các cân nhắc khác về SEO

Những cân nhắc này có liên quan đến việc thiết lập các phương pháp SEO tốt nói chung.

1. Có cấu trúc URL tối ưu để cung cấp cho con người và công cụ tìm kiếm một ý tưởng tốt về những gì mong đợi trên trang.
2. Tối ưu hóa tệp robots.txt có thể giúp bot tìm kiếm hiểu cách thu thập dữ liệu các trang trên trang web của bạn.
3. Sử dụng CDN để cung cấp tất cả các nội dung tĩnh như CSS, JS, phông chữ, v.v. và sử dụng hình ảnh đáp ứng để giảm thời gian tải.

Chúng ta có thể giải quyết nhiều vấn đề đã nêu ở trên bằng cách sử dụng kết xuất phía máy chủ (SSR) hoặc kết xuất trước. Chúng ta sẽ xem xét các cách tiếp cận này dưới đây.

Đưa vào React Isomorphic

Định nghĩa từ điển về isomorphic là "tương ứng hoặc tương tự về hình thức".

Theo thuật ngữ React, điều này có nghĩa là máy chủ có dạng tương tự như máy khách. Nói cách khác, bạn có thể sử dụng lại các thành phần React giống nhau trên máy chủ và máy khách.

Phương pháp isomorphic này cho phép máy chủ hiển thị ứng dụng React và gửi phiên bản đã kết xuất cho người dùng và công cụ tìm kiếm của chúng ta để chúng có thể xem nội dung ngay lập tức trong khi JavaScript tải và thực thi ở chế độ nền.

Các framework như Next.js hoặc Gatsby đã phổ biến cách tiếp cận này. Chúng ta nên lưu ý rằng các thành phần isomorphic có thể trông khác biệt đáng kể so với các thành phần React thông thường. Ví dụ: chúng có thể bao gồm mã chạy trên máy chủ thay vì máy khách. Chúng thậm chí có thể bao gồm các bí mật API (mặc dù mã máy chủ được loại bỏ trước khi được gửi đến máy khách).

Một điểm cần lưu ý là các framework này loại bỏ rất nhiều sự phức tạp nhưng cũng giới thiệu một cách viết mã cố định. Chúng ta sẽ tìm hiểu sâu hơn về sự cân bằng hiệu suất trong bài viết này.

Chúng ta cũng sẽ thực hiện phân tích ma trận để hiểu mối quan hệ giữa đường dẫn hiển thị và hiệu suất trang web. Nhưng trước đó, chúng ta hãy đi qua một số khái niệm cơ bản về đo lường hiệu suất trang web.

Số liệu về Hiệu suất Trang web

Chúng ta hãy xem xét một số yếu tố mà công cụ tìm kiếm sử dụng để xếp hạng các trang web.

Ngoài việc trả lời truy vấn của người dùng một cách nhanh chóng và chính xác, Google tin rằng một trang web tốt phải có các thuộc tính sau:

• Nó sẽ tải nhanh chóng.
• Người dùng sẽ có thể truy cập nội dung mà không mất quá nhiều thời gian chờ đợi.
• Nó sẽ sớm trở nên tương tác với hành động của người dùng.
• Nó không nên tìm nạp dữ liệu không cần thiết hoặc thực thi mã đắt tiền để ngăn chặn việc tiêu hao dữ liệu hoặc pin của người dùng.

Các tính năng này ánh xạ gần đúng với các chỉ số sau:

• TTFB : Time To First Byte - Khoảng thời gian từ khi nhấp vào liên kết đến khi bit nội dung đầu tiên xuất hiện.
• LCP : Largest Contentfull Paint - Thời điểm hiển thị bài viết được yêu cầu. Google khuyên bạn nên giữ giá trị này dưới 2,5 giây.
• TTI : Time To Interactive - Thời gian một trang trở nên tương tác (người dùng có thể cuộn, nhấp, v.v.).
• Kích thước gói - Tổng số byte được tải xuống và mã được thực thi trước khi trang hiển thị đầy đủ và tương tác.

Chúng ta sẽ xem lại các chỉ số này để hiểu rõ hơn về cách các đường dẫn hiển thị khác nhau có thể ảnh hưởng đến từng đường dẫn trong số đó.

Tiếp theo, hãy hiểu các đường dẫn hiển thị khác nhau có sẵn cho các nhà phát triển React.

Hiển thị đường dẫn

Chúng ta có thể hiển thị ứng dụng React trong trình duyệt hoặc trên máy chủ và tạo ra các kết quả đầu ra khác nhau.

Hai chức năng thay đổi đáng kể giữa các ứng dụng được hiển thị từ phía máy khách và phía máy chủ, đó là định tuyến và phân tách mã. Chúng ta xem xét kỹ hơn những điều này dưới đây.

Kết xuất phía máy khách (CSR)

Kết xuất phía máy khách là đường dẫn kết xuất mặc định cho React SPA. Máy chủ sẽ cung cấp một ứng dụng shell không chứa bất kỳ nội dung nào. Khi trình duyệt tải xuống, phân tích cú pháp và thực thi các nguồn JavaScript được bao gồm, nội dung HTML được điền hoặc hiển thị.

Chức năng định tuyến được ứng dụng khách xử lý bằng cách quản lý lịch sử trình duyệt. Điều này có nghĩa là cùng một tệp HTML được phục vụ bất kể route nào được yêu cầu và máy khách cập nhật trạng thái chế độ xem của nó sau khi nó được hiển thị.

Việc tách mã tương đối đơn giản. Bạn có thể tách mã của mình bằng cách sử dụng các import động hoặc React.lazy sao cho chỉ những dependency cần thiết mới được tải dựa trên route hoặc hành động của người dùng.

Nếu trang cần tìm nạp dữ liệu từ máy chủ để hiển thị nội dung — chẳng hạn như tiêu đề blog hoặc mô tả sản phẩm — nó chỉ có thể làm như vậy khi các component liên quan được gắn kết và hiển thị.

Người dùng rất có thể sẽ thấy dấu hiệu hoặc chỉ báo “Đang tải dữ liệu” trong khi trang web tìm nạp thêm dữ liệu.

Kết xuất phía máy khách với dữ liệu khởi động (CSRB)

Hãy xem xét tình huống tương tự như CSR nhưng thay vì tìm nạp dữ liệu sau khi DOM được hiển thị, giả sử rằng máy chủ đã gửi dữ liệu có liên quan được khởi động bên trong HTML được phân phối.

Chúng ta có thể đưa vào một node trông giống như sau:

<script id="data" type="application/json">
      {"title": "My blog title", "comments":["comment 1","comment 2"]}
</script>

Và phân tích cú pháp khi mount component:

var data = JSON.parse(document.getElementById('data').innerHTML);

Chúng ta vừa tiết kiệm cho mình một chuyến đi khứ hồi đến máy chủ. Chúng ta sẽ thấy sự cân bằng hơn một chút.

Kết xuất phía máy chủ thành nội dung tĩnh (SSRS)

Hãy tưởng tượng một tình huống mà chúng ta cần tạo HTML ngay lập tức.

Ví dụ: nếu chúng ta đang xây dựng một máy tính bỏ túi online và người dùng đưa ra một truy vấn có dạng /calculate/34+15 (loại bỏ URL escape). Chúng ta cần xử lý truy vấn, đánh giá kết quả và trả lời bằng HTML đã tạo.

HTML được tạo của chúng ta có cấu trúc khá đơn giản và chúng ta không cần React để quản lý và thao tác DOM sau khi HTML được tạo ra được phục vụ.

Vì vậy, chúng ta chỉ phục vụ nội dung HTML và CSS. Bạn có thể sử dụng phương thức renderToStaticMarkup để đạt được điều này.

Việc định tuyến sẽ hoàn toàn do máy chủ xử lý vì nó cần tính toán lại HTML cho mỗi kết quả, mặc dù bộ nhớ đệm CDN có thể được sử dụng để cung cấp phản hồi nhanh hơn. Các tệp CSS cũng có thể được trình duyệt lưu vào bộ nhớ đệm để tải trang tiếp theo nhanh hơn.

Kết xuất phía máy chủ với Rehydration (SSRH)

Hãy tưởng tượng cùng một kịch bản như mô tả ở trên nhưng lần này chúng ta cần một ứng dụng React đầy đủ chức năng trên máy khách.

Chúng ta sẽ thực hiện lần hiển thị đầu tiên trên máy chủ và gửi lại nội dung HTML cùng với các tệp JavaScript. React sẽ rehydrate cho đánh dấu do máy chủ kết xuất và ứng dụng sẽ hoạt động giống như một ứng dụng CSR kể từ thời điểm này.

React cung cấp các phương thức tích hợp để thực hiện các hành động này.

Yêu cầu đầu tiên được xử lý bởi máy chủ và các kết xuất tiếp theo được xử lý bởi máy khách. Do đó, các ứng dụng như vậy được gọi là ứng dụng React phổ quát (được hiển thị trên cả máy chủ và máy khách). Mã để xử lý định tuyến có thể được tách (hoặc trùng lặp) trên máy khách và máy chủ.

Việc tách mã cũng hơi phức tạp vì ReactDOMServer không hỗ trợ React.lazy, vì vậy bạn có thể phải sử dụng một cái gì đó như Component có thể tải.

Cũng cần lưu ý rằng ReactDOMServer chỉ thực hiện kết xuất nông. Nói cách khác, mặc dù phương thức kết xuất cho các component của bạn sẽ được gọi, nhưng các phương thức vòng đời như componentDidMount sẽ không được gọi. Vì vậy, bạn sẽ cần phải cấu trúc lại mã của mình để cung cấp dữ liệu cho các component của bạn bằng một phương pháp thay thế.

Đây là nơi mà các framework như NextJS xuất hiện. Chúng che giấu sự phức tạp liên quan đến định tuyến và phân tách mã trong SSRH và cung cấp trải nghiệm mượt mà hơn cho nhà phát triển.

Cách tiếp cận này mang lại các kết quả hỗn hợp khi nói đến hiệu suất trang như chúng ta sẽ nói đến phía sau.

Kết xuất trước cho Nội dung tĩnh (PRS)

Điều gì sẽ xảy ra nếu chúng ta có thể hiển thị một trang web trước khi người dùng yêu cầu nó? Điều này có thể được thực hiện tại thời điểm xây dựng hoặc động khi dữ liệu thay đổi.

Sau đó, chúng ta có thể lưu nội dung kết quả HTML vào một CDN và phân phát nó nhanh hơn nhiều khi người dùng yêu cầu.

Đây được gọi là kết xuất trước trước khi chúng ta kết xuất nội dung, yêu cầu trước của người dùng. Cách tiếp cận này có thể được sử dụng cho các blog và ứng dụng thương mại điện tử vì nội dung của chúng thường không phụ thuộc vào dữ liệu do người dùng cung cấp.

Kết xuất trước với Rehydration (PRH)

Chúng ta có thể muốn HTML được kết xuất trước của mình là một ứng dụng React đầy đủ chức năng khi khách hàng hiển thị nó.

Sau khi yêu cầu đầu tiên được phục vụ, ứng dụng sẽ hoạt động giống như một ứng dụng React tiêu chuẩn. Chế độ này tương tự như SSRH, được mô tả ở trên, về chức năng định tuyến và phân tách mã.

Ma trận hiệu suất

Khoảnh khắc mà bạn hằng mong đợi cuối cùng cũng đã đến. Đã đến lúc thử thách. Hãy xem mỗi đường dẫn hiển thị này ảnh hưởng như thế nào đến số liệu hiệu suất web.

Trong ma trận này, chúng ta chỉ định điểm cho mỗi đường dẫn hiển thị dựa trên mức độ hoạt động của nó trong một chỉ số hiệu suất.

Điểm nằm trong khoảng từ 1 đến 5:

• 1 = Không đạt yêu cầu
• 2 = Kém
• 3 = Vừa phải
• 4 = Tốt
• 5 = Tuyệt vời

Bài học rút ra chính

Kết xuất trước cho nội dung tĩnh (PRS) dẫn đến các trang web có hiệu suất cao nhất trong khi kết xuất phía máy chủ với hydrat hóa (SSRH) hoặc hiển thị phía máy khách (CSR) có thể dẫn đến kết quả kém.

Cũng có thể áp dụng nhiều cách tiếp cận cho các phần khác nhau của trang web. Ví dụ: các chỉ số hiệu suất này có thể rất quan trọng đối với các trang web công khai để chúng có thể được lập chỉ mục hiệu quả hơn trong khi chúng có thể ít quan trọng hơn khi người dùng đã đăng nhập và xem dữ liệu tài khoản riêng tư.

Mỗi đường kết xuất biểu thị sự cân bằng ở vị trí và cách bạn muốn xử lý dữ liệu của mình. Điều quan trọng là một nhóm kỹ sư có thể nhìn thấy và thảo luận rõ ràng về những đánh đổi này và chọn một kiến ​​trúc tối đa hóa sự hài lòng của người dùng của họ.

Đọc thêm và cân nhắc

Mặc dù chúng tôi đã cố gắng đề cập đến các kỹ thuật phổ biến hiện nay, nhưng đây không phải là một phân tích đầy đủ. Chúng tôi thực sự khuyên bạn nên đọc bài viết này, nơi các nhà phát triển từ Google thảo luận về các kỹ thuật nâng cao khác như kết xuất máy chủ trực tuyến, kết xuất ba hình và kết xuất động (cung cấp các phản hồi khác nhau cho trình thu thập thông tin và người dùng).

Một số yếu tố khác mà bạn cần xem xét khi xây dựng các trang web chứa nhiều nội dung bao gồm nhu cầu về hệ thống quản lý nội dung tốt (CMS) cho các tác giả của bạn và khả năng dễ dàng tạo / sửa đổi các bản xem trước trên mạng xã hội và tối ưu hóa hình ảnh cho các kích thước màn hình khác nhau.