كيف يعمل AMP HTML


التعرف على AMP HTML ، ما المقصود بـ AMP

التعرف على AMP HTML ، ما المقصود بـ AMP

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




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

تم تصميم AMP HTML باستخدام هياكل الويب الموجودة ولكنه يحد من CSS و HTML و Javascript بحيث يمكن الوصول إلى مواقع الويب بسرعة أكبر.

كيف يعمل AMP HTML؟

يعمل AMP HTML بإضافة مكتبات AMP JavaScript ولا يغير الهيكل الرئيسي للويب. أضافت بنية الويب كالمعتاد مكتبة AMP JS فقط بحيث تكون كافية لمواصفات AMP HTML. رمز بسيط من موقع ويب به AMP HTML مثل هذا:


<!doctype html>
<html amp='amp' dir='rtl' lang='ar'>
  <head>
    <meta charset='utf-8'>
    <link rel='canonical' href='hello-world.html'>
    <meta name='viewport' content='width=device-width,minimum-scale=1,initial-scale=1'>
    <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
    <script async='async' src='https://cdn.ampproject.org/v0.js'></script>
  </head>
  <body>Hello World!</body>
</html>

بإضافة مكتبة AMP JS ، ستتضمن:
  2. مكتبة AMP JS ، التي تدير تحميل الموارد الخارجية لضمان عرض الصفحات بشكل أسرع.
  3. مدقق AMP يوفر طريقة لمطوري الويب للتحقق بسهولة من أن شفرتهم تستوفي مواصفات AMP HTML.
  4. تسهل بعض العناصر المخصصة ، التي تُسمى مكونات AMP HTML ، الأنماط الشائعة على التنفيذ.

مكتبة AMP JS

تحتوي مكتبة AMP JS بالفعل على مكونات مثبتة (amp-ad و amp-video و amp-img و amp-pixel) بحيث لا تكون هناك حاجة إلى نصوص برمجية إضافية لتسريع العرض.

مدقق AMP

يسمح مدقق AMP لمطوري الويب بتحديد ما إذا كانت صفحة الويب لا تلبي مواصفات AMP HTML بسهولة.
ستؤدي إضافة كلمة "# depelopment = 1" إلى عنوان URL لصفحة AMP HTML إلى تسهيل عثور المطورين على أخطاء بنية AMP HTML.

مكونات AMP HTML

مكونات AMP HTML هي سلسلة من العناصر المخصصة الإضافية أو تحل محل وظيفة عناصر HTML5.

  • يستبدل عناصر HTML5 التي لا يُسمح بمواصفاتها مثل amp-img و amp-video.
  • تنفيذ محتوى تابع لجهة خارجية ، مثل amp-youtube و amp-ad و amp-twitter.
  • أضف تصميمات أخرى ، مثل amp-lightbox و amp-carousel.
  • تبسيط تقنيات إنشاء الويب ، مثل amp-anim ، والتي تسمح لمطوري الويب بعرض الصور المتحركة ، سواء الصور (GIF) أو ملفات الفيديو (WebM أو MP4) بناءً على توافق المتصفح.
قراءة المزيد

كيفية إنشاء مقالات أو مشاركات AMP HTML صالحة

Accelerated Mobile Pages أو اختصارها كـ AMP هي خدمة مجانية تعمل على تحميل الصفحات على الأجهزة المحمولة بشكل أسرع وأخف وزناً.


للوهلة الأولى ، لا يوجد فرق بين كيفية كتابة مقالات لـ AMP و Non-AMP ، فالأمر الأكثر جاذبية هو استدعاء الصور التي لا تستخدم العلامة <img /> ولكن بدلاً من ذلك استخدام العلامة <amp-img /> ، لذلك إذا قمت بالترحيل باستخدام قالب AMP ثم عليك تغيير جميع الصور في مشاركتك.

5555

ضع الصورة الرئيسية (الصورة المصغرة) من المشاركة

كما نعلم جميعًا ، لا يمكن لـ Blogger قراءة الصور باستخدام <amp-img /> ، لذلك لن تظهر الصور المصغرة للنشر على الصفحة الرئيسية ، أو عند مشاركة المقالات على وسائل التواصل الاجتماعي ، لن تظهر الصور المصغرة للمقال.


للتغلب على ذلك ، استخدم الرمز أدناه في بداية مشاركتك.



ستبدل الجزء في كتلة اللون بعنوان URL للصورة التي تريد استخدامها كصورة مشاركة رئيسية.

أضف صورًا إلى محتويات المقالة

كما هو موضح أعلاه ، تختلف الصورة على AMP عن الصورة على Non-AMP ، ونموذج التعليمات البرمجية لتثبيت الصورة على النحو التالي:

قراءة المزيد
الاشتراك في: التعليقات (Atom)