SEO JavaScript: đảm bảo liên kết được hiển thị đúng
Google sử dụng Chromium phiên bản mới nhất để hiển thị JavaScript. Vấn đề hiếm khi nằm ở quá trình hiển thị. Vấn đề thực sự là các liên kết không trở thành thẻ neo, và các trang phụ thuộc vào trạng thái mà trình thu thập dữ liệu không có.
Đội ngũ nghiên cứu ArchiLinks ·

Trình thu thập dữ liệu nhìn thấy gì
Googlebot đã sử dụng Chromium phiên bản mới nhất kể từ tháng 5 năm 2019. Điều này đã giải quyết câu hỏi về khả năng chạy JavaScript hiện đại của nó.
Các rủi ro thực tế là những vấn đề cũ: quá trình hiển thị xảy ra sau khi thu thập dữ liệu và có thể bị trì hoãn, nội dung ẩn sau các cú nhấp chuột hoặc đăng nhập sẽ không xuất hiện, và một liên kết được tạo từ trình xử lý onclick trên một thẻ div không phải là một liên kết. Trước khi kiểm tra backlink trên các trang web mà bạn vừa chuyển sang giao diện React, hãy xác nhận rằng các trang đó hiển thị nội dung của chúng trong phản hồi thô hoặc trong HTML đã được hiển thị.
SSR, SSG, CSR: những thay đổi đối với liên kết
| Phương pháp tiếp cận | Nội dung trong phản hồi đầu tiên | Liên kết nội bộ dưới dạng thẻ neo | Phù hợp cho |
|---|---|---|---|
| SSR (Next.js, Nuxt) | Có | Có, nếu bạn sử dụng thẻ neo thực | Các trang công khai với dữ liệu thay đổi |
| SSG hoặc tiền xử lý | Có | Có | Tài liệu, blog, trang tiếp thị |
| Ứng dụng trang đơn CSR | Không, vỏ trống | Chỉ sau khi đã render | Bảng điều khiển nằm sau đăng nhập |
| lai (Trang chủ SSR, ứng dụng CSR) | Theo từng tuyến | Theo từng tuyến | Hầu hết các sản phẩm có phần công khai |
Kiểm thử 1: HTML thô so với HTML đã render
Nếu các liên kết quan trọng xuất hiện trong phản hồi đầu tiên, vấn đề đã được giải quyết. Nếu không, hãy so sánh với kết quả render headless.
# raw response: are the links there?
curl -s https://new-shop.com/guides/ | grep -o '<a [^>]*href="[^"]*"' | head -20
# rendered DOM with headless Chrome
chrome --headless --dump-dom https://new-shop.com/guides/ | grep -c '<a '
Nơi các liên kết bên ngoài xuất hiện
Một lỗi render ẩn nội dung của bạn. Nó không xóa các liên kết mà các trang web khác đã trỏ đến bạn.
Sau khi chuyển sang Next.js, Vite hoặc CMS headless, hãy chạy toppages cho máy chủ và kiểm tra 20 URL được liên kết nhiều nhất về mã trạng thái, canonical và nội dung hiển thị. Hãy làm việc này trước tiên. Nếu một trang có 40 tên miền liên kết trả về một khung rỗng hoặc lỗi 404 phía máy khách, hãy khắc phục nó trước mọi thứ khác, vì đó là nơi thẩm quyền của bạn được chuyển giao. Trang cân bằng nội dung liên kết nội bộ và bên ngoài cho thấy cách so sánh danh sách này với các liên kết nội bộ của bạn, và danh sách kiểm tra di chuyển đưa bài kiểm tra này vào kế hoạch ra mắt.
Các framework quan trọng hơn ở tính kỷ luật. Express với công cụ template, theme WordPress và Next.js app router đều có thể cung cấp các liên kết dễ dàng cho bot crawl. Mỗi framework cũng có thể thất bại nếu nhóm phát triển gửi đi các neo chỉ xuất hiện sau khi người dùng nhấp chuột.
Danh sách kiểm tra liên kết và render
- Điều hướng và phân trang sử dụng
<a href>, không phải các trình xử lý sự kiện nhấp chuột trên các phần tử khác. - Mỗi tuyến trả về mã trạng thái thực. Màn hình lỗi 404 mềm phải trả về mã 404.
- Thẻ
noindexhoặc canonical do JavaScript tiêm phải khớp với thẻ trong phản hồi của máy chủ. - Nội dung dự phòng trong phản hồi đầu tiên phải là trang thực, không phải vòng quay đang tải mà Google có thể lập chỉ mục.
- Mã xác thực không chuyển hướng bot crawl trên các tuyến công khai.
- Các tệp CSS và JS cần thiết cho việc render không bị chặn trong robots.txt.
- Tải chậm sử dụng IntersectionObserver hoặc các thuộc tính tải native, không phải sự kiện cuộn.
Đọc bằng chứng từ Search Console
Search Console giải quyết hầu hết các câu hỏi về render nếu bạn hỏi đúng báo cáo. Sử dụng Kiểm tra URL, sau đó Xem trang đã crawl.
So sánh ba điều: HTML mà Google đã lấy, ảnh chụp màn hình và các tài nguyên trang không tải được. Một trang trông đầy đủ trên trình duyệt của bạn nhưng trống rỗng trong ảnh chụp màn hình thường bị chặn bởi lỗi script hoặc tài nguyên bị cấm, và giải pháp nằm ở quy trình xây dựng của bạn, không phải ở nội dung của bạn.
Hãy nhớ về độ trễ. Một thay đổi bạn triển khai hôm nay chỉ xuất hiện trong công cụ kiểm tra sau khi Google crawl lại URL, điều này có thể mất vài ngày.
Khi nào SSR đáng giá
Trang công cộng cần xếp hạng: có. Bảng điều khiển: không.
Nếu một tuyến đường cần thu hút lưu lượng tìm kiếm hữu cơ, hãy cung cấp nội dung trong phản hồi đầu tiên. Nếu nó nằm sau đăng nhập, hãy bỏ qua sự phức tạp. Chọn theo từng tuyến đường thay vì theo toàn bộ dự án, và ghi lại quyết định này để nhà phát triển sau không làm mất hiệu lực.
- Sử dụng công cụ kiểm tra Kết quả phong phú và Kiểm tra URL để so sánh kết quả hiển thị.
- Kiểm tra bằng công cụ kiểm tra trực tiếp của Search Console sau mỗi lần nâng cấp framework.

