تطبيق AMP (صفحات الجوال المتسارعة) على مدونتك الإلكترونية مع تغيير بسيط في قالب HTML الخاص بك. إنها سهلة للغاية ولا توجد حاجة لأي خبير. تستطيع فعلها بنفسك.
كيفية تطبيق AMP لـ مدونة بلوجر
بادئ ذي بدء ، انتقل إلى محرر القالب. السمة - تحرير HTML ، ثم اتبع دليل التنفيذ خطوة بخطوة. إذا قمت بتطبيق AMP لمدونتك ، فستعمل مدونتك بشكل أسرع من أي وقت مضى.
الخطوة 1 (تغيير HTML):
لجعل مدونتك AMP سهلة ، ابحث واستبدل
<html>
<html amp='amp'>
2 (تغيير مجموعة الأحرف و العرض):
تحقق من وجود العلامات الوصفية لـ charset و viewport في محرر قالب المدونة. إن لم تكن موجودة ، انسخ والصق الكود التالي بعد
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
الخطوة 3 (Canonical link):
اجعل مدونتك قابلة للاكتشاف باستخدام علامة أساسية. الآن ، تستخدم جوجل إصدار AMP من صفحة الويب كإشارة لتصنيف محركات البحث. تحقق من وجود علامات الارتباط العنوان الاساسي. إذا لم يكن موجودًا ، فأضف الرابط المتعارف عليه كالتالي الذي سيشير ببساطة إلى نفسه.
<link rel="canonical" href="https://www.aubsp.com/article-metadata.html" />
<link expr:href='data:blog.url' rel='canonical'/>
الخطوة 4 (تغيير HEAD):
بعد ذلك ، ابحث واستبدل رمز
</head>بالشفرة التالية واجعل مدونتك الإلكترونية سهلة بواسطة AMP:
<style
amp-boilerplate='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 normalboth;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><styleamp-boilerplate='amp-boilerplate'>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async='async' src='https://cdn.ampproject.org/v0.js'></script>
</head>
الخطوة 5 (تغيير علامة الصورة):
عادة ، نستخدم العلامة <img> للصورة ولكن في AMP عليك استخدام amp-img بدلاً من img فقط. لذلك ، قم بتغيير علامات img إلى علامات amp-img مثل المثال التالي:
<amp-img src="AmpImage.jpg" alt="amp-img" height="500" width="500"></amp-img>
كيفية التحقق من صحة صفحات AMP؟
الطريقة الأولى:
افتح صفحة AMP في متصفح كروم ، على سبيل المثال -
افتح صفحة AMP في متصفح كروم ، على سبيل المثال -
https://example.blogspot.in/p/amp-page.html
أرفق "#development=1" بعنوان URL ، على سبيل المثال -
https://example.blogspot.in/p/amp-page.html#development=1
انقر بزر الماوس الأيمن وافتح وحدة التحكم في Chrome DevTools وابحث عن أخطاء التحقق من الصحة.
الطريقة الثانية:
افتح واجهة الويب على
افتح واجهة الويب على
validator.ampproject.org
أدخل قيمة عنوان url في حقل عنوان URL ، على سبيل المثال -
https://example.blogspot.in/p/amp-page.html
أي تغييرات على مصدر HTML تم إجراؤها في هذا المحرر التفاعلي تؤدي إلى إعادة التحقق التفاعلية.