في هذا الدرس التطبيقي حول الترميز، ستتعرّف على كيفية إنشاء Accelerated Mobile Pages أو AMP. في سبيل تحقيق ذلك، ستنفِّذ صفحة ويب بسيطة لمقالة إخبارية تتوافق مع مواصفات AMP، مع تضمين ميزات ويب عادية شائعة الاستخدام على مواقع الأخبار على الأجهزة الجوّالة.
ما ستتعرَّف عليه
- كيفية تحسين AMP لتجربة المستخدم على الويب على الأجهزة الجوّالة
- المبادئ الأساسية لموقع إلكتروني بتنسيق AMP
- القيود المفروضة على صفحات AMP
- كيفية حل مكونات الويب لصفحات AMP لمشاكل مواقع الأخبار الشائعة
- طريقة التحقّق من صحة صفحات AMP
- طريقة إعداد صفحات AMP للتوافق مع "بحث Google"
الأشياء التي تحتاج إليها
- نموذج الرمز
- Python (يُفضّل أن يكون الإصدار 2.7) أو إضافة خادم الويب Chrome 200 OK
- Chrome (أو متصفِّح مكافئ يمكنه فحص وحدة تحكُّم JavaScript)
- محرر الرموز (على سبيل المثال، Atom وSublime وNotepad++ )
يمكنك إما تنزيل كل نماذج الرمز على جهاز الكمبيوتر:
...أو استنساخ مستودع GitHub من سطر الأوامر:
$ git clone https://github.com/googlecodelabs/accelerated-mobile-pages-foundations.gitسيتم تنزيل ملف ZIP يحتوي على العديد من أمثلة ملفات الموارد وصفحة البداية html.html.
فك ضغط المجلد وانتقل إلى الدليل عبر سطر الأوامر في جهاز الكمبيوتر.
لاختبار نموذج الصفحة، نحتاج إلى الوصول إلى الملفات من خادم ويب. هناك العديد من الطرق لإنشاء خادم ويب محلي مؤقت لأغراض الاختبار. سنقدّم في هذا الدرس التطبيقي تعليمات حول 3 خيارات متاحة:
- تطبيق Google Chrome" ، وخادم الويب لمتصفِّح Chrome"؛ ملاحظة: تتطلب هذه الطريقة تثبيت Google Chrome.
- استضافة Firebase - خيار بديل إذا كنت مهتمًا أيضًا باستكشاف النظام الأساسي الجديد لاستضافة مواد العرض "& Hosting". تفعيل طبقة المقابس الآمنة (SSL) تلقائيًا.
- خادم HTTP Python المحلي: يتطلب الوصول إلى سطر الأوامر.
الخيار الأول: خادم الويب لمتصفح Chrome
يمكنك العثور على تطبيق "خادم الويب لمتصفح Chrome" في هذا الرابط على سوق Chrome الإلكتروني.
بعد تثبيت تطبيق Chrome، يجب توجيه التطبيق إلى مجلد معيّن من خلال الزر "&;اختيار&مجلد" بالنسبة إلى هذا الدرس التطبيقي حول الترميز، عليك اختيار المجلد الذي فكّت فيه ملفات أمثلة الدرس التطبيقي للرمز.
بالإضافة إلى ذلك، يجب وضع علامة في مربع الاختيار ""؛ عرض فهرس index.html" وتعيين المنفذ على "8000". وسيكون عليك إعادة تشغيل خادم الويب لتصبح هذه التغييرات سارية.
الوصول إلى عنوان URL هذا من خلال:
http://localhost:8000/article.html
إذا تم تحميل عنوان URL أعلاه بنجاح، يمكنك المتابعة إلى الخطوة التالية.
الخيار الثاني: استضافة Firebase
إذا كنت مهتمًا باستكشاف استضافة الويب الثابتة الجديدة في Firebase، يمكنك اتّباع التعليمات المتاحة هنا لنشر موقع AMP الإلكتروني على عنوان URL لاستضافة Firebase.
استضافة Firebase هي خدمة استضافة ثابتة يمكنك استخدامها لنشر واستضافة موقع إلكتروني ثابت وأصوله بسرعة، بما في ذلك ملفات HTML وCSS وJavaScript. يستفيد المستخدمون من وقت الاستجابة المنخفض لأنّ المحتوى الثابت مخزّن مؤقتًا في شبكة توصيل المحتوى (CDN) التي تتضمّن نقاطًا للمشاركة في جميع أنحاء العالم.
أخيرًا، يتم دائمًا تقديم خدمة استضافة Firebase عبر طبقة المقابس الآمنة (SSL) لذا فهي رائعة لصفحات AMP والويب بشكل عام. إذا كنت مهتمًا أكثر بالتركيز فقط على صفحات AMP، ما عليك سوى تجاهل هذا الخيار.
الخيار الثالث: خادم HTTP Python
إذا كنت لا تستخدم Chrome أو كنت تواجه صعوبة في تثبيت إضافة Chrome، يمكنك أيضًا استخدام Python من سطر الأوامر لإطلاق خادم ويب محلي.
لتشغيل خادم HTTP المدمج في Python's من سطر الأوامر، ما عليك سوى تنفيذ ما يلي:
python -m SimpleHTTPServer
ويمكنك الوصول إلى عنوان URL هذا:
http://localhost:8000/article.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. للبدء، سنضيف ملف مكتبة AMP JavaScript وسنعرض الأخطاء التي تظهر عند تفعيل أداة فحص صحة صفحات AMP.
لتضمين مكتبة AMP، أضِف هذا السطر إلى أسفل علامة <head>:
<script async src="https://cdn.ampproject.org/v0.js"></script>لنبدأ الآن في تحميل صفحة article.amp.html الجديدة في المتصفح عبر الرابط التالي ثم فتح وحدة تحكم مطوّري البرامج في Chrome عبر Menu > More Tools > Developer Tools:
تحقق الآن من مخرجات JavaScript في Play Console. تأكَّد من اختيار علامة التبويب في وحدة التحكّم:
من المفترض أن يظهر لك هذا السجلّ:
Powered by AMP ⚡ HTML
لتفعيل أداة التحقّق من صحة صفحات AMP، أضِف رقم تعريف الجزء هذا إلى عنوان URL:
#development=1
مثلاً:
http://localhost:8000/article.amp.html#development=1
قد تحتاج إلى إعادة تحميل الصفحة في المتصفّح يدويًا. يمكنك تحديث صفحة في متصفحك يدويًا من خلال الضغط على هذا الزر:
من المفترض أن تظهر لك العديد من أخطاء التحقق من الصحة:
وعلى الرغم من أنّ صفحة AMP متوافقة مع Accelerated Mobile Pages، يمكن استخدامها لإنشاء صفحات متجاوبة يتم عرضها بشكل جيد على جميع أحجام الشاشات. لمزيد من المعلومات، راجِع قسم تصميم الويب السريع الاستجابة في موقع Google Developers الإلكتروني.
لمحاكاة تجربة جهاز الجوّال في أدوات مطوّري برامج Chrome. انقر على رمز جهاز الهاتف الجوال هنا:
الآن، اختر جهازًا جوّالاً (على سبيل المثال، "؛Pixel 2" من هذه القائمة:
من المفترض أن تظهر القيمة التي تحاكي محاكاة الأجهزة الجوّالة في متصفحك كما يلي:
نحن الآن جاهزون للعمل. لنتعرّف على أخطاء التحقق واحدة تلو الأخرى ونتناول طريقة ارتباطها بصفحات AMP.
ترميز الأحرف مطلوب
سنبدأ بإصلاح الخطأ التالي:
The mandatory tag 'meta charset=utf-8' is missing or incorrect.
لعرض النص بشكلٍ صحيح، تتطلب AMP ضبط ترميز الأحرف للصفحة. ويجب أن تكون أيضًا العلامة الفرعية الأولى لعلامة الرأس. والسبب في ذلك هو تجنب إعادة تفسير المحتوى الذي تمت إضافته قبل علامة مجموعات البيانات الوصفية.
أضِف الرمز التالي كسطر أول من علامة العنوان:
<meta charset="utf-8" /> يمكنك حفظ الملف وإعادة تحميل الصفحة والتحقق من أن هذا الخطأ لم يعد يظهر.
يجب أن تحتوي ملفات AMP على علامة <link rel=canonical>.
ويجب توفير رابط لكل مستند 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 في علامة النمط هي إلزامية.
مرة أخرى، أعِد تحميل الصفحة وتحقَّق من اختفاء خطأ أوراق الأنماط.
جافا سكريبت للجهات الخارجية
على الرغم من إمكانية إعادة صياغة أوراق الأنماط بسهولة نسبيًا باستخدام صفحات 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 JavaScript لصفحات AMP علامة النص لكي تصبح مرئية مرة أخرى عندما يكون محتوى الصفحة جاهزًا للعرض. تنفّذ 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 المطلوب لعرض صفحات الويب.
لتقليل AMP DOM، تشمل صفحات AMP نظام تصميم لضمان الحصول على أقصى قدر من الصرامة لتنسيق الصفحة، وذلك في أقرب وقت ممكن في مراحل تنزيل الصفحة وعرضها.
يتيح نظام التنسيق تحديد موضع العناصر على الصفحة وقياسها بطرق متنوعة، مثل الأبعاد الثابتة والتصميم السريع الاستجابة والارتفاع الثابت والمزيد.
في هذه الحالة، استنتج نظام التنسيق نوع تصميم amp-img على أنه النوع container. ومع ذلك، يكون نوع الحاوية مخصّصًا للعناصر التي تحتوي على عناصر ثانوية ولا تتوافق مع العلامة amp-img التي هي سبب هذا الخطأ.
لماذا تم استنتاج نوع الحاوية؟ لأننا لم نحدِّد سمة الارتفاع للعلامة amp-img. في HTML، يمكن تقليل إعادة التدفق عن طريق تحديد عرض وارتفاع ثابتين للعناصر في الصفحة. في صفحات AMP، يُنصَح بتحديد عرض وارتفاع عناصر amp-img، حيث يتيح ذلك لصفحات AMP فهم نسبة العرض إلى الارتفاع لهذا العنصر.
اضبط العرض والارتفاع كما يلي:
<amp-img src="mountains.jpg" width="266" height="150"></amp-img>لذا، يُرجى إعادة تحميل الصفحة والتحقّق من صحة أداة التحقّق - ومن المفترض ألا ترى أي أخطاء بعد ذلك. ومع ذلك، لا تبدو الصورة بشكل رائع إلى درجة غريبة من موضعها على الصفحة. وسيكون من المفيد إذا تم توسيع الصورة لتصبح متجاوبة مع ملاءمة الصفحة بغض النظر عن حجم الشاشة.
بشكل غير متوقع، لا يؤدي تحديد العرض والارتفاع إلى حصر العنصر بحجم ثابت تمامًا. يمكن لنظام تنسيق AMP تحديد موضع العنصر وتوسعته بطرق مختلفة من خلال معرفة نسبة العرض إلى الارتفاع، وتحدّد سمة التنسيق هذا العنصر الذي تريد تحديد موضعه وحجمه.
ومن خلال ضبط سمة التنسيق على responsive، يمكننا تحقيق ذلك:
<amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>وأخيرًا! يتم ضبط الصورة بنسبة العرض إلى الارتفاع الصحيحة وتملأ عرض الشاشة وفقًا للاستجابة.
نجحت عملية تسجيل الدخول.
من المفترض أن يظهر مستند 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.
الأسئلة الشائعة
تُعدّ مستندات AMP الصالحة في واجهة نتائج بحث Google جزءًا من واجهة منصّة عرض جديدة بعناصر متغيّرة، وذلك في إطار مبادرة AMP جديدة. توفّر هذه الواجهة تجربة أفضل للمستخدمين الذين يبحثون عن مقالات على الويب. لتقديم أفضل تجربة ممكنة، يجب أن تستوفي الصفحات المضمّنة معايير محدّدة بخلاف اجتياز أداة فحص صحة صفحات AMP.
تقدم هذه الخطوة نظرة عامة على المتطلبات الكاملة.
ربط الصفحات الأساسية ومستندات AMP
تهدف صفحات AMP إلى تسريع الويب، ورغم أن المشروع كان أكثر تركيزًا على المحتوى الثابت في أيامه الأولى، فإن إضافة مكوّنات مثل amp-bind تجعله مناسبًا لمجموعة متنوعة من المواقع، مثل ناشري الأخبار والتجارة الإلكترونية ومواقع السفر الإلكترونية والمدونات وغيرها.
ومع ذلك، من المهم فهم النطاق الكامل لكيفية وضع AMP في بنية الموقع الإلكتروني. وعلى الرغم من إمكانية استخدام صفحات AMP لإنشاء مواقع إلكترونية كاملة، يفضِّل العديد من الناشرين استخدامها كما هو الحال مع المنهج المقترن، حيث يتم إنشاء مستندات AMP كملحق لمقالات HTML العادية التي قد يستضيفها الناشر على موقعه الإلكتروني.
ويُعدّ الربط الأساسي في صفحات HTML العادية أسلوبًا شائعًا لتحديد الصفحة التي تُعدّ الصفحة المفضّلة عندما تتضمّن صفحات متعدّدة المحتوى نفسه. بما أنّه يمكن إنشاء مستندات AMP لتكون متوفرة على صفحات المقالات التقليدية في موقع إلكتروني، يجب أن نعامل صفحات HTML التقليدية على أنها صفحات "&عنوان URL الأساسي"
سبق أن اتخذنا الخطوة الأولى لتحقيق ذلك في مستند AMP عن طريق تضمين علامة رابط في <head> للرجوع إلى الصفحة الأساسية:
<link rel="canonical" href="/article.html">وتتمثل الخطوة التالية في ربط المقالة الأساسية بصفحة AMP. ويمكن تحقيق ذلك من خلال تضمين علامة <link rel="amphtml"> في القسم <head> من المقالة الأساسية.
إضافة الرمز التالي إلى القسم <head> من ملف article.html:
<link rel="amphtml" href="/article.amp.html">يوضّح المخطّط التالي اتجاهات علامات الروابط:
يعدّ من الضروري إعداد هذا الرابط الثنائي الاتجاه ليتمكن زاحف "بحث Google" من فهم العلاقة بين مستند 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 والصقه في لوحة محرر النصوص في أداة التحقّق، ثم انقر على "&تشغيل"&اختبار تجريبي:
من المفترض أن يظهر لك عنصر مماثل في الصفحة:
في ما يلي المتطلبات الأساسية للظهور في منصّة العرض بعناصر متغيّرة الجديدة ضمن "بحث Google" لمقالات الأخبار التي تستخدم صفحات AMP:
- تأكد من صلاحية مستند AMP.
- ارجع إلى مستند AMP من صفحة HTML التقليدية من خلال <link> العلامة والعكس صحيح.
- ضمِّن علامة البيانات الوصفية لمحرك البحث أعلاه.
اقرأ المزيد من المعلومات عن اكتشاف الصفحات.
لقد أكملت الدرس التطبيقي حول الترميز واستكشفت بنجاح العديد من المفاهيم الأساسية لمستندات AMP.
نأمل أنك لم تفهم طريقة تنفيذ هذه المفاهيم والميزات في مستند AMP، ولكنّك تفهم أيضًا سبب تصميم AMP بالطريقة التي حدّدتها.
في ما يلي بعض المواضيع والروابط الإضافية التي يمكنك استكشافها لتعزيز مهاراتك بشكل أكبر.