أعلان الهيدر

1.12.19

الرئيسية حل مشاكل الويب 2020 بواسطة Search Console و Speed Isinghts و أكواد Java و Css

حل مشاكل الويب 2020 بواسطة Search Console و Speed Isinghts و أكواد Java و Css

حل مشاكل الويب 2020 بواسطة Search Console و Speed Isinghts و أكواد Java و Css


في دورة شروحات سر محترفي الربح من الإنترنت سنتطرق لحل مشاكل قوالب المواقع الإلكترونية و إصلاحها . بالمناسبة ادا لم تكن تملك موقعك الخاص يمكنك امتلاك صفحة ويب خاصة بك مجانا ، فقط تابع شرح إنشاء موقع الكتروني مجاني 2020 - Privacy policy سياسة الخصوصية - Part 1
هناك مشاكل كثيرة تؤثر على المواقع الإلكترونية و أرشفتها  وهي أيضا تؤثر بشكل سلبي على عوامل SEO ، عند اصلاحها تكون تهيئة عملية الارشفة سهلة .
هذه الأخطاء يمكن اكتشافها باتباع احد المواقع مثل Google Search Console ( موقع أدوات مشرفي المواقع ) الذي سوف نتحدث عنه و كيف يمكن التعرف على الأخطاء بواسطته و طريقة ازالة هذه المشاكل ، ثم بعده سنستعين بأداة أخرى تابعة لغوغل و هي PageSpeed Insights ، وهي ايضا تعطي تفاصيل عن الأعطاب المتواجدة في موقع الويب الخاص بك و مساعدات لإصلاح الأخطاء ..
اول شيء اود توضيحه هو السيو و مدى أهميته.

تعريف السيو SEO؟

تعريف السيو في ويكيبيديا ، هو تحسين محرك البحث (SEO) (search engineoptimization) و هو مجموعة من التقنيات المصممة لتحسين رؤية صفحة الويب في صفحات نتائج محرك البحث (SERP) لصفحات نتائج محرك البحث.
و هو مجموعة من التحسينات التي يجب القيام بها على الموقع، مثل عمليات والمراقبة ، التخطيط و التدقيق و أشياء أخرى. و هو يعتبر فن تحسين المواقع الإلكترونية و ملائمتها مع محركات البحث (Google و Bing و Yahoo ...). و الغرض منه هو زيادة الجودة و لضمان تصدر موقع الويب ضمن نتائج محرك البحث الأولى.
لفهم السيو جيداإطلع على المقال : ما هو السيو ؟ دليل وشرح شامل : عمله ، دوره، مميزاته - SEO Marketing 2020

ادوات اكتشاف اخطاء المواقع

هنالك مشاكل عديدة تواجه المواقع الإلكترونية في البداية و ذلك لعدم دراية اصحابها لمتطلبات السيو وبواسة هاته البرامج التي تقدمها Google اصبح من السهل للمبتدئين التعرف على الأخطاء ، اظافة الى ان هاته الادوات تعطي تعليمات واضحة لإصلاح الأعطاب.
في شرحنا سأتطرق الى التعريف بالأداتين Google Search Console و PageSpeed Insights

1 - Search Console


أدوات مشرفي محركات البحث Google Webmaster Tools هي خدمة مجانية تقدمها جوجل، تسمح لمالكي المواقع بإضافة صفحاتهم الخاصة و نشر محتواها علي محرك بحث جوجل  و كدلك تساعد على تحسين الفهرسة  حيث تعطي إحصائيات كاملة ، وإحصائيات الوصلات الخارجية والداخلية للموقع و يقوم ايضا بالكشف عن اخطاء اكواد HTML و الصفحات التي لا تحتوى على عنوان وتقوم الاداة بادوار اخرى سنكتشفها في شروحات اخرى .
اول شيء  عليك التسجيل في Google Search Console ، سيطلب منك الدخول ب Gmail الخاص بك :
بعدها ستدخل رابط موقعك كما هو مبين في الصورة، ثم قم بضبط التحقق من حق الملكية وذلك باتباع الخطوات الآتية:
انقل الكود من الصفحة  والصقها في الصفحة الرئيسية لموقعك ، يجب وضعه في قسم <head> ، قبل القسم <body> .

2 - PageSpeed Isinghts


 ​​Insights هي أداة أداء تستند إلى الويب تم إنشاؤها بواسطة Google لمساعدتك في تحديد طرق لجعل موقعك أسرع وأكثر تنقلاً عبر اتباع التوصيات المتعلقة بأفضل ممارسات الويب ، عندما يكون لديك موقع ويب بطيء ، فمن المحتمل أن يكون لديك الكثير من التحذيرات في Google PageSpeed ​​Insightsو معها العديد من التوصيات
PageSpeed ​​Insights هي أداة تساعد في تحديد الأداء المقدم  من موقع ويب معين ، يمكن الوصول إليها مباشرة من أي متصفح ، توفر تقريرًا عن التحسينات المقترحة وتقدم اقتراحات لتحسين موقع الويب  الخاص بك.

لمشادهدة الشرح للأداتين بالتفصيل قم بزيارة فيديو يوتوب : سر محترفي الربح من الانترنت إصلاح مشاكل قوالب بلوجرgoogle Search Console و PageSpeed Isinghts 

