Phần tử Anchor trong HTML: Anchor Link là gì và cách sử dụng

Anchor Tag trong HTML là gì?

Anchor tag trong mã HTML là các phần tử HTML dùng để tạo hyperlink trên trang web. Chúng cho phép bạn liên kết đến một trang web khác, một phần cụ thể trên trang, địa chỉ email, tệp hoặc bất kỳ URL nào khác. Chúng còn được gọi là phần tử anchor hoặc thẻ <a>.

Một phần tử anchor hoặc thẻ <a> hoàn chỉnh trông như sau:

Phần tử bắt đầu bằng “<a,” kết thúc bằng “</a>.” và chứa nhiều thuộc tính khác nhau để tạo thành thẻ hoàn chỉnh.

Chúng ta sẽ tìm hiểu các thuộc tính bên dưới.

Bạn cũng có thể dùng anchor tag để tạo anchor link. Anchor link (hay link “jump”) dẫn đến các phần khác nhau trên cùng một trang web.

Khi tạo liên kết văn bản bằng thẻ “a”, bạn cần sử dụng một dạng anchor text. Anchor text là phần có thể nhấp vào của liên kết. Google sử dụng văn bản này để tìm hiểu thêm về liên kết và nội dung mà liên kết trỏ đến.

Có thể trang web của bạn đã có nhiều liên kết bằng anchor tag. Hãy dùng công cụ như Site Audit để xác định các liên kết này và khắc phục mọi vấn đề có thể gặp phải.

Thiết lập công cụ và chạy lần crawl đầu tiên.

Sau đó, chuyển đến tab “Issues” và chọn “Links” trong menu thả xuống “Category”.

Bạn sẽ thấy liệu công cụ có phát hiện vấn đề nào hay không.

Công cụ cũng đề xuất cách khắc phục từng vấn đề. Chỉ cần nhấp vào liên kết “Why and how to fix it”.

Các thuộc tính của phần tử Anchor trong HTML

Bạn có thể thêm nhiều thuộc tính khác nhau vào anchor tag để chỉ định thao tác sẽ diễn ra khi người dùng nhấp vào.

Đồng thời, các thuộc tính này còn bổ sung ý nghĩa ngữ nghĩa cho trình duyệt và web crawler.

Sau đây là những thuộc tính quan trọng nhất:

Href

“href,” viết tắt của hypertext reference, xác định đích đến của phần tử anchor.

Ví dụ:

<a href="URL">

Thuộc tính này thường được dùng để xác định URL của trang mà thẻ liên kết đến. Nhưng bạn cũng có thể dùng nó để liên kết đến tệp, địa chỉ email, số điện thoại và nhiều nội dung khác.

Ví dụ, liên kết đến một trang web sẽ dùng đoạn code sau:

<a href="https://example.com">Website</a>

Anchor tag href là URL nằm giữa hai dấu ngoặc kép. Từ “Website” là anchor text: phần văn bản hiển thị và có thể nhấp vào của liên kết.

Hreflang

Thuộc tính “hreflang” cho biết ngôn ngữ của tài nguyên được liên kết bằng cách sử dụng Mã ngôn ngữ gồm hai chữ cái theo ISO 639-1.

Cấu trúc như sau:

<a hreflang="language_code">

Nếu muốn chỉ định tiếng Anh là ngôn ngữ của trang, hãy dùng đoạn mã sau:

<a href="https://example.com" hreflang="en">Website</a>

Thuộc tính hreflang là mã quốc gia gồm hai chữ cái: “en” được đặt trong dấu ngoặc kép.

Lưu ý: Bạn chỉ có thể sử dụng thuộc tính hreflang nếu cũng đã dùng thuộc tính href.

Tải xuống

Thuộc tính “download” yêu cầu trình duyệt tải tài nguyên được liên kết xuống thay vì mở tài nguyên đó.

Cấu trúc như sau:

<a download="filename">

Ví dụ: nếu tài nguyên là tệp PDF, hãy dùng đoạn mã sau:

<a href="example.pdf" download="Example">

Giá trị của thuộc tính là tên tệp. Trong trường hợp này là “Example.”

Nếu không chỉ định tên tệp, trình duyệt sẽ dùng tên tệp gốc của tài liệu.

