AMP
AR
English Deutsch Français Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

إنشاء صفحة AMP HTML

يمثل الترميز التالي نقطة بداية مناسبة أو نصًا معياريًا. انسخه واحفظه في ملف بإضافة ‎.html.

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="https://amp.dev/ar/documentation/guides-and-tutorials/start/create/basic_markup/">
    <meta name="viewport" content="width=device-width">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <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>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

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

استخدام HTTPS: عند إنشاء صفحات AMP والمحتوى، يجب أن تراعي بشدة استخدام بروتوكول HTTPS (وليس HTTP). على الرغم من أن HTTPS ليس مطلوبًا لمستند AMP نفسه أو للصور والخطوط، لكن هنا العديد من ميزات AMP التي تتطلب HTTPS (مثل الفيديو، وiframes وغيرها). لضمان أن صفحات AMP الخاصة بك تحقق الاستفادة الكاملة من جميع ميزات AMP، استخدم بروتوكول HTTPS. يمكنك تعلم المزيد حول HTTPS في "لماذا يعتبر HTTPS مهمًا".

استخدم مولد مولد النصوص الأساسية في AMP لبدء العمل سريعًا في إنشاء صفحات AMP.

الترميز المطلوب

يجب أن تتسم مستندات AMP HTML بما يلي:

القاعدة الوصف
أن تبدأ بـ doctype <!doctype html>. قياسي في HTML.
أن تحتوي على علامة المستوى الأعلى <html ⚡> (تكون <html amp> مقبولة كذلك). يعرف الصفحات على أنها محتوى AMP.
أن تحتوي على العلامتين <head> و<body> (هما علامتان اختياريتان في HTML). اختياري في HTML ولكن ليس في AMP.
أن تحتوي على العلامة <meta charset="utf-8"> بوصفها التابع الأول للعلامة head. يحدد الترميز للصفحة.
أن تحتوي على العلامة <script async src="https://cdn.ampproject.org/v0.js"></script> بوصفها العنصر الأخير في head (يشمل هذا مكتبة AMP JS ويقوم بتحميلها). يشمل ويحمل مكتبة AMP JS.
أن تحتوي على العلامة <link rel="canonical" href="$SOME_URL"> داخل عنوانها، والتي تشير إلى إصدار HTML العادي لمستند AMP HTML أو إلى نفسها إذا لم يكن إصدار HTML من هذا القبيل موجودًا. يشير إلى إصدار HTML العادي لمستند AMP HTML أو إلى نفسه في حالة عدم وجود إصدار HTML هذا. تعلم المزيد في جعل صفحتك قابلة للاكتشاف.
تضمين العلامة <meta name="viewport" content="width=device-width">. يوصى أيضًا بتضمين المقياس الأولي=1. يحدد منفذ عرض الاستجابة. تعلم المزيد في إنشاء صفحات AMP للاستجابة.
يحتوي على رمز النص الأساسي لـ AMP في علامة <head> الخاصة به. النص الأساسي لـ CSS لإخفاء المحتوى أوليًا حتى تحميل AMP JS.

البيانات الوصفية الاختيارية

بالإضافة إلى المتطلبات الجلية، يتضمن المثال الخاص بنا أيضًا تعريف Schema.org في العنوان، وهو ليس متطلبًا صارمًا لـ AMP، ولكنه متطلب لأجل توزيع المحتوى الخاص بك في أماكن معينة (على سبيل المثال في العرض الدوار لأهم قصص بحث Google).

زر هذه الموارد لتعلم المزيد:

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

الفصل السابق الفصل التالي