Một trang Single page có hỗ trợ SEO tốt hay không?

Th1013

(Thegioitintuc) Có một nơi rất nổi tiếng âm u, tối tăm của những trang Single Page App chính là SEO. Cho dù bạn là ai, công cụ tìm kiếm cũng sẽ giúp bạn gom lại content của SPA, miễn là site của bạn đã được đồng bộ và chạy tốt.

Do sự nhầm lẫn gây ra bởi tất cả những lời khuyên mâu thuẫn này, tôi thường xuyên xem các câu hỏi “Web Vue của tôi có tốt cho SEO hay không?” trên các nơi như Vue.js facebook group, forum hoặc Reddit.

Trong bài viết này, chúng tôi nhận các ý kiến đó và thực hiện một số thử nghiệm cơ bản và cố gắng đưa ra kết luận và một số lời khuyên để giúp bạn xây dựng web SPA thân thiện với SEO.

Chú thích: Bài viết này đc viết khi Vue.js Developers blog đăng ngày 09/04/2018

Những vấn đề gặp phải tại SPA

Trong khi triển khai một SPA, browser render nội dung mà không cần bao gồm nội dung chính xác. Nội dung sẽ được load ra sau khi gọi xong một Ajax và được thêm vào bởi Javascript.

Điều này cho phép người dùng đc xem cái “trang” đó mà không cần refresh trang, giúp cải thiện UX.

Khi các kiến trúc trên hoạt động, người dùng sẽ nhìn thấy trang trên browser, vậy cơ chế tìm kiếm sẽ “cào” cái gì? nó có thể chạy trên javascript không? Nếu có, nó sẽ phải đợi gọi AJAX xong mới “cào” sao ?

Biết những điều này là cực kỳ quan trọng, vì nó có thể xác định liệu nội dung của trang có thể được đánh index bởi công cụ tìm kiếm hay không và quan trọng là nội dung của nó được xếp hạng tốt như thế nào.

Googlebot

Do hiện tại google đi đầu thế giới về công cụ tìm kiếm, thành ra chúng ta chỉ tập trung vào Googlebot – Công cụ “cào” của của Google

Vào những ngày xa xưa, Googlebot chỉ “cào” thông tin từ HTML tĩnh thôi. Trong buổi công bố năm 2014, Googlebot sẽ cho phép “cào” nội dung web sau khi Javascipt render xong nội dung.

Để giúp debug dễ dàng những vấn đề khi render bằng JS, Google cung cấp công cụ “Fetch As Google”, /webmasters này giúp hiển thị screenshot của website của bạn do Googlebot tạo từ một url có sẵn.

Chú ý là Googlebot sẽ không “cào” theo kiểu bất đồng bộ. Đơn giản thì Googlebot sẽ đợi 20 giây mới “cào”, để cho tất các các bất đồng bộ chạy hoàn tất.

Googlebot sẽ thấy SPA như thế nào?

Một ví dụ tinh túy Vue.js SPA là Vue HackerNews Clone 2.0. Đây là một open source được cung cấp bởi team Vue để thể hiện toàn bộ khả năng của Vue và các design pattern.

Tôi đã deploy app này lên Heroku và chạy thử bằng “Fetch As Google”, ảnh dưới đây là hình chụp những gì Googlebot nhìn thấy

Loại bỏ việc Server Side Rendering (SSR)

Một chức năng chính của Vue HackerNews Clone 2.0 chính là Server Side Rendering. Nghĩa là, không giống như cái cơ bản của SPA, nội dung của mỗi page sẽ được render sẵn từ phía server và cung cấp cho browser HTML tĩnh.

Đó là thứ chúng ta cố phải hiểu, cách mà Googlebot thấy content của client render. Vì thế, tôi sẽ tất SSR và chạy lại

Mặc dù là client render, Googlebot vẫn có thể thấy content của website chúng bình thường, Tôi cũng đợi vài ngày để xem Google có đánh index cho SPA của tôi không, thì đây là kết quả:

Chờ tí, có mấy thứ không ổn này? …

Dù bài test này thoả mãi mọi quan tâm về content Client render, nhưng ta vẫn còn một số lý do không thể tin tưởng đc

  1. Giống như mọi JS engines, Googlebot đôi lúc sẽ không công hiệu và sẽ có những trường hợp nó không thể render được page.
  2. Nội dung trang có thể index đc, nhưng không có nghĩa nó sẽ được xếp hạng tốt.

Javascript chạy không tốt?

