Rel Html คืออะไร? คู่มือฉบับสมบูรณ์ 2026 ที่คุณต้องรู้!
Rel Html คืออะไร?
Rel html คือคุณสมบัติที่ใช้ใน HTML เพื่อระบุความสัมพันธ์ระหว่างเอกสาร HTML ปัจจุบันกับเอกสารอื่นๆ เช่น ไฟล์ JavaScript, CSS, หรือข้อมูลอื่นๆ ที่เกี่ยวข้อง โดยใช้ attribute rel ภายใน tag <link>
ความสำคัญของ rel html
- ช่วยให้เบราว์เซอร์โหลดทรัพยากรที่จำเป็นได้อย่างมีประสิทธิภาพ
- ปรับปรุง SEO ของเว็บไซต์
- เพิ่มความปลอดภัยและความน่าเชื่อถือของเว็บไซต์
ประเภทของ rel ที่ใช้บ่อย
1. rel="stylesheet" (CSS)
ใช้เพื่อเชื่อมโยงไฟล์ CSS ไปยัง HTML
ตัวอย่าง: <link rel="stylesheet" href="styles.css">
2. rel="canonical" (SEO)
ใช้เพื่อระบุ URL ที่ถูกต้องที่สุดสำหรับเนื้อหาที่ซ้ำกัน
ตัวอย่าง: <link rel="canonical" href="https://example.com/article">
3. rel="shortcut icon" (Icon)
ใช้เพื่อตั้งค่าไอคอนที่แสดงใน tab ของเบราว์เซอร์
ตัวอย่าง: <link rel="shortcut icon" href="favicon.ico">
4. rel="dns-prefetch" (DNS Prefetching)
ใช้เพื่อเร่งการโหลดหน้าเว็บโดยการ prefetch ข้อมูล DNS
ตัวอย่าง: <link rel="dns-prefetch" href="//example.com">
ตัวอย่างการใช้งาน rel html
สมมติว่าคุณมีเว็บไซต์ที่ใช้ JavaScript สำหรับการทำงานบางอย่าง คุณสามารถใช้ rel="preload" เพื่อโหลดไฟล์ JavaScript ล่วงหน้า:
ตัวอย่าง: <link rel="preload" href="script.js" as="script">
เคล็ดลับการใช้งาน rel html อย่างมีประสิทธิภาพ
- ใช้ rel="preload" สำหรับทรัพยากรที่จำเป็นต้องโหลดอย่างรวดเร็ว
- ใช้ rel="dns-prefetch" สำหรับโดเมนที่คุณใช้งานบ่อย
- ตรวจสอบ SEO โดยใช้ rel="canonical" เพื่อหลีกเลี่ยงปัญหาเนื้อหาที่ซ้ำกัน
- ปรับปรุงประสบการณ์ผู้ใช้โดยใช้ rel="shortcut icon" เพื่อตั้งค่าไอคอนที่น่าสนใจ
