Làm thế nào để các công cụ tìm kiếm đối phó với các ứng dụng AngularJS?


697

Tôi thấy hai vấn đề với ứng dụng AngularJS liên quan đến công cụ tìm kiếm và SEO:

1) Điều gì xảy ra với các thẻ tùy chỉnh? Các công cụ tìm kiếm có bỏ qua toàn bộ nội dung trong các thẻ đó không? tức là giả sử tôi có

<custom>
  <h1>Hey, this title is important</h1>
</custom>

sẽ <h1>được lập chỉ mục mặc dù nằm trong thẻ tùy chỉnh?


2) Có cách nào để tránh các công cụ tìm kiếm lập chỉ mục {{}} liên kết theo nghĩa đen không? I E

<h2>{{title}}</h2>

Tôi biết tôi có thể làm một cái gì đó như

<h2 ng-bind="title"></h2>

Nhưng nếu tôi thực sự muốn cho trình thu thập thông tin "xem" tiêu đề thì sao? Là kết xuất phía máy chủ là giải pháp duy nhất?


17
tất cả những "giải pháp" này chỉ khiến tôi muốn tránh xa các công nghệ như AngularJS, ít nhất là cho đến khi google và tất cả đều có trình thu thập thông minh hơn.
Codemonkey

22
@Codemonkey: Có ai đó sẽ thắc mắc tại sao tất cả AngularJS là sản phẩm của Google không đưa ra giải pháp tích hợp cho việc này .. Wierd thực sự ..
Roy MJ

11
Trên thực tế, Misko đã viết Angular trước khi anh làm việc cho Google. Google hiện tài trợ cho dự án, nhưng họ không phải là người khởi tạo.
siêu sáng

2
Có lẽ ai đó ở đây có thể / nên cập nhật bài viết trên Wikipedia về SPA, trong đó nêu rõ "Các SPA thường không được sử dụng trong bối cảnh mà việc lập chỉ mục công cụ tìm kiếm là một yêu cầu hoặc mong muốn." en.wikipedia.org/wiki/Single-page_application [# Search Engine Optimization] Theres một đoạn lớn về một (che khuất) java dựa trên khuôn khổ gọi IsNat nhưng không có ý kiến cho rằng SEO đã được giải quyết bằng những cái tên như Angularjs.
linojon

3
@Roy MJ - Tại sao không ai thấy ý định? PageSpeed, Angular, v.v ... đều là kẻ thù của danh sách tự nhiên, hữu cơ trên SERPs. Cố ý Khi bạn có một mô hình kinh doanh khổng lồ dựa trên các lần nhấp trả tiền ... làm thế nào tốt hơn để buộc mọi người trả tiền cho danh sách của họ hơn là tạo toàn bộ hộp công cụ sẽ không cho họ lựa chọn nào, nhưng phải làm như vậy? Thay vì xây dựng các trang web chất lượng chứa đầy nội dung có giá trị, ngành công nghiệp này hiện đang tràn ngập các mánh gian lận và giải pháp không đạt được hoặc giải quyết vấn đề ngồi xổm.
Steven Ventimiglia

Câu trả lời:


403

Cập nhật tháng 5 năm 2014

Trình thu thập dữ liệu của Google hiện thực thi javascript - bạn có thể sử dụng Công cụ quản trị trang web của Google để hiểu rõ hơn cách các trang web của bạn được hiển thị bởi Google.

Câu trả lời gốc
Nếu bạn muốn tối ưu hóa ứng dụng của mình cho các công cụ tìm kiếm, thật không may, không có cách nào để phục vụ một phiên bản được kết xuất sẵn cho trình thu thập thông tin. Bạn có thể đọc thêm về các đề xuất của Google cho các trang web nặng về ajax và javascript tại đây .

Nếu đây là một tùy chọn tôi khuyên bạn nên đọc bài viết này về cách làm SEO cho Angular với kết xuất phía máy chủ.

Tôi không chắc chắn trình thu thập thông tin sẽ làm gì khi gặp các thẻ tùy chỉnh.


13
Điều này không còn hiện tại. Bây giờ bạn nên sử dụng PushState thay thế. Không cần phải phục vụ một phiên bản tĩnh riêng của trang web.
siêu sáng

3
ngay cả với bản cập nhật google, ng-view sẽ không được hiển thị chính xác, như tôi có thể thấy trong các công cụ Google Webmaster
tschiela

10
Vâng chỉ vì họ thực thi javascript không có nghĩa là trang của bạn sẽ được lập chỉ mục đúng. Cách an toàn nhất là phát hiện người dùng google bot, sử dụng trình duyệt không đầu như ph Phantomjs, lấy page.contentvà trả về html tĩnh.
người kiểm tra

6
Tôi nhận ra câu hỏi này dành riêng cho SEO, nhưng hãy nhớ rằng các trình thu thập thông tin khác (Facebook, Twitter, v.v.) vẫn chưa thể đánh giá JavaScript. Chẳng hạn, việc chia sẻ các trang trên các trang truyền thông xã hội sẽ vẫn là một vấn đề nếu không có chiến lược kết xuất phía máy chủ.
Stephen Watkins

3
Xin vui lòng, ai đó có thể đưa ra một ví dụ về trang web AngularJS được lập chỉ mục chính xác mà không thực hiện đặc tả sơ đồ thu thập dữ liệu của Google không?
kiểm tra

470

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)

  1. 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.
  2. 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.


