أسس Accelerated Mobile Pages

1. نظرة عامة

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

أهداف الدورة التعليمية

  • كيفية مساهمة AMP في تحسين تجربة المستخدم على الويب على الأجهزة الجوّالة
  • العناصر الأساسية في موقع إلكتروني بتنسيق AMP
  • القيود المرتبطة بتنسيق AMP
  • كيفية معالجة المشاكل الشائعة في المواقع الإخبارية من خلال مكوّنات الويب بتنسيق AMP
  • كيفية التحقّق من صحة AMP
  • كيفية إعداد صفحات AMP لتكون متوافقة مع "بحث Google"

المتطلبات

  • الرمز النموذجي
  • ‫Python (يُفضّل الإصدار 2.7) أو إضافة Chrome 200 OK Web Server
  • متصفّح Chrome (أو متصفّح مكافئ يمكنه فحص "وحدة تحكّم JavaScript")
  • أداة تعديل الرموز (مثل Atom وSublime وNotepad++)

2. الحصول على الرمز النموذجي

يمكنك إما تنزيل كل الرمز النموذجي على جهاز الكمبيوتر:

...أو استنسِخ مستودع GitHub من سطر الأوامر:

$ git clone https://github.com/googlecodelabs/accelerated-mobile-pages-foundations.git

سيتم تنزيل ملف ZIP يحتوي على عدة ملفات أمثلة للموارد وصفحة article.html الأولية.

فك ضغط المجلد وانتقِل إلى الدليل من خلال سطر الأوامر على الكمبيوتر.

3- تشغيل الصفحة النموذجية

لاختبار صفحتنا النموذجية، علينا الوصول إلى الملفات من خادم ويب. تتوفّر عدة طرق لإنشاء خادم ويب محلي مؤقت لأغراض الاختبار. في هذا الدرس العملي، سنقدّم تعليمات بشأن 3 خيارات متاحة:

  • تطبيق Google Chrome "خادم الويب لمتصفّح Chrome": هذا هو الأسلوب الذي ننصح به لأنّه أبسط حلّ متاح ومتوافق مع مختلف الأنظمة الأساسية. ملاحظة: يتطلّب هذا الأسلوب تثبيت Google Chrome.
  • استضافة Firebase: خيار بديل إذا كنت مهتمًا أيضًا باستكشاف منصة استضافة الأصول الثابتة الجديدة "استضافة Firebase". تكون طبقة المقابس الآمنة مفعّلة تلقائيًا.
  • خادم HTTP محلي بلغة Python: يتطلّب الوصول إلى سطر الأوامر.

الخيار 1: Web Server for Chrome

يمكنك العثور على تطبيق "خادم الويب لمتصفّح Chrome" على هذا الرابط في "سوق Chrome الإلكتروني".

4c1bf1095afed87a.png

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

بالإضافة إلى ذلك، يجب وضع علامة في المربّع بجانب الخيار "عرض index.html تلقائيًا" وضبط المنفذ على "8000". يجب إعادة تشغيل خادم الويب لتصبح هذه التغييرات سارية.

يمكنك الوصول إلى عنوان URL هذا من خلال:

http://localhost:8000/article.html

إذا تم تحميل عنوان URL أعلاه بنجاح، يمكنك الانتقال إلى الخطوة التالية.

الخيار 2: استضافة Firebase

إذا كنت مهتمًا باستكشاف خدمة استضافة الويب الثابتة الجديدة من Firebase، يمكنك اتّباع التعليمات المتاحة هنا لنشر موقعك الإلكتروني بتنسيق AMP على عنوان URL لاستضافة Firebase.

‫استضافة Firebase هي خدمة استضافة ثابتة يمكنك استخدامها لنشر واستضافة موقع إلكتروني ثابت ومواد عرضه بسرعة، بما في ذلك ملفات HTML وCSS وJavaScript. يستفيد المستخدمون من انخفاض وقت الاستجابة لأنّ المحتوى الثابت يتم تخزينه مؤقتًا في شبكة توصيل المحتوى (CDN) التي تتضمّن نقاط حضور (PoP) موزّعة في جميع أنحاء العالم.

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

الخيار 3: خادم HTTP Python

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

لتشغيل خادم HTTP المضمّن في Python من سطر الأوامر، ما عليك سوى تنفيذ ما يلي:

python -m SimpleHTTPServer

ويمكنك الوصول إلى عنوان URL هذا:

http://localhost:8000/article.html

4. إنشاء صفحة HTML عادية

