Các chiến lược SEO cho các ứng dụng một trang nặng JavaScript hoặc các trang AJAX

JavaScript phía máy khách rất tuyệt vời để tạo các trang web sáng tạo và dễ sử dụng. Ngoài AJAX, một công nghệ web được thiết lập để kích hoạt tải một số nội dung trang nhất định khi được yêu cầu, được gọi là khung Ứng dụng Trang Đơn (SPA), phụ thuộc nhiều vào JavaScript, trải nghiệm sự chấp nhận nhanh chóng trong cộng đồng nhà phát triển web, khi chúng cho phép điều này để ra mắt thị trường nhanh chóng các ứng dụng web có tính tương tác cao và tải nhanh.

Tuy nhiên, nếu bạn dựa nhiều vào JavaScript để hiển thị nội dung trang của mình và cung cấp chức năng điều hướng, thì có những rủi ro đã biết liên quan đến kỹ thuật SEO, lập chỉ mục và khả năng liên kết. Dưới đây là một số chiến lược đã được chứng minh để tạo các trang AJAX và các ứng dụng trang đơn không phải là thảm họa tìm kiếm.

Cơ sở: JavaScript phía máy khách và các đoạn URL

Các khuôn khổ web phía máy khách sử dụng nhiều công nghệ được gọi là AJAX – JavaScript và XML không đồng bộ. Nó biến các trang web tĩnh thành các ứng dụng web động có thể trình bày trải nghiệm người dùng đa dạng và phong phú mà không cần cập nhật toàn bộ trang và thay đổi URL. Các trạng thái khác nhau của ứng dụng thường được xác định bằng cách thêm thẻ bắt đầu bằng # vào URL, có thể nhận ra bằng tiền tố (#) (ví dụ: http://www.hugeinc.com/#aboutus).

Các lợi ích về trải nghiệm người dùng là rõ ràng – các trang đáp ứng nhanh, chỉ tải nội dung cần thiết cho trải nghiệm người dùng. Trên thực tế, nhiều giao diện người dùng thế hệ tiếp theo không dễ triển khai nếu không sử dụng JavaScript, vì nó loại bỏ nhu cầu người dùng phải chủ động nhấp vào liên kết và làm mới toàn bộ trang thông qua trình duyệt.

Với những công nghệ này, người dùng có thể duyệt nhanh chóng và trực quan các sản phẩm và nội dung thông qua một giao diện sạch sẽ. Tuy nhiên, URL ít nhiều vẫn giữ nguyên. Các siêu liên kết chứa các đoạn URL được sử dụng để tải dữ liệu sản phẩm được yêu cầu tại thời điểm người dùng tương tác và để tránh làm mới trang.

Vấn đề

Điểm bất lợi là nội dung quan trọng hoặc dữ liệu sản phẩm quan trọng nhất có thể không hiển thị với các công cụ tìm kiếm, những công cụ này thường không phân tích JavaScript. Vì phần thẻ bắt đầu bằng # của URL hiển thị với trình duyệt cục bộ nhưng không hiển thị với máy chủ, các phương pháp lập chỉ mục tiêu chuẩn của bot theo các liên kết sẽ không thành công trừ khi rô bốt lập chỉ mục mô phỏng logic JavaScript phức tạp.

Và trong khi Google liên tục phát triển khả năng JavaScript cho các robot của mình, Bing / Yahoo đang bị tụt lại phía sau. Và ngay cả khi các công cụ tìm kiếm cố gắng lập chỉ mục nội dung, chúng thường có vẻ không mấy tin tưởng vào việc có thể trình bày chính xác trạng thái phù hợp nhất cho truy vấn tìm kiếm dựa trên các URL trong chỉ mục của chúng. Kết quả: khả năng hiển thị kém trong tìm kiếm so với các đối thủ cạnh tranh.

Một giải pháp: các trang dự phòng

Trang dự phòng là các trang HTML được hiển thị khi tài nguyên yêu cầu không phân tích cú pháp JavaScript. Đây thường là các trang tĩnh cố gắng sao chép chức năng và nội dung của ứng dụng web JavaScript thông qua các trang được hiển thị phía máy chủ. Các trang này chứa cùng nội dung mà ứng dụng Javascript sẽ hiển thị và cũng sử dụng các liên kết có thể lập chỉ mục tiêu chuẩn để điều hướng.