Tôi phải xem xét điều này - cảm ơn vì lời giải thích. Một điều tôi luôn băn khoăn là, bây giờ google có chạy javascript trước khi lập chỉ mục trang không?
jvv

1
"PushState thay đổi URL trong thanh trình duyệt trên cùng mà không cần tải lại trang ... Khi các tab được nhấp, hãy sử dụng PushState để cập nhật url trong thanh địa chỉ. Khi trang được hiển thị, hãy sử dụng giá trị trong thanh địa chỉ để xác định tab để hiển thị. Định tuyến góc sẽ tự động làm việc này cho bạn. " Bóng đèn!
atconway

1
@superluminary, bạn có thể, xin vui lòng, giải thích chủ đề sâu hơn một chút? Đặc biệt là phần 'Máy chủ'. Tôi đang sử dụng angularjs + angularjs-route + locationProvider.html5Mode + api + điều hướng động (không phải là tĩnh như trên html5.gingerhost.com. Các URL được hiển thị tốt, tuy nhiên nội dung dường như không được lập chỉ mục. Tôi có thực sự bối rối trước thông báo này: >> bạn sẽ cần đảm bảo cùng một mẫu được máy chủ của bạn gửi cho tất cả các URL hợp lệ. Bạn có thể giải thích về nó không? trước.
Sray

1
@sray - Nếu mọi URL trên trang web của bạn đang phục vụ cùng một mẫu, trình duyệt sẽ có thể lấy mẫu đó và Angular sẽ có thể lấy nó từ đó, bằng cách kiểm tra URL và hiển thị nội dung chính xác. Nếu nhấn URL đó trực tiếp trên máy chủ sẽ trả về 404 hoặc 500 thì bạn gặp sự cố, liên kết trực tiếp sẽ không hoạt động, dấu trang sẽ không hoạt động và bạn sẽ không được lập chỉ mục. Bạn có thấy bây giờ không?
siêu sáng

1
@ user3339411 - Bạn nên có một URL cho mỗi trang mà trang web của bạn sẽ phản hồi. Nếu trang web của bạn chỉ cần phản hồi một URL với một bộ nội dung, bạn hoàn toàn không cần định tuyến. Điều này là tốt cho một trang web đơn giản. Tuy nhiên, nếu trang web của bạn mang lại dữ liệu khác nhau (thông qua JSON) cho các URL khác nhau, thì việc sử dụng định tuyến là hợp lý. Vì các trang tĩnh Github dựa trên tệp, nên bạn sẽ cần một tệp html thực tế sao lưu từng URL trong trường hợp này. Không có quy tắc nào cho thấy một trang web phải dựa trên tệp và nếu bạn sử dụng một nền tảng thay thế, bạn có thể cung cấp cùng một mẫu cho nhiều URL.
siêu sáng

107

Hãy dứt khoát về AngularJS và SEO

Google, Yahoo, Bing và các công cụ tìm kiếm khác thu thập dữ liệu trên web theo cách truyền thống bằng cách sử dụng trình thu thập thông tin truyền thống. Họ chạy các robot thu thập dữ liệu HTML trên các trang web, thu thập thông tin trên đường đi. Họ giữ những từ thú vị và tìm kiếm các liên kết khác đến các trang khác (những liên kết này, số lượng chúng và số lượng chúng đi vào hoạt động với SEO).

Vậy tại sao công cụ tìm kiếm không xử lý các trang web javascript?

Câu trả lời liên quan đến thực tế là các robot công cụ tìm kiếm hoạt động thông qua các trình duyệt không đầu và chúng thường không có công cụ kết xuất javascript để hiển thị javascript của trang. Điều này hoạt động với hầu hết các trang vì hầu hết các trang tĩnh không quan tâm đến việc hiển thị JavaScript trang của họ, vì nội dung của chúng đã có sẵn.

Có thể làm gì về nó?

May mắn thay, trình thu thập thông tin của các trang web lớn hơn đã bắt đầu thực hiện một cơ chế cho phép chúng tôi làm cho các trang web JavaScript của chúng tôi có thể thu thập dữ liệu, nhưng nó yêu cầu chúng tôi thực hiện thay đổi đối với trang web của mình .

Nếu chúng ta thay đổi của chúng tôi hashPrefix#!thay vì chỉ đơn giản #, sau đó công cụ tìm kiếm hiện đại sẽ thay đổi theo yêu cầu để sử dụng _escaped_fragment_thay vì #!. (Với chế độ HTML5, tức là nơi chúng tôi có các liên kết không có tiền tố băm, chúng tôi có thể triển khai tính năng tương tự này bằng cách xem User Agenttiêu đề trong phần phụ trợ của chúng tôi).

Điều đó có nghĩa là, thay vì một yêu cầu từ một trình duyệt bình thường trông như:

http://www.ng-newsletter.com/#!/signup/page

Một công cụ tìm kiếm sẽ tìm kiếm trang với:

http://www.ng-newsletter.com/?_escaped_fragment_=/signup/page

Chúng tôi có thể đặt tiền tố băm của các ứng dụng Angular bằng phương thức tích hợp từ ngRoute:

angular.module('myApp', [])
.config(['$location', function($location) {
  $location.hashPrefix('!');
}]);

Và, nếu chúng tôi đang sử dụng html5Mode, chúng tôi sẽ cần thực hiện điều này bằng cách sử dụng thẻ meta:

<meta name="fragment" content="!">

Nhắc nhở, chúng tôi có thể thiết lập html5Mode()với $locationdịch vụ:

angular.module('myApp', [])
.config(['$location', 
function($location) {
  $location.html5Mode(true);
}]);

Xử lý công cụ tìm kiếm

Chúng tôi có rất nhiều cơ hội để xác định cách chúng tôi xử lý việc cung cấp nội dung thực sự cho các công cụ tìm kiếm dưới dạng HTML tĩnh. Chúng tôi có thể tự lưu trữ một phụ trợ, chúng tôi có thể sử dụng một dịch vụ để lưu trữ back-end cho chúng tôi, chúng tôi có thể sử dụng proxy để phân phối nội dung, v.v. Hãy xem một vài lựa chọn:

Tự lưu trữ

Chúng tôi có thể viết một dịch vụ để xử lý việc thu thập dữ liệu trang web của chính chúng tôi bằng trình duyệt không đầu, như ph Phantomjs hoặc zombiejs, chụp ảnh nhanh trang với dữ liệu được hiển thị và lưu trữ dưới dạng HTML. Bất cứ khi nào chúng tôi thấy chuỗi truy vấn ?_escaped_fragment_trong yêu cầu tìm kiếm, chúng tôi có thể phân phối ảnh chụp nhanh HTML tĩnh mà chúng tôi đã lấy trang thay vì trang được kết xuất trước chỉ thông qua JS. Điều này đòi hỏi chúng ta phải có một phụ trợ cung cấp các trang của chúng tôi với logic có điều kiện ở giữa. Chúng ta có thể sử dụng một cái gì đó như phụ trợ của prerender.io làm điểm khởi đầu để tự chạy cái này. Tất nhiên, chúng ta vẫn cần xử lý việc ủy ​​quyền và xử lý đoạn mã, nhưng đó là một khởi đầu tốt.

Với dịch vụ trả phí

Cách dễ nhất và nhanh nhất để đưa nội dung vào công cụ tìm kiếm là sử dụng dịch vụ Brombone , seo.js , seo4ajaxprerender.io là những ví dụ điển hình trong số này sẽ lưu trữ kết xuất nội dung trên cho bạn. Đây là một lựa chọn tốt cho những lúc chúng ta không muốn đối phó với việc chạy máy chủ / proxy. Ngoài ra, nó thường siêu nhanh.

Để biết thêm thông tin về Angular và SEO, chúng tôi đã viết một hướng dẫn mở rộng về nó tại http://www.ng-newsletter.com/posts/serious-angular-seo.html chúng tôi chi tiết hơn nữa trong cuốn sách ng-book của chúng tôi : Cuốn sách hoàn chỉnh về AngularJS . Kiểm tra nó tại ng-book.com .


1
SEO4Ajax cũng là một ví dụ điển hình về dịch vụ trả phí (miễn phí trong giai đoạn beta). Thật không may, có vẻ như tôi không được phép chỉnh sửa phản hồi này để thêm nó vào danh sách.
check_ca

1
@auser Bạn vẫn khuyên dùng phương pháp này chứ? Các bình luận hàng đầu mới hơn dường như không khuyến khích phương pháp này.
Lycha

Đây là một ví dụ tuyệt vời về lý do tại sao chúng ta không bao giờ nên nói những điều như "hướng dẫn dứt khoát" trong CS :). Các công cụ tìm kiếm lớn hiện thực thi Javascript, vì vậy câu trả lời này cần phải được viết lại hoặc xóa hoàn toàn.
Seb

