ใช้แอตทริบิวต์ rel เพื่อระบุความสัมพันธ์ระหว่างเอกสารปัจจุบันกับเอกสารลิงก์ ทำงานกับ <a>, <area>, <link>
ตัวอย่าง
ลองรันโค้ดต่อไปนี้เพื่อใช้งานแอตทริบิวต์ rel (ตัวอย่างตั้งค่า CSS):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Heading</h1>
<p>This is demo content.</p>
</body>
</html>
ค่า rel ที่สำคัญและใช้บ่อย
| ค่า rel | วัตถุประสงค์ | ใช้กับ |
|---|---|---|
stylesheet |
เชื่อมโยงไฟล์ CSS | <link> |
preload |
โหลดทรัพยากรล่วงหน้า (Performance) | <link> |
prefetch |
ดึงทรัพยากรล่วงหน้าสำหรับหน้าถัดไป | <link> |
preconnect |
เชื่อมต่อ Server ล่วงหน้า (DNS, TCP, TLS) | <link> |
dns-prefetch |
Resolve DNS ล่วงหน้า | <link> |
icon / shortcut icon |
Favicon | <link> |
manifest |
Web App Manifest (PWA) | <link> |
canonical |
URL แท้สำหรับ SEO (ป้องกัน Duplicate Content) | <link> |
alternate |
เวอร์ชันอื่น (ภาษา, RSS, AMP) | <link> |
noopener |
ป้องกัน window.opener access (Security) - ใช้กับ target="_blank" | <a>, <area> |
noreferrer |
ไม่ส่ง Referrer header | <a>, <area> |
nofollow |
บอก Search Engine ไม่ต้องติดตาม (SEO) | <a>, <area> |
ugc |
User Generated Content (Comment links) | <a>, <area> |
sponsored |
ลิงก์โฆษณา/สปอนเซอร์ (SEO) | <a>, <area> |
author |
ลิงก์ไปหน้าผู้เขียน | <a>, <link> |
license |
ลิงก์ไป License | <a>, <link> |
next, prev |
หน้าถัดไป/ก่อนหน้า (Pagination) | <a>, <link> |
help |
ลิงก์ไป Help/FAQ | <a>, <link> |
bookmark |
Permalink | <a> |
tag |
Tag/Keyword | <a> |
external |
ลิงก์ภายนอก (Non-standard แต่ใช้กัน) | <a> |
ตัวอย่างการใช้งานจริง
<head>
<!-- SEO -->
<link rel="canonical" href="https://example.com/article">
<link rel="alternate" hreflang="th" href="https://example.com/th/article">
<link rel="alternate" hreflang="en" href="https://example.com/en/article">
<!-- Performance -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preload" as="font" href="font.woff2" type="font/woff2" crossorigin>
<link rel="prefetch" href="next-page.html">
<!-- Icons -->
<link rel="icon" href="/favicon.ico">
<link rel="icon" sizes="192x192" href="/icon-192.png">
<link rel="apple-touch-icon" href="/icon-192.png">
<link rel="manifest" href="/manifest.json">
</head>
<body>
<article>
<a rel="author" href="/author/john">John Doe</a>
<a rel="license" href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>
<a rel="bookmark" href="/article/123">Permalink</a>
<a rel="tag" href="/tag/html">HTML</a>
</article>
<nav>
<a rel="prev" href="/page/1">Previous</a>
<a rel="next" href="/page/3">Next</a>
</nav>
<a href="https://external.com" target="_blank" rel="noopener noreferrer">External</a>
<a href="/sponsored" rel="sponsored">Sponsored Link</a>
<a href="/comments" rel="ugc">User Comment Link</a>
</body>
rel="preload" - Performance Optimization
<link rel="preload" as="style" href="critical.css">
<link rel="preload" as="script" href="critical.js">
<link rel="preload" as="font" href="font.woff2" type="font/woff2" crossorigin>
<link rel="preload" as="image" href="hero.jpg">
<link rel="preload" as="video" href="video.mp4">
as attribute บอกเบราว์เซอร์ประเภททรัพยากร เพื่อตั้ง Priority และ Headers ให้ถูกต้อง
