انشاء صفحة خطأ 404 لموقعك ( ووردبريس - بلوجر)

مثال على صفحة الخطأ من موقع المطور 

صفحة الخطأ او مايعرف باللغة الانجليزية error page 404 من الامور المهمة ومن اساسيات اي موقع موجود على شبكة الانترنت , فعند البحث مثلا في الفيس بوك او كتابة الرابط بشكل خاطئ او الذهاب صفحة غير موجودة في الموقع سيظهر لك صفحة الخطأ مكتوب عليه Sorry, this page isn't available وتتيح للزائر الذهاب الى الصفحة الرئيسة .

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

أهمية انشاء صفحة خطأ 404 

1. الحفاظ على زوار موقعك من الضياع والخروج , فالادوات الموجود في صفحة الخطأ تبقى الزائر في موقعك يتصفح ما يهتم به في موقعك .
2. صفحة الخطأ مهمة في ناحية الارشفة وتصدر موقعك في محركات البحث فالصفحة خطأ من اساسيات اي موقع متوافق مع مبادئ السيو .
3. زيادة معدل الارتداد او ما يعرف في Bounce Rate والذي يعتمد على فترة بقاء الزائر في موقعك وكلما زادت المدة قلت المعدل وهو المطلوب 
4. مساعدة الزائر على البحث وتصفحة على المواضيع التي يريدها من موقعك وحصولة على المعلومات التي يبحث عنها الزائر .

عناصر أساسية لتصميم صفحة خطأ 404 Error

1. رسالة الخطأ : عليك اختيار رسالة الخطأ بعناية فالرسالة هي الاهم التى توجة للزائر الاعتذار او وقوع الخطأ وتوجة الى باقي الادوات الموجود في صفحة خطأ 404 
2. مربع البحث : من العناصر المهمة في صفحة الخطأ 404 التي تتيح للزائر البحث في موقعك على المعلومات والمواضيع الذي يريدها بكل سهولة .
3. مواضيع مقترحة أو مميزة : قم باضافة مواضيع مميزة من افضل ماهو موجود في موقعك التي تجذب الزائر للحفاظ عليه من الخروج من موقعك 
4. الروابط الرئيسية أو الاقسام : قم باضافة الروابط الرئيسية في موقعك ( الصفحة الرئيسية , فهرس المواضيع , اتصل بنا ..الخ ) واضافة اقسام موقعك ( اندرويد , تطوير المواقع , البرمجة ...الخ ) حتى يسهل وصول الزائر الى مايهتم به في داخل موقعك .

انشاء صفحة خطأ 404 لمدونات بلوجر 

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

من قالب بلوجر قم بالبحث عن </body> 

قم باضافة الكود الاتي فوقة - قبلة يمكنك تحميل الكود من هنا 

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style>
#error-not-found {
    background: #ff0000;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6LcK4vFQOEM3GDB4ND8-JUq6fw-WoWo_A6un65UMnlDZFYJuwlIbbOnfgkFlmNH245w6lb1toLlaSPjgr6Oz2I0lQtDDGwYE-4RgFVGtdUw9CUsyZ7bVl-ckq4ygLydiHK7DXXJ3pZIo/s1600/bg_body.gif)no-repeat top center,-moz-radial-gradient(center 40%, circle cover, #ff0000 0%, #880000 100%);
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6LcK4vFQOEM3GDB4ND8-JUq6fw-WoWo_A6un65UMnlDZFYJuwlIbbOnfgkFlmNH245w6lb1toLlaSPjgr6Oz2I0lQtDDGwYE-4RgFVGtdUw9CUsyZ7bVl-ckq4ygLydiHK7DXXJ3pZIo/s1600/bg_body.gif)no-repeat top center,-webkit-gradient(radial, center 40%, 0,  center 40%, 800, from(#ff0000), to(#880000) );
        text-align:center;
        position:fixed;
        top:0px;
        right:0px;
        bottom:0px;
        left:0px;
        padding-top:270px;
        z-index:999999;
}
#error-not-found  h1 {
        font-size:640px!important;
        position:absolute;
        font-family:&#39;sultan_-_3_line_2sultan3line&#39;!important;
        top:70px;
        left:50%;
        letter-spacing: -8px;
        margin-left:-502px!important;
        width:960px;
        z-index:-2;
        color:rgba(0,0,0,.09)!important;
}
#error-not-found  h2 {
        font-family:&#39;sultan_-_3_line_2sultan3line&#39;!important;
        text-transform:uppercase;
        font-size:81px;
        line-height:100px!important;
        letter-spacing: -3px;
        color:#fff!important;
        margin:0!important;
        padding:0!important;
}
#error-not-found p a,
#error-not-found p a:visited,
#error-not-found p a:hover{
        font-family:&#39;sultan_-_3_line_2sultan3line&#39;!important;
        text-transform:uppercase;
        font-size:56px;
        line-height:80px!important;
        border:none;
        font-weight: bold;
        color:rgba(0,0,0,.5)!important;
        margin:0!important;
        padding:0!important;
        text-decoration:none!important;
}
</style>
<div id='error-not-found'>
 <h1>404</h1> <h2>نعتذر منك..الصفحة غير موجودة</h2>
 <h2>كيف وصلت إلى هنا !</h2>
 <p> <a href='/' title='الرئيسية'> الرجوع لصفحة الرئيسية</a></p>
</div>
</b:if>

مثال على صفحة الخطأ 

وقم بالتعديل على صفحة الخطأ من خلال ما ملون باللون الاحمر يمكنك تعديل رسالة صفحة الخطأ او يمكنك التعديل على الصور الموجود في الصفحة كما يحلو لك .

انشاء صفحة خطأ 404 ووردبريس 

بالنسبة لمواقع الووردبريس الطريقة سهلة وبسيطة ايضاً ويمكنك اضافة اجمل صفحة خطأ بشكل أسهل ومن خلال بعض الخطوات و النقرات التي ستقوم بها , هناك الكثير من صفحات الخطأ يمكنك البحث اكثر في جوجل ولكن سأعرض لكم الافضل من خلال المميزات والعناصر .

بالنسبة لمواقع الووردبريس يمكنك تحميل اضافة redirection  من الموقع الرسمي للوردبريس وقم بتركيبها على موقعك وستعمل 100% ويمكنك البحث في نفس الموقع يوفر اضافات اخرى لصفحات الخطأ 404 يمكنك اختيار الشكل الذي يعجبك او من خلال الطريقة 404 error التي طرحها في قسم المساعدة .

الخلاصة :

صفحة الخطأ من الامور الاساسية والضرورية في كل موقعك ولها الكثير من الفوائد التي تم ذكرها في بداية المقالة واهمها الحفاظ على زوار موقعك من الضياع وايضاً مهمة في السيو والعناصر الرئيسية هي رسالة الخطأ ومربع البحث والروابط والاقسام والمواضيع المميزة الى هنا ينتهي الدرس لاتنسى مشاركة الموضوع وترك تعليق