1
@seb điều này vẫn cần thiết cho giả sử các thẻ biểu đồ mở cần có trong trang khi robot đang thu thập thông tin. Ví dụ thẻ Facebook hoặc Twitter cần nó. Nhưng câu trả lời này nên được cập nhật để tập trung vào HTML5 Pushstate thay vì hashbang hiện không được chấp nhận.
adriendenat

@Grsmto bạn nói đúng! Sau đó, tôi đoán nó sẽ được viết lại bởi vì nó nói rằng các công cụ tìm kiếm lớn không thực thi JS, điều này không còn đúng nữa.
Seb

57

Bạn thực sự nên xem hướng dẫn xây dựng trang AngularJS thân thiện với SEO trong năm của blog moo. Anh ấy dẫn bạn qua tất cả các bước được nêu trong tài liệu của Angular. http://www.yearofmoo.com/2012/11/angularjs-and-seo.html

Sử dụng kỹ thuật này, công cụ tìm kiếm sẽ thấy HTML mở rộng thay vì các thẻ tùy chỉnh.


@Brad Green thậm chí vì vậy câu hỏi đã bị đóng (vì bất kỳ lý do gì) bạn có thể là vị trí để trả lời nó. Tôi đoán tôi phải thiếu thứ gì đó: stackoverflow.com/questions/16224385/iêng
Christoph

41

Điều này đã thay đổi mạnh mẽ.

http://searchengineland.com/bing-offers-recommendations-for-seo-friendly-ajax-suggests-html5-pushstate-152946

Nếu bạn sử dụng: $ locationProvider.html5Mode (true); bạn đã sẵn sàng

Không có nhiều trang kết xuất.


3
Điều này nên được trả lời hàng đầu bây giờ. Chúng tôi đang ở trong năm 2014 và câu trả lời của @joakimbl không còn tối ưu nữa.
Stan

11
Điều này là không chính xác. Bài viết đó (từ tháng 3 năm 2013) không nói gì về việc Bing thực thi javascript. Bing chỉ đơn giản đưa ra một khuyến nghị để sử dụng Pushstate thay vì khuyến nghị trước đây của họ để sử dụng #!. Từ bài viết: "Bing nói với tôi rằng mặc dù họ vẫn hỗ trợ phiên bản #! AJAX có thể thu thập thông tin ban đầu do Google phát hành, nhưng họ thấy nó không được triển khai chính xác trong nhiều thời gian và thay vào đó họ khuyên dùng PushState." Bạn vẫn phải hiển thị HTML tĩnh và phân phát nó cho _escaped_fragment_các URL. Bing / Google sẽ không thực hiện các cuộc gọi javascript / AJAX.
Prerender.io