في ملف zip الذي تم تنزيله، ستعثر على ملف باسم article.html. هذه هي المقالة التي سننشئ لها صفحة مكافئة بتنسيق AMP.

انسخ الرمز من عيّنة article.html والصِقه في ملف جديد. احفظ هذا الملف باسم article.amp.html.

يجب أن يظهر ملف article.amp.html الآن على النحو التالي:

<!doctype html>
<html lang="en">
  <head>

    <title>News Article</title>

    <link href="base.css" rel="stylesheet" />

    <script type="text/javascript" src="base.js"></script>
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>
    </article>
    <img src="mountains.jpg">
  </body>
</html>

هذه صفحة بسيطة عمدًا تتضمّن عناصر شائعة في المقالات الإخبارية الثابتة: CSS وJavaScript وعلامة صورة.

إنّ نسخة AMP من المقالة هي مجرد نسخة من المقالة الأصلية في الوقت الحالي. لنحوّل هذا المستند إلى مستند AMP. للبدء، سنضيف ملف مكتبة JavaScript الخاص بـ AMP ونرى الأخطاء التي تظهر عند تفعيل أداة التحقّق من صحة AMP.

لتضمين مكتبة AMP، أضِف هذا السطر إلى أسفل العلامة <head>:

<script async src="https://cdn.ampproject.org/v0.js"></script>

لنحمّل الآن صفحة article.amp.html الجديدة في المتصفّح من خلال الرابط التالي ونفتح وحدة تحكّم المطوّرين في Chrome من خلال Menu > More Tools > Developer Tools:

efc352f418f35761.png

الآن، افحص ناتج JavaScript في "لوحة بيانات المطوِّر". تأكَّد من اختيار علامة التبويب "وحدة التحكّم":

597d53fae21a0a60.png

من المفترض أن يظهر لك سجلّ الأخطاء التالي:

Powered by AMP ⚡ HTML

لتفعيل مدقّق صفحات AMP، أضِف معرّف الجزء التالي إلى عنوان URL:

#development=1

على سبيل المثال:

http://localhost:8000/article.amp.html#development=1

قد تحتاج إلى إعادة تحميل الصفحة يدويًا في المتصفّح. يمكنك إعادة تحميل صفحة يدويًا في متصفّحك من خلال الضغط على هذا الزر:

3cc0680e695b804d.png

من المفترض أن تظهر لك عدة أخطاء في عملية التحقّق:

Screen Shot 2016-05-03 at 10.09.51 AM.png

على الرغم من أنّ AMP هو اختصار لعبارة Accelerated Mobile Pages، يمكن استخدامه لإنشاء صفحات سريعة الاستجابة يتم عرضها بشكل جيد على جميع أحجام الشاشات. لمزيد من المعلومات، يُرجى الاطّلاع على قسم تصميم الويب السريع الاستجابة في موقع Google Developers الإلكتروني.

لمحاكاة تجربة الأجهزة الجوّالة في "أدوات مطوّري برامج Chrome" انقر على رمز جهاز الهاتف الجوّال هنا:

46d475a36472b495.png

الآن، اختَر جهازًا جوّالاً (مثل "Pixel 2") من هذه القائمة:

f65e7b38557a5807.png

من المفترض أن تظهر لك دقة محاكاة متوافقة مع الأجهزة الجوّالة في المتصفّح، مثل ما يلي:

7da6c754afb2adca.png

والآن، نحن جاهزون للبدء. لنستعرض أخطاء التحقّق من الصحة واحدًا تلو الآخر ونتناول كيفية ارتباطها بـ AMP.

5- حلّ أخطاء التحقّق من الصحة

مجموعة الأحرف مطلوبة

سنبدأ بإصلاح الخطأ التالي:

The mandatory tag 'meta charset=utf-8' is missing or incorrect.

لعرض النص بشكل صحيح، يتطلّب AMP ضبط ترميز الأحرف للصفحة. ويجب أن تكون أيضًا العنصر الثانوي الأول لعلامة Head. والسبب في ذلك هو تجنُّب إعادة تفسير المحتوى الذي تمت إضافته قبل علامة meta charset.

أضِف الرمز التالي كسطر أول في علامة التتبع head:

<meta charset="utf-8" />

احفظ الملف، ثم أعِد تحميل الصفحة وتأكَّد من عدم ظهور هذا الخطأ مرة أخرى.

يجب أن يتضمّن كل مستند AMP رابطًا يشير إلى الصفحة الأساسية. لذا، لنضِف الرابط إلى مقالتنا الأصلية.

أضِف الرمز التالي أسفل العلامة <meta charset="utf-8" />:

<link rel="canonical" href="/article.html">

الآن، أعِد تشغيل خادم الويب إذا لزم الأمر وأعِد تحميل الصفحة. على الرغم من أنّه لا يزال هناك الكثير من الأخطاء التي يجب إصلاحها، لم يعُد الخطأ "يجب أن تحتوي ملفات AMP على علامة <link rel=canonical>" يظهر.

سمة AMP مطلوبة

تتطلّب صفحات AMP إضافة سمة إلى عنصر HTML الجذر في الصفحة للإشارة إلى أنّ الصفحة هي مستند AMP:

The mandatory attribute '⚡' is missing in tag 'html ⚡ for top-level html'
The mandatory tag 'html ⚡ for top-level html' is missing or incorrect.

يمكن حلّ هذه المشكلة ببساطة من خلال إضافة السمة ⚡ إلى العلامة <html> على النحو التالي:

<!doctype html>
<html ⚡ lang="en">
  <head>
...

الآن، أعِد تحميل الصفحة وتأكَّد من أنّ الخطأين قد اختفيا.

إطار العرض مطلوب

سنعالج الخطأ التالي:

The mandatory tag 'meta name=viewport' is missing or incorrect.

يتطلّب AMP تحديد width وminimum-scale لإطار العرض. يجب تحديد هاتين القيمتين على أنّهما device-width و1 على التوالي. نافذة العرض هي علامة شائعة مضمّنة في <head> من صفحة HTML.

يمكن تصحيح ذلك بشكل أفضل من خلال إضافة مقتطف HTML التالي إلى العلامة <head>. أضِف علامة meta التالية:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />

    <link rel="canonical" href="/article.html">

    <!-- The following is the meta tag and viewport information we must add to the page: -->
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

...

هذه هي القيم الصالحة الوحيدة لـ width وminimum-scale في AMP. إنّ تحديد initial-scale ليس إلزاميًا، ولكنّه يُدرَج عادةً في تطوير الويب على الأجهزة الجوّالة وننصح به. يمكنك الاطّلاع على مزيد من المعلومات حول إطار العرض والتصميم المتجاوب هنا.

كما في السابق، أعِد تحميل الصفحة وتحقّق مما إذا كان الخطأ قد اختفى.

أوراق الأنماط الخارجية

يرتبط الخطأ التالي باستخدامنا لأوراق الأنماط:

The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'base.css'.

على وجه التحديد، يشير هذا الخطأ إلى علامة رابط ورقة الأنماط التالية في علامتنا <head>:

<link href="base.css" rel="stylesheet" />

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

لذلك، عليك إزالة علامة الرابط في <head> واستبدالها بعلامة مضمّنة مثل ما يلي:

<style amp-custom>

body {
  width: auto;
  margin: 0;
  padding: 0;
}

...

</style>

يجب نسخ محتوى علامة النمط مباشرةً من ملف base.css في دليل مشروعك. السمة amp-custom في علامة النمط إلزامية.

أعِد تحميل الصفحة مرة أخرى وتحقّق مما إذا كان خطأ أوراق الأنماط قد اختفى.

JavaScript التابعة لجهات خارجية

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

The tag 'script' is disallowed except in specific forms.

في AMP، لا يُسمح بالنصوص البرمجية التي ينشئها المستخدمون. لا يُسمح باستخدام النصوص البرمجية في AMP إلا إذا استوفت شرطَين أساسيَّين:

  • يجب أن يكون كل JavaScript غير متزامن، أي يجب تضمين السمة async في علامة النص البرمجي.
  • يمكن تضمين مكتبة AMP ومكوّنات AMP فقط.

يستبعد ذلك بشكل فعّال استخدام جميع برامج JavaScript التابعة لجهات خارجية. هناك استثناء واحد، وهو أنّه يمكن استخدام JavaScript من جهة خارجية في إطارات iframe.

حاوِل فتح ملف base.js خارجي. ماذا تلاحظون؟ يجب أن يكون الملف خاليًا من أي رمز JavaScript وأن يتضمّن فقط تعليقًا يتضمّن معلومات مثل ما يلي:

/*

This external JavaScript file is intentionally empty.

Its purpose is merely to demonstrate the AMP validation error related to the use of external JavaScript files.

*/

بما أنّ ملف JavaScript الخارجي هذا ليس مكوّنًا وظيفيًا لموقعنا الإلكتروني، يمكننا إزالة المرجع بالكامل بأمان.

