Ngọc Yến
Writer
Trong vài năm qua, công nghệ web đã có một bước nhảy vọt. Nó đã phát triển khá mạnh mẽ ở cả frontend và backend. Ngày nay, chúng ta có sẵn các framework khác nhau để hoạt động trên tên miền của mình. Đặc biệt là ở giao diện người dùng, chúng ta có rất nhiều tùy chọn để lựa chọn, bao gồm các khung và thư viện chuyên dụng để làm việc.
Trong số các giao diện web thế hệ mới này, các trang web single page đang là xu hướng hiện nay. Chúng dễ điều hướng, cuộn và có tính tương tác cao trong thiết kế. Tuy nhiên, SEO của trang web SPA lại là một vấn đề nan giải.
Như chúng ta biết, việc xây dựng (các) ứng dụng tiên tiến không phải là tất cả những gì bạn có thể có được lưu lượng truy cập – bạn còn phải tiếp thị ứng dụng đó một cách thông minh. Không giống như các ứng dụng web đơn giản sử dụng các kỹ thuật SEO thông thường, có rất nhiều sự khác biệt khi nói đến các trang web single page. Nó đòi hỏi các kỹ thuật SEO chuyên biệt và các cách cụ thể để làm việc. Hãy cùng tìm hiểu chi tiết dưới đây.
Các nhà phát triển có xu hướng sử dụng các khung JavaScript phổ biến bao gồm VueJS, AngularJS và các khung khác để xây dựng các loại trang web như vậy. VueJS phổ biến hơn trong số các nhà phát triển vì nó tương đối dễ dàng và cung cấp các tính năng tích hợp sẵn tuyệt vời để xây dựng bất kỳ ứng dụng trang đơn nâng cao nào.
Các website lớn như facebook.com, google.com, youtube.com, twitter.com đều được code theo kiểu SPA. Dễ thấy các website kể trên đều có trải nghiệm mượt mà, mà nổi bật nhất chính là không bị khựng lại ở thao tác chuyển từ trang này sang trang kia.
Có nhiều lý do khiến mọi người yêu thích thiết kế SPA. Điều rõ ràng nhất là dễ dàng truy cập tất cả nội dung trang web ở một nơi. Nó giúp người dùng điều hướng nhanh chóng trên toàn bộ trang web, vì tất cả các dịch vụ được xác định trên một trang và không yêu cầu tải thêm bất kỳ trang mới nào.
Xem xét tính thân thiện với thiết bị di động, các trang web SPA cũng tốt hơn nhiều so với các trang web nhiều trang. Bởi vì thiết kế của chúng đáp ứng và phù hợp tốt với màn hình điện thoại thông minh. Các trang web một trang này là giải pháp được thiết kế riêng cho thiết bị điện thoại thông minh, vì mọi người luôn tìm cách tương tác với các ứng dụng nhanh và dễ điều hướng như vậy.
Nói về Nhược điểm
Tất cả mọi thứ đi kèm với những lợi thế và bất lợi. Điều này cũng đúng với các web SPA. Mặc dù, chúng rất dễ điều hướng và cuộn nhưng cần nhiều thời gian để tải, đây là một trong những lý do chính dẫn đến tốc độ thoát nhanh. Bởi vì các ứng dụng một trang được lập trình bằng JavaScript, đó là lý do tại sao chúng cần thêm một chút thời gian để tải trên trình duyệt web/di động.
Trong khi đó, nếu bạn đang sử dụng Google Analytics để theo dõi lưu lượng truy cập và hiệu suất của từng trang web, bạn sẽ khó thực hiện điều tương tự đối với các web SPA. Nếu Analytics được định cấu hình chính xác trên SPA, bạn sẽ không có thông tin chi tiết về nội dung nào đang hoạt động tốt và nội dung nào đang làm mất hứng thú của người dùng, nhanh chóng dẫn đến mức độ tương tác thấp hơn trên trang web.
Thông thường, Googlebot lập chỉ mục trang bằng cách hiển thị dữ liệu HTML/CSS. Tuy nhiên, điều đó trở nên hơi khác một chút trong các web SAP vì tất cả giao diện người dùng đã được xây dựng bằng VueJS hoặc bất kỳ khung JavaScript nào khác.
Để thu thập dữ liệu trong các ứng dụng VueJS, Googlebot triển khai một kỹ thuật khác, tức là chạy JavaScript trên trang và thực hiện lệnh gọi Ajax. Hơn nữa, nó đợi từ 5-20 giây trước khi chụp từng trang. Kỹ thuật nâng cao này cho phép Googlebot thu thập dữ liệu các ứng dụng trên một trang đúng cách. Nó lập chỉ mục nội dung cho SERPS và làm cho chúng khả thi để tối ưu hóa công cụ tìm kiếm.
Một điểm quan trọng khác là (các) trang web. Có một thực tế là công cụ tìm kiếm luôn xếp hạng các trang của trang web chứ không phải chính trang web đó. Các trang được thiết kế và viết cẩn thận với các từ khóa cụ thể để chúng có được thứ hạng mong muốn trên các công cụ tìm kiếm. Nội dung của trang chứa một khối lượng đáng kể các từ khóa được xác định và ít liên kết nội bộ, điều này cho phép công cụ tìm kiếm xếp hạng các trang đó theo các từ khóa cụ thể.
Tuy nhiên, như chúng ta đã biết trong trường hợp SPA, tất cả các trang được kết hợp thành một và không có bất kỳ sự tách biệt nào giữa nội dung. Kết quả là, nó chỉ trở thành một trang riêng lẻ cho toàn bộ ứng dụng, giảm thiểu đáng kể cơ hội được xếp hạng trên các từ khóa khác nhau.
Và khi liên kết với nhau, SEO trong các trang web SPA trở nên tồi tệ hơn nhiều. Do phần lớn các liên kết nội bộ không phải là một phần của mã nguồn HTML nên trình thu thập thông tin chỉ có thể tìm thấy một số lượng URL hạn chế. Để truy cập các URL đó, trình thu thập thông tin phải đi xa hơn. Bước mà họ phải thực thi JavaScript để truy xuất các liên kết đó, điều này cuối cùng sẽ gây ra sự chậm trễ cho các công cụ tìm kiếm.
Để thực hiện kết xuất phía máy chủ trong các SAP, trước tiên chúng cần được thực thi đối với một DOM ảo, sau đó được chuyển đổi thành một chuỗi HTML. Chuỗi HTML đó sau đó được thêm vào trang và được JavaScript thực thi để thay thế nội dung hiện có.
Bằng cách này, kết xuất phía máy chủ giúp làm cho các ứng dụng trang đơn trở nên thân thiện với trình thu thập thông tin và cho phép các công cụ tìm kiếm lập chỉ mục chúng đúng cách mặc dù cấu trúc JavaScript phức tạp của chúng.
Để thực hiện Kết xuất trước, trước tiên bạn phải chạy ứng dụng trang đơn của mình trên bất kỳ trình duyệt web nào như Chrome, Firefox, Mozilla... Sau đó, bạn phải chụp nhanh đầu ra trang của mình và thay thế các tệp HTML theo nó trong đáp ứng yêu cầu của máy chủ.
Bằng cách sử dụng Pre-Rendering, bạn không phải lo lắng về việc có bất kỳ máy chủ sản xuất nào cũng như về tải tăng đột biến khi lưu trữ cho các trang web PHP.
Tối ưu hóa SEO khác trong trang web SPA
URL
Chúng tôi khuyên bạn nên có các URL thân thiện với SEO cho trang web của mình. Điều tương tự cũng xảy ra với các ứng dụng một trang. Để có kết quả tốt hơn, chúng tôi khuyên bạn nên có hai cấu trúc URL cho ứng dụng trang đơn của mình, một cấu trúc phải là URL ID và các cấu trúc còn lại phải là URL Slug.
URL Slug phải được xác định rõ ràng với các từ thực tế được phân tách bằng dấu gạch nối và không nên quá phức tạp. Nó phải chứa tất cả các từ khóa có liên quan mà bạn muốn xếp hạng và không được vượt quá độ dài tối đa của nó.
Thẻ meta
Trang phải bao gồm tất cả các thẻ Meta quan trọng như tiêu đề trang, mô tả, thẻ chuẩn, hreflang, v.v. Bạn cũng nên kết xuất trực tiếp tất cả các thẻ Meta này vào mã nguồn của trang để kết xuất phía máy chủ có thể nhận được mạnh mẽ hơn.
Liên kết nội bộ
Tất cả các liên kết nội bộ phải được đặt hợp lý trong nội dung và phải được nhúng bằng thẻ <a> để Googlebot có thể dễ dàng thu thập dữ liệu toàn bộ trang. Bạn cũng nên xác định tất cả các yếu tố điều hướng cốt lõi trong mã nguồn và phải được đặt ở đầu trang.
Các câu hỏi thường gặp
H: Website SPA có thân thiện với SEO không?
Trả lời: Website SPA thường được gọi là các trang web SEO không thân thiện vì chúng khó thu thập dữ liệu và hơi khó hiển thị nội dung bởi GoogleBot.
Hỏi: Vue.js có thân thiện với SEO không?
Trả lời: Nói chung, các trang web Vue.js không được coi là thân thiện với SEO vì chúng có nhiều vấn đề cơ bản bao gồm tốc độ tải trang, meta, sơ đồ trang web, cập nhật URL băm...
H: React có tốt hơn Vue cho SEO không?
Trả lời: Về bản chất, cả Vue và React đều không thân thiện với SEO, tuy nhiên, có một số phương pháp nhất định bạn có thể sử dụng trong cả hai để làm cho website thân thiện với SEO.
Như chúng ta biết, việc xây dựng (các) ứng dụng tiên tiến không phải là tất cả những gì bạn có thể có được lưu lượng truy cập – bạn còn phải tiếp thị ứng dụng đó một cách thông minh. Không giống như các ứng dụng web đơn giản sử dụng các kỹ thuật SEO thông thường, có rất nhiều sự khác biệt khi nói đến các trang web single page. Nó đòi hỏi các kỹ thuật SEO chuyên biệt và các cách cụ thể để làm việc. Hãy cùng tìm hiểu chi tiết dưới đây.
Ứng dụng một trang (SPA) là gì?
Ứng dụng single page là một dạng tương tác cao của trang web hiện đại có giao diện do JavaScript cung cấp. Thay vì tải một trang mới cho mọi dịch vụ, trang web một trang kết hợp tất cả thành một bằng cách tự động viết lại trang hiện tại. Điều này tạo điều kiện cho người dùng tìm thấy tất cả các tính năng/dịch vụ trên một trang, tránh bị gián đoạn và nâng cao trải nghiệm người dùng.Các nhà phát triển có xu hướng sử dụng các khung JavaScript phổ biến bao gồm VueJS, AngularJS và các khung khác để xây dựng các loại trang web như vậy. VueJS phổ biến hơn trong số các nhà phát triển vì nó tương đối dễ dàng và cung cấp các tính năng tích hợp sẵn tuyệt vời để xây dựng bất kỳ ứng dụng trang đơn nâng cao nào.
Các website lớn như facebook.com, google.com, youtube.com, twitter.com đều được code theo kiểu SPA. Dễ thấy các website kể trên đều có trải nghiệm mượt mà, mà nổi bật nhất chính là không bị khựng lại ở thao tác chuyển từ trang này sang trang kia.
Ưu và nhược điểm của trang web SPA
Nói về Ưu điểmCó nhiều lý do khiến mọi người yêu thích thiết kế SPA. Điều rõ ràng nhất là dễ dàng truy cập tất cả nội dung trang web ở một nơi. Nó giúp người dùng điều hướng nhanh chóng trên toàn bộ trang web, vì tất cả các dịch vụ được xác định trên một trang và không yêu cầu tải thêm bất kỳ trang mới nào.
Xem xét tính thân thiện với thiết bị di động, các trang web SPA cũng tốt hơn nhiều so với các trang web nhiều trang. Bởi vì thiết kế của chúng đáp ứng và phù hợp tốt với màn hình điện thoại thông minh. Các trang web một trang này là giải pháp được thiết kế riêng cho thiết bị điện thoại thông minh, vì mọi người luôn tìm cách tương tác với các ứng dụng nhanh và dễ điều hướng như vậy.
Nói về Nhược điểm
Tất cả mọi thứ đi kèm với những lợi thế và bất lợi. Điều này cũng đúng với các web SPA. Mặc dù, chúng rất dễ điều hướng và cuộn nhưng cần nhiều thời gian để tải, đây là một trong những lý do chính dẫn đến tốc độ thoát nhanh. Bởi vì các ứng dụng một trang được lập trình bằng JavaScript, đó là lý do tại sao chúng cần thêm một chút thời gian để tải trên trình duyệt web/di động.
Trong khi đó, nếu bạn đang sử dụng Google Analytics để theo dõi lưu lượng truy cập và hiệu suất của từng trang web, bạn sẽ khó thực hiện điều tương tự đối với các web SPA. Nếu Analytics được định cấu hình chính xác trên SPA, bạn sẽ không có thông tin chi tiết về nội dung nào đang hoạt động tốt và nội dung nào đang làm mất hứng thú của người dùng, nhanh chóng dẫn đến mức độ tương tác thấp hơn trên trang web.
Googlebot là gì và cách nó nhìn thấy các trang web SAP
Để thu thập dữ liệu nội dung trang web và các trang, Google triển khai một công cụ thu thập dữ liệu duy nhất có tên là Googlebot. Nó giúp Google thu thập dữ liệu từ trang web và lập chỉ mục có thể tìm kiếm trong công cụ tìm kiếm. Nó là một trong những yếu tố chính được sử dụng trong SEO trang web và có tầm quan trọng đáng kể để xếp hạng trang web trên các công cụ tìm kiếm.Thông thường, Googlebot lập chỉ mục trang bằng cách hiển thị dữ liệu HTML/CSS. Tuy nhiên, điều đó trở nên hơi khác một chút trong các web SAP vì tất cả giao diện người dùng đã được xây dựng bằng VueJS hoặc bất kỳ khung JavaScript nào khác.
Để thu thập dữ liệu trong các ứng dụng VueJS, Googlebot triển khai một kỹ thuật khác, tức là chạy JavaScript trên trang và thực hiện lệnh gọi Ajax. Hơn nữa, nó đợi từ 5-20 giây trước khi chụp từng trang. Kỹ thuật nâng cao này cho phép Googlebot thu thập dữ liệu các ứng dụng trên một trang đúng cách. Nó lập chỉ mục nội dung cho SERPS và làm cho chúng khả thi để tối ưu hóa công cụ tìm kiếm.
Các vấn đề cơ bản của SEO trong các trang web SPA
Các web SPA thường được coi là các trang web không thân thiện với SEO. Vấn đề cơ bản của nó nằm ở cơ sở hạ tầng JavaScript. Bởi vì, Googlebot dễ dàng thu thập dữ liệu những trang web có phần phụ trợ bằng HTML/CSS, vì Googlebot giúp trình thu thập dữ liệu dễ dàng hiển thị nội dung trang web.Một điểm quan trọng khác là (các) trang web. Có một thực tế là công cụ tìm kiếm luôn xếp hạng các trang của trang web chứ không phải chính trang web đó. Các trang được thiết kế và viết cẩn thận với các từ khóa cụ thể để chúng có được thứ hạng mong muốn trên các công cụ tìm kiếm. Nội dung của trang chứa một khối lượng đáng kể các từ khóa được xác định và ít liên kết nội bộ, điều này cho phép công cụ tìm kiếm xếp hạng các trang đó theo các từ khóa cụ thể.
Tuy nhiên, như chúng ta đã biết trong trường hợp SPA, tất cả các trang được kết hợp thành một và không có bất kỳ sự tách biệt nào giữa nội dung. Kết quả là, nó chỉ trở thành một trang riêng lẻ cho toàn bộ ứng dụng, giảm thiểu đáng kể cơ hội được xếp hạng trên các từ khóa khác nhau.
Và khi liên kết với nhau, SEO trong các trang web SPA trở nên tồi tệ hơn nhiều. Do phần lớn các liên kết nội bộ không phải là một phần của mã nguồn HTML nên trình thu thập thông tin chỉ có thể tìm thấy một số lượng URL hạn chế. Để truy cập các URL đó, trình thu thập thông tin phải đi xa hơn. Bước mà họ phải thực thi JavaScript để truy xuất các liên kết đó, điều này cuối cùng sẽ gây ra sự chậm trễ cho các công cụ tìm kiếm.
Thực tiễn tốt nhất cho SEO website SPA
May mắn thay, tất cả không bị mất đối với các trang SPA. Vẫn còn một số kỹ thuật, các nhà phát triển có thể sử dụng để tối ưu hóa các SPA để tăng xếp hạng trên công cụ tìm kiếm. Hãy đọc tiếp dưới đây:Kết xuất phía máy chủ
Kết xuất phía máy chủ (SSR) là một quá trình trong đó trang web được hiển thị theo nhu cầu của yêu cầu máy chủ. Nó giúp hiển thị các trang web và tạo điều kiện cho trình thu thập thông tin lập chỉ mục các trang đó.Để thực hiện kết xuất phía máy chủ trong các SAP, trước tiên chúng cần được thực thi đối với một DOM ảo, sau đó được chuyển đổi thành một chuỗi HTML. Chuỗi HTML đó sau đó được thêm vào trang và được JavaScript thực thi để thay thế nội dung hiện có.
Bằng cách này, kết xuất phía máy chủ giúp làm cho các ứng dụng trang đơn trở nên thân thiện với trình thu thập thông tin và cho phép các công cụ tìm kiếm lập chỉ mục chúng đúng cách mặc dù cấu trúc JavaScript phức tạp của chúng.
Kết xuất trước
Kết xuất trước gần như tương tự như kết xuất phía Máy chủ, ngoại trừ quy trình kết xuất trước khi triển khai. Trong Pre-Rendering, quá trình kết xuất diễn ra trước khi triển khai dự án, không giống như kết xuất phía Máy chủ được thực hiện trên các máy chủ trực tiếp.Để thực hiện Kết xuất trước, trước tiên bạn phải chạy ứng dụng trang đơn của mình trên bất kỳ trình duyệt web nào như Chrome, Firefox, Mozilla... Sau đó, bạn phải chụp nhanh đầu ra trang của mình và thay thế các tệp HTML theo nó trong đáp ứng yêu cầu của máy chủ.
Bằng cách sử dụng Pre-Rendering, bạn không phải lo lắng về việc có bất kỳ máy chủ sản xuất nào cũng như về tải tăng đột biến khi lưu trữ cho các trang web PHP.
Tối ưu hóa SEO khác trong trang web SPA
URL
Chúng tôi khuyên bạn nên có các URL thân thiện với SEO cho trang web của mình. Điều tương tự cũng xảy ra với các ứng dụng một trang. Để có kết quả tốt hơn, chúng tôi khuyên bạn nên có hai cấu trúc URL cho ứng dụng trang đơn của mình, một cấu trúc phải là URL ID và các cấu trúc còn lại phải là URL Slug.
URL Slug phải được xác định rõ ràng với các từ thực tế được phân tách bằng dấu gạch nối và không nên quá phức tạp. Nó phải chứa tất cả các từ khóa có liên quan mà bạn muốn xếp hạng và không được vượt quá độ dài tối đa của nó.
Thẻ meta
Trang phải bao gồm tất cả các thẻ Meta quan trọng như tiêu đề trang, mô tả, thẻ chuẩn, hreflang, v.v. Bạn cũng nên kết xuất trực tiếp tất cả các thẻ Meta này vào mã nguồn của trang để kết xuất phía máy chủ có thể nhận được mạnh mẽ hơn.
Liên kết nội bộ
Tất cả các liên kết nội bộ phải được đặt hợp lý trong nội dung và phải được nhúng bằng thẻ <a> để Googlebot có thể dễ dàng thu thập dữ liệu toàn bộ trang. Bạn cũng nên xác định tất cả các yếu tố điều hướng cốt lõi trong mã nguồn và phải được đặt ở đầu trang.
Các câu hỏi thường gặp
H: Website SPA có thân thiện với SEO không?
Trả lời: Website SPA thường được gọi là các trang web SEO không thân thiện vì chúng khó thu thập dữ liệu và hơi khó hiển thị nội dung bởi GoogleBot.
Hỏi: Vue.js có thân thiện với SEO không?
Trả lời: Nói chung, các trang web Vue.js không được coi là thân thiện với SEO vì chúng có nhiều vấn đề cơ bản bao gồm tốc độ tải trang, meta, sơ đồ trang web, cập nhật URL băm...
H: React có tốt hơn Vue cho SEO không?
Trả lời: Về bản chất, cả Vue và React đều không thân thiện với SEO, tuy nhiên, có một số phương pháp nhất định bạn có thể sử dụng trong cả hai để làm cho website thân thiện với SEO.