2
Bạn vẫn cần _escaped_fragment_và hiển thị các trang html thuần túy. Điều này giải quyết không có gì bạn đời.
Stan

Google robot vẫn không thể thấy nội dung động của trang web của tôi, chỉ có trang trống.
calmbird

trang tìm kiếm: mysite.com hiển thị {{staff}}, không phải nội dung được tải qua AngularJS. Như thể trình thu thập thông tin của Google chưa bao giờ nghe nói về JavaScript. Tôi có thể làm gì?
Bộ công cụ

17

Mọi thứ đã thay đổi khá nhiều kể từ khi câu hỏi này được hỏi. Hiện tại có các tùy chọn để cho phép Google lập chỉ mục trang web AngularJS của bạn. Tùy chọn đơn giản nhất tôi tìm thấy là sử dụng dịch vụ miễn phí http://prerender.io sẽ tạo các trang có thể chia sẻ cho bạn và phục vụ điều đó cho các công cụ tìm kiếm. Nó được hỗ trợ trên hầu hết các nền tảng web phía máy chủ. Gần đây tôi đã bắt đầu sử dụng chúng và sự hỗ trợ cũng rất tuyệt vời.

Tôi không có bất kỳ liên kết nào với họ, điều này đến từ một người dùng hạnh phúc.


6
Mã cho prerender.io nằm trên github ( github.com/collectiveip/prerender ) để bất kỳ ai cũng có thể chạy nó trên các máy chủ của riêng mình.
dùng276648

Điều này bây giờ đã lỗi thời là tốt. Xem câu trả lời của @ user3330270 bên dưới.
Les Hazlewood

2
Điều này không lỗi thời. Câu trả lời của @ user3330270 là không chính xác. Bài viết họ liên kết để nói đơn giản là sử dụng Pushstate thay vì #!. Bạn vẫn phải hiển thị các trang tĩnh cho trình thu thập thông tin vì chúng không thực thi javascript.
Prerender.io

9

Trang web riêng của Angular phục vụ nội dung được đơn giản hóa cho các công cụ tìm kiếm: http://docs.angularjs.org/?_escoped_fragment_=/tutorial/step_09

Giả sử ứng dụng Angular của bạn đang sử dụng api JSON do Node.js / Express điều khiển, như thế nào /api/path/to/resource. Có lẽ bạn có thể chuyển hướng bất kỳ yêu cầu với ?_escaped_fragment_tới /api/path/to/resource.html, và sử dụng đàm phán nội dung để làm cho một mẫu HTML của nội dung, chứ không phải trở lại các dữ liệu JSON.

Điều duy nhất là, các tuyến Angular của bạn sẽ cần khớp 1: 1 với API REST của bạn.

