SEO vs. React

SEO vs. React: Web Crawlers thông minh hơn bạn nghĩ

SEO vs. React Web Crawlers thông minh hơn bạn nghĩ đấy. Vậy vấn đề là ở đâu?

Nhiều người vẫn lo lắng rằng nếu bạn xây dựng một trang web bằng cách sử dụng các công cụ như React, Angular hoặc Ember, nó sẽ làm tổn thương thứ hạng công cụ tìm kiếm của bạn.

Suy nghĩ giống như thế này: trình thu thập dữ liệu web mà công cụ tìm kiếm sử dụng sẽ không thể thu thập dữ liệu trang đúng cách trừ khi nó được hiển thị hoàn toàn trong trình duyệt của người dùng. Thay vào đó, họ sẽ chỉ thấy mã HTML được phân phối từ chương trình phụ trợ.

Nếu mã HTML đó không chứa gì hơn một vài thẻ meta và thẻ script, công cụ tìm kiếm sẽ cho rằng trang của bạn về cơ bản là trống và xếp hạng bạn kém.

Tôi thường thấy các chuyên gia tư vấn về Công cụ Tìm kiếm (SEO) khuyên bạn nên hiển thị trang của mình trên chương trình phụ trợ để trình thu thập dữ liệu web có thể thấy nhiều mã HTML đẹp mà sau đó họ có thể lập chỉ mục.

Với tôi, lời khuyên này có vẻ không hợp lý và không thực tế. Đó là năm 2016. Người dùng mong đợi các trang hoạt động và cung cấp cho họ trải nghiệm người dùng linh hoạt. Họ không muốn đợi trang HTML mới tải mỗi khi họ nhấp vào một thứ gì đó.

Vì vậy, câu lệnh "hiển thị phía máy khách làm tổn thương thứ hạng trang của bạn" vẫn hợp lệ?

Làm nghiên cứu

Đầu tiên, tuyên bố từ chối trách nhiệm: Tôi không phải là chuyên gia SEO. Nhưng tôi đã đọc về chủ đề này một chút, và đây là những gì tôi tìm thấy.

Đây là thông báo từ Google trên blog của quản trị viên web của họ từ tháng 10 năm 2015:

Hôm nay, miễn là bạn không chặn Googlebot thu thập dữ liệu các tệp JavaScript hoặc CSS của bạn, chúng tôi thường có thể hiển thị và hiểu các trang web của bạn như trình duyệt hiện đại . Để phản ánh cải tiến này, gần đây chúng tôi đã cập nhật Nguyên tắc quản trị trang web kỹ thuật của chúng tôi để đề xuất không cho phép Googlebot thu thập dữ liệu các tệp CSS hoặc JS của trang web của bạn.

Đây là bài viết về Công cụ tìm kiếm từ tháng 5 năm 2015:

Chúng tôi đã chạy một loạt các thử nghiệm đã xác minh rằng Google có thể thực thi và lập chỉ mục JavaScript với vô số các triển khai. Chúng tôi cũng xác nhận rằng Google có thể hiển thị toàn bộ trang và đọc DOM, do đó lập chỉ mục nội dung được tạo động.

Tín hiệu SEO trong DOM (tiêu đề trang, mô tả meta, thẻ chuẩn, thẻ rô bốt meta, v.v.) được tôn trọng. Nội dung được chèn động trong DOM cũng có thể thu thập thông tin và lập chỉ mục được. Hơn nữa, trong một số trường hợp nhất định, các tín hiệu DOM thậm chí có thể được ưu tiên hơn các câu lệnh mâu thuẫn trong mã nguồn HTML. Điều này sẽ cần nhiều công việc hơn, nhưng là trường hợp đối với một số thử nghiệm của chúng tôi.

Hai nguồn này cho rằng thực sự an toàn khi sử dụng bố cục được hiển thị phía máy khách.

Bài kiểm tra Preactjs.com

Gần đây tôi đã tweet một lời than vãn về các chuyên gia tư vấn về SEO về sự phản ứng yêu quý của tôi. Nói một cách chính xác, tôi đang trong quá trình chuyển sang Preact , một giải pháp thay thế trọng lượng nhẹ cho React của Facebook. Tôi nhận được trả lời này từ Jason Miller , một trong những nhà phát triển đang làm việc trên Preact:

Ngoài bài viết trên blog từ Search Engine Land mà tôi đã trích dẫn ở trên, Jason đã tweet một liên kết tới tìm kiếm của Google cho trang chủ Preact , trông giống như sau:

Công cụ PREACT. Ảnh thietbidous