Rel

Thuộc tính “rel” xác định mối quan hệ giữa tài nguyên hiện tại và tài nguyên được liên kết.

Cấu trúc như sau:

<a rel="value">

Các giá trị thuộc tính “rel” phổ biến nhất gồm:

rel=“alternate”: Dùng để xác định tài nguyên được liên kết là phiên bản thay thế của tài nguyên hiện tại

rel=“author”: Dùng để liên kết đến tác giả của tài nguyên

rel=“bookmark”: Dùng để cho biết URL là cố định và có thể được dùng để đánh dấu trang. Ví dụ: thuộc tính này thường được dùng để nhanh chóng chuyển đến một mục cụ thể trong bài viết dài.

rel=“help”: Dùng để cho biết liên kết dẫn đến tài liệu trợ giúp cho trang hiện tại

rel=“next”: Dùng để chỉ định liên kết dẫn đến trang tiếp theo trong chuỗi, chẳng hạn như chuỗi bài viết, tin tức hoặc thư viện ảnh.

rel=“prev”: Dùng để chỉ định liên kết dẫn đến trang trước đó trong chuỗi

rel=“nofollow”: Dùng để yêu cầu search engine không theo dõi liên kết. Nói cách khác, bạn không muốn xác nhận liên kết đó

rel=“search”: Dùng để chỉ định trang được liên kết có thể dùng để tìm kiếm nội dung trên trang hoặc website

Và các giá trị khác.

Ví dụ: bạn có thể dùng đoạn mã sau để cho biết liên kết dẫn đến trang giới thiệu về tác giả bài viết:

Bài viết do <a href="https://example.com/+AuthorName"
rel="author">Author Name</a>.

Lưu ý: Các search engine như Google sử dụng thuộc tính “rel” để thu thập thêm thông tin về liên kết.

Target

Thuộc tính “target” cho trình duyệt biết nơi mở liên kết, chẳng hạn trong cùng tab, tab mới, cửa sổ mới hoặc iframe.

Cấu trúc như sau:

<a target="value">

Các giá trị khác nhau gồm:

“_self”: Mở liên kết trong cùng một khung (thường là cùng tab hoặc cửa sổ)

“_blank”: Mở liên kết trong tab hoặc cửa sổ mới. Đây là cách phổ biến nhất

“_parent”: Mở liên kết trong khung cấp cao hơn kế tiếp, được gọi là khung cha

“_ top”: Bỏ qua tất cả các khung và mở liên kết dưới dạng tài liệu cấp cao nhất trong cùng cửa sổ trình duyệt

“framename”: Mở liên kết trong khung được đặt tên, chẳng hạn như video phát bên trong iframe.

Ví dụ: nếu muốn liên kết mở trong tab mới, bạn có thể viết:

<a href="https://example.com" target="_blank">Website</a>

Ví dụ về thẻ Anchor

Hãy xem một vài ví dụ về vị trí và cách sử dụng thẻ anchor.

Liên kết đến một phần tử trên cùng trang

Bạn có thể dùng thẻ anchor để liên kết đến các phần tử trên cùng trang, giúp người dùng điều hướng và tiếp nhận nội dung dễ dàng hơn.

Bắt đầu với các bước sau:

Gắn thuộc tính “id” vào phần bạn muốn liên kết đến
Thêm thuộc tính “id” vào thẻ anchor mà bạn muốn tạo liên kết từ đó

Ví dụ, giả sử chúng ta đang viết một bài viết về SEO và muốn liên kết đến tiêu đề “Local SEO.”

Đi đến tiêu đề và gắn thuộc tính “id” vào đó.

Như sau:

<a id="LocalSEO"><h2>Local SEO</h2></a>

Đi đến đoạn văn bản bạn muốn tạo liên kết từ đó và thêm thuộc tính “href” để tạo liên kết anchor.