EDIT : Tôi nhận ra rằng điều này có khả năng thực sự làm vấy bẩn api REST của bạn và tôi không khuyên bạn nên thực hiện bên ngoài các trường hợp sử dụng rất đơn giản trong đó có thể phù hợp tự nhiên.

Thay vào đó, bạn có thể sử dụng một bộ tuyến đường và bộ điều khiển hoàn toàn khác cho nội dung thân thiện với robot của bạn. Nhưng sau đó, bạn đang sao chép tất cả các tuyến và bộ điều khiển AngularJS của mình trong Node / Express.

Tôi đã quyết định tạo ảnh chụp nhanh bằng trình duyệt không đầu, mặc dù tôi cảm thấy điều đó hơi kém lý tưởng.



7

Đến bây giờ Google đã thay đổi đề xuất thu thập thông tin AJAX của họ.

Thời gian đã thay đổi. Ngày nay, miễn là bạn không chặn Googlebot thu thập dữ liệu tệp JavaScript hoặc CSS của mình, chúng tôi thường có thể kết xuất và hiểu các trang web của bạn như các trình duyệt hiện đại.

tl; dr: [Google] không còn đề xuất đề xuất thu thập thông tin AJAX [Google] được thực hiện vào năm 2009.


@Toolkit có nghĩa là gì?
Thor

1
Googlebot KHÔNG thể phân tích các trang web Angular
Bộ công cụ

4
@Toolkit bạn đang nói chuyện tuyệt đối, trang Angular đầy đủ của tôi đã được google lập chỉ mục với dữ liệu meta động mà không có bất kỳ vấn đề nào
twigg

@twigg bạn có lỗi logic, ý bạn là nếu một (trang web) Angular của bạn được lập chỉ mục, tất cả đều như vậy. Vâng, tôi có một bất ngờ cho bạn. Không có ai trong số tôi được lập chỉ mục. Có thể là do tôi sử dụng bộ định tuyến ui góc cạnh hoặc ai biết tại sao. Thậm chí không có các trang chính mà không có bất kỳ dữ liệu ajax nào
Bộ công cụ

@Toolkit Nếu ngay cả các trang html tĩnh của bạn không được lập chỉ mục, điều này không liên quan gì đến khả năng thu thập dữ liệu của các tệp tin của Google. Nếu bạn đang nói rằng google không thể thu thập dữ liệu đúng cách .. thì tôi nghĩ bạn đã nhầm
phil294

6

Thông số Ajax Crawlable của Google, như được tham chiếu trong các câu trả lời khác ở đây, về cơ bản là câu trả lời.

Nếu bạn quan tâm đến cách các công cụ tìm kiếm và bot xã hội khác giải quyết các vấn đề tương tự, tôi đã viết lên trạng thái nghệ thuật ở đây: http://blog.ajaxsnapshots.com/2013/11/googles-crawlable-ajax-specification.html

Tôi làm việc cho https://ajaxsnapshots.com , một công ty triển khai Thông số Ajax có thể thu thập thông tin dưới dạng dịch vụ - thông tin trong báo cáo đó dựa trên các quan sát từ nhật ký của chúng tôi.


Liên kết không hoạt động trong blog được liệt kê.ajaxsnapshots.com
Kevin

4

Tôi đã tìm thấy một giải pháp thanh lịch sẽ bao gồm hầu hết các căn cứ của bạn. Tôi đã viết về nó ban đầu ở đây và trả lời một câu hỏi StackOverflow tương tự khác ở đây có tham khảo nó.

FYI giải pháp này cũng bao gồm các thẻ dự phòng được mã hóa cứng trong trường hợp Javascript không được trình thu thập thông tin chọn. Tôi đã không phác thảo rõ ràng về nó, nhưng điều đáng nói là bạn nên kích hoạt chế độ HTML5 để được hỗ trợ URL thích hợp.

Cũng lưu ý: đây không phải là các tệp hoàn chỉnh, chỉ là những phần quan trọng của những tệp có liên quan. Nếu bạn cần trợ giúp để viết bản tóm tắt cho các chỉ thị, dịch vụ, vv có thể được tìm thấy ở nơi khác. Dù sao, ở đây đi ...