حل بعض المشاكل التي تظهر في بلوجر

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

طريقة حل المشاكل التي تضهر بعد تفعيل  HTTPS في بلوجر

 قامت جوجل بإضافة ميزة الإتصال الأمن HTTPS لمنصة بلوجر، بعد تفعيل بروتوكول HTTPS في بلوجر تظهر بعض المشاكل التي تسبب اعاقة في فعالية الموقع ، و يمكن تفعيل هذه الميزة مجانا للمدونات التي لازالت تستعمل النطاق المجاني Blogspot ، بعد تفعيل إضافة الإتصال الأمن قد تضهر بعض العراقيل في المواقع الإلكترونية التي تستخدم خطوط مخصصة او اضافات خارجية بحيث ان تلك الإضافات او الخطوط قد لا تكون تدعم ميزة الإتصال الأمن لذا إليك طريقة بسيطة و سهلة لتخطي هذه المشاكل:  

1 في لوحة تحكم بلوجر 
2 إفتح قالب مدونتك 
3 ابحث عن http:// وقم بتغييره ل // و ذلك عن طريق حذف http:
هذا مثال للعملية:
http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700
بعد التعديل على الرابط سيصبح على هذا الشكل: 
//fonts.googleapis.com/css?family=Open+Sans:400italic,400,700

لحل المشاكل الخاصة بمتصفح التخزين المؤقت  Leverage Browser Caching

يقوم التخزين المؤقت للمتصفح بتخزين ملفات موارد صفحة الويب الخاصة بك و هو المسؤول عن توجيه المتصفحات إلى كيفية التعامل مع مواردهم . عندما يعرض متصفح الويب صفحة الويب الخاصة بك ، فإنه يتعين عليه تحميل عدة أشياء مثل شعارك و ملفات CSS و java الخاصة بك والموارد الأخرى. 
لاصلاح هذا المشكل عليك ضغطه بالكود ملف Leverage Browser Caching ، قم بوضعه فوق <head >

<!--leverage browser cache http://fibraprof.com/-->
<include expiration='7d' path='/assets/**.css'/>
<include expiration='7d' path='/assets/**.js'/>
<include expiration='7d' path='/assets/**.gif'/>
<include expiration='xxxxxx'/>
<include expiration='xxxxxx'/>
<include expiration='xxxxxx'/>

لحل مشاكل الجافا سكريبت Java script

Java script هي  لغة برمجية تطبق على ملف HTML ، تم اختراعه من قبل Brendan Eich ، المؤسس المشارك لمشروع موزيلا وشركة موزيلا.
جافا سكريبت متعددة الاستعمالات حيث يلاحظ تواجدها في الألعاب ، والرسوم المتحركة 2D و 3D الرسومات و تطبيقات ، وأكثر من ذلك بكثير!
لحل مشكل الجافا في موقعك الإلكتروني عليك اضافة async='async' داخل السكريبت.
افتح محرر html لمدونتك ، بعدها قم بالبحث عن هذا السطر
<script src="//xxxxxxxxxxxxxxxxxxxxxxxxx.js"></script>

اضف async='async' بعد الكلمة <script مباشرة وقبل الكلمة src ، ليصبح على هذا الشكل بعد تعديل الكود

<script async='async' src="//xxxxxxxxxxxxxxxxxxxxxxxxx.js"></script>

عرض النماذج الديناميكية Display dynamic models


النماذج الديناميكية (اللافتات الرقمية) بالإنجليزية Display dynamic models هي أداة لبث محتوى إلى جمهور ، غالبًا عبر شاشات البث . يتكون هذا النظام الرقمي بشكل عام من المشغلات ، المتصلة بالشاشات والتي تتحكم في توزيع الخوادم ، التي تستضيف المحتويات المراد بثها وكذلك التهيئة ، وبرامج الإدارة ، وأخيراً معدات الشبكة التي توفر الاتصال بين عناصره.
لحل النماذج المعطلة كالألوان و شريط القوائم. يمكن إجراء تصحيح و دلك بالتوجه الى محرر HTML ، في النهاية ، ابحث عن:
<script language="javascript" type="text/javascript">
setTimeout(function() {
blogger.ui().configure().view();
}, 0);
</script>

قم بإستبدال 0 ب 1000 ، بعدها سيقوم فريق Blogger بدراسة المشكلة.


لحل مشاكل سكريبت تسريع تحميل الصور lazy load image 

الغرض من سكريبت lazy load image هو تسريع أداء موقع الويب ، الطريقة التي يعمل بها هي أنك تقوم بتحميل النص البرمجي أولاً وتحميل مصدر الصورة الصحيح عندما تكون الصورة مرئية في إطار العرض الخاص بالزوار و لكن googlebot لن يقوم بفهرسة هذه الصور لأن الصورة الصحيحة لا يتم تقديمها للخوادم.
لإصلاح هذا المشكل  داخل محرر HTML  إبحث عن كود </head > ثم ضع كود lazy load image  فوق </head > مباشرة


<script type='text/javascript'>/* by : www.fibraprof.com */
//<![CDATA[
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return ....................
............................................................................................................................................................


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

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