AMP

جذاب وسلس وفوري

يمكنك بسهولة إنشاء مواقع إلكترونية تضع المستخدم على رأس أولوياتها باستخدام AMP.

بدء الاستخدام
<amp-sidebar
  id="sidebar"
  layout="nodisplay"
  side="right"" ""left"
</amp-sidebar>

ما هو
AMP؟

صفحات ويب جذابة وسلسة ويجري تحميلها في الحال تقريبًا

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

<amp-img class="resp-img"
  alt="Desktop"
  width="550"
  height="368"
  src="images/Desktop.jpeg">
</amp-img>
<style amp-custom>
  .resp-img {
    max-width: 700px;
  }
</style>

إنشاء تجارب ويب رائعة للمستخدمين عبر الويب المفتوح

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

لقطة شاشة لموقع إلكتروني يستخدم AMP.
لقطة شاشة لموقع إلكتروني يستخدم AMP.
الحفاظ على المرونة والتحكم في درجة التعقيد في التعليمة البرمجية وتقليلها يمكنك استخدام CSS لتخصيص بيانات التصميم والبيانات الديناميكية لديك لجلب أحدث البيانات عند الحاجة.
إنشاء مجموعات لضمان الأداء يستغرق إنشاء موقع إلكتروني كبير وقتًا طويلًا ويتطلب جهدًا فائقًا. ويتم تحسين مكونات AMP بالفعل لتحقيق أفضل أداء.
إنشاء من أجل مستقبل مستدام للجميع في نطاق الويب المفتوح يمثل مشروع AMP مبادرة مفتوحة المصدر لحماية مستقبل الويب من خلال تقديم تجربة أفضل وأسرع وأكثر سهولة عند الاستخدام.
تحسِّن سرعة صفحة الويب من تجربة المستخدم ومقاييس الأعمال الأساسية يتم تحميل صفحات AMP بشكل فوري تقريبًا - في جميع الأجهزة والمنصّات.
إنشاء صفحات AMP هو أمر سهل يمكنك غالبًا تحويل أرشيفك بالكامل في أيام - خاصةً عند استخدام نظام إدارة محتوى (CMS) شائع مثل WordPress أو Drupal.
يمكن تطبيق AMP عبر عدة نقاط اتصال بالويب نظرًا لاستخدام AMP من قِبل منصّات عالمية مثل Google و Bing وTwitter، فإنه يتيح للمستخدمين على جميع هذه المنصّات فرصة الحصول على تجربة تشعرهم بالانتماء عند استخدام صفحات AMP بشكل تلقائي عند توافرها.

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

ديفيد ميريل، مدير إنتاج أول

الاطّلاع على قصة النجاح

ممّ يتكون AMP HTML

<!DOCTYPE HTML>
<html >
<head>
  <meta charset="utf-8">
  <link rel="canonical" href="hello-world.html">
  <meta name="viewport" content="width=device-width">
  <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>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-geo" src="https://cdn.ampproject.org/v0/amp-geo-0.1.js"></script>
  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
</head>
<body>
  <amp-geo layout="nodisplay">
    <script type="application/json">
      {
        "AmpBind": true
      }
    </script>
  </amp-geo>
  <h1>Hello in <span [text]="country">...</span>!</h1>
  <button on="tap:AMP.setState({'country': ampGeo.ISOCountry.toUpperCase()})">Where am I?</button>
</body>
</html>

Hello
World!

المكوّنات المضمّنة

تعتبر لغة AMP HTML هي لغة HTML نفسها ولكن مع بعض القيود لتحقيق الأداء الموثوق به.

رغم أن معظم العلامات في صفحة AMP HTML هي علامات HTML عادية، لكن يتم استبدال بعض علامات HTML لتحل محلها علامات مخصصة لــ AMP (راجع أيضًا مواصفات علامات HTML في AMP). وتجعل هذه العناصر المخصصة، والتي تسمى مكونات AMP HTML، الأنماط الشائعة سهلة التنفيذ بطريقة جيدة.

على سبيل المثال، توفر علامة amp-img دعمًا كاملًا للسمة srcset حتى في المتصفحات التي لم تدعمها بعد. تعرّف على كيفية إنشاء صفحة AMP HTML الأولى لك.

تنجح محركات البحث والمنصّات الأخرى في اكتشاف صفحات AMP من خلال علامة HTML. ويمكنك اختيار إصدار لا يدعم AMP وإصدار AMP لصفحتك، أو إصدار AMP فقط.

ذاكرات تخزين AMP المؤقتة

يمكن تخزين صفحات AMP مؤقتًا لأجل التحميل الفوري تقريبًا على الويب. وتشغِّل بعض المنصّات مثل Google ذاكرات تخزين AMP المؤقتة لتفعيل التحميل السريع للمحتوى الذي تقدّمه من خلال خدمات هذه المنصّات.

ذاكرة التخزين المؤقت Google AMP هي شبكة تقديم محتوى قائمة على الوكيل لتقديم جميع مستندات AMP الصالحة. فهي تجلب صفحات AMP HTML وتخزنها مؤقتًا وتحسن أداء الصفحة تلقائيًا. وعند استخدام ذاكرة التخزين المؤقت Google AMP، يتم تحميل المستند وجميع ملفات JS وجميع الصور من المنشأ نفسه الذي يستخدم HTTP 2.0 لتحقيق أقصى قدر من الكفاءة.
وتأتي ذاكرة التخزين المؤقتة كذلك بنظام مدمج للتحقق من الصحة يؤكّد على ضمان عمل الصفحة وعدم اعتمادها على موارد خارجية. ويعمل نظام التحقق من الصحة على تشغيل سلسلة من عمليات التوكيد لضمان تلبية علامة الصفحة لمواصفات HTML AMP.

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

استكشف حالات الاستخدام لمواقع AMP الإلكترونية