Thẻ <a> trong HTML là gì?
Thẻ <a> trong HTML là đoạn mã dùng để thêm liên kết từ một tài nguyên web này sang tài nguyên khác. Nó còn được gọi là anchor tag hoặc anchor element.
Một thẻ <a> trông như sau:
<a href="https://www.semrush.com">Trang chủ của chúng tôi</a>
Các tài nguyên mà thẻ <a> có thể liên kết bao gồm trang web, địa chỉ email, hình ảnh và video.
Nếu thẻ <a> tạo liên kết từ một tài nguyên sang tài nguyên khác trên cùng một website trang web, liên kết đó được gọi là “internal link.”
Nhưng nếu thẻ <a> tạo liên kết từ một tài nguyên sang tài nguyên khác trên một website khác trang web, liên kết đó được gọi là “external link.”
Tiếp tục đọc để tìm hiểu thêm về thẻ HTML <a> — bao gồm lợi ích của chúng và cách bạn có thể phát hiện các vấn đề kỹ thuật với thẻ của mình.
Thẻ HTML Anchor được sử dụng ở đâu?
Các website sử dụng thẻ anchor trong HTML ở bất cứ đâu họ muốn liên kết tới tài nguyên khác. HTML là viết tắt của “Hypertext Markup Language.” Đây là một trong những ngôn ngữ mà các nhà phát triển web dùng để tạo trang web.
Ví dụ, bài viết trên Semrush về các công cụ chỉnh sửa nội dung liên kết người đọc tới công cụ SEO Writing Assistant như sau:
Trong khi menu đầu trang của cửa hàng trực tuyến Bokksu có các HTML anchor elements liên kết tới các sản phẩm và thẻ quà tặng khác nhau của thương hiệu:
Và hãy xem mục lục của bài viết này.
Nó chứa các thẻ anchor giúp người đọc khi nhấp vào sẽ “jump” đến các phần khác nhau của bài viết.
Lưu ý
Các thẻ anchor dẫn đến nội dung trên cùng một trang được gọi là “anchor links” hoặc “jump links.”
Các quản trị viên của những trang trên đã thêm thẻ HTML anchor vào văn bản.
Nhưng bạn cũng có thể thêm mã liên kết HTML vào cả hình ảnh.
Ví dụ, khi nhấp vào hình ảnh con nhện góa phụ đen trên trang invertebrates của National Geographic Kids sẽ dẫn người dùng tới trang thông tin về loài nhện góa phụ đen của tổ chức này:
Các thành phần của thẻ HTML <a>
Một thẻ <a> có bốn thành phần:
- Thẻ mở đầu: đánh dấu bắt đầu thẻ <a>
- Thuộc tính thẻ và giá trị thuộc tính: xác định trang mà thẻ liên kết tới và ảnh hưởng tới cách thẻ hoạt động khi người dùng nhấp vào. Chúng tôi sẽ xem xét các thuộc tính <a> phổ biến bên dưới.
- Anchor text: văn bản mà người dùng nhấp để truy cập liên kết
- Thẻ đóng: là “</a>” và đánh dấu kết thúc thẻ <a>
Các thuộc tính của thẻ <a>
Dưới đây là một số thuộc tính HTML <a> phổ biến:
Href
“Href” là viết tắt của “hypertext reference.” Nó chỉ định tài nguyên mà thẻ <a> sẽ liên kết đến.
Vậy trong ví dụ này “a href link” ví dụ:
<a href="https://www.semrush.com">Trang chủ của chúng tôi</a>
Thuộc tính “href” có giá trị là “https://www.semrush.com.” Khi người dùng nhấp vào liên kết sẽ được dẫn đến trang đó.
Khác với các thuộc tính khác của thẻ <a>, việc sử dụng thuộc tính “href” trong thẻ <a> là bắt buộc. Nếu không, liên kết sẽ không hoạt động.
Bởi vì nó không chứa thông tin về đích đến dự kiến.
Rel
“Rel” là viết tắt của “relationship.” Nó xác định mối quan hệ giữa tài nguyên hiện tại và tài nguyên mà nó liên kết đến.
Dưới đây là ví dụ về thẻ HTML <a> có thuộc tính “rel”:
<a href="https://www.amazon.com/headphones" rel="sponsored" >Mua tai nghe trên Amazon (liên kết affiliate)</a>
Giá trị của thuộc tính “rel” này là “sponsored.” Điều này cho biết trang liên kết đến (tức là “https://www.amazon.com/headphones”) là quảng cáo trả phí hoặc nội dung được tài trợ.
Các giá trị khác của thuộc tính “rel” bao gồm:
- Nofollow: Báo cho các search engine không chuyển “link juice” từ trang hiện tại sang trang trong thẻ <a>.Sẽ nói thêm về việc chuyển “link juice” sau.)
- Noopener: Một biện pháp bảo mật ngăn tài nguyên được liên kết kiểm soát trang hiện tại khi người dùng nhấp vào liên kết mở trong tab hoặc cửa sổ mới. Nhờ đó tài nguyên liên kết không thể chuyển hướng người dùng đến trang lừa đảo hoặc trang không an toàn.
- Noreferrer: Ngăn tài nguyên được liên kết xác định trang hiện tại là nguồn khách truy cập cho nó. Nhờ đó dịch vụ web analytics như Google Analytics (GA4) sẽ phân loại những khách truy cập này là “direct traffic” trong báo cáo thay vì phân loại là “referral traffic” và ghi nhận trang hiện tại là nguồn giới thiệu. “Noreferrer” cũng mang lại hiệu ứng của thuộc tính “noopener” ngay cả khi thẻ <a> không có thuộc tính đó.
Một thuộc tính “rel” có thể chứa nhiều giá trị.
Hãy xem ví dụ liên kết trên blog SparkToro:
Thẻ <a> ẩn bên dưới liên kết có thuộc tính “rel” với giá trị “noreferrer noopener.”
Target
Thuộc tính “target” cho trình duyệt biết nơi mở tài nguyên được liên kết.
Ví dụ về thẻ HTML <a> có thuộc tính “target” là:
<a href="https://www.semrush.com" target="_blank">Mở trang chủ của chúng tôi trong tab mới</a>
Nếu thẻ <a> không có giá trị thuộc tính “target”, nó sẽ mặc định là “target” với giá trị “_self.”, mở tài nguyên liên kết trong cùng một khung.
Một thuộc tính “target” phổ biến là “_blank.”, mở tài nguyên liên kết trong tab hoặc cửa sổ trình duyệt mới.
Thẻ HTML <a> so với thẻ HTML <link>
Thẻ “a href” trong HTML không nên nhầm lẫn với thẻ link.
Đây là cấu trúc của một thẻ HTML <link>:
<link [thuộc tính thẻ link được đặt ở đây] />
Các nhà phát triển web sử dụng thẻ link trong phần <head> để khai báo “link” của tài nguyên, hay mối quan hệ với tài nguyên khác. Ví dụ:
- Các trang là “master copy” của những phiên bản tương tự của cùng một trang—bằng cách sử dụng thuộc tính canonical
- Các trang là biến thể ngôn ngữ và khu vực của một trang khác—bằng cách sử dụng thuộc tính hreflang
Thẻ link không có thẻ đóng </link>; chúng là thẻ tự đóng. Nghĩa là thẻ đã hoàn chỉnh và không cần đóng thêm.
Ngược lại, các nhà phát triển web sử dụng thẻ HTML <a> trong phần <body> để thêm “hyperlinks” — hay gọi ngắn gọn là “links” — từ tài nguyên này sang tài nguyên khác.
Họ cũng cần đóng mỗi thẻ <a> bằng một thẻ </a>.
Bảng này tóm tắt sự khác biệt giữa thẻ <a> và thẻ link:
Đọc thêm: Danh sách thẻ HTML: Bảng Cheat Sheet HTML
Lợi ích của việc sử dụng Anchor tags là gì?
Anchor tags có thể giúp bạn:
Cải thiện trải nghiệm điều hướng người dùng
Bằng cách dùng anchor tags để liên kết các tài nguyên trên website, bạn giúp người dùng khám phá thêm nội dung bên trong đó.
Cụ thể như:
- Cho phép người dùng duyệt các phần khác nhau của website. Trong trường hợp internal links trong menu điều hướng.
- Giúp người dùng dễ dàng chuyển đến các phần cụ thể trên trang. Trong trường hợp anchor links.
- Dẫn người dùng đến các hướng dẫn chi tiết về các chủ đề bạn đã nhắc đến ngắn gọn trên trang hiện tại. Điều này đặc biệt hữu ích cho việc xây dựng content pillars.
- Gợi ý các trang khác để người dùng xem sau khi họ đọc xong trang hiện tại. Nhằm khuyến khích người dùng tương tác lâu hơn với website của bạn.
Nếu bạn không thêm links vào các trang theo những cách này, người dùng có thể không biết đến chúng, chứ chưa nói đến việc điều hướng để xem nội dung.
Chuyển Link Juice qua internal links
“Link juice,” hay Link Equity, là sự tăng quyền hạn của một trang trong mắt các công cụ tìm kiếm do có trang khác liên kết đến.
Sự tăng này xảy ra vì một liên kết đến trang đó có thể được xem như một phiếu bầu cho tính hữu ích của trang. Trang nhận được nhiều liên kết từ các website có thẩm quyền càng nhiều thì càng nhận được nhiều link juice từ các website đó.
Kết quả là, các công cụ tìm kiếm có thể đánh giá trang đó có thẩm quyền cao hơn và xếp hạng nó cao hơn trong kết quả tìm kiếm.
Một trang có thẩm quyền cao cũng có thể chuyển link juice đến các trang khác trên cùng website bằng cách liên kết đến chúng.
Vậy hãy tận dụng cơ hội đơn giản này để tăng độ uy tín cho các trang của bạn bằng cách thêm internal links từ các trang có độ uy tín cao đến chúng.
Đọc thêm: Internal Links: Hướng dẫn toàn diện + Chiến lược
Cách tạo thẻ HTML <a>
Các nền tảng website hiện đại như WordPress giúp việc tạo thẻ HTML <a> cho liên kết trở nên dễ dàng. Không cần phải biết code.
Các bước chính xác có thể khác nhau. Nhưng thường là bạn sẽ gõ anchor text vào trình soạn thảo nội dung của nền tảng website.
Bôi đen đoạn văn bản đó.
Nhấn vào biểu tượng “Link” trong trình soạn thảo, sau đó gõ (hoặc dán) URL mà đoạn văn bản đó sẽ liên kết tới.
Nhấn “Enter” hoặc “Return” trên bàn phím để xác nhận.
Vậy là xong! Bạn đã tạo liên kết mà không cần tự gõ thẻ HTML <a> bên dưới.
Cách phát hiện lỗi thẻ HTML <a>
Một cách kiểm tra thẻ <a> có hoạt động là bạn tự nhấn vào các liên kết trên trang và xem chúng có dẫn đến đúng nơi không.
Nhưng cách này không khả thi nếu website của bạn có hàng nghìn liên kết.
Vì vậy, hãy dùng công cụ Site Audit của Semrush để kiểm tra hàng loạt thẻ <a>.
Cách làm như sau:
Khởi chạy công cụ, nhập tên miền website của bạn và nhấn “Start Audit.”
Một cửa sổ “Site Audit Settings” sẽ hiện ra.
Trong tab “1. Domain and limit of pages” của cửa sổ, dùng mục “Crawl scope” để chọn xem công cụ có kiểm tra các subdomains của tên miền bạn không.
Dùng menu “Limit of checked pages” để chọn số trang công cụ sẽ kiểm tra mỗi lần chạy.
Giữ nguyên mục “Crawl source” là “Website” để công cụ kiểm tra toàn bộ website.
Đánh dấu chọn “Send an email every time an audit is complete.” nếu bạn muốn nhận email báo khi công cụ hoàn tất kiểm tra.
Nếu muốn, bạn có thể dùng các tab từ 2 đến 6 để cấu hình thêm cho việc audit.
Sau đó, nhấn “Start Site Audit.”
Công cụ sẽ bắt đầu kiểm tra website bạn về các lỗi kỹ thuật. Khi xong, nhấn vào tên miền để xem báo cáo.
Nhấn vào tab “Issues” của báo cáo.
Nếu một số internal links trên website bạn có thẻ <a> lỗi, bạn sẽ thấy thông báo “# internal links bị broken” trong phần “Errors”:
Ngược lại, nếu một số external links trên website bạn có thẻ <a> lỗi, bạn sẽ thấy thông báo “# external links bị broken” trong phần “Warnings”.
Nhấn vào bất kỳ thông báo nào để xem danh sách liên kết broken.
Bạn sẽ thấy báo cáo các URL bị broken cùng với URL của các trang chứa chúng.
Bạn có thể sửa từng liên kết hỏng bằng các cách như:
- Chỉnh sửa trang web của bạn để thay thế liên kết hỏng bằng một liên kết hoạt động
- Thiết lập một 301 Redirect để chuyển hướng người dùng của liên kết hỏng sang một liên kết khác — và hoạt động
- Chỉnh sửa trang web của bạn để loại bỏ hoàn toàn liên kết nếu bạn không còn cần nó nữa
Ngoài việc xác định các liên kết hỏng, Site Audit còn có thể kiểm tra hơn 140 vấn đề kỹ thuật khác, bao gồm:
- Sự tồn tại của Duplicate Content
- Tốc độ tải trang chậm
- Chứng chỉ bảo mật sắp hết hạn
Bạn cũng có thể lên lịch kiểm tra hàng ngày hoặc hàng tuần để luôn nắm bắt kịp thời các vấn đề kỹ thuật phát sinh.
Thẻ HTML <a>: Kết nối Website, Người dùng và Công cụ tìm kiếm
Thẻ HTML <a> đóng vai trò quan trọng trong việc hỗ trợ điều hướng người dùng và cải thiện thứ hạng trên công cụ tìm kiếm.
Chúng có thể trông phức tạp. Nhưng việc tạo chúng rất dễ dàng.
Và quản lý chúng còn dễ hơn nữa.
Chỉ cần bắt đầu dùng thử miễn phí Semrush để sử dụng công cụ Site Audit và thường xuyên kiểm tra website của bạn để phát hiện liên kết hỏng. Đồng thời đảm bảo các thẻ <a> hoạt động đúng như mong đợi.
Đưa góc nhìn thành kế hoạch.
Chia sẻ website và mục tiêu để LionTech tư vấn giải pháp phù hợp.
Đăng ký tư vấn ↗