استخدامات سمة الارتباط 'target='_blank وسمات الروابط الخارجية البديلة

ألق نظرة على أهمية سمة target=’_blank’ للروابط، والتي تُستخدم لفتح تلك الروابط في تبويب جديد بالمُتصفح، وتعرف على كيفية تنفيذها بشكل صحيح.
جدول المُحتويات

إضافة السمة target= '_blank' attribute إلى الروابط المُضمنة في مقالة ما، سيؤدي إلى فتح هذه الروابط في تبويب أو نافذة جديدة في المُتصفح. وبالطبع، هي ضرورية في بعض الأحيان للأبقاء على الزائر في موقعك أثناء تصفح رابط خارجي مربوط بمُحتوى المقالة أو المُشاركة.
سمة الارتباط target= _blank
سمات الروابط لفتحها في تبويب جديد
ولكن اضافتها ليس هو الحل الأفضل دائماً. اضافة target='_blank' attribute إلى الروابط يُمكن أن يؤدي إلى بعض المخاطر المُتعلقة بالأمان، ولكن ليس هذا هو الأمر الوحيد المُتعلق باستخدامات هذه السمة.

هُناك ايضاً مواقف مُتعددة يكون استخدام سمات أخرى للروابط غير فتحها في نوافذ أو تبويبات جديدة، أكثر أهمية وإفادة.

في هذه المقال، سنُخبركم بأفضل الطُرق لاستخدام سمة الهدف _blank، وأن استخدامها في بعض الحالات ليس هو الحل الأفضل، والبدائل الأكثر أهمية في هذه الحالات.

ما هي خاصية فتح الرابط في نافذة جديدة؟

عند إضافة رابط جديد إلى مُشاركتك سواء على منصة بلوجر أو وردبريس أو أي منصة إدارة مُحتوى أخرى، ستجد خيارات عديدة للرابط المُضاف، منها السماح بفتح الرابط في نافذة أو تبويب جديد عندما يضغط عليه الزائر.

اختيار هذه الميزة، يُضيف سمة إلى كود الرابط، وهي target= 'blank' attribute ليُصبح شكل الرابط كالتالي:
<a href='https://www.example.com' target='_blank'/>
من المُمكن ان تحتوي المقالة الواحدة على أكثر من رابط خارجي أو داخلي، وهذه الروابط تستخدم سمة الإرتباط target= 'blank' attribute، وكُل رابط من هذه الروابط سيتم فتحه في نافذة جديدة عند ضغط الزائر عليه.

وإذا نقر المُستخدم على نفس الرابط مرات عديدة مُتتالية، سيوُاصل المُتصفح فتح المزيد من التبويبات الجديدة استناداً إلى سلوك الزائر مع الرابط.

هل يُفضل المُستخدم فتح الروابط في تبويب جديد؟

يرى بعض المُدونين المُحترفين وخُبراء تحسين مُحركات البحث ومُحللين سلوك الزوار، أنه من الأفضل منح الزائر خيار فتح الروابط التي يقوم بالنقر عليها في مقالة ما، في تبويب جديد، لتسهيل عودته إلى المقالة التي يقرأها إذا ما أراد ذلك.

ويرى البعض الآخر، أن الزائر عندما يضغط على رابط خارجي قُمت بتضمينه في مقالتك، فإن الزائر يرغب بإرادته مُغادرة مقالتك والتوجه لإطلاع على مُحتوى الرابط المُضمن واستباط المعلومات منه، ثقة في استشهادك به في مُشاركتك.

لهذا فمن المُضر لتجربة المُستخدم إلزام الزائر بإبقائه في صفحتك الذي خرج منها بإرادته ليتصفح الرابط المُضمن. هذا من وجهة نظر البعض الآخر.
وفي الحقيقة تكمن مشكلة وجهة النظر هذه في أنه من المُحتمل أن غالبية الزوار لا يعرفون أن لديهم خياراً لفتح أي رابط ينقرون عليه في نافذة جديدة أو تبويب جديد، إذا أرادوا بقائهم في الصفحة والعودة إليها لاحقاً.

فإذا ضغط الزائر بزر الفأرة الأيمن على أي رابط موجود بالمقالة، ستنسدل قائمة خيارات مُتعددة أمامه على الشاشة، من ضمن هذه الخيارات فتح الرابط في نافذة جديدة أو تبويب جديد، وهو ما يعطي للزائر الحُرية في اختيار بقائه في الصفحة التي يوجد بها الرابط، أو خروجه منها.

سبب أمني لعدم استخدام target= 'blank' attribute

استخدام target=”_blank” link attribute به بعض المخاطر المُتعلقة بالأمان وجودة الأداء. لخص موقع مُطوري الويب من جوجل web.dev مخاطر استخدام هذه السمة على النحو التالي:
قد يتأثر اداء المُتصفح سلباً، إذا ضغط الزائر على رابط ما، وتم فتح هذا الرابط في تبويب جديد، خاصة وإن كانت الصفحة التي يُؤدي إليها هذا الرابط تحتوي على العديد من أكواد الجافا سكريبت.

كما أن الصفحة التي يؤدي إليها الرابط، يُمكن أن تمتلك صلاحية وصول إلى كائن النافذة الخاصة بك باستخدام خاصية window.opener، وقد يسمح هذا للصفحة الأخرى بإعادة توجيهك إلى روابط صفحات ضارة.
والآن، ما الحل الأفضل للتخلص من احتمالية التحويل إلى روابط تحتوي على مُحتوى ضار؟

استخدام سمات الرابط rel = 'noopener' attribute، أو rel = 'noreferrer' attribute  لكل رابط خارجي تُضيفه إلى مقالتك.
  • سمة الارتباط rel= 'noopener' link attribute تمنع الموقع المُرتبط بصفحة مقالتك من تلقي صلاحيات للوصول إلى صفحة مقالتك التي يرتبط الرابط بها، وهذا يمنع إمكانية سيطرة أو تأثير الرابط الخارجي على صفحة المقالة المُرتبط بها على موقعك بطريقة أو بأخرى.
  • سمة الارتبط rel= 'noreferrer' link attrubute تخفي معلومات الإحالة إلى الموقع المُرتبط بصفحة موقعك، بمعنى أنه عندما ينقر الزائر على رابط خارجي على صفحة موقعك يحتوي على هذه السمة، فإن موقع الويب الذي يؤدي إليه الرابط لن يعرف الموقع الذي أحال الزائر إليه.
<a href='https://www.example.com' rel = 'noopener' target='_blank'/>

<a href='https://www.example.com' rel = 'noreferrer' target='_blank'/>
وهذه السمات تمنع نهائياً تحكم الموقع المُرتبط بمُحتواك من التحكم أو الوصول إلى موقعك، ولن يُغير أي شيء في سلوك صفحة الويب الخاصة بك، وهذا سيجعل تجربة المُستخدم على موقعك أفضل وأكثر أماناً.

نستخلص من هذا، أنه من الأفضل إذا أردت إضافة target=”_blank” link attribute لفتح الروابط الخارجية في تبويبات جديدة في المتصفح، اضف ايضاً سمة rel = 'noopener' attribute، أو سمة rel = 'noreferrer' attribute، لإبقاء موقعك أكثر أماناً.

بدائل أفضل لـ target='_blank' attribute

هناك بعض البدائل الأفضل لسمة الإرتباط blank_ يُمكن أن يؤدي استخدامها إلى نتائج أفضل، ومنها SEJ_.

الفرق بين استخدام blank_ و SEJ_ هو أن استخدام SEJ_ سيفتح أي رابط خارجي يضغط عليه الزائر من صفحة مقالتك، في نفس التبويب الجديد الذي فتحه المُتصفح في المرة الأولى الذي ضغط الزائر فيها على رابط خارجي.
<a href="https://www.example.com/" target="_SEJ" rel="noreferrer">
بمعنى، لنفترض أن لديك مقالة بها خمس روابط خارجية، وضغط الزائر على جميع هذه الروابط.

إذا كان كُل رابط من الخمس روابط، به سمة blank_ سيفتح المُتصفح خمس تبويبات جديدة، تبويب جديد لكُل رابط خارجي يضغط عليه الزائر.

أما إذا كان كُل رابط من الخمس روابط، به سمة SEJ_ سيفتح المُتصفح تبويب واحد فقط لجميع الروابط الخارجية، سيُحدث التبويب بكل رابط خارجي آخر يضغط عليه الزائر من صفحتك.

الخُلاصة

استخدام blank_ ليس الخيار الأفضل دائماً إذا أردت فتح الروابط الخارجية في تبويبات جديدة لإبقاء الزائر في صفحتك لأطول وقت مُمكن، هذا من حيث الأمان والأداء، لتحقيق تجربة استخدام جيدة.

واستخدام SEJ_ سيكون خياراً أفضل بكثير من حيث الأداء، مع إضافة سمات الارتباط rel = 'noopener' attribute، أو rel = 'noreferrer' attribute لتحقيق مزيد من الأمان لزوار موقعك.

ننتظر تعليقاتكم وآرائكم عبر التعليقات أسفل المقال حول أفضل المُمارسات لاستخدام سمات الروابط الخارجية.
MERN stack developer

إرسال تعليق

جميع الحقوق محفوظة © 2022