Các ứng dụng đơn trang (Single-page applications) rất phổ biến và dễ sử dụng, nhưng người dùng thường khó có thể tìm thấy thông tin trong đó.
Nếu được thiết kế và hoàn thiện đúng cách, các ứng dụng đơn trang sẽ mang lại nhiều trải nghiệm vượt trội cho người dùng và năng suất cao cho nhà phát triển, nhưng cũng có thể gây ra thất bại vì 2 lý do phổ biến: thời gian tải trang lâu đến mức không thể chấp nhận được, và các công cụ tìm kiếm không thể lập chỉ mục trang web một cách hiệu quả.
Có rất nhiều lời khuyên về cách tối ưu hóa thời gian tải cho các ứng dụng đơn trang, nhưng lại ít chia sẻ về cách đối phó với vấn đề lập chỉ mục của công cụ tìm kiếm. Bài đăng này sẽ giải thích cách giải quyết vấn đề lập chỉ mục của công cụ tìm kiếm thông qua thiết kế sâu sắc của API – điều mà ít người nghĩ đến khi cần tìm giải pháp cho vấn đề của công cụ tìm kiếm.
Ứng dụng này cho phép người dùng cuối điều hướng giữa các thực thể khác nhau mà không cần tải tài liệu HTML cho từng thực thể.
Lưu ý: Tải tài liệu HTML (HTML document loading) là một khái niệm cơ bản đối với tất cả các trình duyệt web, nó được định nghĩa chính xác ở đây và một số tài liệu khác. Ứng dụng đơn tài liệu (Single-document application) sẽ là một cái tên hay hơn ứng dụng đơn trang, nếu bạn coi trọng tính nhất quán về thuật ngữ trong các tài liệu kỹ thuật.
Về cơ bản, một chương trình JavaScript được tải vào trình duyệt là nhờ vào việc tải một tài liệu HTML ban đầu. Chương trình JavaScript sau đó sẽ sử dụng một loạt lệnh gọi API để lấy dữ liệu và hiển thị giao diện người dùng cho một loạt các thực thể mà không cần tải tài liệu HTML (và JavaScript tương ứng) cho từng tài liệu.
Trải nghiệm ứng dụng đơn trang
Có nhiều lý do cho sự phổ biến của ứng dụng đơn trang: chúng dễ viết và thú vị, có thể cung cấp trải nghiệm người dùng vượt trội, mang lại sự tách biệt rõ ràng giữa mã nguồn giao diện người dùng và logic nghiệp vụ.
Một ưu điểm quan trọng khác của ứng dụng này chính là thiết kế tổng thể của chúng tương tự như thiết kế của các ứng dụng di động dành cho thiết bị di động hiển thị cùng một dữ liệu và truy cập cùng một chức năng. Trên thực tế, nhiều người sử dụng cùng một cách triển khai ứng dụng đơn trang bằng HTML5 cho cả trình duyệt web và thiết bị di động.
Những ứng dụng đơn trang ban đầu thường không tích hợp tốt với trình duyệt. Một trong những sai lầm dễ thấy nhất là không thể cập nhật lịch sử trình duyệt một cách thích hợp. Khi người dùng điều hướng giữa các tài nguyên, ứng dụng đơn trang không cập nhật được thanh địa chỉ và lịch sử trình duyệt, dẫn đến việc không cung cấp cho người dùng bất cứ thứ gì để đánh dấu trang (bookmark), quay lại hay chuyển tiếp trang, và tất nhiên là lịch sử của trình duyệt cũng không hoạt động.
Việc nắm rõ cách viết ứng dụng đơn trang cùng với việc áp dụng các framework như Angular giúp các nhà phát triển viết các ứng dụng đơn trang tốt hơn. Nhờ vậy mà ngày càng có nhiều ứng dụng đơn trang tích hợp tốt với trình duyệt. Tuy nhiên, hiện vẫn chỉ có một số ít ứng dụng đơn trang hoạt động tốt với các công cụ tìm kiếm.
Chỉ cải tiến HTML5 là chưa đủ
Nếu bạn nhìn vào thanh địa chỉ trình duyệt web của một ứng dụng đơn trang thông thường, bạn sẽ thấy các địa chỉ giống như: https://acme.com/#/entity/xxxx
Lưu ý: Về mặt kỹ thuật, những địa chỉ này được gọi là tham chiếu URI, không phải URL. URL kết thúc ở ký tự #.
Tài liệu HTML duy nhất tồn tại trong một thiết kế như thế này là tài liệu tại URL https://acme.com/. Đây là tài liệu sẽ tải một ứng dụng JavaScript, sau đó thực hiện các lệnh gọi API để truy xuất các biểu diễn JSON của các thực thể có mã số nhận dạng theo định dạng /entity/xxxx. Cuối cùng, JavaSciprt sẽ tạo ra một DOM của trình duyệt và render ra giao diện người dùng nhìn thấy.
Tài liệu HTML duy nhất để công cụ tìm kiếm truy xuất là https://acme.com/, và nó thường chỉ chứa mã nguồn hoặc các tham chiếu đến mã nguồn, điều này không hữu ích đối với các bot tìm kiếm. Do đó, nó khiến cho việc lập chỉ mục của công cụ tìm kiếm thất bại.
Với sự phổ biến của API lịch sử HTML5 trên các trình duyệt, các ứng dụng đơn trang hiện có thể được viết để sử dụng các URL thay thế như sau: https://acme.com/entity/xxxx
Đây là một cải tiến quan trọng, vì giờ đây có một URL riêng biệt có thể truy xuất từ máy chủ cho từng thực thể được ứng dụng đơn trang hiển thị. Mặc dù đây là một bước đi đúng hướng, nhưng bản thân nó không giải quyết được vấn đề SEO. Bởi vì các tài nguyên tại URL này, giống như tài nguyên duy nhất đã có trước đây tại https://acme.com/, về cơ bản chỉ chứa mã nguồn hoặc tham chiếu đến mã nguồn như được minh họa trong ví dụ sau. Điều này, vẫn hoàn toàn vô nghĩa đối với một bot tìm kiếm.
<!DOCTYPE html><html> <head> <script src="/mySPA.js"></script> </head> <body> </body></html>
Khi kết hợp với mã nguồn JavaScript thích hợp, HTML này sẽ hiển thị giao diện người dùng cho từng thực thể của ứng dụng, URL của chúng có thể là https://acme.com/entity/xxxx. Mã nguồn JavaScript sẽ xây dựng một DOM cho giao diện người dùng mặc dù không có nội dung nào trong phần body của tài liệu HTML. Mã JavaScript này cũng phải xem URL của tài liệu đã được tải để xác định thực thể ban đầu nhằm hiển thị cho người dùng.
Thêm một số nội dung meta
Lấy ví dụ một ứng dụng hiển thị thông tin về các nhân vật hoạt hình Disney. Để làm cho HTML trở nên hữu ích với một bot tìm kiếm, chúng ta có thể chỉ cần thêm thông tin bổ sung như sau:
<!DOCTYPE html><html> <head> <meta name="description" content="Personal information about Mickey Mouse" /> <meta name="keywords" content="Mickey Mouse Donald Duck Minnie Goofy Disney" /> <script src="/mySPA.js"></script> </head> <body> <div style="display: none;"> <p>name: <span>Mickey Mouse</span></p> <p>girlfriend: <a href="https://acme.com/entity/Minnie">Minnie Mouse</a></p> <p>friends: <ol> <li><a href="https://acme.com/entity/Donald">Donald Duck</a></li> <li><a href="https://acme.com/entity/Goofy">Goofy</a></li> </ol> </p> </div> </body></html>
Tất cả những gì chúng ta cần làm là thêm một số phần tử vào đầu tài liệu (các công cụ tìm kiếm sẽ lưu ý đến thẻ ) và một thẻ đơn giản không bao giờ được hiển thị cho người dùng.
Ý tưởng cơ bản là phần tử được đưa vào ở đây sẽ không ảnh hưởng đến giao diện mà người dùng nhìn thấy. Tạo ra giao diện người dùng là công việc của JavaScript trong ứng dụng đơn trang.
Mục tiêu của phần tử là chỉ cung cấp thông tin hữu ích cho bot tìm kiếm và các ứng dụng khách hiểu HTML nhưng không phải là trình duyệt. Người dùng sẽ chỉ thấy giao diện được tạo bởi JavaScript của ứng dụng đơn trang và các công cụ tìm kiếm sẽ chỉ thấy phần nội dung được hiển thị ở trên.
Rõ ràng, đây không phải là một ví dụ phức tạp về những gì bạn muốn đưa vào HTML của mình để phục vụ cho SEO. Đây không phải một hướng dẫn SEO, nhưng nó cho thấy cách bạn có thể thêm vào phần nội dung HTML hiển thị với các công cụ tìm kiếm cho tất cả các thực thể trong ứng dụng đơn trang.
Tóm lại, có hai bước cần thiết để giải quyết vấn đề SEO cho các ứng dụng đơn trang. Đầu tiên là xác định và sử dụng các URL riêng biệt – những URL không có số nhận dạng được phân tách bằng ký tự # – cho mỗi thực thể hiển thị trong giao diện người dùng.
Bước tiếp theo là cung cấp các nội dung HTML có ý nghĩa cho mỗi thực thể, mặc dù HTML này sẽ không hiển thị với người dùng ứng dụng.
Nguồn: Google Cloud Blog
Ảnh: Flickr Creative Commons / ECP