Giải thích thẻ HTML Link (+ Tất cả thuộc tính và giá trị)

Thẻ HTML <link> giúp xác định mối quan hệ giữa các tài nguyên trên website của bạn.

Trong bài viết này, bạn sẽ hiểu thẻ HTML link là gì, cách sử dụng và những lỗi thường gặp khi thêm chúng vào trang web hoặc trang của bạn.

Thẻ HTML Link là gì?

Thẻ HTML <link> là một thẻ HTML (một đoạn mã) thiết lập kết nối giữa tài liệu bạn đang xem và các tài nguyên bên ngoài của nó (file hoặc tài sản khác).

Bạn nên đặt thẻ HTML link trong phần <head> của tài liệu HTML. Ví dụ như sau:

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<!-- Nội dung trang web của bạn đặt ở đây -->
</body>
</html>

Các trình duyệt hiện hỗ trợ thẻ HTML link bao gồm:

• Chrome
• Edge
• Safari
• Opera
• Firefox

Các trình duyệt không hỗ trợ thẻ HTML link có thể không hiển thị đúng. Nghĩa là chúng có thể bỏ qua thẻ này hoàn toàn và không hiển thị gì cả.

7 cách sử dụng thẻ HTML Link

Hãy xem một vài ví dụ phổ biến về thẻ link trong HTML.

Mẹo

Công cụ Site Audit của Semrush giúp bạn dễ dàng nhận diện lỗi liên quan đến thẻ HTML link. Chỉ cần vào tab “Issues” và dùng thanh tìm kiếm để tìm các vấn đề liên quan đến các trường hợp sử dụng dưới đây.

1. Liên kết đến Style Sheet bên ngoài

Style sheet bên ngoài là file chứa mã Cascading Style Sheets (CSS). Mã này định nghĩa kiểu dáng và bố cục của trang web — ví dụ như màu nền.

Để style sheet hoạt động, bạn phải liên kết nó với trang muốn áp dụng. Nếu không, trình duyệt sẽ không biết và không hiển thị đúng như bạn mong muốn.

Dưới đây là cách dùng thẻ HTML link để liên kết đến style sheet:

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<!-- Nội dung trang web của bạn đặt ở đây -->
</body>
</html>

2. Hiển thị Favicon

Favicon là biểu tượng nhỏ hiển thị trên tab hoặc bookmark của trình duyệt.

Ví dụ:

Dùng thẻ HTML link như ví dụ dưới đây để hiển thị favicon trên các trình duyệt khác nhau:

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="favicon.png">
</head>
<body>
<!-- Nội dung trang web của bạn đặt ở đây -->
</body>
</html>

3. Thiết lập Canonical URL

Một Canonical URL chỉ định phiên bản chính của một trang web khi Duplicate Content có Duplicate Content trên toàn bộ trang. Và cho các công cụ tìm kiếm biết trang nào cần ưu tiên và xếp hạng trong kết quả tìm kiếm organic (không trả phí).

Để chỉ định trang canonical, bạn dùng thẻ link HTML như sau:

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="canonical" href="https://www.example.com/canonical-page">
</head>
<body>
<!-- Nội dung trang web của bạn đặt ở đây -->
</body>
</html>

4. Thiết lập ngôn ngữ cho trang

Thuộc tính hreflang chỉ định ngôn ngữ và (tùy chọn) khu vực mục tiêu của tài liệu. Điều này rất hữu ích nếu bạn có nội dung bằng nhiều ngôn ngữ khác nhau.

Tại sao?

Bởi vì với thuộc tính hreflang, các công cụ tìm kiếm có thể hiển thị kết quả tìm kiếm phù hợp nhất cho người dùng ở các quốc gia khác nhau.

Ví dụ, nếu bạn tìm kiếm “semrush blog” ở Hoa Kỳ, bạn sẽ thấy kết quả này:

Nhưng nếu bạn ở Tây Ban Nha, bạn sẽ thấy kết quả này:

