كيفية إخفاء عنصر من الصفحة مع جعله مصاحب لمحركات البحث | html
شبكة عراق نت :: الاقسام العامة :: تقنيات التطوير والجرافيك | Tips & Tricks and Graphic Design :: تطوير المواقع والمنتديات ومحركات البحث
صفحة 1 من اصل 1
كيفية إخفاء عنصر من الصفحة مع جعله مصاحب لمحركات البحث | html
أقدم لكم اليوم شرح بسيط عن كيفية إخفاء عنصر من الصفحة مع جعله مصاحب لمحركات البحث،
البعض منا يعلم أنه هناك عناصر يجب أن نضعها في كود html ولكن لا نريد إظهارها للزائر
مثال: لو كان شعار الموقع «logo» عبارة عن صورة، بهذه الطريقة لن تتمكن من كتابة اسم الموقع «كـ نص»، وسيكون لها تأثير على محركات البحث، حيث لن تتم أرشفة الموقع بشكل صحيح.
الآن نريد أن نضع شعار الموقع عبارة عن صورة، ونص أيضا لمحركات البحث
نقوم بإضافة «tag» على ذوقك، مثال سأضيف «h1»، ونريد أن نضع له صورة الشعار «كـ خلفية»، وأيضا داخل نفس العنصر ولكن لا نريد أن نظهره للجميع.
دعونا نقوم بكتابة الكود بالطريقة الافتراضية
html:
الكود:تحديد الكود
الكود:تحديد الكود
لاحظ النتيجة بالصورة التالية:
https://2img.net/h/oi59.tinypic.com/2afbe6g.png
الآن سنقوم بإخفاء العنصر المحتوي على النص، من خلال إضافة الكود التالي:
css:
الكود:تحديد الكود
تم الشرح بواسطة
منقول
البعض منا يعلم أنه هناك عناصر يجب أن نضعها في كود html ولكن لا نريد إظهارها للزائر
مثال: لو كان شعار الموقع «logo» عبارة عن صورة، بهذه الطريقة لن تتمكن من كتابة اسم الموقع «كـ نص»، وسيكون لها تأثير على محركات البحث، حيث لن تتم أرشفة الموقع بشكل صحيح.
الآن نريد أن نضع شعار الموقع عبارة عن صورة، ونص أيضا لمحركات البحث
نقوم بإضافة «tag» على ذوقك، مثال سأضيف «h1»، ونريد أن نضع له صورة الشعار «كـ خلفية»، وأيضا داخل نفس العنصر ولكن لا نريد أن نظهره للجميع.
دعونا نقوم بكتابة الكود بالطريقة الافتراضية
html:
الكود:تحديد الكود
- الكود:
<h1 id="logo"><span>ahlamontada Forum for all Arab</span></h1>
الكود:تحديد الكود
- الكود:
#logo {
width: 500px;
height: 200px;
background: url("http://2img.net/i/fa/optimisation_fdf/ar/new-header.jpg")
0 0 no-repeat;
}
لاحظ النتيجة بالصورة التالية:
https://2img.net/h/oi59.tinypic.com/2afbe6g.png
الآن سنقوم بإخفاء العنصر المحتوي على النص، من خلال إضافة الكود التالي:
css:
الكود:تحديد الكود
- الكود:
#logo{
position: relative;
overflow: hidden;
}
#logo span{
position: absolute;
right: -99999em;
top: -99999em;
}
الآن لاحظ النتيجة النهائية:
https://2img.net/h/oi60.tinypic.com/jqluu9.png
كما نلاحظ أن النص اختفى رغم وجوده في «html»
ملاحظة هامة جدا: أثبت خبراء «seo» أن هذه الطريقة هي الصحيحة مقارنة باستخدام الخاصية «display: none».
كما نلاحظ أن النص اختفى رغم وجوده في «html»
ملاحظة هامة جدا: أثبت خبراء «seo» أن هذه الطريقة هي الصحيحة مقارنة باستخدام الخاصية «display: none».
تم الشرح بواسطة
وهبة الساحر
المتطوع المساعد
منقول
iraqnt- إدارة الموقع
مواضيع ذات صلة
شبكة عراق نت :: الاقسام العامة :: تقنيات التطوير والجرافيك | Tips & Tricks and Graphic Design :: تطوير المواقع والمنتديات ومحركات البحث
صفحة 1 من اصل 1
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى