Liên kết trang web trong kết quả tìm kiếm của Google chạy các từ cùng nhau khi tôi sử dụng <span> bên trong <a> trong <nav>

Tôi có cấu trúc sau trong menu điều hướng của mình: Có một khoảng bên trong thẻ neo giúp điều hướng trông đẹp hơn.

<nav class="navbar-collapse navbar-collapse-header collapse">
    <div class="navbar-right yamm dropdownnav" >
        <ul class="nav navbar-nav smart-menu dd-menu">
            <li><a href="https://www.example.com/hosting">Try & Buy<span class="subline">Hosting List</span></a></li>
            <li><a href="https://www.example.com/products">Shop<span class="subline">Webshop</span></a></li>
            <li><a href="https://www.example.com/features">Features<span class="subline">Features</span></a></li>
        </ul>
    </div>

Nhưng nó có tác động tiêu cực đối với liên kết trang web:

Google có xem xét bất cứ điều gì trong thẻ neo không? Có cách nào để tôi có thể giữ thiết kế và làm cho các liên kết trang web trông đẹp hơn không?

Đây là cách điều hướng của tôi trông trên trang web của tôi:

<span>các thẻ thường không thêm khoảng trắng xung quanh các thành phần. Có vẻ như bạn có thể đang sử dụng CSS của mình để biến nó thành như vậy. Tuy nhiên, trình duyệt văn bản và Google không có khả năng thêm không gian xung quanh các nhịp. Sẽ tốt hơn trong đánh dấu của bạn để đặt trong một không gian:

Try & Buy <span class="subline">Hosting List</span>

Thay vì:

Try & Buy<span class="subline">Hosting List</span>

Không có gì sai khi có một khoảng bên trong các liên kết của bạn. Thêm không gian sẽ cho phép bạn làm như vậy trong khi các liên kết trang web của bạn (và văn bản neo) xuất hiện tốt hơn với Googlebot. Sau đó, Googlebot sẽ thấy văn bản neo của liên kết đó là "Thử & Mua danh sách lưu trữ".

Có vẻ như liên kết Tính năng của bạn vẫn sẽ không tuyệt vời như liên kết trang web, ngay cả với không gian. Bạn sử dụng cùng một từ trong liên kết hai lần vì bạn sao chép nó trong danh sách phụ. Có lẽ sẽ có ý nghĩa khi chia nó thành hai liên kết?

<a href="https://www.example.com/features">Features</a>
<a href="https://www.example.com/features"><span class="subline">Features</span></a>

Nếu thông tin bổ sung đó hoàn toàn dành cho mục đích trực quan thì có lẽ bạn có thể cân nhắc sử dụng nội dung CSS Pseudo (tôi nghĩ Google sẽ bỏ qua nhưng không được kiểm tra nên có thể sai về điều đó)

Tuy nhiên, về mặt bên cạnh, có vẻ như hầu hết tất cả các yếu tố đó đều sao chép văn bản phía trên nó, vì vậy tôi chỉ tự hỏi liệu nó có thực sự bổ sung bất kỳ giá trị nào cho người dùng của bạn hay không hay chỉ đơn giản là chiếm không gian màn hình hữu ích. Đáng để suy nghĩ

Như những người khác đã lưu ý, Google thấy các liên kết trang web của bạn giống như tất cả chúng đều ở dạng văn bản thuần túy - nó thường không tính đến các biểu định kiểu. (Trên thực tế, Google có thể không thực sự định dạng liên kết trang web theo cách bạn có họ theo kiểu trên trang web của bạn, và không có gì mà sẽ nói với nó như thế nào nó nên định dạng chúng để thay thế.)

Một giải pháp bạn có thể cân nhắc là trước tiên hãy viết các liên kết của bạn để chúng có ý nghĩa như văn bản thuần túy . Trong trường hợp của bạn, các liên kết của bạn dường như bao gồm một tiêu đề liên kết chính và phụ đề mô tả; một lựa chọn tự nhiên sẽ là tách chúng bằng dấu hai chấm, như thế này:

Try & Buy: Hosting List
Shop: Webshop

Tiếp theo, thêm một số nhịp để chỉ ra các phần riêng biệt, ví dụ như thế này:

<li><a href="https://www.example.com/hosting">
  Try &amp; Buy<span class="separator">: </span><span class="subline">Hosting List</span>
</a></li>
<li><a href="https://www.example.com/products">
  Shop<span class="separator">: </span><span class="subline">Webshop</span>
</a></li>

Và cuối cùng, thêm một quy tắc vào biểu định kiểu của bạn để làm cho dấu hai chấm trở nên vô hình khi được tạo kiểu:

.nav li a .separator { display: none }

Như một phần thưởng, các trang của bạn giờ đây cũng sẽ có thể truy cập (nhiều hơn một chút) trong các trình duyệt chỉ có văn bản và với các tác nhân người dùng ít thông thường khác.

(Lưu ý rằng điều này, bởi chính nó, không hoàn toàn giải quyết vấn đề của bạn - Features: Featuresvẫn có vẻ khá ngớ ngẩn, nếu không nói là gần như ngớ ngẩn như FeaturesFeaturesĐiều đó nói rằng, nó không giống quá lớn trên trang của bạn, hoặc, nếu bạn muốn dính vào. cấu trúc tiêu đề / phụ đề để thống nhất, bạn thực sự nên tìm một số phụ đề ít lặp đi lặp lại.)

Như bạn có thể thấy, nó xem nội dung dưới dạng văn bản thuần túy, bất kể là có một khoảng. Nó sẽ thấy giống như người dùng, chỉ có bạn đã thực hiện một thay đổi trực quan cho nhịp để tạo sự khác biệt.

Tuy nhiên, các tiêu đề họ hiển thị cho bạn trong hình ảnh của bạn nên được lấy từ chính các trang chứ không phải từ neo. Bạn có thể muốn kiểm tra xem bạn có đúng <title>và <h1>một (mỗi trang trên một trang không!), Điều này sẽ giúp nhiều hơn thay đổi một số văn bản trong một neo.

Chỉ cần nghĩ về nó, liên kết nội bộ của bạn có thể trỏ đến trang này, từ các trang khác nhau trên trang web của bạn, họ nên lấy văn bản nào? Văn bản neo giúp cho giá trị từ khóa, nhưng đó là tiêu đề thực tế xác định kết quả trong Google (nếu được triển khai đúng cách).