Tuy nhiên, thay vì thêm liên kết đến một trang web, hãy thêm ID anchor kèm dấu thăng (#).

Như sau:

<a href="#LocalSEO">local SEO</a>

Khi người đọc nhấp vào liên kết, họ sẽ “jump” đến tiêu đề H2 có id "LocalSEO".

Liên kết đến địa chỉ email

Bạn cũng có thể tạo liên kết để hướng người dùng gửi email đến một địa chỉ cụ thể.

Khi người dùng nhấp vào liên kết, trình duyệt sẽ mở ứng dụng email mặc định trên máy tính, chẳng hạn như ứng dụng Apple Mail trên máy tính Macbook. Đồng thời, địa chỉ người nhận được chỉ định trong thuộc tính sẽ tự động điền vào.

Cách này được gọi là giao thức “mailto”. Giao thức được thêm vào giá trị của thuộc tính “href”.

Ví dụ:

<a href="mailto:person@example.com">Gửi email cho person</a>

Nếu ai đó nhấp vào liên kết phía trên, ứng dụng email mặc định sẽ mở ra với địa chỉ email được hiển thị trong trường “To”.

Liên kết đến số điện thoại

Bạn có thể liên kết đến số điện thoại tương tự như cách liên kết đến địa chỉ email.

Thêm giao thức “tel”, sau đó là số điện thoại.

Như sau:

<a href="tel:+34673245198">+34673245198</a>

Nhấp vào liên kết sẽ gọi đến số này trên các thiết bị hỗ trợ (chẳng hạn như điện thoại hoặc máy tính có Skype hay FaceTime).

Liên kết để tải tệp xuống

Dùng thuộc tính “download” để liên kết tải tệp trực tiếp xuống.

Ví dụ, bạn có thể dùng thuộc tính này để giúp người đọc tải infographic hoặc PDF xuống.

Để triển khai, hãy thiết lập thuộc tính “href”. Giá trị của thuộc tính này là tệp thực tế.

Như sau:

<a href="/images/infographic.jpg" download="infographic">

Nhấp vào liên kết sẽ tải infographic xuống.

Lưu ý: Bạn có thể thêm tên tệp làm giá trị cho thuộc tính “download”. Tuy nhiên, điều này không bắt buộc. Nếu không thêm, trình duyệt sẽ sử dụng tên tệp gốc.

Anchor Link có tốt cho trải nghiệm người dùng không?

Anchor Link có thể giúp cải thiện trải nghiệm người dùng (UX). Người đọc dùng chúng để điều hướng, nhờ đó có trải nghiệm duyệt web tốt hơn.

Anchor Link thường được dùng trong mục lục để giúp người đọc điều hướng các trang dài hoặc có nhiều nội dung trực quan.

Khi truy cập một trang, người đọc muốn biết thông tin ở đó có hữu ích hoặc phù hợp với Search Query của họ hay không.

Mục lục có các anchor link rõ ràng, có thể nhấp vào sẽ tóm tắt trang của bạn và giúp người đọc “jump” đến phần họ quan tâm nhất.

Anchor Link có tốt cho SEO không?

Anchor Link giúp cải thiện trải nghiệm trên trang. Đồng thời có thể giúp bạn đạt được featured snippet. Cả hai đều có thể giúp cải thiện thứ hạng theo thời gian.

Google cũng có thể đưa Anchor Link vào đoạn trích tìm kiếm của trang.

Ví dụ:

Google bao gồm anchor link đến “Plot” và “Cast” trên trang về bộ phim John Wick. Điều này giúp người tìm kiếm “jump” thẳng đến phần đó từ trang kết quả của công cụ tìm kiếm (SERP).

Điều đó có nghĩa là:

Bạn nên cân nhắc thêm Anchor Link vào trang của mình.

Hãy dùng chúng để cung cấp cho Google thêm thông tin về nội dung của bạn, đồng thời giúp người đọc tìm và chuyển nhanh đến những phần họ muốn đọc.

Kiểm tra link trên website để cải thiện thứ hạng SEO

Một trong những phương pháp SEO tốt nhất là thường xuyên kiểm tra website. Việc kiểm tra giúp bạn tìm và khắc phục các vấn đề đang cản trở thứ hạng website.

Bạn cũng có thể kiểm tra để tìm các vấn đề cụ thể, chẳng hạn như vấn đề về link trong trường hợp này.

Semrush Site Audit crawls toàn bộ website của bạn và giúp bạn khắc phục những vấn đề này.

Mở công cụ, nhập tên domain của bạn rồi nhấp vào “Start Audit."