إنشاء غلاف للإعلان

يُعد رمز HTML المطلوب لإعلان AMPHTML أحد صيغ AMPHTML المطلوب لصفحة AMP. دعنا نتعرف على الرمز المطلوب من خلال إنشاء غلاف إعلان AMPHTML الخاص بنا.

باستخدام محرر النصوص المفضل لديك، قم بإنشاء ملف HTML باسم my-amphtml-ad.html. وانسخ لغة ترميز HTML التالية إلى ذلك الملف:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My amphtml ad</title>
    <meta name="viewport" content="width=device-width" />
  </head>
  <body></body>
</html>

لغة الترميز هذه لملف HTML أساسي وصالح، لاحظ أننا قمنا بتضمين علامة منفذ العرض meta حتى يكون لدينا منفذ عرض سريع الاستجابة.

والآن، دعنا نعدِّل HTML لجعله إعلان AMPHTML.

في العلامة <html>، أضف السمة ⚡4ads، التي تحدد المستند كإعلان AMPHTML. بدلًا عن ذلك، يمكنك تحديد السمة amp4ads، التي تعد صالحة أيضًا.

<!DOCTYPE html>
<html ⚡4ads>
  <head>
    ...
  </head>
</html>

ملحوظة – على عكس صفحات AMP، لا تتطلب إعلانات AMPHTML علامة<link rel="canonical">.

تتطلب إعلانات AMPHTML إصدارها الخاص من وقت تشغيل AMP، لذا أضف علامة <script> التالية إلى قسم <head> من المستند الخاص بك:

<script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>

تتطلب تصميمات إعلانات AMPHTML خط نمط معياري مختلفًا وبسيطًا إلى حد كبير عما تتطلبه صفحات AMP. أضف لرمز التالي إلى قسم <head>:

<style amp4ads-boilerplate>
  body {
    visibility: hidden;
  }
</style>

لتحديد نمط إعلان AMPHTML الخاص بك، يجب أن تكون CSS مضمنة في مستند AMPHTML باستخدام علامات <style amp-custom> في القسم <head>. ونظرًا لأننا نعرض إعلانًا مصورًا أساسيًا، فإننا لا نطلب أي CSS، لذلك لن نضيف هذه العلامات.

ملحوظة – بالنسبة لإعلانات AMPHTML، يبلغ الحد الأقصى لحجم صفحة الأنماط المضمنة 20 كيلو بايت. اعرف المزيد عن متطلبات CSS في مواصفات إعلان AMPHTML.

إليك الكود الكامل لملف HTML الخاص بك:

<!DOCTYPE html>
<html ⚡4ads>
  <head>
    <meta charset="utf-8" />
    <title>My amphtml ad</title>
    <meta name="viewport" content="width=device-width" />
    <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
    <style amp4ads-boilerplate>
      body {
        visibility: hidden;
      }
    </style>
  </head>
  <body></body>
</html>

والآن لديك إعلان AMPHTML صالح، وإن كان فارغًا نوعًا ما؛ لنقم بإنشاء الإعلان المصور.

بدء الاستخدام