التحقق من صحة صفحات AMP

لا تقتصر الميزة الأساسية لتطبيق AMP على زيادة سرعة صفحاتك تحميل، ولكنها تجعل صفحاتك سريعة على نحو يمكن معه التحقق من صحتها. وبناءً على ذلك، يمكن للجهات الأخرى، مثل Twitter أو Instagram أو بحث Google الثقة في عرض صفحات AMP للقرّاء من خلال طُرُق أكثر تشويقًا.

كيف يمكنني معرفة ما اذا كانت صفحتي هي صفحة AMP صالحة؟

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

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

وحدة تحكم Developer Console بالمتصفّح.

تتوفّر أداة التحقق من صفحة صفحات AMP مصحوبة بمكتبة AMP JS، وبالتالي فهو متاحة في كل صفحة من صفحات AMP بشكل فوري. للتحقق من الصحة:

1. فتح صفحة AMP في متصفحك
2. أضف "#development=1" إلى عنوان URL، على سبيل المثال، http://localhost:8000/released.amp.html#development=1.
3. افتح وحدة تحكم Chrome DevTools وابحث عن أخطاء التحقق من الصحة.

ستبدو أخطاء Developer Console على النحو التالي:

واجهة الويب

يمكن استخدام أداة التحقق من صحة صفحات AMP كواجهة ويب على الموقع validator.ampproject.org. وتُظهر هذه الواجهة الأخطاء المعروضة بشكل مضمّن مع مصدر HTML للصفحة. تعد الواجهة محررًا تفاعليًا: حيث تؤدي التغييرات المُجراة على مصدر html إلى إعادة التحقق من الصحة بشكل تفاعلي.

إضافة المتصفح

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

إضافة التحقق من صحة صفحات AMP للمتصفّحين Chrome وOpera.

أداة سطر الأوامر

كشرط مسبق، قد تحتاج إلى تثبيت Node.js مع مدير الحزمة الخاص بها npm على النظام الذي تستخدمه.

لتثبيت أداة سطر الأوامر لأداة التحقق من صحة AMP HTML، اكتب npm install -g amphtml-validator.

والآن، هيّا نتحقق من صحة صفحة AMP HTML حقيقية.

$ amphtml-validator https://amp.dev/
https://amp.dev/: PASS

لا غرابة في صحة صفحة AMP HTML هذه. هيّا نجرّب صفحة غير صالحة: several_errors.html. لتشغيل الأمر amphtml-validator يمكنك تقديم عنوان URL للصفحة أو اسم ملف محلي. نزّل several_errors.html واحفظه في ملف، ثم شغّل:

$ amphtml-validator several_errors.html
several_errors.html:23:2 The attribute 'charset' may not appear in tag 'meta name= and content='.
several_errors.html:26:2 The tag 'script' is disallowed except in specific forms.
several_errors.html:32:2 The mandatory attribute 'height' is missing in tag 'amp-img'. (see /ar/documentation/components/amp-img/)
several_errors.html:34:2 The attribute 'width' in tag 'amp-ad' is set to the invalid value '100%'. (see /ar/documentation/components/amp-ad/)
...

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

كنقطة بداية جيدة لإنشاء صفحة AMP التابعة لك، جرّب minimum_valid_amp.html:

$ amphtml-validator minimum_valid_amp.html
minimum_valid_amp.html: PASS

تقدّم أداة سطر الأوامر ميزات إضافية تشمل إيقاف تشغيل اللون، أو طباعة ناتج JSON، أو تشغيل إصدار معيّن من جافا سكريبت لأداة التحقق من الصحة (تشغّل أحدث نص برمجي منشور بشكل افتراضي).

$ amphtml-validator --help

  Usage: index [options] <fileOrUrlOrMinus...>

  Validates the files or urls provided as arguments. If "-" is
  specified, reads from stdin instead.

  Options:

    -h, --help                  output usage information
    -V, --version               output the version number
    --validator_js <fileOrUrl>  The Validator Javascript.
      Latest published version by default, or
      dist/validator_minified.js (built with build.py)
      for development.
    --format <color|text|json>  How to format the output.
      "color" displays errors/warnings/success in
              red/orange/green.
      "text"  avoids color (e.g., useful in terminals not
              supporting color).
      "json"  emits json corresponding to the ValidationResult
              message in validator.proto.

ماذا يحدث إذا كانت صفحتي غير صالحة؟

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

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

كيف يمكنني إصلاح أخطاء التحقق من الصحة؟

معظم أخطاء التحقق من الصحة سهلة المعالجة والإصلاح. تأمّل علامة HTML هذه:

<img src="cat.png">

والتي ينتج عنها خطأ التحقق من صحة صفحات AMP التالي، كما هو موضح في هذه الأدوات مختلفة:

• وحدة تحكم Developer Console بالمتصفّح
• واجهة الويب

تقدّم كل أداة عدة معلومات كما يلي:

1. الموقع (السطر والعمود) في مستند HTML الذي ورد به الخطأ ، حيث يمكن النقر عليه في بي بضع الواجهات لتمييز الموقع. وفي هذه الحالة ، تظهر المشكلة في السطر 11، بالعمود 2.
2. سطر نصّي يصف الخطأ. وفي هذه الحالة، يشير النص إلى استخدامنا لعلامة <img> في حين كان يجب استخدام علامة <amp-img>.
3. رابط إلى مستند ذي صلة يتعلق بالخطأ. في هذه الحالة، مستندات لعلامة <amp-img>. ولا تنشئ كل الأخطاء روابط للمستندات.

بعد إعادة قراءة المواصفات بعناية، تبيّن لنا أننا نستخدم علامة <img>، في حين كان يجب استخدم علامة <amp-img>.

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