أزِل مرجع JavaScript الخارجي التالي من مستندك:

<script type="text/javascript" src="base.js"></script>

الآن، أعِد تحميل الصفحة وتأكَّد من اختفاء خطأ النص البرمجي.

النص النموذجي لملف CSS في AMP

The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect.
The mandatory tag 'head > style : boilerplate' is missing or incorrect.
The mandatory tag 'noscript > style : boilerplate' is missing or incorrect.

تشير الأخطاء التالية إلى علامتَين ناقصتَين في العلامة <head>. يجب تضمين العلامات التالية في كل مستند AMP:

<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

أضِف مقتطف الرمز أعلاه إلى أسفل علامة <head> في المستند.

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

علامة amp-img

The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'?

يتضمّن AMP مكوّن ويب مصمّمًا خصيصًا لاستبدال علامة الصورة، ويُطلق عليه اسم amp-img:

<amp-img src="mountains.jpg"></amp-img>

حاوِل تضمين العلامة amp-img أعلاه وتشغيل أداة التحقّق من الصحة مرة أخرى. من المفترض أن تظهر لك عدة أخطاء جديدة:

AMP-IMG# Layout not supported for: container
The implied layout 'CONTAINER' is not supported by tag 'amp-img'.

لماذا أدّى amp-img إلى ظهور خطأ آخر؟ لأنّ amp-img ليس بديلاً مباشرًا لعلامة HTML التقليدية img. هناك متطلبات إضافية عند استخدام amp-img.

نظام التنسيق

يخبرنا هذا الخطأ أنّ العلامة amp-img لا تتوافق مع نوع التصميم "container". من أهم المفاهيم في تصميم AMP التركيز على تقليل مقدار إعادة تدفق DOM المطلوبة لعرض صفحات الويب.

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

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

a6149f5043618189.png

في حالتنا، استنتج نظام التنسيق نوع التنسيق الخاص بـ amp-img على أنّه النوع container. ومع ذلك، فإنّ نوع الحاوية مخصّص للعناصر التي تحتوي على عناصر فرعية، وهو غير متوافق مع العلامة amp-img، وهذا هو سبب حدوث هذا الخطأ.

لماذا تم استنتاج نوع الحاوية؟ لأنّنا لم نحدّد سمة الارتفاع للعلامة amp-img. في HTML، يمكن تقليل إعادة التدفق من خلال تحديد عرض وارتفاع ثابتَين للعناصر على الصفحة دائمًا. في AMP، يُنصح بتحديد العرض والارتفاع لعناصر amp-img لأنّ ذلك يتيح لـ AMP فهم نسبة العرض إلى الارتفاع للعنصر.

اضبط العرض والارتفاع على النحو التالي:

<amp-img src="mountains.jpg" width="266" height="150"></amp-img>

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

a7f2a768e9da1a25.png

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

من خلال ضبط سمة التنسيق على responsive، يمكننا تحقيق ما يلي:

<amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>

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

de0cbbe31eacbbb1.png

اكتمال النقل بنجاح

من المفترض أن يظهر مستند AMP الآن على النحو التالي:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">    

    <link rel="canonical" href="/article.html">
    <link rel="shortcut icon" href="amp_favicon.png">

    <title>News Article</title>

    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <style amp-custom>
      body {
        width: auto;
        margin: 0;
        padding: 0;
      }

      header {
        background: Tomato;
        color: white;
        font-size: 2em;
        text-align: center;
      }

      h1 {
        margin: 0;
        padding: 0.5em;
        background: white;
        box-shadow: 0px 3px 5px grey;
      }

      p {
        padding: 0.5em;
        margin: 0.5em;
      }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>  
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>

      <amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
    </article>
  </body>
</html>

أعِد تحميل الصفحة واطّلِع على ناتج وحدة التحكّم. من المفترض أن تظهر لك الرسالة التالية:

AMP validation successful.

الأسئلة الشائعة

6. عناوين URL الأساسية والبيانات الوصفية والبحث

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

تقدّم هذه الخطوة نظرة عامة على المتطلبات الكاملة.

ربط الصفحات الأساسية ومستندات AMP

تهدف صفحات AMP إلى تسريع الويب، وعلى الرغم من أنّ المشروع كان يركّز بشكل أكبر على المحتوى الثابت في بداياته، فإنّ إضافة مكوّنات مثل amp-bind تجعله مناسبًا لمجموعة متنوعة من المواقع الإلكترونية، مثل مواقع الناشرين الإخباريين ومواقع التجارة الإلكترونية ومواقع السفر والمدونات وغيرها.

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

