Có nhiều ý kiến về cách bạn nên định kiểu trực quan cho liên kết neo từ góc độ thiết kế. Hôm nay chúng ta sẽ tập trung vào điều quan trọng hơn: cách đặt tên văn bản neo liên kết và tại sao. Một lượng đáng ngạc nhiên các trang web làm sai điều này, tôi cũng có lỗi.
Để tạo liên kết có thể nhấp trên trang web, chúng ta bọc đường dẫn liên kết với thẻ anchor HTML: <a></a>. Thẻ anchor có thể chứa nhiều thuộc tính: URL (đường dẫn liên kết) classes, một id, một title, và văn bản neo (anchor text).
Văn bản neo đề cập đến phần có thể nhấp của liên kết. Đó là văn bản (không phải URL liên kết) mà chúng ta bọc thẻ anchor quanh.
Đây là liên kết đến trang chủ TechStacker. Đây là cách HTML trông:
<a href="https://techstacker.com">TechStacker </a> - URL bên trong
href=" "là đích liên kết >TechStacker<là văn bản neo có thể nhấp dẫn đến đích.
Hãy xem hai cách viết văn bản neo khác nhau cho liên kết. Trong trường hợp này, đích liên kết là trang về tối ưu hóa hiệu suất. Văn bản neo đầu tiên xấu, cái thứ hai tốt:
Tại sao văn bản neo đầu tiên xấu? Cái đầu tiên không mô tả, cái thứ hai mô tả và liên quan đến đích URL nó dẫn đến.
Một số lưu ý về văn bản neo:
- Giữ văn bản neo ngắn. Bất kỳ thứ gì trên 5 từ thường sẽ làm rối layout, đặc biệt nếu thẻ anchor được nhấn mạnh nhiều về mặt thiết kế. Nó phụ thuộc vào ngữ cảnh.
- Sử dụng văn bản neo có ý nghĩa và mô tả. "Nhấp vào đây" không mô tả, cho cả người dùng trình đọc màn hình và người có thị lực bình thường.
- Văn bản neo ảnh hưởng SEO. Công cụ tìm kiếm muốn liên kết mô tả và liên quan đến nội dung chúng liên kết đến.
- Văn bản neo ảnh hưởng Khả năng truy cập (Accessibility). Hãy nghĩ về cách trình đọc màn hình sẽ đọc văn bản neo của bạn cho người khiếm thị. Để điều đó hướng dẫn mô tả văn bản neo của bạn.
Kết luận
Văn bản neo ảnh hưởng cả SEO và UX. Bằng cách suy nghĩ một chút về cách bạn đặt tên văn bản neo, bạn sẽ làm vừa độc giả vừa công cụ tìm kiếm hài lòng.
Tôi đã đọc Hướng dẫn SEO cho người mới bắt đầu của Google như một phần của nghiên cứu cho bài viết này.
Bạn có thấy tôi vừa làm gì không? Văn bản neo trên mô tả và liên quan đến cả ngữ cảnh bài viết này và Hướng dẫn SEO của Google mà nó liên kết đến. Đó là cách bạn nên đặt tên văn bản neo.
Văn bản neo nên thiết lập kỳ vọng. Nó tương tự như cách thẻ UI Card hoạt động như bản xem trước cho nội dung chi tiết hơn (bài viết, trang sản phẩm, v.v.). Ví dụ: trang chủ Medium hoặc tại đây trên TechStacker.
Tôi thực sự viết bài này để nhắc nhở mình về tầm quan trọng của việc sử dụng mô tả có ý nghĩa cho nội dung nói chung, dù là viết blog, viết code, thậm chí danh sách mua sắm. Đừng mơ hồ, hãy mô tả.
Như nhà thiết kế sản phẩm số, Luke Wroblewski nói:
Rõ ràng luôn thắng.