اضافة صفحة الخطأ 404 احترافية و صديقة لمحركات البحث على بلوجر

شارك مع اصدقائك:

بسم الله الرحمان الرحيم  :

في كثير من الاحيان توجد تلك الروابط التي لا تعمل في موقعك و قد بؤدي تكرار هذا الامر الى نفور الزوار، لعدم وجود ما يبحثون عنه و لكن ان وفرت لهم صفحة اخرى بدلا من الصفحة غير الموجودة قد يبقي الزائر مدة طويلة في موقعك .

ففي هذا المقال ساتطرق معكم الى كيفية اضافة صفحة الخطا 404 Page Not Found على مدونات بلوجر .

ما هو خطا 404 

معناه أن العميل استطاع الاتصال بالخادم و لكن لم يتم العثور على ما طلب منه بدون ذكر السبب، فقط اظهار رسالة 404 خطا .

مثال: عند ولوجك الى رابط معين مثلا http://knz-ma3lomati.blogspot.com/blablablll سيتم مباشرة اعلامك ان الصفحة غير موجود و هذا ما يعرف بـالـ 404 errors .

لماذا يجب ان يكون في موقعي صفحة 404 خطأ

زيادة ترتيب مدونتك

عند ارشفتك لمواضيعك على أدوات مشرفي المواقع Webmaster Tools يتم تتبع الرابط المؤرشف من طرف Googlebot و عندما يجد ان الصفحة غير موجودة و يجد مكانها صفحة 404 خطا بها روابط اخرى يتم تتبع تلك الروابط و هذا يعزز من ترتيب مدونتك في محركات البحث .

تحديث او حذف الروابط دون قلق

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

اضافة لمسة خاصة للزائر

اغلبية أصحاب المواقع يستعملون صفحة الخطا 404 فقط لاجبار الزائر على اكمال تصفح الموقع كما أنها تضيف حيوية عليه .

كيفية اضافة صفحة 404 خطا الى مدونات بلوجر

المرحلة الاولى : جعل صفحة 404 خطا تعمل بدون اي مشاكل ( تفضيلات البحث )

1. قم بدخول الى مدونتك و مباشرة الى القالب 
2. تحرير HTML
3. اختر من الاعلى أداة Blog1
4. ثم قم بالبحث عن <b:includable id='status-message'>

ستجد وسم بداية <b:includable id='status-message'> و وسم نهاية </b:includable> كل ما عليك و ضع الكود التالي بينهما

<b:if cond='data:navMessage'> <div class='status-msg-wrap'> <div class='status-msg-body'> <data:navMessage/> </div> <div class='status-msg-border'> <div class='status-msg-bg'> <div class='status-msg-hidden'> <data:navMessage/></div> </div> </div> </div> <div style='clear: both;'/> </b:if>

المرحلة الثانية : اضافة صفحة 404 خطا الى مدونات بلوجر

1. اذهب الى الاعدادات >> تفضيلات البحث
2. الاخطاء و اعادة عمليات التوجية 
3. قمت بتحرير الاولى ( لم يتم العثور على الصفحة المخصصة )

بعد ذلك قم بنسخ الكود التالي داخل الاطار الظاهر لك .

<div class='MBT-404-box'> <p style='line-height: 30px'> <b> <font color='#ff0000' size='5'> للاسف! </font> <font color='#666666'> لم يتم العثور على هذه الصفحة </font></b></p> <ol style='line-height: 25px'> <li><a href='javascript:history.go(-1)'> العودة الى الوراء</a> </li> <li>الابلاغ عن مشكلة ما<a href='http://knz-ma3lomati.blogspot.com/p/blog-page_63.html'>اضغط هنا</a> </li> <li>الذهاب الى الصفحة الرئيسية <a href='/'>اضغط هنا</a> <br/></li> </ol> <p> <br/> <br/> <br/></p> <p align='center'> <font color='red' style='font-size: 150px'><b>404</b></font></p> <p>  </p> <p align='center'/> <p align='center'> <font size='5'>نعتذر الصفحة غير موجودة!</font></p> </div>

غير http://knz-ma3lomati.blogspot.com/p/blog-page_63.html الى صفحة التواصل مع الزائرين
المرحلة الثالثة:  اضافة التأثيرات الى صفحة 404 خطا

1. نرجع الى القالب تحرير HTML
2. نبحث عن   ]]></b:skin>
3. نقوم بنسخ الكود التالي فوقها مباشرة

.status-msg-wrap a{padding:none; text-decoration:inherit} .MBT-404-box{background:#FFF; width:95%; margin:10px 10px; padding:20px 10px; border:1px solid #ddd; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; box-shadow:5px 5px 5px #CCC}

قمنا بضغط الكود حتى لا تواجهك مشاكل مستقبلا في تسريع المدونة
بعض التعديلات :
background لون الخلفية أبيض #FFF
width عرض الصفحة
border حدود الصفحة القيمة الاولى السمك الثانية نوع solid الثالث اللون #ddd
box-shadow ظل الصفحة القيم الثلاثة الاولى تبين كثافته القيمة الاخيرة لونه #ccc

عند انتهاءك قم بحفظ القالب و مبروك عليك صفحة 404 not found .