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

Make your Web Stories discoverable

Important: this documentation is not applicable to your currently selected format websites!

Ensure your Web Stories are reaching your intended audience by including necessary metadata and markup.

AMP-specific metadata

Web Stories with missing or incorrect AMP-specific metadata may not surface in search engines or third party platforms.

Required <amp-story> attributes

Web Stories must include the following <amp-story> attributes.

<body>
    <amp-story standalone
    title="Web Story Title"
    publisher="Web Story Publisher"
    publisher-logo-src="https://example.com/logo/1x1.png"
    poster-portrait-src="https://example.com/my-story/poster/3x4.jpg">
    ...
    </amp-story-standalone>
</body>

title

The title of the Web Story.

publisher

The name of the Web Story publisher.

publisher-logo-src

A URL to the Web Story publisher's logo image. The logo image should be larger than or equal to 96x96px and maintain a 1:1 aspect ratio. This logo appears in the right corner on the top of the poster image on platforms currently (October 2020) supporting Web Stories.

poster-portrait-src

A URL to an image used as the Web Story poster. Used as the cover for the Web Story and should be representative of the story. Do not embed or burn-in the Web Story title on it. Should be at least 640x853px and maintain a 3:4 aspect ratio.

Recommended <amp-story> attributes

poster-landscape-src

A URL to an image used as the Web Story poster in landscape format. Used as the cover for the Web Story and should be representative of the story. Do not embed or burn-in the Web Story title on it. Should be at least 853x640px and maintain a 4:3 aspect ratio.

poster-square-src

A URL to an image used as the Web Story poster. Used as the cover for the Web Story and should be representative of the story. Do not embed or burn-in the Web Story title on it. Should be at least 640x640px and maintain a 1:1 aspect ratio.

Metadata

Platforms that surface Web Stories rely on metadata to correctly index and display them. Include the following recommended information to give users a delightful Web Story experience.

Include the following recommended HTML markup in your Web Stories for the best user experience.

All Web Stories must include a canonical URL that points to the Web Story itself.

<link rel="canonical" href="https://www.example.com/url/to/Web/Story.html">

favicon

Include a favicon to display as the icon in the browser tab.

Document title