Những lợi thế

Các trang dự phòng cung cấp cho các công cụ tìm kiếm nội dung mà họ cần cho các trang đích tìm kiếm không phải trả tiền quan trọng. Những trang này không dành cho người dùng trừ khi họ đang sử dụng trình duyệt văn bản hoặc bị hạn chế. Cách tiếp cận của Cadillac tiến thêm một bước nữa và thường được gọi là “cải tiến liên tục” – một trang web hoàn chỉnh cung cấp cho người dùng nhiều tính năng nhất mà hệ thống của họ có thể xử lý. Tất nhiên, đây là phần lớn công việc, vì mã cho mỗi cấp độ chức năng của máy khách phải được viết trên toàn bộ trang web.

Những bất lợi

Tạo các trang web cải tiến liên tục hoặc các trang dự phòng làm tăng thời gian và chi phí xây dựng ban đầu, đồng thời tăng khả năng bảo trì liên tục. Ngoài ra, người dùng có thể không bao giờ thấy các trang dự phòng hoặc URL của họ – họ sẽ thấy URL có biểu tượng băm – và các URL này sẽ không thu thập bất kỳ liên kết đến hoặc tín hiệu xã hội nào ở cấp URL. Điều này có thể có hoặc không phải là một vấn đề tùy thuộc vào việc các URL có phải là các trang đích không phải trả tiền chính hay không.

Xét cho cùng, vì không thể sao chép đầy đủ chức năng JavaScript trên các trang tĩnh, điều này có nghĩa là bạn đang tạo một cách hiệu quả một trang web riêng biệt, hơi khác cho các trang đích không phải trả tiền quan trọng, do đó làm tăng khối lượng công việc.

Triển khai các trang dự phòng

Có một số cách tiếp cận để triển khai các trang dự phòng. Họ có thể đạt được bằng cách chỉ cần đưa nội dung quan trọng vào