app.js

Đây là nơi bạn cung cấp siêu dữ liệu tùy chỉnh cho từng tuyến đường của bạn (tiêu đề, mô tả, v.v.)

$routeProvider
   .when('/', {
       templateUrl: 'views/homepage.html',
       controller: 'HomepageCtrl',
       metadata: {
           title: 'The Base Page Title',
           description: 'The Base Page Description' }
   })
   .when('/about', {
       templateUrl: 'views/about.html',
       controller: 'AboutCtrl',
       metadata: {
           title: 'The About Page Title',
           description: 'The About Page Description' }
   })

metadata-service.js (dịch vụ)

Đặt tùy chọn siêu dữ liệu tùy chỉnh hoặc sử dụng mặc định làm dự phòng.

var self = this;

// Set custom options or use provided fallback (default) options
self.loadMetadata = function(metadata) {
  self.title = document.title = metadata.title || 'Fallback Title';
  self.description = metadata.description || 'Fallback Description';
  self.url = metadata.url || $location.absUrl();
  self.image = metadata.image || 'fallbackimage.jpg';
  self.ogpType = metadata.ogpType || 'website';
  self.twitterCard = metadata.twitterCard || 'summary_large_image';
  self.twitterSite = metadata.twitterSite || '@fallback_handle';
};

// Route change handler, sets the route's defined metadata
$rootScope.$on('$routeChangeSuccess', function (event, newRoute) {
  self.loadMetadata(newRoute.metadata);
});

metaproperty.js (chỉ thị)

Gói kết quả dịch vụ siêu dữ liệu cho chế độ xem.

return {
  restrict: 'A',
  scope: {
    metaproperty: '@'
  },
  link: function postLink(scope, element, attrs) {
    scope.default = element.attr('content');
    scope.metadata = metadataService;

    // Watch for metadata changes and set content
    scope.$watch('metadata', function (newVal, oldVal) {
      setContent(newVal);
    }, true);

    // Set the content attribute with new metadataService value or back to the default
    function setContent(metadata) {
      var content = metadata[scope.metaproperty] || scope.default;
      element.attr('content', content);
    }

    setContent(scope.metadata);
  }
};

index.html

Hoàn thành với các thẻ dự phòng được mã hóa cứng được đề cập trước đó, cho các trình thu thập thông tin không thể nhận bất kỳ Javascript nào.

<head>
  <title>Fallback Title</title>
  <meta name="description" metaproperty="description" content="Fallback Description">

  <!-- Open Graph Protocol Tags -->
  <meta property="og:url" content="fallbackurl.com" metaproperty="url">
  <meta property="og:title" content="Fallback Title" metaproperty="title">
  <meta property="og:description" content="Fallback Description" metaproperty="description">
  <meta property="og:type" content="website" metaproperty="ogpType">
  <meta property="og:image" content="fallbackimage.jpg" metaproperty="image">

  <!-- Twitter Card Tags -->
  <meta name="twitter:card" content="summary_large_image" metaproperty="twitterCard">
  <meta name="twitter:title" content="Fallback Title" metaproperty="title">
  <meta name="twitter:description" content="Fallback Description" metaproperty="description">
  <meta name="twitter:site" content="@fallback_handle" metaproperty="twitterSite">
  <meta name="twitter:image:src" content="fallbackimage.jpg" metaproperty="image">
</head>

Điều này sẽ giúp đáng kể với hầu hết các trường hợp sử dụng công cụ tìm kiếm. Nếu bạn muốn kết xuất hoàn toàn động cho trình thu thập dữ liệu mạng xã hội (vốn là iffy trên hỗ trợ Javascript), bạn vẫn sẽ phải sử dụng một trong các dịch vụ kết xuất trước được đề cập trong một số câu trả lời khác.

Hi vọng điêu nay co ich!