Googlebot dường như không có vấn đề gì khi render Vue HackerNews. Nhưng không có chắc chắn là nó render toàn bộ một cách hoàn hảo. Thông báo của Google năm 2014 về Javascript cũng không chắc chắn là nó sẽ đảm bảo cả, mặc dù các dev dường như đã bỏ lơ nó,

Giống như browser, Googlebot phải cố một Javascript engine với một đống những chức năng web, phiên bản ES và nhiều thứ khác nữa. Trong một video từ developer của Google (Addy Osmani và Rob Dodson) vào tháng 11/2017, Googlebot hiện tại dựa trên Chrome 41. Hiện tại có rất nhiều API đc viết trc bản release 41 này, và nếu bạn xài nó, không có gì chắc chắn Googlebot sẽ render đc và index đc trang của bạn.

Bạn nghĩ rằng đây không phải vẫn đề quan trọng, vì bạn sẽ translate polyfill nó tích hợp trên mọi browser. Về khoảng này, thì bạn đã sai vì đã quá mù quáng tin vào những transpile đó chạy đúng mọi lúc, cũng giống như bạn tin app của mình chạy đúng trên mọi browser vậy.

Tối ưu hoá nào!

Đừng quên rằng, chữ “O” trong “SEO” nghĩa là “Optimizaition” (Tối ưu). Đã được đánh index không có nghĩa là site của bạn sẽ ở xếp hạng tốt. Fetch As Google cho ta biết hình dạng củng site của trên Google, nhưng không cho chúng ta so sánh chúng vs đối thủ khác.

