اخفاء العناصر المصاحبة لمحركات البحث ( الطريقة الصحيحة )

أقدم لكم اليوم شرح بسيط عن كيفية إخفاء عنصر من الصفحة مع جعله مصاحب لمحركات البحث،

البعض منا يعلم أنه هناك عناصر يجب أن نضعها في كود html ولكن لا نريد إظهارها للزائر

مثال: لو كان شعار الموقع «logo» عبارة عن صورة، بهذه الطريقة لن تتمكن من كتابة اسم الموقع «كـ نص»، وسيكون لها تأثير على محركات البحث، حيث لن تتم أرشفة الموقع بشكل صحيح.

الآن نريد أن نضع شعار الموقع عبارة عن صورة، ونص أيضا لمحركات البحث

نقوم بإضافة «tag» على ذوقك، مثال سأضيف «h1»، ونريد أن نضع له صورة الشعار «كـ خلفية»، وأيضا داخل نفس العنصر ولكن لا نريد أن نظهره للجميع.

دعونا نقوم بكتابة الكود بالطريقة الافتراضية

html:

رمز Code:

( اسم الموقع

css:

رمز Code:

#logo{
width: 150px;
height: 60px;
background: url("traidnt.png") 0 0 no-repeat;
}

لاحظ النتيجة بالصورة التالية:

الآن سنقوم بإخفاء العنصر المحتوي على النص، من خلال إضافة الكود التالي:

css:

رمز Code:

#logo{

position: relative;
overflow: hidden;
}
#logo span{
position: absolute;
right: -99999em;
top: -99999em;
}

الآن لاحظ النتيجة النهائية:

كما نلاحظ أن النص اختفى رغم وجوده في «html»

ملاحظة هامة جدا: أثبت خبراء «seo» أن هذه الطريقة هي الصحيحة مقارنة باستخدام الخاصية «display: none».