Thứ Tư, ngày 9 tháng 11 năm 2016
Ứng dụng web tiến bộ (PWA) đang tận dụng các công nghệ mới để mang lại cho người dùng những ưu điểm vượt trội nhất của trang web dành cho thiết bị di động và ứng dụng gốc -- và đây cũng là một trong những ý tưởng mới thú vị nhất trên web. Nhưng để thật sự có tác động, điều quan trọng là phải lập chỉ mục được và liên kết được các ứng dụng này. Mỗi đề xuất được trình bày trong bài viết này là một phương pháp hay nhất hiện nay về khả năng lập chỉ mục – cho dù bạn đang xây dựng một Ứng dụng web tiến bộ hay một trang web tĩnh đơn giản. Tuy nhiên, chúng tôi đã tổng hợp những phương pháp hay nhất này để cung cấp danh sách kiểm tra nhằm hướng dẫn cho bạn:
Làm cho nội dung của bạn có thể thu thập dữ liệu
Tại sao? Từ trước đến nay, các trang web luôn tạo hoặc kết xuất HTML trên máy chủ, đây là cách đơn giản nhất để đảm bảo nội dung của bạn có thể được liên kết trực tiếp. Các ứng dụng web đã phổ biến khái niệm kết xuất phía ứng dụng, theo đó nội dung được cập nhật động trên trang khi người dùng điều hướng mà không cần trang phải tải lại.
Phương thức tiếp cận hiện đại là kết xuất kết hợp, theo đó phương thức kết xuất phía máy chủ được sử dụng khi người dùng trực tiếp điều hướng đến một URL và kết xuất phía ứng dụng được sử dụng sau lần tải trang đầu tiên đối với các thao tác điều hướng tiếp theo và tài nguyên không đồng bộ.
Mẫu PWA phía máy chủ của chúng tôi chỉ kết xuất phía máy chủ đơn thuần, còn mẫu PWA kết hợp của chúng tôi thì cho thấy phương thức kết hợp.
Nếu bạn chưa hiểu rõ thuật ngữ kết xuất phía máy chủ vàphía máy khách, hãy tham khảo những bài viết này về kết xuất phía máy khách và máy chủ và kết xuất phía máy chủ trong react và node.js.
Các phương pháp hay nhất:
Sử dụng phương thức kết xuất phía máy chủ hoặc kết xuất kết hợp để người dùng nhận nội dung trong tải trọng ban đầu cho yêu cầu web của họ.
Luôn đảm bảo các URL của bạn có thể truy cập độc lập:
https://www.example.com/product/25/
Đường liên kết trên phải liên kết sâu đến tài nguyên cụ thể đó.
Nếu không thể hỗ trợ chế độ kết xuất phía máy chủ hoặc kết xuất kết hợp cho Ứng dụng web tiến bộ và quyết định sử dụng chế độ kết xuất phía máy khách, thì bạn nên sử dụng "công cụ Tìm nạp như Google" trên Google Search Console để xác minh nội dung kết xuất thành công cho trình thu thập dữ liệu của Tìm kiếm.
Đừng chuyển hướng người dùng truy cập đường liên kết sâu về trang chủ của ứng dụng web của bạn.
Ngoài ra, cũng nên tránh phân phối trang lỗi cho người dùng thay vì đường liên kết sâu.
Cung cấp URL sạch
Tại sao? Giá trị nhận dạng phân đoạn (#user/24601/ hoặc #!user/24601/) là một giải pháp hiệu quả cho các trình duyệt để xem nội dung AJAX mới qua máy chủ mà không cần tải lại trang.
Thiết kế này được gọi là kết xuất phía máy chủ.
Tuy nhiên, cú pháp giá trị nhận dạng theo phân đoạn không tương thích với một số công cụ web, khung và giao thức như giao thức Open Graph của Facebook.
History API cho phép chúng tôi cập nhật URL mà không cần giá trị nhận dạng phân đoạn trong khi vẫn tìm nạp tài nguyên không đồng bộ và nhờ đó tránh được việc tải lại trang – đó là giải pháp tốt nhất cho đôi bên. Giao thức thu thập dữ liệu AJAX (với URL #!/URL mảnh thoát dữ liệu) từng có giá trị, nhưng hiện không nên dùng nữa.
Mẫu PWA kết hợp và PWA phía ứng dụng của chúng tôi cho thấy History API.
Các phương pháp hay nhất:
Cung cấp các URL không dùng giá trị nhận dạng phân đoạn (# hoặc #!), chẳng hạn như:
https://www.example.com/product/25/
Nếu bạn kết xuất phía ứng dụng hoặc kết xuất kết hợp, hãy nhớ hỗ trợ thao tác trên trình duyệt bằng History API.
Tránh:
Bạn không nên sử dụng cấu trúc URL #! để tạo ra URL riêng biệt:
https://www.example.com/#!product/25/
Đây từng là giải pháp trước khi History API ra mắt. Nó được coi là một mô hình riêng biệt khác với cấu trúc URL # đơn thuần.
Việc sử dụng cấu trúc URL # không đi kèm với biểu tượng ! sẽ không được hỗ trợ:
https://www.example.com/#product/25/
Cấu trúc URL này từng là một khái niệm trên web và liên quan đến việc liên kết sâu tới nội dung trên một trang cụ thể.
Chỉ định URL chính tắc
Tại sao? Cách tốt nhất để tránh nhầm lẫn trong việc lập chỉ mục khi cùng một nội dung có sẵn trên nhiều URL (dù là cùng miền hay khác miền) là đánh dấu một trang là phiên bản chính tắc đồng thời tất cả trang khác có cùng nội dung đều phải tham chiếu đến trang đó.
Các phương pháp hay nhất:
Đưa thẻ sau vào tất cả các trang phản ánh cùng một phần nội dung cụ thể:
<link rel="canonical" href="https://www.example.com/your-url/" />
Nếu bạn đang hỗ trợ Accelerated Mobile Pages, hãy nhớ dùng đúng hướng dẫn tương ứng về rel="amphtml".
Tránh:
Tránh việc chủ đích sử dụng nội dung trùng lặp trên nhiều URL mà không sử dụng yếu t��� liên kết rel="canonical".
Ví dụ: yếu tố liên kết rel="canonical" có thể giúp làm rõ các URL có tham số theo dõi.
Tránh tạo các lượt tham chiếu trang chính tắc xung đột giữa các trang.
Thiết kế cho nhiều thiết bị
Tại sao? Quan trọng là tất cả người dùng của bạn có được trải nghiệm tốt nhất có thể khi xem trang web của bạn, bất kể họ dùng thiết bị gì.
Hãy đảm bảo trang web của bạn có thiết kế thích ứng – phông chữ, lề, khoảng đệm, nút và thiết kế chung của trang web nên thay đổi tỷ lệ một cách linh động dựa trên độ phân giải màn hình và khung nhìn trên thiết bị.
Các hình ảnh nhỏ bị phóng to cho máy tính hoặc máy tính bảng là điều có thể gây ra trải nghiệm không hay. Ngược lại, các hình ảnh có độ phân giải siêu cao lại mất nhiều thời gian để tải xuống điện thoại di động và có thể ảnh hưởng đến hiệu suất của thao tác cuộn trên thiết bị di động.
Đọc thêm về Trải nghiệm người dùng trên PWA.
Các phương pháp hay nhất:
Sử dụng thuộc tính srcset để tìm nạp hình ảnh theo nhiều độ phân giải cho nhiều mức mật độ màn hình để tránh tải hình ảnh lớn hơn khả năng hiển thị của màn hình thiết bị.
Điều chỉnh kích thước phông chữ và chiều cao dòng để đảm bảo văn bản dễ đọc bất kể kích thước của thiết bị. Tương tự, hãy đảm bảo khoảng đệm và lề của các phần tử cũng được điều chỉnh theo tỷ lệ hợp lý.
Kiểm tra theo nhiều độ phân giải màn hình bằng Chế độ thiết bị của Công cụ dành cho nhà phát triển Chrome và Công cụ kiểm tra tính thân thiện với thiết bị di động.
Đừng cho người dùng thấy nội dung khác với nội dung bạn cho Google thấy. Nếu bạn sử dụng tính năng chuyển hướng hoặc phát hiện tác nhân người dùng (còn gọi là phát hiện trình duyệt hoặc phân phát động) để thay đổi thiết kế của trang web theo loại thiết bị, điều quan trọng là chính nội dung đó vẫn được giữ nguyên.
Sử dụng công cụ "Tìm nạp như Google" trong Search Console để xác minh việc nội dung do Google tìm nạp khớp với nội dung mà người dùng nhìn thấy.
Vì lý do liên quan đến tính hữu dụng, hãy tránh sử dụng phông chữ có kích thước cố định.
Phát triển lặp lại
Tại sao? Một trong những cách an toàn nhất nên thực hiện khi thêm tính năng vào ứng dụng web là lặp lại thay đổi. Nếu thêm dần từng tính năng một, bạn có thể quan sát tác động của từng thay đổi.
Ngược lại, nhiều nhà phát triển muốn xem ứng dụng web tiến bộ của họ như một cơ hội để cải thiện toàn bộ trang web dành cho thiết bị di động của họ trong một lần — phát triển ứng dụng web mới trong một môi trường biệt lập rồi thay thế trang web hiện tại dành cho thiết bị di động khi ứng dụng đó sẵn sàng.
Khi phát triển các tính năng bằng cách lặp lại, hãy thử chia các thay đổi thành nhiều phần riêng biệt. Ví dụ: nếu bạn định chuyển từ kết xuất phía máy chủ sang kết xuất kết hợp, hãy xem đó là một vòng lặp duy nhất — thay vì kết hợp với các tính năng khác.
Cả hai phương thức đều có điểm mạnh và điểm yếu riêng. Việc lặp lại làm giảm sự phức tạp trong việc xử lý khả năng lập chỉ mục, do quá trình chuyển đổi diễn ra liên tục. Tuy nhiên, việc lặp lại có thể dẫn đến quá trình phát triển chậm hơn và ít đổi mới hơn nếu quá trình phát triển không bắt đầu từ đầu.
Dù trong trường hợp nào, khía cạnh nhạy cảm nhất mà bạn cần lưu ý là URL chính tắc và cấu hình tệp robots.txt của bạn.
Các phương pháp hay nhất:
Lặp lại từng bước trên trang web của bạn bằng cách thêm từng tính năng một.
Ví dụ: nếu bạn chưa hỗ trợ HTTPS thì hãy bắt đầu bằng cách chuyển sang một trang an toàn.
Tránh:
Nếu bạn đã phát triển ứng dụng web tiến bộ trong một môi trường biệt lập, hãy tránh chạy ứng dụng đó khi chưa kiểm tra xem các đường liên kết chính tắc và tệp robots.txt đã được thiết lập cho phù hợp hay chưa.
Hãy đảm bảo các đường liên kết rel-canonical của bạn trỏ đến trang web thực sự và cấu hình robots.txt của bạn cho phép trình thu thập dữ liệu thu thập dữ liệu trên trang web mới của bạn.
Việc ngăn trình thu thập dữ liệu lập chỉ mục trang web đang trong quá trình phát triển trước khi ra mắt là hợp lý, nhưng đừng quên bỏ chặn trình thu thập dữ liệu truy cập trang web mới của bạn khi bạn ra mắt.
Sử dụng chiến lược Cải tiến tăng dần
Tại sao? Điều quan trọng là phát hiện tính năng của trình duyệt bất cứ khi nào có thể trước khi sử dụng chúng. Việc phát hiện tính năng cũng tốt hơn việc kiểm tra theo những trình duyệt mà bạn cho rằng có hỗ trợ một tính năng cụ thể nào đó.
Một phương pháp kém hiệu quả thường gặp trước đây là bật hoặc tắt tính năng bằng cách kiểm tra xem người dùng có trình duyệt nào. Tuy nhiên, do các trình duyệt không ngừng phát triển các tính năng, bạn không nên dùng kỹ thuật này.
Service Worker là một công nghệ tương đối mới. Điều quan trọng là không phá vỡ tính tương thích trong quá trình phát triển. Đây là một ví dụ hoàn hảo về thời điểm sử dụng chiến lược cải tiến tăng dần.
Các phương pháp hay nhất:
Trước khi đăng ký Service Worker, hãy kiểm tra API hiện có:
if ('serviceWorker' in navigator) {
...
Sử dụng phương pháp phát hiện theo API cho tất cả tính năng của trang web của bạn.
Đừng bao giờ dùng tác nhân người dùng của trình duyệt để bật hoặc tắt tính năng này trong ứng dụng web của bạn. Hãy luôn kiểm tra xem có API của tính năng đó hay không rồi xuống cấp nhẹ nếu không có sẵn.
Tránh cập nhật hay ra mắt trang web của bạn khi chưa kiểm tra trên nhiều trình duyệt! Kiểm tra số liệu phân tích trang web để tìm hiểu xem trình duyệt nào phổ biến nhất trong cơ sở người dùng của bạn.
Kiểm thử bằng Search Console
Tại sao? Điều quan trọng là nắm được cách Google Tìm kiếm nhìn thấy nội dung trên trang web của bạn. Bạn có thể sử dụng Search Console để tìm nạp từng URL trên trang web của mình và xem cách Google Tìm kiếm nhìn thấy các URL này bằng cách sử dụng tính năng "Thu thập dữ liệu > Tìm nạp như Google". Search Console sẽ xử lý JavaScript của bạn và kết xuất trang khi tuỳ chọn đó được chọn; nếu không sẽ chỉ có phản hồi HTML thô xuất hiện.
Google Search Console cũng phân tích nội dung trên trang của bạn theo nhiều cách, bao gồm cả phát hiện sự hiện diện của Dữ liệu có cấu trúc, Thẻ thông tin chi tiết, Đường liên kết của trang web và Accelerated Mobile Pages.
Các phương pháp hay nhất:
Giám sát trang web của bạn bằng cách sử dụng Search Console và khám phá các tính năng trong đó, chẳng hạn như "Tìm nạp như Google".
Cung cấp Sơ đồ trang web qua phần Thu thập dữ liệu > Sơ đồ trang web trên Search Console. Đây có thể là một cách hiệu quả để đảm bảo rằng Google Search nhận biết được tất cả các trang trên trang web của bạn.
Chú thích bằng dữ liệu có cấu trúc Schema.org
Tại sao? Dữ liệu có cấu trúc schema.org là bộ từ điển linh hoạt giúp tóm tắt các phần quan trọng nhất trên trang của bạn dưới dạng dữ liệu mà máy xử lý được. Từ việc đơn giản nói rằng một trang là NewsArticle cho đến cụ thể hơn như cung cấp thông tin chi tiết về vị trí, tên ban nhạc, địa điểm và bên bán vé cho một ban nhạc lưu diễn, hoặc tóm tắt các nguyên liệu và các bước thực hiện một công thức nấu ăn.
Có thể việc sử dụng loại siêu dữ liệu này không phù hợp cho một số ứng dụng web của bạn, nhưng bạn nên dùng khi phù hợp. Google trích xuất dữ liệu này sau khi kết xuất trang.
Có nhiều loại dữ liệu, trong đó có thể kể đến NewsArticle, Recipe và Product. Bạn cũng có thể khám phá tất cả loại dữ liệu được hỗ trợ tại đây.
Các phương pháp hay nhất:
Xác minh rằng dữ liệu meta Schema.org đã chính xác bằng cách dùng Công cụ kiểm tra dữ liệu có cấu trúc của Google.
Kiểm tra để đảm bảo dữ liệu bạn cung cấp có xuất hiện và không gặp lỗi nào.
Tránh sử dụng loại dữ liệu không phù hợp với nội dung thực tế của trang. Ví dụ: không sử dụng Recipe cho áo thun bạn đang bán mà hãy dùng Product.
Chú thích bằng Open Graph và Twitter Cards
Tại sao? Ngoài siêu dữ liệu Schema.org, có thể bạn cũng nên hỗ trợ giao thức Open Graph của Facebook và thẻ thông tin chi tiết của Twitter.
Các định dạng siêu dữ liệu này giúp cải thiện trải nghiệm người dùng khi nội dung của bạn được chia sẻ trên mạng xã hội tương ứng.
Nếu trang web hay ứng dụng web hiện tại của bạn sử dụng các định dạng này, điều quan trọng là đảm bảo rằng chúng cũng có trong ứng dụng web tiến bộ của bạn cũng như đảm bảo hiệu ứng dây chuyền tối ưu.
Các phương pháp hay nhất:
Kiểm tra mã đánh dấu Open Graph bằng Object Debugger Tool (Công cụ gỡ lỗi đối tượng) của Facebook.
Làm quen với định dạng siêu dữ liệu của Twitter.
Đừng quên dùng cả các định dạng này nếu trang web hiện tại của bạn có hỗ trợ.
Kiểm tra trên nhiều trình duyệt
Tại sao? Rõ ràng là từ phía người dùng, điều quan trọng là một trang web hoạt động nhất quán trên mọi trình duyệt. Tuy trải nghiệm có thể thay đổi để thích ứng với kích thước màn hình, nhưng tất cả chúng ta đều mong đợi một trang web dành cho thiết bị di động sẽ hoạt động nhất quán trên các thiết bị có kích thước tương đồng, cho dù đó là điện thoại di động iPhone hay Android.
Tuy môi trường web không đồng nhất do số lượng lớn trình duyệt được sử dụng trên toàn thế giới, nhưng chính sự đa dạng và cạnh tranh này lại góp phần khiến môi trường web trở thành một nền tảng đổi mới đến vậy. Thật may là các tiêu chuẩn web đang hoàn thiện hơn bao giờ hết, đồng thời các công cụ hiện đại cho phép nhà phát triển xây dựng các trang web giàu định dạng và thoải mái tương thích với nhiều trình duyệt.
Các phương pháp hay nhất:
Dùng các công cụ kiểm tra trên nhiều trình duyệt, chẳng hạn như BrowserStack.com, Browserling.com hoặc BrowserShots.org để đảm bảo PWA của bạn tương thích với nhiều trình duyệt.
Đo hiệu suất tải trang
Tại sao? Trang web càng tải nhanh thì trải nghiệm của người dùng càng tốt. Việc tối ưu hoá tốc độ trang luôn là một trọng tâm phổ biến trong quá trình phát triển web. Nhưng đôi khi trong quá trình phát triển một phiên bản mới cho trang web, việc tối ưu hoá này lại không được coi là ưu tiên hàng đầu.
Khi phát triển một ứng dụng web tiến bộ, bạn nên đo hiệu suất tải trang và tối ưu hoá trước khi ra mắt trang web để có được kết quả tốt nhất.
Các phương pháp hay nhất:
Sử dụng các công cụ như Page Speed Insights và Công cụ kiểm tra trang web để đo lường hiệu suất tải trang của trang web của bạn. Tuy Googlebot có chút kiên nhẫn hơn trong quá trình kết xuất, nhưng nghiên cứu cho thấy 40% người tiêu dùng sẽ rời khỏi một trang mất hơn 3 giây để tải trang.
Đọc thêm về các đề xuất liên quan đến hiệu suất của trang web cũng như lộ trình kết xuất trọng yếu (critical rendering path) tại đây.
Tránh coi việc tối ưu hoá là một bước sau khi ra mắt. Nếu nội dung trang web của bạn tải nhanh trước khi chuyển sang một ứng dụng web tiến bộ mới, thì điều quan trọng khả năng tối ưu hoá này không giảm xuống.
Chúng tôi hy vọng rằng danh sách kiểm tra nêu trên có thể giúp ích cho bạn và đưa ra hướng dẫn phù hợp giúp bạn phát triển Ứng dụng web tiến bộ sao cho cải thiện được khả năng được lập chỉ mục.
Khi bạn bắt đầu, hãy đảm bảo kiểm tra mẫu khả năng lập chỉ mục Ứng dụng web tiến bộ minh hoạ cho quy trình kết xuất phía máy khách, phía máy chủ và kết hợp. Như thường lệ, nếu bạn có thắc mắc, vui lòng liên hệ với chúng tôi trên Diễn đàn quản trị viên trang web.