Give your Web Story document a title by including a </a></code> tag.</p> <h2 id="image-alt-text">Image alt-text</h2> <p>Maximize accessibility and indexability by including <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Accessibility_concerns">meaningful alt-text for images</a>.</p> <h2 id="video-subtitles-and-captions">Video subtitles and captions</h2> <p>Maximize accessibility and indexability by including <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">video subtitles and/or captions</a>.</p> <h2 id="page-attachments">Page attachments</h2> <p>Use <a href="https://amp.dev/documentation/components/amp-story-page-attachment/">page attachments</a> to present additional information in “classic article form” alongside your Web Story. This can be useful to provide extra detail, deep dives, or onward journeys for the content presented in your Story.</p> <h2 id="schema.org-metadata">Schema.org metadata</h2> <p>Including <a href="https://schema.org/">schema.org</a> structured data vocabulary defines important information about your Web Story that allows third-party platforms, such as search engines, to display and index them.</p> <p> <div class="ap-m-tip"> <div class="ap-a-ico ap-m-tip-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#speech-bubble"></use></svg> </div> <div class="ap-m-tip-content"> Validate your schema.org data using Google's <a href="https://search.google.com/test/amp">AMP Test</a>. </div> </div></p> <h2 id="ogp-facebook-metadata">OGP Facebook metadata</h2> <p>Including <a href="https://ogp.me/">Open Graph protocol</a> enables Web Stories sharing on Facebook.</p> <h2 id="twitter-card-data">Twitter card data</h2> <p>Including <a href="https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards">Twitter card data</a> allows you to attach photos, videos and media experiences to a Tweet sharing your Web Story.</p> <p> <div class="ap-m-tip"> <div class="ap-a-ico ap-m-tip-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bookmark"></use></svg> </div> <div class="ap-m-tip-content"> Read more about <a href="https://blog.amp.dev/2020/02/12/seo-for-amp-stories/">SEO for Web Stories in the AMP Blog</a>. </div> </div></p> </section> <section class="ap--content"> <hr> <ul class="ap-o-mini-card-list"> <li class="ap-o-mini-card-list-item"> <div class="ap-m-mini-card"> <amp-img alt="Author avatar" src="https://github.com/CrystalOnScript.png?size=38" width="38" height="38" class="large" style="max-width: 38px" layout="responsive"> </amp-img> <span> <strong>Written by <a href="https://github.com/CrystalOnScript" rel="nofollow" target="_blank"> @CrystalOnScript </a> </strong> </span> </a> </li> </ul> </section> </div> </main> <amp-sidebar id="sidebar-left" class="ap--ampsidebar" layout="nodisplay" side="left"> <nav class="ap--ampsidebar-toolbar" toolbar="(min-width: 768px)" toolbar-target="ap--sidebar-content"> <ul> <div class="ap-m-format-toggle"> <button class="ap-m-format-toggle-selected ap-m-format-toggle-link-websites"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-websites"></use></svg> </span> <span>websites</span> <span class="ap-a-ico ap-m-format-toggle-angle"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"></use></svg> </span> </button> <div class="ap-m-format-toggle-formats"> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-stories" href="/ar/documentation/guides-and-tutorials/optimize-and-measure/discovery_web_stories/?format=stories"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-stories"></use></svg> </span> <span>stories</span> </a> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-ads" href="/ar/documentation/guides-and-tutorials/optimize-and-measure/discovery_web_stories/?format=ads"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-ads"></use></svg> </span> <span>ads</span> </a> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-email" href="/ar/documentation/guides-and-tutorials/optimize-and-measure/discovery_web_stories/?format=email"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-email"></use></svg> </span> <span>email</span> </a> </div> </div> <div class="ap-o-sidebar-default"> <div class="ap-o-sidebar"> <div class="nav"> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>البدء</span> </span> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"></use></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/start/create/"> <span>إنشاء صفحتك الأولى في</span> <span class="nav-link-lastword">AMP<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg></span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/start/create/basic_markup/"> إنشاء صفحة AMP HTML </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/start/create/include_image/"> Include an image </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/start/create/presentation_layout/"> تعديل المظهر والتخطيط </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/start/create/prepare_for_discovery/"> Prepare your page for discovery and distribution </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/start/create/actions_events/"> Actions and events </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/start/create/preview_and_validate/"> Preview and validate </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/start/create/publish/"> الخطوات الأخيرة قبل النشر </a> </li> </ul> </li> <li class="nav-item-tutorial-divider"></li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/start/converting/"> <span>Convert HTML to</span> <span class="nav-link-lastword">AMP<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg></span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/start/converting/setting-up/"> الإعداد </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/start/converting/building-page/"> بناء صفحة HTML عادية </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/start/converting/resolving-errors/"> حل أخطاء التحقق من الصحة </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/start/converting/discoverable/"> جعل صفحتك قابلة للاكتشاف </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/start/converting/congratulations/"> تهانينا! </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/start/add_advanced/"> <span>Add advanced AMP</span> <span class="nav-link-lastword">features<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg></span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/start/add_advanced/setting_up/"> الإعداد </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/start/add_advanced/review_code/"> مراجعة رمز البدء </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/start/add_advanced/adding_components/"> إضافة مكونات AMP الموسعة </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/start/add_advanced/adding_carousels/"> إضافة العروض الدوار </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/start/add_advanced/tracking_data/"> تتبع الانخراط مع التحليلات </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/start/add_advanced/navigating/"> التنقل في موقعك </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/start/add_advanced/fonts/"> إضافة الخطوط </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/start/add_advanced/congratulations/"> تهانينا! </a> </li> </ul> </li> </ul> </li> <li class="nav-item level-1"> <span class="nav-link"> <span>تعلم</span> </span> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"></use></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/learn/common_attributes/"> سمات العنصر العامة </a> </li> <li class="nav-item level-2"> <span class="nav-link"> <span>مواصفات AMP HTML</span> </span> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/learn/spec/amp-html-responsive-attributes/"> AMP HTML Responsive Attributes </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/learn/spec/amp-video-interface/"> Video in AMP </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/"> رمز فقرة AMP </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/learn/spec/release-schedule/"> جدولة إصدار AMP </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/learn/experimental/"> المكونات التجريبية </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/learn/amp-html-layout/"> <span>AMP's Layout System</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/learn/amp-html-layout/"> نظام تخطيط AMPHTML </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/learn/amp-html-layout/layouts_demonstrated/"> Demonstrating AMP layouts </a> </li> </ul> </li> <li class="nav-item level-2"> <span class="nav-link"> <span>تدفق عمل التحقق من الصحة</span> </span> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/learn/validation-workflow/validate_amp/"> التحقق من صحة صفحات AMP </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/"> أخطاء التحقق من صحة AMP </a> </li> </ul> </li> <li class="nav-item level-2"> <span class="nav-link"> <span>AMP Caches وCORS</span> </span> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/learn/amp-caches-and-cors/how_amp_pages_are_cached/"> كيف يتم عمل تخزين مؤقت لصفحات AMP </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cache-debugging/"> تصحيح أخطاء مشكلات ذاكرة AMP للتخزين المؤقت </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cache-urls/"> تنسيق عنوان URL على AMP Cache ومعالجة الطلبات </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests/"> اشتراك المصادر في الموارد في AMP </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/learn/combine-amp-pwa/"> ارتباط AMP وPWA ببعضهما البعض </a> </li> </ul> </li> <li class="nav-item level-1"> <span class="nav-link"> <span>تطوير</span> </span> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"></use></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/develop/style_and_layout/"> <span>إنشاء صفحات AMP تفاعلية</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/"> لغة CSS المعتمدة </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/develop/style_and_layout/control_layout/"> التخطيط واستعلامات الوسائط </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/develop/style_and_layout/placeholders/"> العناصر النائبة والاحتياطية </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/develop/style_and_layout/art_direction/"> صور متجاوبة مع srcset والأحجام والارتفاعات </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/develop/style_and_layout/responsive_design/"> إنشاء صفحات AMP سريعة الاستجابة </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/develop/style_and_layout/custom_fonts/"> إضافة خطوط مخصصة </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/develop/media_iframes_3p/"> <span>Include media, iframes & third-party content</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/develop/media_iframes_3p/"> تضمين صور ومقاطع فيديو </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/develop/media_iframes_3p/third_party_components/"> Include third-party content </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/develop/media_iframes_3p/iframes/"> تضمين iframes </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/develop/interactivity_guide/"> <span>Interactivity</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/develop/interactivity_guide/foundations/"> Interactivity foundations </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/develop/interactivity_guide/ready_made/"> Ready-made interactivity with AMP components </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences/"> Building personalized interactive experiences </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/develop/interactivity_guide/client_rendering/"> Client-side rendering in AMP </a> </li> </ul> </li> <li class="nav-item level-2"> <span class="nav-link"> <span>تحريك الرسوم والانتقال</span> </span> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/develop/animations/triggering_css_animations/"> تشغيل رسوم CSS المتحركة وانتقالاتها </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/develop/animations/introduction_to_animations/"> مقدمة إلى الرسوم المتحركة المركَّبة </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/develop/custom-javascript/"> Use custom JavaScript in AMP pages </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/develop/monetization/"> <span>Monetize your AMP pages</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/develop/monetization/"> الربح من صفحة AMP الخاصة بك مع الإعلانات </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/develop/monetization/ads_vendors/"> موفروا الإعلانات </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/develop/monetization/content_encryption/"> حماية محتوى الاشتراك لديك من خلال التشفير من جانب العميل </a> </li> </ul> </li> <li class="nav-item-tutorial-divider"></li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/develop/interactivity/"> <span>Create interactive AMP</span> <span class="nav-link-lastword">pages<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg></span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/develop/interactivity/prereqs-setup/"> الإعداد </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/develop/interactivity/get-familiar/"> التعرف على رمز البداية </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/develop/interactivity/advanced-interactivity/"> تحسين التفاعلية </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/develop/interactivity/remote-data/"> العمل مع البيانات عن بُعد </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/develop/interactivity/wrapping-up/"> اختتام </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/develop/login_requiring/"> <span>Create a login-requiring AMP</span> <span class="nav-link-lastword">page<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg></span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/develop/login_requiring/login/"> تسجيل الدخول </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/develop/login_requiring/add_comment/"> {code0}co{/code0}: تعليق </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/develop/login_requiring/logout/"> تسجيل الخروج </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/develop/login_requiring/summary/"> الملخص </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/develop/custom-javascript-tutorial/"> Create a UI widget with custom JavaScript <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg> </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/develop/live_blog/"> Create a live blog <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg> </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/develop/seatmap/"> إنشاء خريطة مقاعد <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg> </a> </li> </ul> </li> <li class="nav-item level-1"> <span class="nav-link"> <span>دمج</span> </span> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"></use></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/integrate/web-story-player-guide/"> Creating Web Story experiences using the Web Story Player on non-AMP sites </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/integrate/amp-in-pwa/"> استخدام AMP كمصدر بيانات لتطبيق الويب التقدمي (PWA) </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/integrate/amp-to-pwa/"> التحميل المسبق لتطبيق الويب التقدمي (PWA) من صفحات AMP </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/integrate/integrate-with-apps/"> دمج AMP مع تطبيقك </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/integrate/embed-stories/"> تضمين القصص في صفحات الويب </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/integrate/embed-stories-nonamp/"> Integrate Web Stories in non-AMP pages </a> </li> </ul> </li> <li class="nav-item active level-1"> <span class="nav-link"> <span>تحسين وقياس</span> </span> <input class="nav-trigger" type="checkbox" checked/> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"></use></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/optimize-and-measure/publishing_checklist/"> قائمة مهام نشر AMP </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/"> <span>تهيئة Analytics</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/analytics-vendors/"> Analytics Vendors </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/analytics_basics/"> Analytics: الأساسيات </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/deep_dive_analytics/"> نظرة عميقة على AMP Analytics </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/use_cases/"> حالات الاستخدام </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/optimize-and-measure/amp-optimizer-guide/"> <span>Using an AMP Optimizer</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/optimize-and-measure/amp-optimizer-guide/explainer/"> كيف يعمل AMP Optimizer </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/optimize-and-measure/amp-optimizer-guide/node-amp-optimizer/"> دليل أداة AMP Optimizer في Node.js </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/optimize-and-measure/amp-managing-user-state/"> إدارة حالة مستخدم غير مصادق عليه باستخدام AMP </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/optimize-and-measure/signed-exchange/"> خدمة AMP باستخدام التبادلات الموقّعة </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/optimize-and-measure/discovery/"> جعل صفحتك قابلة للاكتشاف </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/optimize-and-measure/engagement/"> تحسين تفاعل المستخدم </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/optimize-and-measure/optimize_amp/"> تحسين صفحات AMP المستضافة الخاصة بك </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/optimize-and-measure/secure-pages/"> الحماية من هجمات الأطراف الخارجية </a> </li> <li class="nav-item-tutorial-divider"></li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/optimize-and-measure/amp_to_pwa/"> تحويل موقع AMP الخاص بك إلى تطبيق ويب تقدمي (PWA) <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg> </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/optimize-and-measure/amp-as-pwa/"> Easy offline access and improved performance </a> </li> <li class="nav-item-tutorial-divider"></li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/optimize-and-measure/tracking-engagement/"> كيفية تكوين التحليلات الأساسية لصفحات AMP الخاصة بك <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg> </a> </li> </ul> </li> <li class="nav-item level-1"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/contribute/"> <span>Contribute</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"></use></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/contribute/"> How to contribute </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/contribute/contribute-documentation/"> <span>Contribute documentation</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/contribute/contribute-documentation/documentation-types/"> أنواع المستندات </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/contribute/contribute-documentation/terminology/"> مصطلحات AMP </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/contribute/contribute-documentation/formatting/"> أدلة التنسيق والبرامج التعليمية </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/contribute/integrate-your-analytics-tools/"> تكامل أداة التحليلات لديك مع AMP </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/contribute/vendor-contributions/"> <span>Third party contributions</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/contribute/vendor-contributions/release-schedule/"> Release Schedule </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/contribute/translations/"> المساهمة في الترجمات </a> </li> </ul> </li> </ul> </div> </div> </div> </ul> </nav> </amp-sidebar> <footer class="ap--footer"> <div class="ap-o-footer"> <div class="ap-o-footer-line-top"> <div class="ap-o-footer-hint">بالتأكيد، تم إنشاء هذا الموقع بواسطة AMP!</div> <div class="ap-o-footer-follow"> <h5 class="ap-o-footer-follow-title">تابعنا</h5> <ul class="ap-o-footer-follow-menu"> <li class="ap-o-footer-follow-item"> <a class="ap-a-ico ap-o-footer-follow-icon" href="https://twitter.com/AMPhtml" rel="noopener" title="Twitter"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter"></use></svg> </a> </li> <li class="ap-o-footer-follow-item"> <a class="ap-a-ico ap-o-footer-follow-icon" href="https://www.youtube.com/channel/UCXPBsjgKKG2HqsKBhWA4uQw" rel="noopener" title="YouTube"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#youtube"></use></svg> </a> </li> <li class="ap-o-footer-follow-item"> <a class="ap-a-ico ap-o-footer-follow-icon" href="https://blog.amp.dev/" rel="noopener"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wordpress" title="WordPress"></use></svg> </a> </li> <li class="ap-o-footer-follow-item"> <a class="ap-a-ico ap-o-footer-follow-icon" href="https://github.com/ampproject" title="GitHub"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github"></use></svg> </a></li> <li class="ap-o-footer-follow-item"> <a class="ap-a-ico ap-o-footer-follow-icon" href="https://stackoverflow.com/questions/tagged/amp-html" rel="noopener" title="Stackoverflow"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#stackoverflow"></use></svg></a> </li> </ul> </div> </div> <div class="ap-o-footer-nav"> <div class="ap-o-footer-nav-column"> <h5 class="ap-o-footer-nav-title">نظرة عامة</h5> <ul class="ap-o-footer-nav-menu"> <li class="ap-o-footer-nav-item"><a href="/ar/about/websites/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>إطار عمل AMP</a></li> <li class="ap-o-footer-nav-item"><a href="/ar/about/use-cases/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>حالات الاستخدام</a></li> <li class="ap-o-footer-nav-item"><a href="/ar/success-stories/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>قصص النجاح</a></li> <li class="ap-o-footer-nav-item"><a href="/ar/about/how-amp-works/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>الأداء الوظيفي</a></li> </ul> </div> <div class="ap-o-footer-nav-column"> <h5 class="ap-o-footer-nav-title">مستندات</h5> <ul class="ap-o-footer-nav-menu"> <li class="ap-o-footer-nav-item"><a href="/ar/documentation/guides-and-tutorials/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>بدء الاستخدام</a></li> <li class="ap-o-footer-nav-item"><a href="/ar/documentation/guides-and-tutorials/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>الأدلّة والبرامج التعليمية</a></li> <li class="ap-o-footer-nav-item"><a href="/ar/documentation/components/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>المكونات</a></li> <li class="ap-o-footer-nav-item"><a href="/ar/documentation/examples/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>أمثلة</a></li> <li class="ap-o-footer-nav-item"><a href="/ar/documentation/templates/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>تصميم النماذج</a></li> <li class="ap-o-footer-nav-item"><a href="/ar/documentation/tools/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>الأدوات</a></li> </ul> </div> <div class="ap-o-footer-nav-column"> <h5 class="ap-o-footer-nav-title">المجتمع</h5> <ul class="ap-o-footer-nav-menu"> <li class="ap-o-footer-nav-item"><a href="/ar/support/faq/platform-and-vendor-partners/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>شركاء المنصّات والمورّدين</a></li> <li class="ap-o-footer-nav-item"><a href="/ar/documentation/guides-and-tutorials/contribute/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>مساهمة</a></li> <li class="ap-o-footer-nav-item"><a href="/ar/community/roadmap/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>خارطة الطريق</a></li> </ul> <h5 class="ap-o-footer-nav-title">OpenJS Foundation</h5> <ul class="ap-o-footer-nav-menu"> <li class="ap-o-footer-nav-item"><a class="ap-o-footer-nav-link" href="https://openjsf.org" rel="noopener"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>The OpenJS Foundation</a></li> <li class="ap-o-footer-nav-item"><a class="ap-o-footer-nav-link" href="https://bylaws.openjsf.org" rel="noopener"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>OpenJS Foundation Bylaws</a></li> <li class="ap-o-footer-nav-item"><a class="ap-o-footer-nav-link" href="https://trademark-policy.openjsf.org" rel="noopener"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>Trademark Policy</a></li> <li class="ap-o-footer-nav-item"><a class="ap-o-footer-nav-link" href="https://trademark-list.openjsf.org" rel="noopener"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>Trademark List</a></li> </ul> </div> <div class="ap-o-footer-nav-column"> <h5 class="ap-o-footer-nav-title">الفعاليات</h5> <ul class="ap-o-footer-nav-menu"> <li class="ap-o-footer-nav-item"><a href="https://blog.amp.dev/2020/02/20/amp-conf-2020-return-to-nyc/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>مؤتمر AMP لسنة 2020</a></li> <li class="ap-o-footer-nav-item"><a href="/ar/events/amp-cs-2019/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>قمة المساهمين في AMP لسنة 2019</a></li> </ul> <h5 class="ap-o-footer-nav-title">مواد علامة AMP التجارية </h5> <ul class="ap-o-footer-nav-menu"> <li class="ap-o-footer-nav-item"><a href="/static/files/brand-material/AMP_Mini_Styleguide.pdf" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download"></use></svg></div>دليل الأسلوب</a></li> <li class="ap-o-footer-nav-item"><a href="/static/files/brand-material/AMP_Logo_Rebrush.zip" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download"></use></svg></div>شعارات</a></li> </ul> </div> </div> <div class="ap-o-footer-line-bottom"> <div class="ap-o-footer-openjsf"> <amp-img src="/static/img/logo-openjsf.svg" alt="Logo of the OpenJS Foundation" width="315" height="100" layout="responsive"></amp-img> </div> <ul class="ap-o-footer-legal-nav-menu"> <li class="ap-o-footer-legal-nav-item"><a class="ap-o-footer-legal-nav-link" href="https://terms-of-use.openjsf.org" rel="noopener">Terms of Use</a></li> <li class="ap-o-footer-legal-nav-item"><a class="ap-o-footer-legal-nav-link" href="https://privacy-policy.openjsf.org" rel="noopener">سياسة الخصوصية</a></li> <li class="ap-o-footer-legal-nav-item"><a class="ap-o-footer-legal-nav-link" href="https://www.linuxfoundation.org/cookies" rel="noopener">Cookie Policy</a></li> </ul> </div> <div class="ap-o-footer-copyright"> © <a href="https://openjsf.org">OpenJS Foundation</a> and AMP Project contributors. All rights reserved. The <a href="https://openjsf.org">OpenJS Foundation</a> has registered trademarks and uses trademarks. For a list of trademarks of the <a href="https://openjsf.org">OpenJS Foundation</a>, please see our <a href="https://trademark-policy.openjsf.org">Trademark Policy</a> and <a href="https://trademark-list.openjsf.org">Trademark List</a>. Trademarks and logos not indicated on the <a href="https://trademark-list.openjsf.org">list of OpenJS Foundation trademarks</a> are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. <br><br> The services available at <a href="https://cdn.ampproject.org">cdn.ampproject.org</a> are provided by Google and the respective <a href="https://policies.google.com/privacy?hl=en">privacy policy</a> applies. </div> </div> </footer> <aside class="ap-o-translation-hint"> <p class="ap-o-translation-hint-wrapper">Sadly this page isn't translated yet, but will be shortly - check back soon!</p> </aside> <amp-analytics type="gtag" data-credentials="include" data-block-on-consent> <script type="application/json"> {"extraUrlParams": {"cd2": "${ampdocHost}"}, "requests": {"CWV_EVENT": "${base}?v=1\u0026t=event\u0026tid=${gtag_id}\u0026cid=0\u0026ec=cwv", "base": "https://google-analytics.com/collect/"}, "triggers": {"banner": {"on": "click", "selector": "#top-banner", "vars": {"event_action": "click", "event_category": "guides-and-tutorials", "event_label": "banner", "event_name": "banner"}}, "breadcrumbLink": {"on": "click", "selector": ".ap-m-breadcrumbs-crumb", "vars": {"event_action": "link", "event_category": "guides-and-tutorials", "event_label": "breadcrumbs", "event_name": "breadcrumbs"}}, "cls": {"extraUrlParams": {"cls": "${cumulativeLayoutShift}"}, "on": "visible", "request": "CWV_EVENT"}, "defaultPageview": {"on": "visible", "request": "pageview", "vars": {"title": "{{title}}"}}, "fid": {"extraUrlParams": {"fid": "${firstInputDelay}"}, "on": "visible", "request": "CWV_EVENT"}, "formatToggle": {"on": "click", "selector": ".ap-m-format-toggle-link", "vars": {"event_action": "link", "event_category": "guides-and-tutorials", "event_label": "format-toggle", "event_name": "format-toggle"}}, "lcp": {"extraUrlParams": {"lcp": "${largestContentfulPaint}"}, "on": "visible", "request": "CWV_EVENT"}, "navigation": {"on": "click", "selector": ".ap--header a, .ap-o-burger-menu-link", "vars": {"event_action": "link", "event_category": "guides-and-tutorials", "event_label": "navigation", "event_name": "navigation"}}, "scrolledEnd": {"on": "scroll", "scrollSpec": {"verticalBoundaries": [90]}, "vars": {"event_action": "end", "event_category": "guides-and-tutorials", "event_label": "scroll", "event_name": "scroll"}}, "scrolledHalf": {"on": "scroll", "scrollSpec": {"verticalBoundaries": [50]}, "vars": {"event_action": "half", "event_category": "guides-and-tutorials", "event_label": "scroll", "event_name": "scroll"}}, "searchButton": {"on": "click", "selector": "#searchTriggerOpen", "vars": {"event_action": "open", "event_category": "search", "event_label": "search", "event_name": "search"}}, "sidebarLink": {"on": "click", "selector": ".ap-o-sidebar a", "vars": {"event_action": "link", "event_category": "guides-and-tutorials", "event_label": "sidebar", "event_name": "sidebar"}}, "sidebarToggle": {"on": "click", "selector": "label[for=\"sidebar-desktop\"], label[for=\"sidebar\"]", "vars": {"event_action": "toggle", "event_category": "guides-and-tutorials", "event_label": "sidebar", "event_name": "sidebar"}}, "tocLink": {"on": "click", "selector": ".ap-o-toc a", "vars": {"event_action": "link", "event_category": "guides-and-tutorials", "event_label": "toc", "event_name": "toc"}}, "tocToggle": {"on": "click", "selector": ".ap-o-toc label", "vars": {"event_action": "toggle", "event_category": "guides-and-tutorials", "event_label": "toc", "event_name": "toc"}}}, "vars": {"config": {"G-TYM9BH1XCX": {"groups": "default"}}, "gtag_id": "G-TYM9BH1XCX"}} </script> </amp-analytics><amp-geo layout="nodisplay"> <script type="application/json"> { "ISOCountryGroups": { "eu": ["preset-eea"], "doubleOptIn": ["de", "at", "no", "gr", "lu"] } } </script> </amp-geo> <amp-consent id="consent" class="ap-o-consent" layout="nodisplay"> <script type="application/json"> { "consentInstanceId": "consent", "promptUI": "consent-popup", "consentRequired": false, "geoOverride": { "eu": { "consentRequired": true } } } </script> <div id="consent-popup" class="consent-popup"> <button type="reset" class="ap-o-consent-close" on="tap:consent.dismiss" role="button" tabindex="0" aria-label="عدم الموافقة"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"></use></svg> </button> <p class="ap-o-consent-text"> We use cookies to understand how you use our site and to improve your experience. By continuing to use our site, you accept our <a href="https://policies.google.com/technologies/cookies">use of cookies</a> and <a href="https://policies.google.com/privacy">privacy policy</a>. </p> <button on="tap:consent.accept" class="ap-a-btn" role="button" aria-label="قبول استخدام ملفات تعريف الارتباط">فهمت!</button> </div> </amp-consent> <amp-install-serviceworker src="/serviceworker.js" data-iframe-src="https://amp.dev/serviceworker.html" layout="nodisplay"></amp-install-serviceworker> </body> </html>