rel=noopener, noreferrer และ nofollow ทำอะไรจริง ๆ

สรุปสั้น ๆ

แอตทริบิวต์ rel บนลิงก์อธิบายความสัมพันธ์ระหว่างหน้าปัจจุบันกับหน้าที่ลิงก์ไป ฟังดูเป็นนามธรรม แต่มีค่าสามค่าที่พบอยู่เสมอในงานเว็บประจำวัน:

<a href="https://example.com" target="_blank" rel="noopener noreferrer nofollow">
  External resource
</a>

โทเคนทั้งสามนี้มักถูกวางรวมกันราวกับว่ามันทำสิ่งเดียวกัน แต่จริง ๆ แล้วไม่ใช่

• noopener เป็นการควบคุมด้านความปลอดภัยของเบราว์เซอร์
• noreferrer เป็นการควบคุมด้านความเป็นส่วนตัวและ analytics
• nofollow เป็นสัญญาณสำหรับเสิร์ชเอนจิน

สามารถใช้ร่วมกันได้ แต่คุณควรรู้ว่าแต่ละตัวมีอยู่เพื่ออะไร การใส่ทั้งสามตัวให้กับทุกลิงก์ขาออกไม่ได้ผิดเสมอไป แต่โดยมากเป็นวิธีที่ขาดความรอบคอบ

rel=noopener ป้องกัน reverse tabnabbing

rel="noopener" บอกเบราว์เซอร์ว่าอย่าให้หน้าใหม่ที่เปิดขึ้นเข้าถึงหน้าต้นทางผ่าน window.opener

เรื่องนี้สำคัญเป็นพิเศษเมื่อคุณเปิดลิงก์ในแท็บหรือหน้าต่างใหม่โดยใช้ target="_blank":

<a href="https://external.example" target="_blank" rel="noopener">
  Open external site
</a>

หากไม่มี noopener หน้าปลายทางอาจรัน JavaScript แบบนี้ได้:

window.opener.location = 'https://phishing.example';

การโจมตีนี้มักเรียกว่า reverse tabnabbing ผู้ใช้คลิกลิงก์ที่ถูกต้อง ไปยังอีกไซต์หนึ่ง แล้วแท็บต้นทางถูกพาไปยังหน้าเข้าสู่ระบบปลอมหรือปลายทางที่เป็นอันตรายอื่น ๆ อย่างเงียบ ๆ

เบราว์เซอร์สมัยใหม่ปรับปรุงเรื่องนี้แล้ว ในพฤติกรรมของเบราว์เซอร์ปัจจุบัน โดยทั่วไป target="_blank" จะถูกปฏิบัติราวกับว่ามี rel="noopener" อยู่แล้ว นั่นเป็นเรื่องดี แต่ไม่ได้ทำให้การระบุแอตทริบิวต์อย่างชัดเจนไร้ประโยชน์ noopener แบบชัดเจนยังมีประโยชน์เพราะ:

• มันบันทึกเจตนาของคุณไว้ในโค้ด;
• มันปกป้องสภาพแวดล้อมการท่องเว็บที่เก่ากว่าหรือไม่ปกติ;
• มันหลีกเลี่ยงการพึ่งพาว่า embedded web view ทุกตัวจะทำงานเหมือนเบราว์เซอร์เดสก์ท็อปสมัยใหม่;
• มันทำให้การ review โค้ดง่ายขึ้น

สำหรับลิงก์ภายนอกที่เปิดในแท็บใหม่ rel="noopener" เป็นค่าเริ่มต้นที่สมเหตุสมผล

noopener มีผลต่อ SEO หรือไม่?

ไม่มีผลอย่างมีนัยสำคัญ noopener มีไว้สำหรับพฤติกรรมของเบราว์เซอร์ มันไม่ได้บอกเสิร์ชเอนจินว่าคุณรับรองหน้านั้นหรือไม่, link equity ควรถูกส่งต่อหรือไม่ หรือว่าลิงก์นั้นเป็นลิงก์แบบชำระเงินหรือไม่

ถ้านโยบาย SEO ของคุณถือว่า noopener เป็นคำสั่งด้านการจัดอันดับ นโยบายนั้นควรถูกแก้ไข

rel=noreferrer ซ่อนหน้าที่อ้างอิงมา

rel="noreferrer" บอกเบราว์เซอร์ว่าอย่าส่ง HTTP header Referer เมื่อผู้ใช้ตามลิงก์นั้นไป

ใช่ ชื่อ header นี้สะกดผิดมาตั้งแต่ประวัติศาสตร์ว่า Referer ส่วนแอตทริบิวต์สะกดว่า noreferrer

โดยปกติ เมื่อผู้ใช้คลิกลิงก์จากหน้าของคุณไปยังอีกไซต์หนึ่ง ปลายทางอาจได้รับค่า referrer ที่แสดงว่าการเข้าชมมาจากที่ใด ขึ้นอยู่กับ Referrer-Policy ของไซต์คุณ ค่านั้นอาจเป็น URL เต็ม, เฉพาะ origin หรือไม่มีอะไรเลย

ตัวอย่างเช่น ปลายทางอาจเห็น:

Referer: https://www.example.com/pricing?plan=enterprise

หรือเห็นเพียง:

Referer: https://www.example.com/

เมื่อใช้ rel="noreferrer" เบราว์เซอร์ไม่ควรส่ง header นั้นสำหรับการนำทางครั้งนั้น

<a href="https://external.example" rel="noreferrer">
  External site
</a>

ในทางปฏิบัติ noreferrer ยังทำงานคล้าย noopener ในเบราว์เซอร์สมัยใหม่ด้วย หากคุณใช้ noreferrer โดยทั่วไปคุณไม่จำเป็นต้องใช้ noopener เพื่อความปลอดภัยบนลิงก์เดียวกันนั้น หลายทีมยังคงเขียนทั้งคู่เพื่อความชัดเจน:

<a href="https://external.example" target="_blank" rel="noopener noreferrer">
  External site
</a>

แบบนั้นใช้ได้ เป็นการซ้ำซ้อน แต่เข้าใจง่าย

เมื่อใดที่ noreferrer มีประโยชน์

ใช้ noreferrer เมื่อ URL ของหน้าปัจจุบันไม่ควรถูกเปิดเผยให้ปลายทางรู้

ตัวอย่างที่พบบ่อย:

• ลิงก์จาก dashboard ส่วนตัว;
• ลิงก์จากสภาพแวดล้อม preview ที่ยังไม่เผยแพร่;
• ลิงก์จาก URL ที่มี query parameter ที่อ่อนไหว;
• ลิงก์ในเครื่องมือ admin, คิว moderation, หน้าจอ CRM หรือระบบ customer support;
• ลิงก์ที่ปลายทางไม่ควรรู้หน้าต้นทางที่แน่ชัด

ประเด็นสุดท้ายไม่ได้เกี่ยวกับการปกปิดเสมอไป บางครั้งเป็นเรื่องของการลดข้อมูลให้น้อยที่สุด หากปลายทางไม่จำเป็นต้องรู้ URL ที่อ้างอิงมา ก็อย่าส่งไป

เรื่องนี้สอดคล้องกับทิศทางกว้าง ๆ ของการออกแบบเว็บที่คำนึงถึงความเป็นส่วนตัว เบราว์เซอร์ ผู้ใช้ และหน่วยงานกำกับดูแลต่างขยับไปสู่การส่งข้อมูลแวดล้อมโดยค่าเริ่มต้นให้น้อยลง หากคุณกำลังกลับมาทบทวนเรื่องนี้ บทความของเราเรื่อง สิ่งที่เปลี่ยนไปสำหรับ cookies ในปี 2026 และควรทำอย่างไร ครอบคลุมการเปลี่ยนแปลงโดยรวมแบบเดียวกัน: การติดตามที่มองไม่เห็นน้อยลง และการไหลของข้อมูลที่ตั้งใจมากขึ้น

ข้อแลกเปลี่ยนด้าน analytics

noreferrer อาจทำให้การระบุแหล่งที่มาของไซต์ที่คุณลิงก์ไปเสียหายได้ analytics ของพวกเขาอาจจัดประเภทการเข้าชมเป็น direct traffic แทนที่จะเป็น referral traffic

นั่นไม่ใช่ปัญหาหลักของคุณ แต่สามารถมีความสำคัญใน partnership, affiliate relationship, customer journey และ ecosystem ข้ามโดเมนภายใน หากทีม marketing ของคุณคาดหวังให้ไซต์พาร์ตเนอร์เห็น referral traffic จากโดเมนของคุณ การใช้ noreferrer แบบครอบคลุมทั้งหมดอาจสร้างความสับสน

สำหรับลิงก์บทความทั่วไปจำนวนมาก แนวทางที่ดีกว่าคือกำหนด header Referrer-Policy ระดับทั้งไซต์ แทนที่จะใส่ noreferrer ทุกที่ ตัวอย่างเช่น:

Referrer-Policy: strict-origin-when-cross-origin

นโยบายนี้ส่ง URL เต็มสำหรับการนำทางภายใน origin เดียวกัน, ส่งเฉพาะ origin ไปยังปลายทางข้าม origin ที่ปลอดภัย และไม่ส่ง referrer เมื่อย้ายจาก HTTPS ไป HTTP เป็นค่าเริ่มต้นที่ใช้งานได้จริงสำหรับหลายไซต์

หากคุณต้องการตรวจสอบว่า headers ทำงานอย่างไรใน production การตรวจ HTTP แบบ raw มักชัดเจนกว่าการเดาจาก dashboard analytics เวิร์กโฟลว์ใน ชุดเครื่องมือขนาดเล็กสำหรับ debug redirects และ HTTP headers ใน production ใช้กับการ debug referrer-policy ได้โดยตรง

rel=nofollow มีไว้สำหรับเสิร์ชเอนจิน ไม่ใช่เบราว์เซอร์

rel="nofollow" บอกเสิร์ชเอนจินว่าคุณไม่ต้องการสื่อว่าคุณรับรองหน้าที่ลิงก์ไป

<a href="https://external.example" rel="nofollow">
  User-submitted link
</a>

เดิมที nofollow ถูกนำมาใช้เพื่อต่อสู้กับสแปมใน comment แนวคิดนั้นเรียบง่าย: ถ้าลิงก์ใน comment ไม่ส่งผ่านเครดิตด้านการจัดอันดับ spammers ก็จะมีแรงจูงใจน้อยลงในการถล่มบล็อกและฟอรัม

ปัจจุบัน Google ถือว่า nofollow เป็น hint มากกว่าจะเป็นคำสั่งแบบเด็ดขาด ความแตกต่างนี้สำคัญ หมายความว่าเสิร์ชเอนจินอาจใช้ลิงก์เพื่อการค้นพบหรือระบบจัดอันดับในบางบริบท แต่คุณกำลังส่งสัญญาณอย่างชัดเจนว่าลิงก์นั้นไม่ควรถูกปฏิบัติเหมือนการรับรองเชิงบรรณาธิการตามปกติ

เมื่อใดควรใช้ nofollow

ใช้ nofollow เมื่อคุณกำลังลิงก์ แต่ไม่ต้องการรับรองปลายทาง

ตัวอย่างที่สมเหตุสมผล ได้แก่:

• ลิงก์ที่ผู้ใช้สร้างขึ้นและยังไม่น่าเชื่อถือ;
• ลิงก์ใน comment สาธารณะหรือ profile;
• ลิงก์ไปยังไซต์ที่ถูกกล่าวถึงในฐานะตัวอย่างของพฤติกรรมที่ไม่ดี;
• ลิงก์ที่ใส่ไว้เพื่ออ้างอิงแต่ไม่ใช่การรับรอง;
• ลิงก์ในพื้นที่ที่มีการ moderation จำกัด

สำหรับลิงก์แบบชำระเงินหรือ sponsored ให้ใช้ rel="sponsored" เป็นหลัก สำหรับเนื้อหาที่ผู้ใช้สร้างขึ้น ให้ใช้ rel="ugc" เป็นหลัก คุณสามารถรวมค่าได้หากจำเป็น:

<a href="https://example.com" rel="ugc nofollow">
  User profile link
</a>

หากคุณมี public forms, comments, directories หรือ profile pages แอตทริบิวต์ลิงก์เป็นเพียงส่วนหนึ่งของปัญหาการใช้งานในทางที่ผิด สแปมมักเริ่มตั้งแต่ขั้นตอนการส่งข้อมูลก่อนหน้านั้น เรามีบทวิเคราะห์แยกเรื่อง ทำไม contact form ของคุณจึงเป็นความเสี่ยงสแปมที่ใหญ่ที่สุด และบทเรียนเดียวกันก็ใช้ได้ที่นี่: อย่าคาดหวังว่า nofollow จะชดเชยการ moderation ที่อ่อนแอได้

สิ่งที่ nofollow ไม่ได้ทำ

nofollow ไม่ได้ป้องกันผู้ใช้จากการคลิกลิงก์ มันไม่ได้บล็อกเบราว์เซอร์จากการส่ง referrer มันไม่ได้ซ่อนปลายทางจากการมองเห็น และมันไม่ได้ทำให้ target="_blank" ปลอดภัย

มันยังไม่รับประกันว่า URL จะไม่ถูก crawl เลย หากเสิร์ชเอนจินพบ URL นั้นจากที่อื่น ก็ยังสามารถ crawl ได้ หากคุณต้องการป้องกันการ indexing ให้ใช้การควบคุม robots ที่เหมาะสมบนหน้าปลายทาง เช่น noindex ไม่ใช่แอตทริบิวต์ nofollow บนลิงก์ของคนอื่น

การใช้ร่วมกันที่พบบ่อย

ลิงก์ภายนอกที่เปิดในแท็บใหม่

<a href="https://external.example" target="_blank" rel="noopener">
  External resource
</a>

นี่คือ baseline มันจัดการปัญหาความปลอดภัยที่เกิดจากการเปิด browsing context ใหม่

หากคุณไม่ต้องการส่งข้อมูล referrer ด้วย:

<a href="https://external.example" target="_blank" rel="noopener noreferrer">
  External resource
</a>

การวางตำแหน่งแบบชำระเงิน

<a href="https://sponsor.example" rel="sponsored">
  Sponsor site
</a>

คุณสามารถเพิ่ม noopener ได้หากลิงก์เปิดในแท็บใหม่:

<a href="https://sponsor.example" target="_blank" rel="sponsored noopener">
  Sponsor site
</a>

อย่าใช้ nofollow เป็นตัวแทนแบบคลุมเครือสำหรับการเปิดเผยลิงก์แบบชำระเงิน ตอนนี้เสิร์ชเอนจินมีค่าที่เฉพาะเจาะจงกว่าสำหรับเรื่องนั้นแล้ว: sponsored

ลิงก์ที่ผู้ใช้สร้างขึ้น

<a href="https://user-submitted.example" rel="ugc nofollow">
  User-submitted site
</a>

สิ่งนี้บอกเสิร์ชเอนจินว่าลิงก์ถูกส่งมาโดยผู้ใช้ และไม่ควรถูกปฏิบัติเหมือนคะแนนโหวตเชิงบรรณาธิการตามปกติ

ลิงก์ภายใน

ลิงก์ภายในส่วนใหญ่ไม่จำเป็นต้องใช้ค่าเหล่านี้เลย

อย่าใส่ nofollow ให้ลิงก์ภายในเป็นกลยุทธ์ sculpting ตาม routine โดยปกติจะสร้างความสับสนมากกว่าประโยชน์ หากหน้าไม่ควรถูก index ให้จัดการเรื่องนั้นโดยตรง หากหน้าไม่ควรถูก crawl ให้คิดอย่างรอบคอบเกี่ยวกับ robots rules, authentication, canonicalization และสถาปัตยกรรมไซต์

สำหรับลิงก์ภายในที่เปิดในแท็บใหม่ noopener ยังคงไม่เป็นอันตรายและอาจเหมาะสม แต่คำถามที่ดีกว่าคือ ทำไมลิงก์ภายในนั้นต้องเปิดแท็บใหม่ตั้งแต่แรก

นโยบายที่ใช้งานได้จริงสำหรับทีม

house style แบบง่าย ๆ ช่วยป้องกันข้อผิดพลาดส่วนใหญ่ได้:

1. เพิ่ม rel="noopener" ให้ลิงก์ที่มี target="_blank" โดยเฉพาะลิงก์ภายนอก
2. เพิ่ม noreferrer เฉพาะเมื่อการซ่อน URL ต้นทางเป็นเจตนาชัดเจน
3. เพิ่ม nofollow เฉพาะเมื่อคุณไม่รับรองปลายทาง
4. ใช้ sponsored สำหรับลิงก์แบบชำระเงิน และ ugc สำหรับลิงก์ที่ผู้ใช้ส่งมา
5. อย่าใช้แอตทริบิวต์ลิงก์แทน access control, moderation หรือ indexing rules

ส่วนสำคัญคือเจตนา ทุกโทเคนใน rel ควรตอบคำถามที่เฉพาะเจาะจง:

• Security: หน้าใหม่ควรถูกแยกออกจาก opener หรือไม่?
• Privacy: ปลายทางควรได้รับข้อมูล referrer หรือไม่?
• SEO: เรากำลังรับรองลิงก์นี้ในฐานะ reference เชิงบรรณาธิการหรือไม่?

ถ้าไม่มีใครในทีมตอบคำถามเหล่านี้ได้ แอตทริบิวต์นั้นก็น่าจะเป็น cargo cult HTML

วิธีทดสอบสิ่งที่กำลังเกิดขึ้น

สำหรับ noopener ให้เปิดลิงก์และตรวจว่าปลายทางเข้าถึง window.opener ได้หรือไม่ ในหน้า test ที่ควบคุมได้ window.opener ควรเป็น null เมื่อ noopener ทำงานอยู่

สำหรับ noreferrer ให้ตรวจ network request ฝั่งปลายทาง หรือใช้ request logger ในสภาพแวดล้อมทดสอบ Browser DevTools สามารถแสดง outgoing request headers ได้ แต่ server-side logs มักเชื่อถือได้มากกว่า

สำหรับ nofollow การทดสอบไม่เห็นผลทันทีเท่าไร เพราะมันเป็นการตีความของเสิร์ชเอนจิน ไม่ใช่พฤติกรรมของเบราว์เซอร์ การตรวจที่ดีที่สุดคือดู source: ยืนยันว่า HTML ที่ render แล้วมีค่า rel ตามที่คาดไว้ หาก frontend framework ของคุณ rewrite ลิงก์ ให้ตรวจ DOM สุดท้าย ไม่ใช่แค่ template

บทสรุป

แอตทริบิวต์เหล่านี้เล็ก แต่ตั้งอยู่ตรงจุดตัดของ security, privacy และ SEO การปฏิบัติกับมันเหมือนใช้แทนกันได้สร้างนิสัยที่ไม่ดี

ใช้ noopener อย่างกว้างขวางกับลิงก์ที่เปิดแท็บใหม่ ใช้ noreferrer อย่างตั้งใจเมื่อความเป็นส่วนตัวของ referrer สำคัญ ใช้ nofollow เมื่อคุณกำลังส่ง statement ต่อเสิร์ชเอนจินเกี่ยวกับการรับรอง และเมื่อเป็นลิงก์แบบชำระเงินหรือผู้ใช้สร้างขึ้น ให้ใช้ค่าสมัยใหม่ที่เฉพาะเจาะจงกว่า: sponsored และ ugc

เท่านี้ก็เพียงพอสำหรับไซต์ส่วนใหญ่ เป้าหมายไม่ใช่การตกแต่งทุกลิงก์ เป้าหมายคือทำให้แต่ละลิงก์บอกเบราว์เซอร์และเสิร์ชเอนจินอย่างแม่นยำว่าพวกเขาจำเป็นต้องรู้อะไร