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" เพื่อตั้งค่าไอคอนที่น่าสนใจ

คำถามที่พบบ่อย (FAQ)