Mã link HTML cho phép bạn biến các thành phần trên website—như văn bản và hình ảnh—thành hyperlink có thể nhấp vào.
Những hyperlink này giúp người dùng điều hướng trên web.
Khi sử dụng internal link đúng cách—link từ một trang trên website của bạn đến một trang khác trên chính website đó—chúng cũng có thể mang lại lợi ích SEO.
Hướng dẫn này chỉ cho bạn cách viết mã nhiều loại link HTML và tạo kiểu cho link bằng CSS đơn giản.
Bắt đầu nào.
Hyperlink là gì?
Hyperlink, thường được gọi là link, là một tham chiếu kết nối tài nguyên này với tài nguyên khác. Nó bao gồm một thành phần có thể nhấp vào, chẳng hạn như từ, cụm từ, hình ảnh hoặc biểu tượng.
Nhấp vào hyperlink sẽ khởi chạy một hành động, chẳng hạn như đưa người dùng đến một trang web khác hoặc bắt đầu cuộc gọi điện thoại.
Việc tự viết mã hyperlink cũng rất dễ dàng, miễn là bạn hiểu cú pháp của anchor element (còn gọi là thẻ <a>).
Cú pháp Anchor Element
Anchor element có bốn thành phần:
- Thẻ mở: Đây là phần bắt đầu của anchor element và đánh dấu điểm mở đầu của thành phần link.
- Thuộc tính thẻ + giá trị thuộc tính: Bên trong thẻ mở, bạn có thể thêm nhiều thuộc tính khác nhau. Các thuộc tính cung cấp thông tin bổ sung, chẳng hạn như cách link hoạt động hoặc link sẽ đưa người dùng đến đâu. (Chúng ta sẽ tìm hiểu thêm về các thuộc tính khác nhau ở phần sau.)
- Anchor text hoặc nội dung khác: Đây là nội dung người dùng nhấp vào.
- Thẻ đóng: Thẻ này đánh dấu điểm kết thúc của thành phần link.
Hãy kết hợp cả bốn điểm trên trong một ví dụ đơn giản. Ví dụ dưới đây sử dụng thuộc tính hrefđể chỉ định đích đến của link—trong trường hợp này là trang chủ của Semrush.
Đích đến cũng có thể là một vị trí cụ thể trên trang web hoặc một tài liệu có thể tải xuống.
Lưu ý: Bạn có thể sử dụng một hoặc nhiều thuộc tính trong anchor element.
Cách viết mã link trong HTML
Hãy cùng tìm hiểu cách viết mã một link đơn giản đến trang chủ website của bạn bằng HTML.
Đầu tiên, hãy bắt đầu với thẻ anchor:
<a> </a>
Tiếp theo, thêm URL trang chủ bằng thuộc tính href:
<a href="https://www.yourhomepage.com"> </a>
Bây giờ, thêm anchor text mà mọi người sẽ nhấp vào để truy cập link:
<a href="https://www.yourhomepage.com">Truy cập trang chủ của chúng tôi</a>
Anchor text của bạn nên mô tả rõ ràng để người dùng biết họ sẽ đến đâu khi nhấp vào link.
Search engine cũng sử dụng anchor text để hiểu trang mà bạn đang liên kết đến. Vì vậy, anchor text tốt có thể cải thiện SEO của bạn.
Hãy xem anchor text “newsletter best practice” bên dưới từ ConvertKit. Người đọc và search engine biết rằng khi truy cập liên kết, họ sẽ đến một trang về các phương pháp hay nhất cho newsletter.
Một cụm từ không mang tính mô tả như “click here” không cung cấp đủ ngữ cảnh, khiến cả người đọc lẫn search engine khó hiểu.
của Semrush Site Audit có thể kiểm tra website của bạn để tìm các liên kết có anchor text không mang tính mô tả.
Trước tiên, thiết lập site audit bằng cách nhấp vào nút “+ Create project”.
Nhập domain và đặt tên cho dự án. Sau đó, nhấp vào “Create project.”
Tiếp theo, cấu hình các cài đặt. Hướng dẫn cấu hình Site Audit này sẽ hướng dẫn chi tiết nếu bạn cần trợ giúp.
Sau đó, nhấp vào “Issues” rồi tìm kiếm “descriptive.” Thao tác này sẽ hiển thị báo cáo về các liên kết có anchor text không mang tính mô tả:
Nhấp vào các liên kết để xem danh sách liên kết có anchor text không mang tính mô tả và liên kết không có anchor text.
Sau đó, cập nhật anchor text của các liên kết trong danh sách để giúp người dùng và search engine hiểu rõ hơn nội dung của các trang được liên kết đến.
Giờ bạn đã biết cách viết mã cho một liên kết cơ bản, hãy cùng tìm hiểu các thuộc tính và giá trị bổ sung có thể thêm vào mã liên kết HTML.
1. Liên kết bằng hình ảnh và media
Bạn có thể biến media như hình ảnh hoặc GIF thành liên kết có thể nhấp bằng cách thêm nguồn vào thẻ anchor:
<a href="https://www.example.com"><img src="https://www.example.com/filename.jpg" alt="a description of the media"></a>
Ở đây, bạn thêm liên kết đến media (trong trường hợp này là hình ảnh) thay cho anchor text.
Trong đoạn mã trên:
- src là viết tắt của “source” và chỉ vị trí/URL của media
- alt chứa alt text—văn bản mô tả được trình đọc màn hình sử dụng và hiển thị khi hình ảnh không tải được—nếu dùng hình ảnh làm liên kết (bên dưới)
2. Liên kết đến các phần cụ thể trên trang (Anchor Links)
Anchor links—còn gọi là jump links—đưa người dùng đến một vị trí cụ thể trên trang bằng đoạn mã sau:
<a href="https://www.example.com/blog/#seo-tips">SEO tips</a>
Chúng giúp người đọc điều hướng trang dễ dàng hơn để tìm nội dung cần thiết (chẳng hạn như mục lục).
Đầu tiên, gắn nhãn cho anchor—vị trí mà liên kết sẽ đưa người đọc đến—bằng cách thêm ID vào thẻ mở. Ví dụ:
<h2 id="seo-tips">
Bạn có thể gán ID cho bất kỳ HTML element. Trong ví dụ trên, chúng ta đã gán ID cho thẻ heading <h2>.
Giờ hãy kiểm tra ID để đảm bảo nó hoạt động. Thêm ID vào cuối URL với dấu thăng như sau:
Dán liên kết vào thanh địa chỉ của trình duyệt. Nhấn Enter để đảm bảo liên kết dẫn đến vị trí ID được chỉ định trên trang.
Nếu hoạt động, bạn có thể thêm liên kết vào thuộc tính href.
3. Mở liên kết trong cửa sổ/tab mới
Bạn có thể chọn để liên kết mở trong cùng cửa sổ hay tab mới bằng thuộc tính target.
Để mở trong cùng cửa sổ, hãy dùng giá trị thuộc tính target=”_self” như sau:
<a href="https://www.example.com" target="_self">Anchor text</a>
Theo mặc định, liên kết mở trong cùng cửa sổ. Vì vậy, không cần dùng “_self”. Tuy nhiên, thuộc tính này có thể giúp bạn làm rõ ý định của một số siêu liên kết cụ thể.
Để mở liên kết trong tab mới, hãy thay “_self” bằng “_blank”:
<a href="https://www.example.com" target="_blank">Anchor text</a>
Vì lý do trợ năng, tốt nhất nên để liên kết mở trong cùng một tab.
4. Liên kết đến địa chỉ email
Thêm giá trị mailto sẽ mở ứng dụng email của người dùng khi họ nhấp vào liên kết:
<a href="mailto:mail@semrush.com">Email Us</a>
Ví dụ: hãy liên kết đến email hỗ trợ để khách hàng có thể dễ dàng gửi câu hỏi.
Chỉ cần đảm bảo anchor text cho biết thao tác nhấp vào liên kết sẽ mở ứng dụng email. Cụm như “Email us” hoặc “Send an email” truyền tải thông điệp rõ ràng.
Nhờ vậy, người dùng sẽ không bất ngờ khi một ứng dụng không mong đợi mở ra.
5. Liên kết đến số điện thoại
Bắt đầu cuộc gọi
Liên kết đến một số điện thoại sẽ bắt đầu cuộc gọi. Bạn có thể liên kết đến số điện thoại bằng giá trị tel:
<a href="tel:+1-123-456-7890">Call Us</a>
Bắt đầu tin nhắn văn bản
Bạn cũng có thể bắt đầu gửi tin nhắn văn bản bằng giá trị “sms”:
<a href="sms:123-456-7890">Send SMS</a>
Cũng như với thuộc tính email, hãy đảm bảo người dùng biết rằng thao tác nhấp vào liên kết sẽ bắt đầu cuộc gọi hoặc gửi tin nhắn.
6. Tạo liên kết tải xuống
Mã HTML để tạo liên kết tải xuống tương tự như mã liên kết đến URL và có dạng như sau:
<a href="https://www.example.com/path/to/file.pdf" download>Tải PDF (175kB) ngay</a>
Khi người dùng nhấp vào liên kết, thiết bị của họ sẽ tự động tải tệp xuống.
Khi chọn tệp để liên kết, bạn cần lưu ý một vài điều:
- Nêu loại tệp trong anchor text để người dùng biết họ sẽ tải xuống tệp nào
- Dùng các loại tệp được hỗ trợ rộng rãi để người dùng không cần cài thêm phần mềm để mở chúng
- Nêu kích thước tệp để người dùng có thể xác định thiết bị còn đủ dung lượng hay không
7. Tạo liên kết với thuộc tính trợ năng
Thuộc tính aria-label cho phép bạn mô tả liên kết cho trình đọc màn hình. Ví dụ:
<a href="https://www.example.com" aria-label="Read more about building a brand">Đọc thêm</a>
Thuộc tính này hữu ích khi anchor text không mang tính mô tả.
Ví dụ: giả sử bạn hiển thị các đoạn trích nội dung và thêm liên kết “read more”:
Bạn có thể dùng “aria-label” để bổ sung ngữ cảnh cho liên kết “read more”.
Nhờ đó, người dùng trình đọc màn hình sẽ biết liên kết này dùng để làm gì.
8. Tạo liên kết bằng thuộc tính Title
Thuộc tính title hiển thị văn bản khi người dùng di chuột lên liên kết:
Bạn có thể thêm văn bản này bằng cách đưa thuộc tính title vào:
<a href="https://www.example.com" title="Read more about this topic by clicking this link">anchor text</a>
Hãy dùng thuộc tính này để cung cấp thêm ngữ cảnh cho các liên kết.
Ví dụ, hãy cho người dùng biết họ sẽ đến đâu khi nhấp vào liên kết. Trong ví dụ này, văn bản title có thể ghi: “click this link for an in-depth guide on this topic at www.example.com.”
9. Thêm mối quan hệ cho liên kết
Việc thêm mối quan hệ cho liên kết giúp công cụ tìm kiếm và trình duyệt hiểu được mối liên hệ giữa tài liệu được liên kết và tài liệu hiện tại.
Ví dụ: nếu bạn hợp tác với một doanh nghiệp khác, hãy thêm giá trị thuộc tính rel=”sponsored” vào phần tử anchor như sau:
<a href="https://www.example.com" rel="sponsored">anchor text</a>
Điều này cho công cụ tìm kiếm biết liên kết thuộc một hoạt động hợp tác quảng cáo/tài trợ.
Dưới đây là một số thuộc tính quan hệ phổ biến khác:
- Nofollow: Yêu cầu công cụ tìm kiếm bỏ qua liên kết này khi xếp hạng trên công cụ tìm kiếm. Hãy dùng thuộc tính này khi liên kết đến nội dung mà bạn không nhất thiết xác nhận hoặc khi muốn ngăn công cụ tìm kiếm truyền Link Equity đến trang được liên kết.
- noopener: Biện pháp bảo mật ngăn trang được mở truy cập thông tin từ trang ban đầu. Hãy dùng khi bạn sử dụng giá trị thuộc tính target=”_blank”. Thuộc tính này giúp bảo vệ website khỏi các lỗ hổng bảo mật tiềm ẩn.
- noreferrer: Ngăn trình duyệt gửi địa chỉ của trang ban đầu làm referrer. Hãy dùng khi bạn không muốn trang được liên kết theo dõi traffic giới thiệu từ website của mình.
Tạo kiểu và thiết kế liên kết bằng CSS
Với CSS, bạn có thể tùy chỉnh màu sắc và thiết kế liên kết sao cho phù hợp với thương hiệu.
CSS là viết tắt của cascading style sheets. Đây là ngôn ngữ bảng định kiểu, hướng dẫn trình duyệt web cách hiển thị tài liệu web được viết bằng các ngôn ngữ đánh dấu như HTML.
Chúng ta sẽ tìm hiểu hai cách chỉnh sửa CSS:
- Inline CSS
- Tệp CSS bên ngoài
Inline CSS
Inline CSS cho phép bạn thêm kiểu trực tiếp vào mã HTML của một phần tử.
Chỉ cần thêm thuộc tính style. Ví dụ:
<a href="https://www.example.com" style="color: red;">anchor text</a>
Trong đoạn mã này, chúng ta dùng “style” để thêm màu.
Bạn có thể đổi màu bằng cách dùng:
- Tên màu (như red)
- Mã HEX
- Giá trị RGB và RGBA
- giá trị HSL
Nếu muốn bỏ gạch chân của hyperlink, bạn có thể dùng thuộc tính “text-decoration:none;”. Ví dụ:
<a href="https://www.example.com" style="color: red; text-decoration: none;">Anchor text</a>
Inline CSS hữu ích khi bạn cần làm cho một hyperlink trông khác với các hyperlink còn lại.
Ví dụ, các liên kết của bạn đều có màu xanh lá. Nhưng bạn có một tệp có thể tải xuống và muốn liên kết đó có màu cam. Trong trường hợp này, hãy dùng inline CSS.
Tệp CSS bên ngoài
Tệp CSS bên ngoài cho phép bạn thiết lập kiểu chung.
Trong tệp CSS bên ngoài, hãy thêm đoạn code này:
a { color: red; /* Change this to your desired color */ text-decoration: none; /*Remove this line to keep the link’s underline */}
Cũng như với CSS nội tuyến, bạn có thể dùng keyword màu sắc, mã HEX, giá trị RGB và RGBA hoặc giá trị HSL để đặt màu cho các liên kết.
Kiểm tra hyperlink bằng Site Audit
Để mang đến trải nghiệm tốt cho người dùng, hãy đảm bảo hyperlink luôn hoạt động.
Nhờ đó, người dùng sẽ không gặp ngõ cụt và có thể tìm thấy những gì họ cần.
Dùng công cụ Site Audit của Semrush để kiểm tra website và tìm các liên kết bị hỏng.
Nhấp vào “Issues” rồi tìm kiếm “broken.”
Công cụ sẽ cho bạn biết những liên kết nào cần chú ý. Hãy sửa chúng để người dùng có thể dễ dàng điều hướng trên website và nhấp vào liên kết dẫn đến các website bên ngoài.
Dùng thử Site Audit miễn phí ngay hôm nay.
Đư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 ↗