Bạn có thể định nghĩa các trang cho các quốc gia và ngôn ngữ khác nhau bằng cách dùng thẻ link HTML như dưới đây (trong ví dụ này có phiên bản thay thế bằng tiếng Tây Ban Nha và tiếng Pháp):

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="alternate" hreflang="en" href="https://example.com/page">
<link rel="alternate" hreflang="es" href="https://example.com/es/page">
<link rel="alternate" hreflang="fr" href="https://example.com/fr/page">
</head>
<body>
<!-- Nội dung trang web của bạn đặt ở đây -->
</body>
</html>

5. Tải trước các tài nguyên cụ thể

Tải trước yêu cầu trình duyệt lấy và lưu trữ tài nguyên vào bộ nhớ đệm ngay khi (hoặc ngay sau khi) trang bắt đầu tải. Điều này giúp cải thiện hiệu suất, tốc độ và trải nghiệm người dùng của website.

Một yêu cầu preload phổ biến là font chữ. Bạn có thể thiết lập font để tải trước bằng thẻ link HTML như sau:

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Tải trước font -->
<link rel="preload" as="font" type="font/woff2" href="your-font.woff2">

<!-- Liên kết tới file style bên ngoài sử dụng font -->
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<!-- Nội dung trang web của bạn đặt ở đây -->
</body>
</html>

Bạn có thể thiết lập preload tài nguyên theo từng trang riêng biệt.

6. Kết nối RSS Feed của bạn

RSS (Really Simple Syndication) là cách để các website chia sẻ nội dung và cập nhật.

Người dùng có thể đăng ký theo dõi nhiều website khác nhau qua các trình đọc RSS feed như thế này:

Điều này giúp họ biết khi nào các trang web đăng nội dung mới.

Sử dụng thẻ link HTML để liên kết đến RSS feed của bạn để người dùng có thể đăng ký theo dõi feed.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="rss-feed.xml">
</head>
<body>
<!-- Nội dung trang web của bạn đặt ở đây -->
</body>
</html>

7. Liên kết đến font bên ngoài

Thẻ link HTML cho phép bạn liên kết đến font bên ngoài (như Google Fonts) để sử dụng trên trang của bạn.

Dưới đây là đoạn mã bạn có thể dùng:

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Liên kết đến font bên ngoài từ Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
</head>
<body>
<!-- Nội dung trang web của bạn đặt ở đây -->
</body>
</html>

Thuộc tính và giá trị bổ sung của thẻ HTML link

Thuộc tính của thẻ link thuộc tính cung cấp thông tin bổ sung và nằm giữa thẻ mở và thẻ đóng.

Và giá trị chỉ định nội dung cụ thể gán cho một thuộc tính.

Cả thuộc tính và giá trị đều hướng dẫn thẻ link HTML thực hiện nhiệm vụ được giao. Nói cách khác, chúng chỉ cách hoạt động của thẻ.

Dưới đây là các thuộc tính thẻ link HTML hiện tại và các giá trị phổ biến của chúng:

Những lỗi thường gặp khi sử dụng thẻ Link

Dưới đây là những lỗi phổ biến khi thêm thẻ <link> vào trang web. Tránh những lỗi này sẽ giúp thẻ link của bạn hoạt động tốt và trình duyệt có thể đọc được chúng.

Thêm thẻ vào phần thân trang

Thẻ link trong HTML phải nằm trong phần <head> của tài liệu HTML.

Tại sao?

Bởi vì theo semantic HTMLphần <head> của tài liệu HTML là nơi chứa metadata. (Metadata là thông tin mô tả dữ liệu. Và thẻ link trong HTML được xem là phần tử metadata.)

Thẻ link HTML có thể không hoạt động như mong đợi nếu bạn đặt nó trong phần <body>.

Ví dụ, đặt thẻ link cho style sheet trong phần <body> có thể gây ra độ trễ khi tải style của trang web đó.

Bạn có thể kiểm tra vị trí thẻ link bằng cách xem mã nguồn trang. Nhấp chuột phải lên trang trong trình duyệt và chọn “View Page Source.”

Sau đó, nhấn Ctrl+F (Command+F trên Mac) và tìm kiếm <head>.

(Bạn cũng có thể tìm </head> để xác định phần kết thúc của <head>.)

