Gắn thẻ bắt đầu bằng # vào URL với javascript

Question

Tôi muốn xây dựng trang web ajax mà không phải hy sinh SEO. Câu hỏi của tôi là: Nếu tôi có liên kết trên trang web của tôi như thế này:

<a href="http://example.com/cats" id="cats">Cats</a> 
    <a href="http://example.com/dogs" id="dogs">Dogs</a> 

... khi mỗi liên kết được nhấp Tôi muốn cập nhật vào thanh địa chỉ với hashtag tương ứng. Vì vậy, nếu liên kết "Mèo" được nhấp, vị trí hiện tại sẽ là http://example.com/#cats và tôi có thể sử dụng liên kết này để hiển thị nội dung ajax của mình. Nếu javascript bị tắt hoặc người dùng là công cụ tìm kiếm, họ sẽ truy cập trực tiếp vào/cats

Answer 1

Bạn có thể thay đổi location.hash tài sản, nó sẽ làm thay đổi nhận dạng neo hiện tại mà không hướng đi tạo trang, ví dụ bạn có thể:

<a href="http://mysite.com/cats" id="cats" class="ajaxLink">Cats</a> 
<a href="http://mysite.com/dogs" id="dogs" class="ajaxLink">Dogs</a> 

Sau đó:

$('.ajaxLink').click(function (e) { 
    location.hash = this.id; // get the clicked link id 
    e.preventDefault(); // cancel navigation 

    // get content with Ajax... 
});​ 

Answer 2

Bạn không thể đặt window.location.href mà không tải lại trang trong javascript vì lý do bảo mật.

Từ những gì tôi thấy một số người nói rằng Google sẽ lập chỉ mụC# url nhưng chúng sẽ không được coi là các trang riêng biệt và tôi nghĩ đó không phải là điều bạn muốn. Tôi cũng có rất ít kinh nghiệm với SEO.

Answer 3

Google lập chỉ mục một băm nếu có dấu chấm than trong biểu mẫu: #!dogs

Sau đó, giả định rằng đây là định dạng AJAX:

• Google's FAQ about AJAX
• Google's guide on how to make AJAX website crawlable

Answer 4

BenMills, không ai đề cập location.href, đó là khoảng location.hash mà không yêu cầu tải lại trang.

Answer 5

Mặc dù đơn giản là tốt nhất, nhưng nếu bạn chỉ muốn để tự động hóa quá trình này hoặc làm cho nó genericise sau đó bạn có thể sử dụng bản lite này Plugin jquery.hashTag.js

$('a').hashTag({ 
    source: function() { 
     return $(this).attr('id'); 
    } 
    }); 

Chỉ cần đặt đoạn mã này bên trong $ (document) .ready.

Nó sẽ tự làm phần còn lại của công việc. Giống như tự động nhấp vào liên kết có id được cung cấp dưới dạng băm.