Một cách tiếp cận khác là xử lý nó ở phía máy chủ. Vào năm 2011, Google đã giới thiệu một tiêu chuẩn – thường được gọi là “hashbang” (#!) – dịch các URL của thẻ bắt đầu bằng # thành một chuỗi truy vấn để rô bốt lập chỉ mục. Ngược lại với phần phân đoạn của URL, các chuỗi truy vấn hiển thị với hệ thống phía máy chủ và do đó cho phép các nhà phát triển web hiển thị nội dung tương ứng trên phía máy chủ chỉ cho các công cụ tìm kiếm. Điều này có lợi thế là tạo ra các URL có thể lập chỉ mục.

Bạn có thể tìm thấy thông tin chi tiết về đặc tả Hashbang của Google và cách triển khai nó tại đây. Mặc dù cách tiếp cận này cho phép Google lập chỉ mục, nhưng nó đã được chứng minh là không được giới SEO và nhà phát triển ưa chuộng vì một số lý do, chủ yếu là do nỗ lực phát triển ngày càng tăng và sự hỗ trợ không đầy đủ từ các công cụ tìm kiếm khác và dịch vụ web của bên thứ ba.

Các giải pháp khác cho vấn đề url

Như đã đề cập ở trên, tùy thuộc vào mức độ xem xét SEO, một trạng thái UX nhất định cho các trang AJAX hoặc SPA có thể có các URL hiển thị khác với hoặc không nhìn thấy đối với các công cụ tìm kiếm. Điều này có nghĩa là các công cụ tìm kiếm có thể thấy một tập hợp các URL và những người dùng khác.

Tạo các phần tử UX tùy chỉnh và các tính năng chia sẻ, bao gồm các URL có thể chia sẻ, giúp giảm thiểu khả năng người dùng sao chép và dán các URL phản ánh chính xác trạng thái mà người dùng đang thấy:

Chia sẻ url

Phần tử UX có thể giúp giảm bớt tình trạng thiếu URL có thể chia sẻ trên các trang web sử dụng nhiều JavaScript

Tất nhiên, không phải ai cũng sẽ sử dụng các phần tử UX này và chúng yêu cầu phát triển logic phía máy chủ có thể thực thi trạng thái thông qua các phần tử URL và trình bày nó cho người dùng.

Sử dụng pushState để khắc phục sự cố url

HTML 5 cung cấp khả năng điều khiển đường dẫn của URL khi nó được hiển thị trong trình duyệt, cũng như lịch sử trình duyệt thông qua Javascript. Điều này hữu ích cho các trang SPA và AJAX ở chỗ nó cho phép khách hàng hiển thị với một URL thân thiện với công cụ tìm kiếm, có thể chia sẻ và được đánh dấu trang trong khi các đoạn JavaScript và URL chạy trong nền.

Triển khai PushState

Việc thêm pushState khá đơn giản và trên thực tế, nhiều khung ứng dụng trang đơn phổ biến như khung công tác nguồn mở Ember hoặc khung công tác Angular của Google cung cấp các API để dễ dàng truy cập vào chức năng. Nhưng ngay cả đối với các nhà phát triển web thích phát triển Javascript tùy chỉnh, API Lịch sử mới được thêm vào, là một phần của đặc tả HTML5, cung cấp một giao diện đơn giản để đẩy cập nhật URL đầy đủ ở phía máy khách vào thanh trình duyệt mà không cần sử dụng các đoạn URL bị hạn chế hoặc buộc làm mới trang.

bất lợi

Các triển khai SEO tốt nhất của pushState có thể được tìm thấy trên các trang web đã có thể truy cập mà không cần JavaScript, với phiên bản AJAX được xây dựng “trên cùng” như mô tả ở trên. PushState sau đó được kích hoạt để cho phép sao chép và dán các liên kết và tất cả các lợi ích khác của URL phản ánh trải nghiệm người dùng, chẳng hạn như URL đích cho các trang đích. Trên thực tế, pushState không phải là giải pháp cho các trang AJAX và vấn đề riêng về SEO, nhưng nó có ích.

Việc triển khai pushState làm tăng nỗ lực phát triển và bảo trì. Các biến và URL được tham chiếu sẽ cần được cập nhật khi trang web phát triển.

PushState cũng yêu cầu một trình duyệt hiện đại, nhưng nó cũng yêu cầu nhiều trang AJAX và SPA hiện đại, vì vậy bạn có thể sẽ ném các trình duyệt lỗi thời và người dùng của chúng vào lề đường.

Đặt một cái gì đó lại với nhau

Nếu ngân sách và nguồn lực cho phép, một cách tiếp cận toàn diện để tạo một trang AJAX hoặc SAP thân thiện với SEO bao gồm:

  • Ít nhất là các trang dự phòng cho các trang đích không phải trả tiền quan trọng hoặc một trang web tiện ích mở rộng hoàn toàn tiến bộ hoạt động có và không có Javascript và cho phép lập chỉ mục.
  • Và việc triển khai pushState để khắc phục sự cố URL cho người dùng hoặc khách hàng đã bật JavaScript, cho phép chia sẻ và đánh dấu trang và tạo một URL duy nhất cho tất cả người dùng.

AJAX và Ứng dụng Trang đơn sẽ ở lại với họ và mang lại nhiều lợi ích mà người làm SEO không nên bỏ qua. Trải nghiệm người dùng tuyệt vời được liên kết, thảo luận và tạo ra các tín hiệu xã hội – tất cả đều rất quan trọng đối với SEO. Các thương hiệu và đại lý nên hiểu rằng việc kết hợp các yếu tố kỹ thuật để đảm bảo rằng các trang web nặng về Javascript được lập chỉ mục và có thể liên kết sẽ được coi là không thể thương lượng trong tương lai và là một phần của tài nguyên có trong các dự án thiết kế và xây dựng web ngay từ đầu.

Ghi chú của tác giả: Đặc biệt cảm ơn Thomas Prommer, Phó Chủ tịch Công nghệ tại Huge, đã giúp soạn thảo bài đăng này.

Hình ảnh của Ognian Mladenov, Flickr

Nguồn: www.searchenginewatch.com

Trả lời

Chat Zalo