Tôi cũng đang theo giải pháp này và nghĩ như vậy trước đó nhưng tôi muốn hỏi rằng công cụ tìm kiếm sẽ đọc nội dung của các thẻ tùy chỉnh.
Ravinder Payal

@RavinderPayal bạn có thể kiểm tra giải pháp này với seoreviewtools.com/html-headings-checker
vijay

2

Sử dụng một cái gì đó như PreRender, nó làm cho các trang tĩnh của trang web của bạn để các công cụ tìm kiếm có thể lập chỉ mục cho nó.

Tại đây bạn có thể tìm hiểu những nền tảng nào có sẵn: https://prerender.io/documentation/install-middleware#asp-net


góc cạnh là để giảm bớt công việc hoặc chỉ làm cho các hoạt động tốn kém hơn và mất thời gian
Ravinder Payal

2

Với Angular Universal, bạn có thể tạo các trang đích cho ứng dụng trông giống như ứng dụng hoàn chỉnh và sau đó tải ứng dụng Angular của bạn đằng sau nó.
Angular Universal tạo HTML thuần có nghĩa là các trang không có javascript ở phía máy chủ và phục vụ chúng cho người dùng mà không bị trì hoãn. Vì vậy, bạn có thể đối phó với bất kỳ trình thu thập thông tin, bot và người dùng nào (những người đã có tốc độ mạng và tốc độ mạng thấp). Sau đó, bạn có thể chuyển hướng chúng bằng các liên kết / nút đến ứng dụng góc thực tế đã được tải phía sau nó. Giải pháp này được đề xuất bởi trang web chính thức. -Nhiều thông tin về SEO và Angular Universal-


1

Trình thu thập thông tin (hoặc bot) được thiết kế để thu thập nội dung HTML của các trang web nhưng do hoạt động AJAX để tìm nạp dữ liệu không đồng bộ, điều này đã trở thành một vấn đề vì đôi khi phải hiển thị trang và hiển thị nội dung động trên đó. Tương tự, AngularJScũng sử dụng mô hình không đồng bộ, điều này tạo ra sự cố cho trình thu thập dữ liệu của Google.

Một số nhà phát triển tạo các trang html cơ bản với dữ liệu thực và phục vụ các trang này từ phía máy chủ tại thời điểm thu thập thông tin. Chúng tôi có thể kết xuất cùng một trang với PhantomJSphía phục vụ có _escaped_fragment_(Vì Google tìm kiếm #!trong các url trang web của chúng tôi và sau đó lấy mọi thứ sau #!và thêm nó vào _escaped_fragment_tham số truy vấn). Để biết thêm chi tiết xin vui lòng đọc blog này .


Điều này không còn đúng kể từ tháng 10 năm 2017, công cụ tính thuế thu nhập này thu nhập- tax.co.uk được xây dựng bằng AngularJs thuần túy (thậm chí các tiêu đề giống như <title> Máy tính thuế với giá £ {{EarnSliders.yearly | number: 0}} tiền lương </ title> biểu hiện như "máy tính thuế với mức lương 30000 bảng Anh) và Google lập chỉ mục chúng xếp hạng chúng trên trang đầu tiên cho hàng trăm từ khóa. Chỉ cần xây dựng trang web của bạn cho con người, chúng tuyệt vời và Google sẽ chăm sóc phần còn lại ;)
Kaszoni Ferencz

0

Các trình thu thập thông tin không cần một gui phong cách đẹp mắt phong phú, họ chỉ muốn xem nội dung , vì vậy bạn không cần phải cung cấp cho họ ảnh chụp nhanh của một trang được tạo cho con người.

Giải pháp của tôi: cung cấp cho trình thu thập thông tin những gì trình thu thập thông tin muốn :

Bạn phải nghĩ xem những gì trình thu thập thông tin muốn, và chỉ cung cấp cho anh ta điều đó.

TIP không lộn xộn với mặt sau. Chỉ cần thêm một giao diện phía máy chủ nhỏ bằng cùng một API

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.