Sử dụng PushState và tiền phân tích
Cách hiện tại (2015) để làm điều này là sử dụng phương thức JavaScript PushState.
PushState thay đổi URL trong thanh trình duyệt hàng đầu mà không cần tải lại trang. Giả sử bạn có một trang chứa các tab. Các tab ẩn và hiển thị nội dung và nội dung được chèn động, bằng cách sử dụng AJAX hoặc chỉ đơn giản là cài đặt hiển thị: none và display: chặn để ẩn và hiển thị nội dung tab chính xác.
Khi các tab được nhấp, sử dụng PushState để cập nhật url trong thanh địa chỉ. Khi trang được hiển thị, sử dụng giá trị trong thanh địa chỉ để xác định tab nào sẽ hiển thị. Định tuyến góc sẽ làm điều này cho bạn tự động.
Phân hủy
Có hai cách để truy cập Ứng dụng Trang đơn PushState (SPA)
- Thông qua PushState, nơi người dùng nhấp vào liên kết PushState và nội dung được AJAXed in.
- Bằng cách nhấn URL trực tiếp.
Lần truy cập đầu tiên trên trang web sẽ liên quan đến việc nhấn URL trực tiếp. Các lần truy cập tiếp theo sẽ chỉ đơn giản là AJAX trong nội dung khi PushState cập nhật URL.
Trình thu thập thông tin thu thập liên kết từ một trang sau đó thêm chúng vào hàng đợi để xử lý sau. Điều này có nghĩa là đối với trình thu thập thông tin, mỗi lần truy cập trên máy chủ là lần truy cập trực tiếp, họ không điều hướng qua Pushstate.
Phân tích bó gói tải trọng ban đầu vào phản hồi đầu tiên từ máy chủ, có thể là một đối tượng JSON. Điều này cho phép Công cụ tìm kiếm hiển thị trang mà không cần thực hiện cuộc gọi AJAX.
Có một số bằng chứng cho thấy Google có thể không thực hiện các yêu cầu AJAX. Thêm về điều này ở đây:
https://web.archive.org/web/20160318211223/http://www.analog-ni.co/precompose-a-spa-may-become-the-holy-grail-to-seo
Công cụ tìm kiếm có thể đọc và thực thi JavaScript
Google đã có thể phân tích cú pháp JavaScript một thời gian rồi, đó là lý do ban đầu họ phát triển Chrome, để hoạt động như một trình duyệt không đầu đầy đủ tính năng cho nhện Google. Nếu một liên kết có thuộc tính href hợp lệ, URL mới có thể được lập chỉ mục. Không còn gì để làm.
Nếu nhấp vào liên kết ngoài ra sẽ kích hoạt cuộc gọi PushState, trang web có thể được điều hướng bởi người dùng thông qua PushState.
Công cụ tìm kiếm hỗ trợ cho các URL PushState
PushState hiện được Google và Bing hỗ trợ.
Google
Dưới đây là Matt Cutts trả lời câu hỏi của Paul Irish về PushState cho SEO:
http://youtu.be/yiAF9VdvRPw
Dưới đây là Google thông báo hỗ trợ JavaScript đầy đủ cho spider:
http://googlewebmastercentral.blogspot.de/2014/05/under Hiểu-web-Pages-better.html
Kết quả cuối cùng là Google hỗ trợ PushState và sẽ lập chỉ mục các URL PushState.
Xem thêm công cụ quản trị trang web của Google 'tìm nạp như Googlebot. Bạn sẽ thấy JavaScript của bạn (bao gồm Angular) được thực thi.
Bing
Dưới đây là thông báo hỗ trợ của Bing cho các URL PushState đẹp ngày tháng 3 năm 2013:
http://bloss.bing.com/webmaster/2013/03/21/search-engine-optimization-best-practices-for-ajax-urls/
Đừng sử dụng HashBangs #!
Các url Hashbang là một điểm dừng xấu xí yêu cầu nhà phát triển cung cấp phiên bản được kết xuất sẵn của trang web tại một vị trí đặc biệt. Chúng vẫn hoạt động, nhưng bạn không cần sử dụng chúng.
URL Hashbang trông như thế này:
domain.com/#!path/to/resource
Điều này sẽ được kết hợp với một metatag như thế này:
<meta name="fragment" content="!">
Google sẽ không lập chỉ mục cho chúng ở dạng này, nhưng thay vào đó sẽ lấy một phiên bản tĩnh của trang web từ URL _esc hành_fragments_ và lập chỉ mục đó.
URL Pushstate trông giống như bất kỳ URL thông thường:
domain.com/path/to/resource
Sự khác biệt là Angular xử lý chúng cho bạn bằng cách chặn thay đổi thành document.location xử lý nó trong JavaScript.
Nếu bạn muốn sử dụng URL PushState (và có thể bạn sẽ làm), hãy loại bỏ tất cả các URL và thẻ meta kiểu băm cũ và chỉ cần bật chế độ HTML5 trong khối cấu hình của bạn.
Kiểm tra trang web của bạn
Các công cụ quản trị trang web của Google hiện chứa một công cụ cho phép bạn tìm nạp URL dưới dạng google và hiển thị JavaScript khi Google kết xuất lại.
https://www.google.com/webmasters/tools/googlebot-fetch
Tạo URL PushState trong Angular
Để tạo các URL thực trong Angular, thay vì # tiền tố, hãy đặt chế độ HTML5 trên đối tượng $ locationProvider của bạn.
$locationProvider.html5Mode(true);
Phía máy chủ
Vì bạn đang sử dụng các URL thực, bạn sẽ cần đảm bảo cùng một mẫu (cộng với một số nội dung được phân tách sẵn) được máy chủ của bạn cung cấp cho tất cả các URL hợp lệ. Cách bạn làm điều này sẽ thay đổi tùy thuộc vào kiến trúc máy chủ của bạn.
Sơ đồ trang web
Ứng dụng của bạn có thể sử dụng các hình thức điều hướng khác thường, ví dụ như di chuột hoặc cuộn. Để đảm bảo Google có thể điều khiển ứng dụng của bạn, tôi có thể khuyên bạn nên tạo một sơ đồ trang web, một danh sách đơn giản gồm tất cả các url mà ứng dụng của bạn phản hồi. Bạn có thể đặt mục này tại vị trí mặc định (/ sitemap hoặc /sitemap.xml) hoặc cho Google biết về nó bằng các công cụ quản trị trang web.
Dù sao thì cũng nên có một sơ đồ trang web.
Hỗ trợ trình duyệt
Pushstate hoạt động trong IE10. Trong các trình duyệt cũ hơn, Angular sẽ tự động quay lại URL kiểu băm
Một trang demo
Nội dung sau được hiển thị bằng URL đẩy với tiền xử lý:
http://html5.gingerhost.com/london
Như có thể xác minh, tại liên kết này , nội dung được lập chỉ mục và xuất hiện trong Google.
Phục vụ mã trạng thái 404 và 301 Header
Vì công cụ tìm kiếm sẽ luôn truy cập máy chủ của bạn cho mọi yêu cầu, bạn có thể cung cấp mã trạng thái tiêu đề từ máy chủ của mình và mong đợi Google sẽ xem chúng.