Trang này được hiển thị hoàn toàn phía máy khách, sử dụng Preact, khi xem mã nguồn của nó chứng minh:

<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>Preact: Fast 3kb React alternative with the same ES6 API. Components &amp; Virtual DOM.</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimal-ui">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<meta name="theme-color" content="#673AB8">
<link rel="manifest" href="/manifest.json">
<link rel="icon" type="image/png" href="/assets/app-icon-192.png" sizes="192x192">
<script>(function(url){window['_boostrap_'+url]=fetch(url);})('/content'+location.pathname.replace(/^\/(repl)?\/?$/, '/index')+'.md');</script>
<link rel="shortcut icon" href="/favicon.ico">
<link href="/style.6bae35e4ff9d687cb418.css" rel="stylesheet">
</head><body>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-6031694-20', 'auto');ga('send', 'pageview');</script>
<script type="text/javascript" src="/bundle.a0afd09fd48712ed0f26.js"></script>
</body></html>

Nếu Googlebot không thể đọc mã HTML được hiển thị bởi Preact, nó sẽ không hiển thị nhiều hơn nội dung của các thẻ meta.

Tuy nhiên, đây là kết quả của Google khi tìm kiếm trang web: preactjs.com :

Tìm kiếm PREACT: Ảnh Testo

Một bài báo khác của Andrew Farmer từ tháng 3 năm 2016 cảnh báo về việc thiếu sự hỗ trợ JavaScript của các công cụ tìm kiếm ngoài Google:Trong nghiên cứu của tôi, tôi không thể tìm thấy bất kỳ bằng chứng nào cho thấy Yahoo, Bing hoặc Baidu hỗ trợ JavaScript trong trình thu thập thông tin của họ. Nếu SEO trên các công cụ tìm kiếm này quan trọng với bạn, bạn sẽ cần phải sử dụng hiển thị phía máy chủ, mà tôi sẽ thảo luận trong một bài viết trong tương lai. Vì vậy, tôi đã quyết định thử nghiệm của Jason với các công cụ tìm kiếm khác:

Bing

Cảnh báo của Andrew về Bing dường như không đáng kể. Dưới đây là kết quả Bing khi tìm kiếm trang web: preactjs.com

Yahoo

Và kết quả của Yahoo khi tìm kiếm trang web: preactjs.com :

Kết quả tìm kiếm từ yahoo: ảnh từ ampe kìm

Duck Duck Go

Và Duck Duck Go kết quả khi tìm kiếm trang web: preactjs.com :

Baidu

Công cụ tìm kiếm Baidu của Trung Quốc có vấn đề với preactjs.com. Đây là kết quả của nó khi tìm kiếm trang web: preactjs.com :
Vì vậy, có vẻ như trừ khi xếp hạng cao về cơ bản, một công cụ tìm kiếm duy nhất ở Trung Quốc là ưu tiên của bạn, không có gì sai khi hiển thị trang web của bạn ở phía máy khách bằng JavaScript, miễn là bạn tuân theo một số quy tắc cơ bản (được trích dẫn từ bài đăng trên blog của Andrew Farmer ):

Render các thành phần của bạn trước khi làm bất cứ điều gì không đồng bộ.
Kiểm tra từng trang của bạn bằng Tìm nạp như Google để đảm bảo rằng Googlebot đang tìm kiếm nội dung của bạn

Cảm ơn vì đã đọc!

Cập nhật ngày 25 tháng 10 năm 2016

Andrew Ingram đã chạy thử nghiệm tương tự mà tôi chạy đến một kết luận khác.

Trích dẫn từ Andrew:

Dưới đây là số lượng trang mà nhiều công cụ tìm kiếm khác nhau đã lập chỉ mục bằng truy vấn “site: preactjs.com”

Google: 17 Bing: 6 Yahoo: 6 Baidu: 1

Một trong các kết quả của Google là một trang lỗi, nhưng có lẽ không thể tự động được đánh chỉ mục do chưa có cách tuyên bố tương đương 404 trong SPA.

Tôi cũng đã đọc (tôi không thể nhớ lại ở đâu) rằng Google có độ trễ trong vài ngày khi nói đến lập chỉ mục SPA so với các ứng dụng được máy chủ cung cấp. Điều này có thể không phải là một vấn đề cho bạn, nhưng nó đáng để biết.

Giả thuyết làm việc của anh ta là các robot công cụ tìm kiếm không phải Google có thể lập chỉ mục các trang được hiển thị phía máy khách, nhưng không thu thập dữ liệu chúng, tức là theo các liên kết và lập chỉ mục các trang khác của trang web.