كيفية استخدام W3C Validator لتحسين SEO

بصفتك مطور ويب ، ستحتاج إلى التأكد من أن التعليمات البرمجية الخاصة بك نظيفة وصالحة ويمكن الوصول إليها. يمكن أن يساعدك هذا أيضًا في تعزيز تحسين محرك البحث (SEO). لحسن الحظ ، يمكنك استخدام مدقق W3C للتأكد من أن عملك مطابق للمعايير.

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

ما هو التحقق من صحة W3C؟

W3C هي اختصار لـ World Wide Web Consortium ، وهي منظمة دولية تشرف على معايير الترميز عبر الويب. يقدم خدمات المدقق لمساعدتك على التحقق من أن كود HTML و CSS صالح وخالي من الأخطاء.

يُطلق على مدقق CSS اسم Jigsaw ، وهو يتحقق من المحتوى الخاص بك وفقًا لمعايير الويب W3C.

يعمل مدقق HTML بطريقة مشابهة جدًا. يتحقق من صلاحية الترميز لمستندات الويب بتنسيق HTML و XHTML و SMIL و MathML وما إلى ذلك.

من خلال الالتزام بمعايير الويب هذه ، يمكنك التأكد من أن المحتوى الخاص بك سهل الاستخدام ويمكن الوصول إليه. ستساعدك هذه الأدوات أيضًا في التحقق من التوافق عبر الأنظمة الأساسية لعملك ، مما يؤدي إلى إنشاء تجربة مستخدم أفضل (UX). قد يؤدي هذا بدوره إلى تحسين نتائج Core Web Vitals لديك وتعزيز مُحسّنات محرّكات البحث.

كيفية التحقق من صحة التعليمات البرمجية باستخدام W3C

كما ذكرنا سابقًا ، يقوم مدققو W3C بفحص كود HTML و CSS للتأكد من أنهم يفيون بمعايير الويب التي وضعتها المنظمة. سيوضح لك هذا البرنامج التعليمي كيفية استخدام هذه الأدوات للتحقق من عملك.

تحقق من صحة كود HTML

لنبدأ بمدقق HTML. يمكنك إدخال URI للمستند الذي تريد التحقق منه ، أو تحميل الملف الذي يحتوي على الرمز الخاص بك ، أو إدخال الترميز الذي تريد التحقق من صحته في الحقل المقدم:

بمجرد إرسال صفحتك أو مستندك للفحص ، سيُنشئ المدقق قائمة بجميع الأخطاء والتحذيرات المتصلة برمز HTML:

من الناحية المثالية ، سترغب في عدم وجود أخطاء وتحذيرات. ومع ذلك ، هذا ليس ممكنًا دائمًا لأن المدقق لا يأخذ في الاعتبار كل ما يمكن للمستخدم رؤيته.

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

لاحظ أنه إذا كانت صفحتك تحتوي على أي JavaScript أو CSS ، فلن يتحقق مدقق HTML من ذلك. لهذا ، ستحتاج إلى استخدام أداة W3C Jigsaw لـ CSS (التي سنغطيها بعد قليل) أو JSHINT لـ Javascript.

تحقق من صحة CSS

يعمل مدقق CSS بنفس الطريقة. بمجرد إرسال URI أو المستند أو الترميز للتحقق من صحته ، ستحصل على صفحة بها أخطاء وتحذيرات:

كما ترى ، فإن نتائج كل من CSS و HTML مفصلة للغاية. دعنا نستكشف كيفية تفسيرها.

كيفية تفسير نتائج المدقق

كما رأينا ، تولد المدققات ناتجين مختلفين: الأخطاء والتحذيرات. يمكنك غالبًا تجاهل التحذيرات لأنها لا تسلط الضوء على أي مشكلات خطيرة. ومع ذلك ، فمن الممارسات الجيدة نشر محتوى خالٍ من الأخطاء.

تظهر لك كل من الأخطاء والتحذيرات رقم سطر مشكلتك. كما يقدمون اقتراحات حول كيفية حل المشكلة:

إذا نقرت على الرابط المتوفر مع الخطأ أو التحذير (على سبيل المثال ، من السطر 1 ، العمود 16 ؛ إلى السطر 2 ، العمود 16) ، فسيقوم المدقق بتسليط الضوء على السطر المقابل في الكود:

لاحظ أن الأخطاء التي اكتشفها مدقق HTML ستؤثر على المستخدمين الذين يعتمدون على معينات الإعاقة (مثل قارئات الشاشة) للوصول إلى المحتوى عبر الإنترنت. قد يكون من السهل التغاضي عن مشكلات الوصول هذه كمبرمج. ومع ذلك ، يمكن أن يكون لها آثار سلبية على جمهورك. سنلقي نظرة فاحصة على هذه الأخطاء الشائعة في القسم التالي.

أخطاء التحقق من صحة W3C الشائعة

ستبرز كل من مدققي CSS و HTML أي أخطاء في التعليمات البرمجية الخاصة بك. تتضمن بعض المشكلات الأكثر شيوعًا ما يلي:

• عنصر غير مغلق. تتطلب إضافة عنصر جديد إلى الصفحة علامة مفتوحة ومغلقة. عندما تتلقى هذا الخطأ ، فإنك لم تقم بتضمين علامة الإغلاق. هذه مشكلة شائعة عند العمل مع الشبكات.
• علامة alt مفقودة. تتطلب كل صورة علامة بديل سيتم عرضها في حالة فشل تحميل الرسم. يصف الصورة وسيقوم قارئ الشاشة بقراءتها. تعد إضافة علامات alt شرطًا أساسيًا لإمكانية الوصول.
• استخدام غير صحيح لعلامات العنوان. تنشأ مشكلة CSS هذه عندما يستخدم المطور علامات <h> كنمط خط لعناوين فرعية معينة. تم تصميم العلامات للتنقل بدلاً من الأغراض الأسلوبية ، لذلك يجب تحديد حجم العناوين الفرعية غير الملاحية باستخدام الخط: size = # سمة.

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

فيما يلي مثال على خطأ التحليل:

يحدث هذا الخطأ عندما تحتوي ورقة أنماط CSS على عناصر HTML. على الرغم من أن مدقق CSS لا يوفر رقم سطر للخطأ ، يمكنك ببساطة نسخ كتلة التعليمات البرمجية المتوفرة والبحث داخل محرر التعليمات البرمجية أو IDE.

كيفية إصلاح الأخطاء الشائعة

لحسن الحظ ، يخبرك مدقق W3C بمكان العثور على الأخطاء وكيفية إصلاحها. على سبيل المثال ، إذا كانت لديك علامة alt مفقودة ، فسوف يخبرك المدقق بالمكان الذي تريد تضمينه فيه.

إذا كانت لديك علامة مفتوحة ، فلن يخبرك المدقق بمكان علامة الإغلاق. ومع ذلك ، سوف يمنحك موقع العلامة المفتوحة ، بحيث يمكنك ببساطة الانتقال إلى كتلة التعليمات البرمجية هذه وإضافة العلامة المفقودة.

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

خاتمة

يمكن أن يؤدي استخدام مدقق W3C إلى تحسين الأداء العام لموقعك. يمكّنك من تجنب كثرة التعليمات البرمجية وحل مشكلات إمكانية الوصول وإصلاح الأخطاء الشائعة. يمكن أن تؤدي كل هذه العناصر إلى أوقات تحميل أسرع وتجربة مستخدم أفضل ، والتي بدورها قد تعزز مُحسّنات محرّكات البحث لموقعك.

كما رأينا ، يمكنك استخدام W3C للتحقق من صحة كود HTML و CSS. ستنشئ الأداة قائمة بالتحذيرات والأخطاء ، مع اقتراحات لإصلاحها. تتضمن المشكلات الشائعة العناصر غير المغلقة وعلامات alt المفقودة وأخطاء التحليل.

هل لديك أي أسئلة حول استخدام مدقق W3C؟ واسمحوا لنا أن نعرف في قسم التعليقات أدناه!

صورة مميزة عبر Chaosamran_Studio / shutterstock.com