7152b1ef38f00f36.png

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

لقد اتّخذنا الخطوة الأولى لتحقيق ذلك في مستند AMP من خلال تضمين علامة رابط في <head> تؤدي إلى الصفحة الأساسية:

<link rel="canonical" href="/article.html">

الخطوة التالية هي ربط المقالة الأساسية بصفحة AMP. ويتم تحقيق ذلك من خلال تضمين العلامة <link rel="amphtml"> في قسم <head> من المقالة الأساسية.

أضِف الرمز التالي إلى قسم <head> في ملف article.html:

<link rel="amphtml" href="/article.amp.html">

يوضّح المخطّط البياني التالي اتجاهات علامات الروابط:

a880b625c10ffd84.png

من الضروري إعداد هذا الربط الثنائي الاتجاه لكي يتمكّن برنامج الزحف من &quot;بحث Google&quot; من فهم العلاقة بين مستند HTML الأساسي العادي ومستند AMP. في حال عدم توفير أي روابط، لن يكون من الواضح بالضرورة لبرنامج الزحف أي المقالات هي "إصدارات AMP" من مستندات HTML العادية. من خلال تقديم هذه الروابط بشكل صريح، نضمن عدم وجود أي غموض.

البيانات الوصفية لمحركات البحث من Schema.org

من المتطلبات الأخرى التي يجب استيفاؤها لكي تظهر مستندات AMP في واجهة منصة العرض الجديدة بعناصر متغيّرة هو الالتزام بمواصفات بيانات محركات البحث الوصفية في Schema.org. يتم تضمين هذه البيانات الوصفية في العلامة <head> ضمن مستنداتك من خلال علامة نص برمجي من النوع application/ld+json.

أضِف الرمز التالي إلى أسفل القسم <head> في مستند AMP:

<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "NewsArticle",
 "mainEntityOfPage":{
   "@type":"WebPage",
   "@id":"https://example.com/my-article.html"
 },
 "headline": "My First AMP Article",
 "image": {
   "@type": "ImageObject",
   "url": "https://example.com/article_thumbnail1.jpg",
   "height": 800,
   "width": 800
 },
 "datePublished": "2015-02-05T08:00:00+08:00",
 "dateModified": "2015-02-05T09:20:00+08:00",
 "author": {
   "@type": "Person",
   "name": "John Doe"
 },
 "publisher": {
   "@type": "Organization",
   "name": "⚡ AMP Times",
   "logo": {
     "@type": "ImageObject",
     "url": "https://example.com/amptimes_logo.jpg",
     "width": 600,
     "height": 60
   }
 },
 "description": "My first experience in an AMPlified world"
}
</script>

أعِد تحميل الصفحة في المتصفّح وتأكَّد من عدم حدوث أي أخطاء في التحقّق من صحة صفحات AMP.

الآن، افتح أداة التحقّق من صحة البيانات المنظَّمة في نافذة متصفّح جديدة وانقر على "اختبار الترميز". بعد ذلك، اختَر علامة التبويب "مقتطف الرمز"، ثم انسخ رمز المصدر الكامل من صفحة AMP والصِقه في لوحة أداة تعديل النصوص الخاصة بأداة التحقّق، ثم انقر على "تشغيل الاختبار":

901b629036e0cd62.png

من المفترض أن يظهر لك محتوى مثل ما يلي في الصفحة:

ae8e16aff196e5a7.png

في ما يلي المتطلبات الأساسية للظهور في منصّة العرض الجديدة بعناصر متغيّرة على &quot;بحث Google&quot; للمقالات الإخبارية المتوافقة مع AMP:

  1. تأكَّد من أنّ مستند AMP صالح.
  2. أشِر إلى مستند AMP من صفحة HTML التقليدية باستخدام علامة <link> والعكس صحيح.
  3. أدرِج علامة البيانات الوصفية لمحرك البحث أعلاه.

يمكنك الاطّلاع على مزيد من المعلومات حول اكتشاف الصفحات.

7. تهانينا!

لقد أنهيت تجربة الترميز واستكشفت بنجاح العديد من المفاهيم الأساسية لمستندات AMP.

نأمل أن تكون قد فهمت كيفية تنفيذ هذه المفاهيم والميزات في مستند AMP، بالإضافة إلى فهم سبب تصميم AMP بهذه الطريقة.

في ما يلي بعض المواضيع والروابط الإضافية التي قد تهمّك لاستكشافها وتعزيز مهاراتك بشكل أكبر.