Tìm hiểu về thẻ rel=”noopener” trong WordPress

Nếu bạn đã cập nhật lên phiên bản WordPress 4.7.4 hoặc mới hơn, bạn sẽ thấy có một thẻ mới là rel="noopener" bên cạnh target="_blank" trong trình chỉnh sửa HTML. Thẻ này sẽ tự động thêm vào tất cả các liên kết trong và ngoài khi bạn mở chúng trong một cửa sổ mới. Trong bài viết này chúng ta cùng tìm hiểu xem rel="noopener" là gì và nó ảnh hướng thế nào đến blog/website của bạn.

Tìm hiểu rel=”noopener” trong WordPress là gì?

rel="noopener" là thuộc tính HTML được thêm vào đối với tất cả các liên kết sẽ được mở trong một tab mới của trình duyệt. Nó tương tự như thuộc tính rel=”noreferrer”, được thêm vào để khắc phục các lỗ hổng bảo mật, tránh bị các trang web độc hại khai thác.

Có một số tính năng của JavaScript cho phép một tab mới quyền kiểm soát tab hiện tại. Nếu bạn liên kết đến một website bên ngoài bị ảnh hưởng bởi mã độc, thì trang web đó có thể sử dụng thuộc tính window.opener của JavaScript để thay đổi trang gốc (trang web của bạn) nhằm đánh cắp thông tin.

Tin tặc có thể sử dụng tính năng này, lừa người dùng mở một trang web giả mạo sau đó đánh cắp các thông tin quan trọng như: tài khoản đăng nhập. Đây là một ví dụ điển hình giúp bạn có thể hình dung được cách window.opener có thể chiếm quyền điều khiển một tab của trình duyệt.

Để ngăn ngừa điều này, thẻ rel="noopener" được thêm vào để chặn việc sử dụng đối tương window.opener. Nếu window.opener không hoạt động, một tab sẽ không thể chiếm quyền của tab khác.

Bản vá lỗi bảo mật này đã được thêm vào plugin TinyMCE vào ngày 23 tháng 11 năm 2016. Vì WordPress sử dụng TinyMCE làm trình biên tập nên tính năng này cũng đã được cập nhật trong phiên bản WordPress 4.7.4.

WordPress luôn chủ động giúp bạn bảo mật cho website của mình. Vì vậy khi bạn thêm liên kết và chọn ‘Open in New Tab’, nó sẽ thêm rel=”noopener”rel=”noreferrer” vào mã HTML của liên kết.

rel example

Mã HTML sinh ra bởi WordPress có dạng:

Ví dụ về rel=”noopener”: <a href=”https://thanh1986t.com” target=”_blank” rel=”noreferrer noopener”>Demo</a></p>

rel=”noopener” ảnh hưởng thế nào đến kết quả SEO của bạn?

Mặc dù thuộc tính rel="noopener" giúp cải thiện đáng kể sự bảo mật cho website, nhưng một số người không muốn dùng nó vì sợ ảnh hưởng xấu đến kết quả SEO của họ.

Nhiều người dùng WordPress lo ngại rằng rel="noopener" sẽ khiến cho các liên kết trong và ngoài bị “nofollow” nên sẽ làm ảnh hưởng đến SEO. Nhưng thực tế là rel="nofollow" chỉ thông báo cho trình duyệt của người dùng không được sử dụng đối tượng window.opener của JavaScript mà thôi.

Kết quả SEO chỉ bị ảnh hưởng bởi các công cụ tìm kiếm. Mà thực tế là các công cụ tìm kiếm không hề tương tác với thẻ rel="noopener". Các phần mềm phân tích cũng bỏ qua thẻ này.

Kết quả SEO có thể bị ảnh hưởng khi WordPress lần đầu tiên thêm thẻ rel="noopener noreferrer" trước khi phát hành bản vá lỗi trong phiên bản WordPress 4.7.4. Ở các phiên bản cũ, “noreferrer” đã chặn các liên kết không rõ xuất xứ. Mặc dù nó không làm ảnh hưởng đến SEO nhưng một số công cụ phân tích và chương trình tiếp thị liên kết bị ảnh hưởng.

Tuy nhiên với phiên bản WordPress từ 4.7.4 trở về sau bạn sẽ không gặp vấn đề gì với thẻ rel="noopener". Chỉ cần đảm bảo rằng mình đã nâng cấp lên phiên bản WordPress mới nhất thì mọi thứ đều ổn cả.

Sự khác nhau giữ noopener và nofollow là gì?

Rất dễ nhầm lẫn giữa noopener và nofollow nhưng chúng lại hoàn toàn khác biệt.

Thuộc tính rel="noopener" giúp tăng cường bảo mật để website của bạn có thể chống lại các cuộc tấn công của tin tặc. Ngược lại thuộc tính nofollow thông báo cho các trình thu thập dữ liệu của các công cụ tìm kiếm không lần theo các liên kết xấu.

Các công cụ tìm kiếm lưu ý đến nofollow khi lần theo các liên kết trên trang của bạn nhưng không quan tâm đến noopener.

Theo mặc định, WordPress không cho phép bạn thêm thuộc tính nofollow cho các liên kết ngoài trên blog/website của bạn. Nếu bạn muốn thêm thuộc tính nofollow cho các liên kết ngoài trên blog/website của mình, bạn cần phải dùng plugin. Để tìm hiểu thêm cách thêm thuộc tính nofollow cho các liên kết ngoài bạn có thể đọc lại bài viết này.

Cách bỏ thuộc tính rel=”noopener” trong WordPress

Tôi thật sự không tìm được lý do gì để xóa bỏ thuộc tính rel="noopener" từ các bài viết của bạn. Nó không tác động xấu đến SEO, không ảnh hưởng gì đến các công cụ phân tích và các liên kết tiếp thị sản phẩm. Nó chỉ bảo vệ website của bạn trước các mối hiểm họa tiềm ẩn mà các tin tặc có thể khai thác để tấn công website bạn. Nó chỉ dừng đối tượng JavaScript window.opener. Vì thế tôi tin rằng bạn chỉ muốn xóa bỏ nó khi muốn sử dụng tính năng window.opener.

Việc xóa bỏ thuộc tính rel="noopener" có một chút khó khăn vì nó được tích hợp vào Text Editor của WordPress. Thậm chí nếu bạn xóa nó một cách thủ công từ chế độ hiển thị mã HTML thì nó sẽ được thêm trở lại sau khi bạn lưu lại nội dung bài viết.

Vì vậy cách tốt nhất là vô hiệu hóa tính năng này từ chính trong plugin TinyMCE.

Để làm điều đó, bạn hãy thêm đoạn code bên dưới và dán vào tập tin functions.php của WordPress Theme mà bạn đang dùng, sau đó lưu lại.

add_filter(‘tiny_mce_before_init’,’tinymce_allow_unsafe_link_target’);
function tinymce_allow_unsafe_link_target( $mceInit ) {
    $mceInit[‘allow_unsafe_link_target’]=true;
    return $mceInit;
}
 Lưu ý rằng đoạn code này cũng vô hiệu hóa tính năng bảo mật của TinyMCE. Tôi không khuyến khích bạn sử dụng tính năng này nếu không thật sự cần thiết.

Đoạn code trên sẽ dựng việc tự động thêm thẻ rel="noopener" vào trong bài viết của bạn. Tuy nhiên nó không xóa tất cả các thẻ đã thêm trước đó. Vì vậy bạn cần xóa các thẻ đó một cách thủ công.

Lời kết

Bạn không cần phải quá lo lắng vì thẻ rel="noopener" sẽ làm ảnh hưởng đến SEO, công cụ phân tích, liên kết tiếp thị. Đây là một bước tiến nhằm tăng cường bảo mật cho độc giả của bạn. Trừ khi bạn muốn sử dụng thuộc tính window.opener của JavaScript, còn không bạn nên sử dụng thẻ rel="noopener" cho các liên kết ngoài trên blog/website của mình.

Tôi hy vọng bài viết này sẽ giúp bạn hiểu được thuộc tính rel="noopener" trong WordPress là gì, cũng như nó có ảnh hưởng thế nào đến trang web của bạn.

Nếu bạn có bất kỳ lý do nào để vô hiệu hóa thẻ rel="noopener" hãy cho tôi biết bằng cách để lại bình luận bên dưới.

Nếu bạn thấy bài viết hữu ích đừng quên Like và Share.

Hẹn gặp lại bạn trong các bài viết tiếp theo./.

 

 

 

Đăng ký nhận bài viết mới nhất

Hãy đăng ký nhận tin để nhận được những nội dung thú vị và tuyệt vời!

Để lại bình luận