Duyệt qua mã để đảm bảo các thẻ link trong HTML nằm trong cặp thẻ <head> và </head>. Nếu không, hãy di chuyển chúng hoặc liên hệ với nhà phát triển web để được hỗ trợ.

Sử dụng thuộc tính hoặc giá trị sai

Bạn chỉ có thể dùng các giá trị cụ thể cho từng thuộc tính. Một số thuộc tính chỉ hoạt động khi kết hợp với các thuộc tính khác.

Ví dụ, nếu bạn dùng “rel=preload” trong thẻ link, bạn phải cũng dùng thuộc tính as.

Tham khảo danh sách thuộc tính và giá trị của thẻ link HTML ở trên để đảm bảo bạn dùng đúng.

Dùng thuộc tính đã bị deprecated

Thuộc tính deprecated—nghĩa là lỗi thời—có thể không hoạt động vì trình duyệt hiện đại thường ngừng hỗ trợ chúng.

Các tổ chức như World Wide Web Consortium (W3C) có thể quyết định deprecated thuộc tính vì nhiều lý do, như thay đổi công nghệ.

Ví dụ, thuộc tính rev trước đây dùng để thể hiện mối quan hệ ngược giữa tài liệu hiện tại và tài liệu được liên kết. Ví dụ:

<link rev="made" href="related-document.html">

Thẻ link HTML này cho biết tài liệu được liên kết (related-document.html) được tạo ra bởi tài liệu hiện tại.

Nhưng vì thuộc tính rev chỉ thể hiện mối quan hệ ngược, W3C đã deprecated nóvà hiện khuyên dùng thuộc tính rel thay thế, vì rel linh hoạt hơn.

Dưới đây là cách bạn chỉnh sửa ví dụ trên bằng cách dùng thuộc tính rel hiện tại:

<link rel="author" href="related-document.html">

Các thuộc tính không còn được dùng khác cho thẻ liên kết HTML bao gồm:

• charset: Xác định mã hóa của tài nguyên được liên kết
• methods: Cung cấp thông tin về các chức năng hoặc hành động có thể thực hiện trên đối tượng được liên kết
• target: Chỉ định xem tài liệu được liên kết có nên tải trong cửa sổ hoặc khung hay không

Kiểm tra mã của bạn để phát hiện các thuộc tính này. Và thay thế chúng bằng lựa chọn phù hợp hơn nếu cần.

Kiểm tra các vấn đề về thẻ liên kết HTML trên trang của bạn

Sử dụng công cụ chẩn đoán như Site Audit để theo dõi các vấn đề kỹ thuật trên trang của bạn, bao gồm những lỗi phát sinh từ thẻ liên kết HTML.

Cách thực hiện như sau.

Mở Site AuditNhập URL tên miền của bạn và nhấn “Start Audit”.”

Một menu sẽ hiện ra để bạn cấu hình tất cả các thiết lập.

Mẹo chuyên nghiệp

Sử dụng hướng dẫn cấu hình Site Audit của chúng tôi Site Audit configuration guide để giúp bạn tùy chỉnh cuộc kiểm tra phù hợp với nhu cầu trang web.

Tiếp theo, nhấn “Start Site Audit”.”

Khi quá trình kiểm tra hoàn tất, bạn sẽ nhận được báo cáo chi tiết về những gì cần cải thiện.

Nhấn vào tab “Issues”.

Danh sách các vấn đề kỹ thuật trên trang sẽ hiện ra.

Ví dụ, các trang có Duplicate Content — sẽ được lợi khi có thẻ liên kết HTML với thuộc tính canonical.

Site Audit cũng phát hiện lỗi hreflang, lỗi thẻ canonical và các trang tải chậm. (Trang tải chậm có thể cải thiện bằng cách dùng thuộc tính fetchpriority trong thẻ liên kết HTML.)

Bạn có thể nhấn “Why and how to fix it” bên cạnh mỗi vấn đề để hiểu rõ và xử lý chúng.

Xử lý các vấn đề này giúp bạn tạo trải nghiệm người dùng tốt trên trang, đồng thời tối ưu các trang để công cụ tìm kiếm dễ dàng crawl, index và xếp hạng trong kết quả tìm kiếm.

Hãy thử Site Audit miễn phí.