Tôi có một trang web, hoàn toàn dựa trên Ajax (Điều hướng băm).OpenGraph trên trang web dựa trên Ajax
Có cách nào để làm mới thẻ meta Đồ thị mở cho các trang web dựa trên ajax sử dụng Javascript không? (Khi tôi nhấp vào liên kết, Thẻ và các giá trị có thể thay đổi)
No. Mở đánh dấu biểu đồ phải có trên các trang HTML có thể nhận được với HTTP thuần túy.
Điều này là do khi người dùng tương tác với đối tượng OG (như, thực hiện tác vụ, v.v.) Facebook sẽ thực hiện HTTP GET trên URL OG và mong đợi xem thẻ OG được trả lại trong đánh dấu.
Giải pháp là tạo URL chuẩn cho từng đối tượng của bạn. Các URL này chứa đánh dấu HTML cơ bản bao gồm các thẻ OG.
Khi có yêu cầu đối với các URL này, nếu bạn thấy chuỗi ký tự người dùng đến chứa 'facebookexternalhit' thì bạn sẽ hiển thị HTML. Nếu không, bạn phục vụ 302 chuyển hướng đến URL ajax của bạn. Trên URL ajax, các nút như bạn và bất kỳ hành động OG bạn xuất bản phải trỏ đến đối tượng URL kinh điển
Ví dụ:
Là một người sử dụng, tôi đang trên http://yoursite.com/#!/artists/monet. Tôi nhấp vào nút tương tự hoặc xuất bản hành động, nhưng thông số href của nút tương tự hoặc URL của đối tượng khi bạn đăng tác vụ phải là URL hợp chuẩn web cho đối tượng - trong trường hợp này, có thể là http://yoursite.com/artists/monet
Khi người dùng sử dụng trình duyệt truy cập http://yoursite.com/artists/monet, bạn nên chuyển hướng họ đến http://yoursite.com/#!/artists/monet, nhưng nếu người dùng đến nói rằng đó là trình thu thập của Facebook, bạn chỉ cần trả lại đánh dấu đại diện cho nghệ sĩ Monet.
Đối với các ví dụ thực tế, hãy xem Deezer, Rdio và Mog, tất cả đều sử dụng mẫu thiết kế này.
hơn Một chút điều tra dẫn đến những kết quả sau:
Hãy nói rằng bạn đã thực hiện một ứng dụng với một hash trông như thế này:
http://yoursite.com/#/artists/monet
Các Facebook scraper sẽ gọi url của bạn mà không /#/artists/monet phần. Đây là một vấn đề bởi vì bạn không có cách nào để biết thông tin nào bạn có để phân tích cú pháp thành meta og: tags.
Sau đó thử cùng với các url gợi ý như Simon nói:
http://yoursite.com/#!/artists/monet
Bây giờ bạn sẽ nhận thấy rằng các scraper Facebook đang tôn trọng google ajax specifications và nó sẽ chuyển đổi các #!-?_escaped_fragment_= nên URL trông như thế này :
http://yoursite.com/?_escaped_fragment_=/artists/monet
Bạn có thể kiểm tra điều này ra cho chính mình với trình gỡ lỗi facebook: https://developers.facebook.com/tools/debug
/#/ phần/#!/?_escaped_fragment_=Kịch bản
<html>
<head>
<title>Scraping</title>
</head>
<body>
<?
print_r($_SERVER);
?>
</body>
</html>
Hoặc tóm tắt: luôn luôn sử dụng /#!/ (hashbang) liên kết sâu;)
Cảm ơn thông tin bổ sung này. Thực sự hữu ích với vấn đề w tôi đang làm việc trên. – TobyG
Câu trả lời này nên được gắn thẻ là câu trả lời đúng (!) –
@polyclick và Yaron Tôi thêm nhận xét vào câu trả lời của Simon, tôi sẽ đánh giá cao nếu bạn có thể làm rõ nếu viết lại redriect với hashbang là cần thiết và nếu thiết lập là đủ để index 'og: tags' thành các đối tượng html tương ứng với trực quan hóa của D3 của các đối tượng JSON - cách khác tôi sẽ mở một câu hỏi khác. – user305883
Tôi chạy một thử nghiệm nhanh mà dường như để làm việc. Phụ thuộc vào thực tế, FB scraper không chạy JavaScript.
Vì hầu hết các trang của tôi là các ứng dụng trang đơn tĩnh không có logic máy chủ, tôi có thể tạo các trang tĩnh nhanh chóng với các công cụ như Grunt và Gulp.
Nếu bạn Chia sẻ http://wh-share-test.s3-website-eu-west-1.amazonaws.com/test
Facebook sẽ cạo trang kiểm tra các thẻ meta, khi người dùng nhấp vào liên kết JS chuyển hướng đến/#/test cho ứng dụng trang duy nhất của tôi để phản ứng và trình bày quan điểm chính xác.
Dường như hacky nhưng hoạt động;
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>This is a shared item</title>
</head>
<body>
<h1>This is a shared item page.</h1>
<script>
var path = window.location.pathname;
window.location = '/#' + path;
</script>
</body>
</html>
Phản hồi tốt bằng văn bản! – DMCS
Cảm ơn lớn cho câu trả lời của bạn! –
Câu trả lời hay nhưng điều gì sẽ xảy ra khi người dùng sao chép/dán 'http: //yoursite.com/#!/Artists/monet' vào hộp facebook? Imho cạo không thành công vì họ không biết họ phải sao chép/dán url chuẩn. – polyclick