Có một số bình luận khá thú vị ở bài viết: SEO vs. React: Web Crawlers are Smarter Than You Think made by SEO của Barry Adams (“https://www.freecodecamp.org/news/seo-vs-react-is-it-neccessary-to-render-react-pages-in-the-backend-74ce5015c0c9/“):

Điều sẽ xảy ra khi bạn sử dụng React mà không xài SSR là “cào” sẽ dừng lại ngay trang đầu tiên vì nó không thấy bất cứ hyperlinks nào để nó đi theo cả. Nó khiến cho quá trình “cào” sẽ chậm là không hiệu quả. Đó là lý do những website build bằng React (hoặc flatform JS tương tự) sự tối ưu lại thấp hơn các web HTML tĩnh. Các trang web HTML đơn giản có thể được “cào” rất hiệu quả, nội dung mới được thêm và thay đổi sẽ được “cào” và đánh index nhanh hơn nhiều, Google có thể đánh giá độ ưu tiên “cào” các trang riêng lẻ trên các trang web đó.

Dù không có gì chứng minh luận điểm trên, nhưng dường như về lý thuyết thì nó đúng với quết định xếp hạng cũng như là tốc độ trang.

Vậy làm sao khi SEO cực kỳ quan trọng?

Điểm mấu chốt là, nếu như SEO cực kỳ quan trọng, bạn không thể dựa vào sự render của SPA và nội dung phải luôn luôn đầy đủ trong trang.

Nó không có nghĩa bạn cần bỏ kiến trúc SPA, có 2 kỹ thuât: SSR (render phía server) và prerendering (render trước), cả hai để mang kết qủa tương tự.

Server-Side Rendering

Server-side rendering (SSR) là nơi trang web được render bởi server, cũng là một phần của quy trình request/response của server. Trong trường hợp của Vue.js và cách frameworks tương tự, điều này được thực hiện dựa theo DOM ảo.

Trạng thái của DOM ảo được convert thằng HTML, chúng đc thêm vào trang trước khi gửi đển client. Khi browser nhận được thông tin, thì Javascript chỉ cần cho show những nội dung có sẵn.

SSR sẽ đảm bảo trang của bạn với thân thiện với SEO, dù cho “cào” bất kể hình thức nào đi nữa, kể cả khi “cào” trên Javascript,

SSR cũng có những nhược điểm:

  • Bạn sẽ cần thiết kế code của bạn chạy “toàn cầu”. Ví dụ: Code của phải phải chạy cả trên browser và môi trường Javascript trên server. Nghĩa là bất cứ code nào sử dụng API của browser, như là window thì nó sẽ chết ngắc.
  • App của bạn sẽ chạy cả những request đển server, đồng nghĩa với thời gian load trang sẽ chậm lại, Caching sẽ giúp giảm bớt một phần.
  • Sẽ có sự phức tạp và tiêu tốn thời gian khi làm SSR, bạn sẽ cần thêm hàng giờ để hoàn thành project.
  • Nó chỉ có thể chạy tốt với server chạy bằng Node. SSR không thể chạy những môi trường không có Node. Ví dụ: Trên môi trường PHP, SSR sẽ chạy đc khi có extension v8js, nhưng hàng fake sẽ không ngon như hàng auth đc.

Nếu bạn vẫn muốn phát triển SSR trên Vue SPA, bạn cầm bắt đầu với hướng dẫn này : https://ssr.vuejs.org/ . Bạn cũng có thể tham khảo việc phát triển SSR trên Laravel và Vue qua: https://vuejsdevelopers.com/2017/11/06/vue-js-laravel-server-side-rendering/

Prerendering

Nếu bạn không thể sử dụng SSR với một số lý do trên, thì vẫn còn một cơ hội nữa: Prerendering (Render trước). Với cách này, bạn chạy app của mình trên môi trường dev, copy lấy thông tin HTML sau khi render và trả các file HTML khi có một response lên server.

Nó khá là tương đồng với mô hình SSR, ngoại trừ nó được làm trước khi deloy, không phải khi đang chạy live. Nó được thực hiện với trình duyện headless như Chrome và có tích hợp trong flow build của Wedpack, Gulp etc.

Điều tươi mới của Prerendering là nó không cần đến Node.js trên server prodcut và không nhất thiết một server cho product.

Tuy nhiên, Prerendering vẫn có nhược điểm sau:

  • Nó sẽ không chạy trên nhưng trang hiển thị data thay đổi, vd: Vue HackerNews,
  • Nó không thích hợp cho những trang đăc-biêt-cho-người-dùng. vd: Trang thông tin người dùng, tuy nhiên, những loại trang này thì không quan trọng SEO nữa, chả ai muốn trang cá nhân của mình được Google đánh index cả.
  • Bân sẽ cần Prerender tất cả route của từng trang riêng biệt, điều này sẽ ngốn khá nhiều thời gian và bô nhớ.

Nếu bạn vẫn muốn phát triển Prerendering trên Vue app của mình, hãy xem qua bài: https://vuejsdevelopers.com/2017/04/01/vue-js-prerendering-node-laravel/

Tham khảo: Bạn có thể mua dịch vụ này qua prerender.io

Kết luận:

Nhiều developer xem Thông bố của Google 2014 về Javascript render như một hình thức SEO cho nội dung SPA. Nhưng thật sự, nó không chắc chắn rằng Googlebot sẽ render đúng website của bạn, và cho dù có, thì thứ hạng của site bạn vẫn thua thiệt so với những trang HTML tính.

Lời khuyên của tôi: Nếu bạn muốn sử dụng kiến trúc SPA, hãy chắn chắn server bạn cung cấp SSR hoặc Prerendering.

Bài viết này tôi dịch từ Medium, bạn có thể tham khảo source chính từ link dưới đây

Source: https://medium.com/js-dojo/is-my-single-page-app-seo-friendly-be2c827f1c38

Thêm 1 nguồn tham khảo khác:

Là một cái tên đang trở nên nổi tiếng trong xu hướng phát triển web, single page application giúp tiết kiệm băng thông và tăng trải nghiệm cho người dùng hiệu quả. Tuy số tuổi tồn tại đã lâu nhưng nó vẫn là một kỹ thuật được không ít website áp dụng đến.

Nếu bạn muốn tìm hiểu về thuật ngữ SPA thì trong bài viết này, Bizfly sẽ giới thiệu đến bạn Single page application là gì và những lưu ý quan trọng khi triển khai web với SPA. 

Single page application là gì? 

Single page application (SPA) là một ứng dụng web hay thậm chí là một trang web giúp đem lại cho người dùng những trải nghiệm mượt mà như trên một ứng dụng mobile. Tại đó, người dùng sẽ thực hiện tất cả mọi thao tác trên một trang duy nhất, mọi cấu trúc trang sẽ chỉ tải một lần và không tải lại khi chuyển trang.

Single page application là gì

Single page application là gì?

Một số các website nổi tiếng đang sử dụng SPA để tạo những trải nghiệm mang tính chiều rộng và chiều sâu cho khách hàng như Facebook, Youtube, Gmail, Twitter,.. Dễ dàng thấy được rằng, những trang web này đều mang đến những trải nghiệm tốt nhất khi bạn thực hiện tao tác chuyển trang.

Ưu điểm của Single page application 

SPA được sử dụng khá nhiều và phổ biến trên những trang web rất nổi tiếng. Dưới đây là một số những ưu điểm của single page application mà Bizfly chia sẻ tới bạn.

Xây dựng frontend nhanh 

Ngoài việc tiết kiệm được thời gian xử lý, một ưu điểm khác đáng kể đến của single page application chính là việc xây dựng frontend nhanh chóng. Điều này được thực hiện dựa trên sự tách rời về cấu trúc và sự tách biệt giữa các dịch vụ back – end của SPA.

Tăng trải nghiệm người dùng 

Tăng trải nghiệm người dùng là một trong những ưu điểm chính không thể nào không nhắc tới. SPA xây dựng ngày càng nhiều chức năng như các dịch vụ mang tính cấu trúc microservice được cập nhật độc lập và dễ dàng khi thử nghiệm.

Ưu điểm của Single page application

Ưu điểm của Single page application 

Ngoài ra, khi SPA framework được sử dụng cùng các loại dịch vụ nói trên thì nó sẽ trở nên tuyệt vời hơn. Từ đó tạo ra tính linh động, hấp dẫn và khả năng phác hoạ cả trải nghiệm người dùng.

Hạn chế truy vấn đến server 

SPA có khả năng làm giảm tải được phần lớn sự ảnh hưởng lên server bởi server không cần phải tốn quá nhiều thời gian và hiệu năng để vẽ lên trang một cách toàn bộ.

Điều này đồng nghĩa với việc bạn sẽ tiết kiệm được lượng lớn thời gian và chi phí khi chỉ cần dùng ít server hơn cho cùng một lưu lượng yêu cầu.

Giảm thời gian phát triển và chi phí cho hạ tầng 

SPA có khả năng cải thiện hiệu năng, giảm thiểu thời gian phát triển, tăng tính nhất quán, tiết kiệm chi phí cho hạ tầng và khả năng nâng cấp dài hạn. Những framework phổ biến được lựa chọn trong việc tạo các SPA bao gồm Vue, React, Angular,…

Chúng không chỉ chưa kiến trúc xây dựng trang web mà còn cung cấp các bộ component được tích hợp sẵn.

Chính vì lý do này mà đội phát triển có thể làm việc với nhiều tốc độ khác nhau. SPA có thể sử dụng tương thích với mọi loại thiết bị điện tử như mobile, desktop,… 

So sánh single page application với web truyền thống 

Single page application và web truyền thống khác nhau ở điểm nào? Bizfly sẽ nêu ra một vài điểm khác nhau sau đây mà bạn có thể tham khảo.

Có frontend và backend rõ ràng 

Web SPA có sự phân định giữa frontend và backend rõ ràng hơn so với trang web truyền thống và chúng có sự tách bạch:

So sánh single page application với web truyền thống

So sánh single page application với web truyền thống

  • Website code cần 1 dự án nhưng SPA lại cần đến 2 dự án, một cho frontend và một cho backend.
  • Theo ý tưởng của SPA thì frontend và backend mặc dù sinh ra để dành cho nhau nhưng chúng được coi là hai dự án khác nhau.
  • Để backend và frontend có thể giao tiếp và trao đổi thì phải thông qua Restful API và định dạng dữ liệu JSON. 

Đẩy mạnh xử lý frontend 

Frontend của web SPA giữ vai trò, trách nhiệm trong việc render các giao diện và xử lý mọi thay đổi thuộc về giao diện. Còn backend chỉ cần đứng chờ và trả về những dữ liệu mà frontend yêu cầu.

Một số lưu ý quan trọng khi triển khai web với SPA 

Ngoài việc tìm hiểu khái niệm “Single page application là gì”. Bạn cũng nên tìm hiểu thêm một số những lưu ý quan trọng dưới đây khi triển khai web với SPA để ứng dụng nó hiệu quả.

Một số lưu ý quan trọng khi triển khai web với SPA

Một số lưu ý quan trọng khi triển khai web với SPA

  • Web SPA không dành cho những developer thiếu kinh nghiệm và chưa thông thạo frontend.
  • Các nội dung được render sẽ khiến cho bot của google không đọc được, từ đó việc triển khai web với SPA là không tốt cho SEO.
  • Nhiều bài toán mới phát sinh buộc bạn phải giải quyết như xác thực tài khoản, lazyload,..
  • Với các dự án cần maintain hay định hướng phát triển lâu dài thì triển khai web với SPA là một sự lựa chọn đúng đắn.

Qua bài viết, Bizfly đã chia sẻ kiến thức “single page application là gì” cùng các thông tin liên quan như ưu điểm hay những lưu ý quan trọng khi triển khai web với SPA. Với phần nội dung đó, bạn đã có được cái nhìn toàn diện hơn về SPA và có được hướng đi phù hợp trong việc ứng dụng nó vào đời sống thực tiễn.

Tham khảo nội dung khác trên site: