Khi xây dựng một trang web, việc kiểm soát cách các liên kết hoạt động không chỉ ảnh hưởng đến trải nghiệm người dùng mà còn quyết định mức độ bảo mật và tính chính xác của dữ liệu đo lường. Một trong những thuộc tính HTML thường gây nhầm lẫn nhất cho các quản trị viên web chính là thẻ noreferrer.
Nếu bạn từng kiểm tra mã nguồn của một bài viết và thắc mắc tại sao hệ thống lại tự động chèn thêm đoạn mã lạ vào các liên kết ngoài, bạn không hề đơn độc. Thuộc tính này đóng vai trò như một bức tường rào bảo vệ thông tin nguồn, ngăn chặn các rủi ro bảo mật tiềm ẩn khi người dùng nhấp vào một đường dẫn mở ra tab mới.
Tại V4SEO, trong quá trình tư vấn và tối ưu hóa kỹ thuật cho hàng trăm dự án lớn nhỏ, chúng tôi nhận thấy rất nhiều người làm marketing hiểu sai về tác động của thẻ này đối với hiệu suất tìm kiếm. Sự nhầm lẫn giữa các thuộc tính liên kết thường dẫn đến những quyết định sai lầm trong việc đo lường lưu lượng truy cập.
Bài viết này sẽ giải phẫu chi tiết bản chất của thuộc tính noreferrer, cách nó tương tác với hệ thống phân tích dữ liệu và những tiêu chuẩn triển khai an toàn nhất cho website của bạn.
rel=noreferrer là gì?
Thuộc tính rel=noreferrer là một khai báo trong thẻ a của ngôn ngữ HTML, được sử dụng để hướng dẫn trình duyệt web không truyền tải thông tin về trang gốc (trang mà người dùng đang đứng) sang trang đích khi họ nhấp vào một liên kết.
Về mặt kỹ thuật, khi một liên kết thông thường được nhấp, trình duyệt sẽ gửi kèm một HTTP header có tên là Referrer header. Header này chứa URL của trang web ban đầu, giúp máy chủ của trang đích biết được lưu lượng truy cập đến từ đâu. Khi bạn thêm thuộc tính noreferrer vào liên kết, trình duyệt sẽ chủ động loại bỏ Referrer header này. Kết quả là trang đích sẽ coi lượt truy cập đó như một lượt truy cập trực tiếp (Direct traffic) thay vì truy cập giới thiệu (Referral traffic).
Tại sao cần sử dụng rel=noreferrer?
Việc ẩn thông tin nguồn truy cập mang lại hai lợi ích cốt lõi về quyền riêng tư và bảo mật. Khi bạn liên kết đến một trang web bên thứ ba mà bạn không hoàn toàn tin tưởng, việc không tiết lộ URL gốc giúp bảo vệ dữ liệu nội bộ hoặc các tham số nhạy cảm có thể vô tình xuất hiện trên đường dẫn của bạn.
Quan trọng hơn, thuộc tính này giải quyết một lỗ hổng bảo mật nghiêm trọng liên quan đến đối tượng window.opener trong JavaScript. Theo tài liệu tiêu chuẩn từ MDN Web Docs, khi bạn sử dụng thuộc tính target=_blank để mở một liên kết trong tab mới, trang đích sẽ có quyền truy cập một phần vào tab gốc thông qua window.opener.
Nếu trang đích bị kiểm soát bởi tin tặc, chúng có thể lợi dụng quyền này để thực hiện cuộc tấn công tabnabbing. Kẻ gian sẽ âm thầm thay đổi URL của tab gốc thành một trang web giả mạo nhằm đánh cắp thông tin đăng nhập. Thuộc tính noreferrer sẽ cắt đứt mối liên kết này, vô hiệu hóa hoàn toàn đối tượng window.opener và bảo vệ an toàn cho người dùng.
Để hiểu rõ hơn về cách thiết lập các lớp bảo vệ tương tự, bạn có thể tham khảo thêm cách sử dụng thuộc tính rel=noopener để bảo mật liên kết trong các dự án phát triển web hiện đại.
So sánh rel=noreferrer, rel=noopener và rel=nofollow
Sự nhầm lẫn phổ biến nhất trong giới quản trị web là việc đánh đồng các thuộc tính rel với nhau. Mỗi thuộc tính phục vụ một mục đích kỹ thuật hoàn toàn riêng biệt và không thể thay thế cho nhau.
Bảng dưới đây phân tích chi tiết sự khác biệt giữa ba thuộc tính liên kết quan trọng nhất để bạn dễ dàng đưa ra quyết định triển khai:
|
Thuộc tính |
Chức năng chính |
Tác động đến SEO (PageRank) |
Tác động đến Analytics |
Bảo mật window.opener |
|
rel="noreferrer" |
Ẩn Referrer header khỏi trang đích |
Không ảnh hưởng |
Chuyển thành Direct traffic |
Có bảo vệ |
|
rel="noopener" |
Ngăn trang đích truy cập tab gốc |
Không ảnh hưởng |
Giữ nguyên Referral traffic |
Có bảo vệ |
|
rel="nofollow" |
Yêu cầu bot không theo dõi liên kết |
Ngăn truyền sức mạnh SEO |
Giữ nguyên Referral traffic |
Không bảo vệ |
Như vậy, nếu mục tiêu của bạn là kiểm soát dòng chảy sức mạnh SEO, nofollow là lựa chọn duy nhất. Trong khi đó, hai thuộc tính còn lại thuần túy giải quyết các bài toán về bảo mật và quyền riêng tư của trình duyệt.
Ảnh hưởng của rel=noreferrer đến SEO và Google Analytics như thế nào?
Một trong những lầm tưởng lớn nhất là cho rằng việc ẩn thông tin nguồn sẽ làm giảm thứ hạng từ khóa hoặc gây hại cho chiến dịch tối ưu hóa công cụ tìm kiếm. Thực tế, Googlebot hoàn toàn bỏ qua thuộc tính này khi đánh giá chất lượng và luồng sức mạnh của các liên kết.
Tuy nhiên, đối với Google Analytics, tác động lại vô cùng rõ rệt. Khi một người dùng nhấp vào liên kết có chứa thuộc tính này để đi từ website A sang website B, Google Analytics trên website B sẽ không thể nhận diện được website A là nguồn giới thiệu.
Hệ thống phân tích dữ liệu sẽ tự động xếp luồng truy cập này vào nhóm Direct (truy cập trực tiếp) thay vì Referral (truy cập giới thiệu). Điều này có nghĩa là nếu bạn đang chạy một chiến dịch PR hoặc đặt backlink trên các trang web sử dụng thẻ này, bạn sẽ không thể đo lường chính xác lượng traffic đổ về từ các nguồn đó thông qua báo cáo Referral tiêu chuẩn.
Hướng dẫn cách thêm và tối ưu thuộc tính vào liên kết
Việc triển khai các thuộc tính bảo mật cần được thực hiện đồng bộ để đảm bảo an toàn cho toàn bộ hệ thống. Tùy thuộc vào nền tảng bạn đang sử dụng, cách thức cấu hình sẽ có sự khác biệt nhất định.
Triển khai trên mã nguồn HTML thuần
Đối với các trang web được lập trình thủ công, bạn chỉ cần bổ sung trực tiếp giá trị vào bên trong thẻ a. Khi kết hợp nhiều giá trị trong cùng một thuộc tính rel, bạn chỉ cần ngăn cách chúng bằng một khoảng trắng. Cú pháp chuẩn xác nhất khi mở liên kết ngoài là kết hợp cả noopener và noreferrer để đảm bảo tương thích với mọi phiên bản trình duyệt cũ và mới.
Việc nắm vững cấu trúc HTML không chỉ giúp bạn bảo mật liên kết mà còn hỗ trợ cấu hình các thẻ kỹ thuật phức tạp khác. Chẳng hạn, bạn có thể tìm hiểu Ý nghĩa và cách khai báo thẻ rel=alternate trong HTML để tối ưu hóa cấu trúc dữ liệu, hoặc xem xét thiết lập rel=alternate hreflang cho website đa ngôn ngữ nhằm phục vụ tốt nhất cho các tệp khách hàng quốc tế.
Tự động hóa trên nền tảng WordPress
Nếu bạn đang quản trị nội dung bằng WordPress, hệ thống đã được tích hợp sẵn cơ chế bảo mật tự động từ phiên bản 4.7.4 trở đi. Bất cứ khi nào bạn thiết lập một liên kết với tùy chọn mở trong thẻ mới, trình soạn thảo sẽ tự động chèn cụm mã bảo mật vào HTML.
Bạn không cần phải can thiệp thủ công vào mã nguồn trừ khi muốn gỡ bỏ chúng. Tuy nhiên, các chuyên gia bảo mật luôn khuyến cáo nên giữ nguyên cơ chế mặc định này của WordPress để phòng tránh triệt để lỗ hổng tabnabbing.
Các lỗi rel=noreferrer thường gặp và cách khắc phục
Trong quá trình kiểm tra kỹ thuật website, các quản trị viên thường mắc phải một số sai lầm nghiêm trọng khi lạm dụng thuộc tính ẩn nguồn truy cập. Dưới đây là những rủi ro phổ biến và cách xử lý triệt để.
- Sử dụng cho các liên kết nội bộ: Đây là sai lầm tai hại nhất làm hỏng dữ liệu phân tích. Nếu bạn gắn thẻ này vào các link trỏ đến các trang khác trong cùng một tên miền, Google Analytics sẽ bị đứt gãy phiên truy cập, khiến tỷ lệ thoát tăng ảo.
- Dùng sai mục đích cho liên kết Affiliate: Các nền tảng tiếp thị liên kết cần Referrer header để xác minh nguồn gốc đơn hàng. Việc ẩn đi thông tin này có thể khiến hệ thống đối tác từ chối ghi nhận hoa hồng.
- Nhầm lẫn với thẻ chống spam: Nhiều người tin rằng việc ẩn nguồn sẽ giúp tránh bị phạt khi liên kết đến các trang web kém chất lượng. Thực tế, bạn phải dùng nofollow để báo hiệu cho Google.
Để khắc phục, hãy thường xuyên thu thập dữ liệu toàn trang bằng các công cụ SEO chuyên dụng. Lọc ra toàn bộ các liên kết nội bộ chứa thẻ này và tiến hành loại bỏ chúng hàng loạt khỏi cơ sở dữ liệu để đảm bảo luồng theo dõi Analytics được thông suốt.
Câu hỏi thường gặp (FAQ)
rel=noreferrer có làm giảm thứ hạng SEO không?
Hoàn toàn không. Thuộc tính này chỉ tương tác với trình duyệt và hệ thống phân tích dữ liệu, không gửi bất kỳ tín hiệu nào đến thuật toán xếp hạng của Google. PageRank vẫn được truyền đi bình thường trừ khi bạn kết hợp thêm thẻ nofollow.
Tại sao WordPress tự động thêm thẻ này vào link out?
WordPress tự động chèn cụm thẻ bảo mật này vào tất cả các liên kết có thuộc tính mở tab mới nhằm bảo vệ người dùng khỏi lỗ hổng bảo mật tabnabbing. Đây là một tính năng cốt lõi giúp ngăn chặn các trang web độc hại chiếm quyền điều khiển tab trình duyệt ban đầu.
Có cần dùng chung cả noopener và noreferrer không?
Có, việc kết hợp cả hai là tiêu chuẩn thực hành tốt nhất. Mặc dù các trình duyệt hiện đại đã tự động áp dụng noopener khi mở tab mới, việc khai báo thêm noreferrer giúp đảm bảo an toàn tuyệt đối trên các phiên bản trình duyệt cũ.
Làm sao để kiểm tra website có đang dùng rel=noreferrer?
Bạn có thể nhấp chuột phải vào bất kỳ liên kết nào trên trang, chọn tính năng kiểm tra phần tử để mở công cụ dành cho nhà phát triển. Trong bảng mã nguồn, hãy quan sát thẻ liên kết xem có chứa giá trị noreferrer bên trong thuộc tính rel hay không.
Kết luận
Thuộc tính rel=noreferrer đóng một vai trò thầm lặng nhưng cực kỳ quan trọng trong việc duy trì một môi trường web an toàn và tôn trọng quyền riêng tư. Bằng cách vô hiệu hóa Referrer header và cắt đứt liên kết với đối tượng window.opener, nó bảo vệ người dùng khỏi các cuộc tấn công đánh cắp thông tin tinh vi.
Mặc dù không trực tiếp tác động đến các chỉ số SEO, việc hiểu rõ cơ chế hoạt động của thẻ này giúp bạn làm chủ được dữ liệu trong Google Analytics và tránh được những sai lầm trong việc đo lường hiệu quả chiến dịch. Hãy luôn tuân thủ các tiêu chuẩn bảo mật mặc định của các nền tảng như WordPress và chỉ can thiệp thủ công khi bạn thực sự hiểu rõ luồng dữ liệu của mình.
Bài viết liên quan
https://reviewcourses.online/relamphtml-la-gi/
