جعل صفحتك قابلة للاكتشاف
الآن بعد أن أنشأت مقالًا إخباريًا في AMP، دعنا نتأكد من أن المستخدمين بإمكانهم العثور على المحتوى الخاص بك واكتشافه.
ربط محتوى AMP
يمكن يتألف موقع الويب الخاص بك بأكمله من صفحات AMP أو يحتوي على بعض صفحات AMP أو قد لا يحتوي على أي صفحات AMP. سيغطي هذا الجزء من البرنامج التعليمي طريقة دمج AMP في بنية موقع الويب لديك.
يُعد الارتباط المتعارف عليه في صفحات HTML العادية أسلوبًا شائعًا للإعلان عن أي صفحة يجب اعتبارها الصفحة المفضلة عندما تتضمن صفحات متعددة المحتوى نفسه.
كما تُعد أحد الأساليب الشائعة عند إضافة AMP إلى موقع ويب عبارة عن إنشاء إصدارات AMP لصفحات غير AMP HTML تقليدية. إذ يحتوي كلا الإصدارين بشكل عام على المحتوى نفسه (على سبيل المثال، نص المقال) ولكن قد يكون لهما عروض تقديمية مختلفة. في هذا السيناريو، يجب أن تعامل صفحات HTML التقليدية باعتبارها الصفحات "الأساسية" وأن تقرن صفحات AMP بصفحات HTML هذه.
استخدم، إذا كان ذلك بإمكانك، صفحة AMP مثل أي مكتبة JavaScript أخرى لبناء موقعك وتجاهل الارتباط الأساسي. إذ يؤدي استخدام AMP إلى إنشاء موقع ويب كامل إلى تقليل عبء الصيانة على نحو كبير.
ولأغراض هذا البرنامج التعليمي، سنركز على الحالة التي يكون لديك فيها إصدار AMP وإصدار غير AMP من الصفحة. ففي هذا البرنامج التعليمي، يتضمن موقعنا الإلكتروني مقالًا إخباريًا به صفحة غير AMP HTML (article.html) وإصدار AMP من الصفحة (article.amp.html). وسنقرن هذه الصفحات من خلال link.
لقد اتخذنا بالفعل الخطوة الأولى لتحقيق هذا الأمر في مستند AMP من خلال تضمين علامة رابط في <head> للعودة إلى الصفحة الأساسية:
<link rel="canonical" href="/article.html" />
وتكون الخطوة التالية عبارة عن ربط المقال الأساسي بصفحة AMP. ويتم تحقيق ذلك من خلال تضمين علامة <link rel="amphtml"> في قسم <head> في المقال الأساسي.
وفي الملف article.html، أضف الرمز التالي إلى قسم <head>:
<link rel="amphtml" href="/article.amp.html" />
ويوضح الرسم البياني التالي اتجاهات علامات الارتباط:
من الضروري إعداد هذا الارتباط ثنائي الاتجاه بحيث تفهم محركات البحث العلاقة بين مستند HTML الأساسي ومستند AMP لدينا. وإذا لم يتم توفير روابط، فلن يكون من الضروري أن يتضح لبرنامج البحث تحديد المقالات التي تمثل "إصدارات AMP" لمستندات HTML العادية. ومن خلال توفير هذه الروابط صراحةً، نضمن عدم وجود غموض!
إضافة بيانات مهيكلة
لا تتطلب صفحات AMP الصالحة بيانات schema.org المهيكلة، لكن بعض الأنظمة الأساسية مثل بحث Google تتطلبها لتجارب معينة مثل مكتبة أهم القصص. ومن الجيد عمومًا تضمين البيانات المهيكلة. إذ تساعد البيانات المهيكلة محركات البحث في فهم صفحة الويب الخاصة بك على نحو أفضل، وكذا لعرض المحتوى الخاص بك بشكل أفضل في صفحات نتائج محرك البحث (على سبيل المثال، في المقتطفات المنسقة). ويتم تضمين البيانات المهيكلة في علامة <head> لصفحة AMP لديك عبر علامة البرنامج النصي من النوع 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.
التحقق من صحة البيانات المهيكلة
للتحقق من صحة بياناتك المهيكلة، توفر العديد من الأنظمة الأساسية أدوات التحقق من الصحة. في هذا البرنامج التعليمي، سنتحقق من صحة بياناتنا المهيكلة باستخدام أداة التحقق من البيانات المهيكلة من Google.
- في نافذة متصفح جديدة، افتح أداة التحقق من البيانات المهيكلة من Google.
- حدد علامة التبويب مقتطف الرمز.
- انسخ رمز المصدر الكامل من صفحة AMP وألصقه في لوحة محرر النصوص لأداة التحقق من الصحة.
- انقر فوق بدء الاختبار.
إذا كانت بياناتك المهيكلة صحيحة، يجب أن ترى 0 أخطاء، و0 تحذيرات.
عمل رائع! لقد أكملت مقال AMP الإخباري الخاص بك.