Có cần hiển thị trên máy chủ, hay chỉ cần tiền xử lý là đủ?
Hiển thị trên máy chủ là tùy chọn. Đây là cách để đảm bảo phản hồi đầu tiên chứa những gì trình thu thập dữ liệu cần. Nhiều trang công cộng có thể đạt được điều này bằng cách tiền xử lý, tạo bản dựng tĩnh hoặc hiển thị trên máy chủ cho các trang quan trọng, trong khi giữ các phần yêu cầu đăng nhập ở phía máy khách.
Giả sử các trang sản phẩm và tài liệu của bạn là công khai, trong khi bảng điều khiển nằm sau đăng nhập. Hãy tiền xử lý nhóm đầu tiên. Giữ bảng điều khiển ở phía máy khách. Các trang công cộng khi đó sẽ chứa các liên kết trong phản hồi đầu tiên, còn bảng điều khiển có thể giữ nguyên độ phức tạp cần thiết.
Chỉ tiền xử lý trang chủ
Tiền xử lý trang chủ giải quyết lần thu thập dữ liệu đầu tiên, nhưng nó khiến mọi tuyến đường khác phải chờ trình duyệt tải. Nếu trang chủ liên kết đến các trang danh mục được hiển thị phía máy khách, các liên kết trên những trang đó vẫn phụ thuộc vào quá trình hiển thị. Hãy kiểm tra từng mẫu trang bạn sở hữu, không chỉ trang chủ.
Giữ một danh sách ngắn các tuyến đường công cộng kèm phương pháp hiển thị của chúng. Danh sách này sẽ giúp phát hiện các lỗ hổng nhanh hơn so với báo cáo thu thập dữ liệu.
Việc hiển thị trên máy chủ có thay đổi khả năng hiển thị địa phương không
Hiển thị trên máy chủ có thể thay đổi tốc độ xuất hiện nội dung đầu tiên, và người đọc cảm nhận được điều đó. Nó không tự động làm cho trang trở nên liên quan đến một truy vấn địa phương. Các tín hiệu đó đến từ nội dung trang, thông tin doanh nghiệp và các liên kết trỏ đến trang đó.
Hãy xem việc hiển thị là cách các tín hiệu này trở nên dễ đọc đối với trình thu thập dữ liệu, và đo lường các liên kết riêng biệt bằng API.
Các ứng dụng Vite và React phục vụ một khung giao diện duy nhất
Một bản dựng Vite phục vụ một khung HTML duy nhất cho mọi đường dẫn đặt tất cả công việc lên phía máy khách. Ứng dụng như vậy vẫn có thể xếp hạng cho một số truy vấn, nhưng mỗi tuyến đường công cộng cần một kế hoạch: tiền xử lý nó, hiển thị trên máy chủ, hoặc chấp nhận sự mất mát và ghi lại quyết định đó.
Trước khi kiểm tra backlink trên các tuyến đường trang web sau khi xây dựng lại, hãy quyết định cách mỗi tuyến đường công cộng nhận nội dung. Nếu không, dữ liệu liên kết sẽ hiển thị các liên kết bên ngoài trỏ đến các trang trống rỗng.
Kiểm tra xem một tuyến đường có hiển thị các liên kết của nó không
Hai bài kiểm tra trả lời hầu hết các câu hỏi. Phản hồi thô hiển thị những gì trình thu thập dữ liệu nhận được trước khi bất kỳ kịch bản nào chạy. DOM đã hiển thị cho thấy những gì trình duyệt xây dựng sau đó. Một liên kết chỉ xuất hiện trong cái thứ hai vẫn là một liên kết, nhưng nó phụ thuộc vào quá trình hiển thị diễn ra tốt đẹp.
Đọc kết quả kiểm tra trực tiếp trong Search Console
Chạy kiểm tra trực tiếp từ Kiểm tra URL trên từng tuyến đường một. Hãy xem HTML đã hiển thị, sau đó xem danh sách các tài nguyên không tải được. Một kịch bản bị chặn có thể loại bỏ toàn bộ khối điều hướng, và trang web trông trống rỗng mà không hiển thị bất kỳ lỗi hiển thị nào.
Lặp lại bài kiểm tra sau khi nâng cấp framework, vì một mặc định mới có thể thay đổi việc các liên kết được hiển thị trước hay sau khi một kịch bản chạy. Hướng dẫn các trang chưa được lập chỉ mục bao gồm những việc cần làm khi một trang đã hiển thị vẫn chưa được lập chỉ mục.
Khi một tuyến đường được hiển thị nhưng nội dung là một vòng xoay tải
Nội dung dự phòng trong phản hồi đầu tiên quan trọng hơn nhiều đội dự kiến. Một vòng xoay tải hoặc một vùng chứa trống có nghĩa là trang không chứa văn bản nào cho trình thu thập dữ liệu tại thời điểm đó. Hãy đặt tiêu đề, phần giới thiệu và các liên kết chính trong phản hồi đầu tiên, ngay cả khi danh sách chi tiết tải sau.
Một nội dung dự phòng là trang thực tế có thể giữ nguyên sự đơn giản. Nhiệm vụ duy nhất của nó là giữ nội dung cho đến khi phần còn lại tải xong.
Di chuyển trang web phía máy khách mà không mất các liên kết
Liệt kê các tuyến đường có liên kết bên ngoài
Chạy toppages cho máy chủ và ghi lại 50 URL hàng đầu. Kiểm tra các tuyến đường đó trước khi thay đổi mã, để bạn biết những gì bản xây dựng lại phải giữ lại.
So sánh kết quả thô và kết quả đã hiển thị
Với mỗi tuyến đường, hãy kiểm tra HTML thô và DOM đã hiển thị trong bản dựng cũ và mới. Ghi chú bất kỳ liên kết nào chỉ tồn tại ở một trong hai bản.
Thay thế trình xử lý sự kiện nhấp chuột bằng các thẻ neo
Chuyển đổi điều hướng thành các thẻ neo thực sự với địa chỉ phù hợp. Công việc tối ưu hóa tốc độ có thể chờ một sprint, trong khi việc thiếu thẻ neo sẽ làm mất đường dẫn của tuyến đường vào trang web.
Lặp lại bài kiểm tra sau khi phát hành
Một tuần sau khi phát hành, hãy chạy kiểm tra trực tiếp trên cùng các tuyến đường và so sánh kết quả với các kết quả trước đó. Sự khác biệt cho thấy nơi bản xây dựng lại đã thay đổi kết quả đầu ra.
Mã trạng thái và chuyển hướng trong ứng dụng phía máy khách
Một ứng dụng trang đơn thường hiển thị màn hình không tìm thấy trong khi máy chủ trả về mã trạng thái 200. Google có thể coi trang đó là lỗi 404 mềm, và các liên kết bên ngoài trỏ đến URL bị thiếu khi đó không mang lại nhiều giá trị cho bạn. Giải pháp nằm ở phía máy chủ.
Các tuyến đường không xác định vẫn trả về 200
Trả về lỗi 404 thực sự từ máy chủ cho bất kỳ tuyến đường nào không tồn tại, và giữ lại màn hình không tìm thấy trong ứng dụng cho những khách truy cập đến qua một tuyến đường phía máy khách. Nếu có một trang thay thế, hãy gửi mã 301 thay thế.
Kiểm tra một vài địa chỉ giả định trên máy chủ trực tiếp sau mỗi lần phát hành. Mã phản hồi là điều cần đọc, không phải trang bạn thấy trong trình duyệt.
Các chuyển hướng chạy trong trình duyệt
Một chuyển hướng kích hoạt sau khi trang tải, ví dụ bằng cách đọc tham số URL bên trong một thành phần, là một vấn đề khác với chuyển hướng máy chủ. Trình thu thập dữ liệu có thể lập chỉ mục phản hồi đầu tiên trước khi chuyển hướng chạy. Khi một tuyến đường đã di chuyển vĩnh viễn, hãy trả về mã 301 từ máy chủ và giữ lại các tham số thay đổi nội dung. Công thức bản đồ chuyển hướng cho biết cách kiểm tra các quy tắc đó.