مبانی صفحات موبایلی تسریع شده

۱. مرور کلی

در این آزمایشگاه کد، شما یاد خواهید گرفت که چگونه صفحات موبایل شتاب‌یافته - یا به اختصار AMP - را بسازید. برای دستیابی به این هدف، شما یک صفحه وب مقاله خبری ساده را پیاده‌سازی خواهید کرد که با مشخصات AMP مطابقت دارد و در عین حال چندین ویژگی وب معمولی که معمولاً در سایت‌های خبری موبایل استفاده می‌شوند را در خود جای می‌دهد.

آنچه یاد خواهید گرفت

• چگونه AMP تجربه کاربری وب موبایل را بهبود می‌بخشد.
• مبانی یک سایت AMP
• محدودیت‌های AMP.
• چگونه اجزای وب AMP مشکلات رایج سایت‌های خبری را حل می‌کنند.
• چگونه AMP خود را اعتبارسنجی کنید.
• چگونه AMP خود را برای جستجوی گوگل آماده کنید.

آنچه نیاز دارید

• کد نمونه
• پایتون (ترجیحاً ۲.۷) یا افزونه‌ی وب سرور کروم ۲۰۰ اوکی
• کروم (یا یک مرورگر معادل که بتواند کنسول جاوا اسکریپت را بررسی کند)
• ویرایشگر کد (مثلاً Atom، Sublime، Notepad++)

۲. کد نمونه را دریافت کنید

می‌توانید تمام کدهای نمونه را روی رایانه خود دانلود کنید:

دانلود فشرده

... یا مخزن GitHub را از خط فرمان کلون کنید:

$ git clone https://github.com/googlecodelabs/accelerated-mobile-pages-foundations.git

شما یک فایل زیپ حاوی چندین نمونه فایل منبع و صفحه آغازین article.html را دانلود خواهید کرد.

پوشه را از حالت فشرده خارج کرده و از طریق خط فرمان روی رایانه خود به دایرکتوری بروید.

۳. صفحه نمونه را اجرا کنید

برای آزمایش صفحه نمونه خود، باید از طریق یک وب سرور به فایل‌ها دسترسی پیدا کنیم. روش‌های مختلفی برای ایجاد یک وب سرور محلی موقت برای اهداف آزمایش وجود دارد. برای این آزمایش کد، دستورالعمل‌هایی برای ۳ گزینه موجود ارائه خواهیم داد:

• برنامه گوگل کروم "وب سرور برای کروم" - این روش توصیه می‌شود زیرا ساده‌ترین و چند پلتفرمی‌ترین راه حل موجود است. توجه: این روش نیاز به نصب گوگل کروم دارد.
• میزبانی وب فایربیس - اگر به بررسی پلتفرم میزبانی وب استاتیک جدید ما، "فایربیس هاستینگ"، علاقه‌مند هستید، گزینه دیگری است. SSL به طور پیش‌فرض فعال است.
• یک سرور محلی HTTP پایتون - نیاز به دسترسی به خط فرمان دارد.

توجه : اکیداً توصیه می‌شود که در محیط‌های عملیاتی از HTTPS استفاده شود. HTTPS علاوه بر امنیت، مزایای دیگری از جمله سئو نیز دارد. می‌توانید اطلاعات بیشتر در مورد این موضوع را اینجا بخوانید.

گزینه شماره ۱: وب سرور برای کروم

می‌توانید برنامه‌ی «وب سرور برای کروم» را در این لینک در فروشگاه وب کروم پیدا کنید.

پس از نصب برنامه کروم، باید از طریق دکمه «انتخاب پوشه» برنامه را به یک پوشه خاص هدایت کنید. برای این آزمایشگاه کد، باید پوشه‌ای را که فایل‌های نمونه آزمایشگاه کد را در آن از حالت فشرده خارج کرده‌اید، انتخاب کنید.

علاوه بر این، باید گزینه "Automatically show index.html" را تیک بزنید و پورت را روی "8000" تنظیم کنید. برای اعمال این تغییرات، باید وب سرور را مجدداً راه‌اندازی کنید.

دسترسی به این آدرس اینترنتی از طریق:

http://localhost:8000/article.html

اگر URL بالا با موفقیت بارگیری شد، می‌توانید به مرحله بعدی بروید.

گزینه شماره ۲: میزبانی فایربیس

اگر به بررسی میزبانی وب استاتیک جدید Firebase ما علاقه‌مند هستید، می‌توانید دستورالعمل‌های موجود در اینجا را برای استقرار سایت AMP خود در یک URL میزبانی Firebase دنبال کنید.

Firebase Hosting یک ارائه دهنده میزبانی استاتیک است که می‌توانید از آن برای استقرار سریع و میزبانی یک وب‌سایت استاتیک و فایل‌های آن، از جمله فایل‌های HTML، CSS و جاوا اسکریپت، استفاده کنید. کاربران از کاهش تأخیر بهره‌مند می‌شوند زیرا محتوای استاتیک در یک شبکه تحویل محتوا (CDN) با نقاط حضور (PoPs) واقع در سراسر جهان ذخیره می‌شود.

در نهایت، میزبانی فایربیس همیشه از طریق SSL ارائه می‌شود، بنابراین برای AMP و به طور کلی وب عالی است. اگر بیشتر علاقه‌مند به تمرکز صرف روی AMP هستید، به سادگی این گزینه را نادیده بگیرید.

گزینه شماره ۳: سرور HTTP پایتون

اگر از کروم استفاده نمی‌کنید یا در نصب افزونه کروم مشکل دارید، می‌توانید از پایتون از طریق خط فرمان برای راه‌اندازی یک وب سرور محلی استفاده کنید.

برای اجرای سرور HTTP داخلی پایتون از خط فرمان، کافیست دستور زیر را اجرا کنید:

python -m SimpleHTTPServer

و به این آدرس اینترنتی دسترسی پیدا کنید:

http://localhost:8000/article.html

۴. یک صفحه HTML معمولی بسازید

در فایل زیپ دانلود شده، فایلی به نام article.html پیدا خواهید کرد. این همان مقاله‌ای است که ما در حال ایجاد یک صفحه معادل AMP برای آن هستیم.

کد را از نمونه article.html کپی کرده و در یک فایل جدید جایگذاری کنید. این فایل را با نام article.amp.html.

نکته : لازم نیست فایل‌های AMP خود را با پسوند .amp.html نامگذاری کنید. در واقع، فایل‌های AMP می‌توانند هر پسوندی که بخواهید داشته باشند. معمولاً ناشران صفحات AMP را با استفاده از پارامترهایی در آدرس اینترنتی (url) از نسخه‌های استاندارد خود متمایز می‌کنند. به عنوان مثال: http://publisher.com/article.html?amp

فایل article.amp.html شما اکنون باید به شکل زیر باشد:

<!doctype html>
<html lang="en">
  <head>

    <title>News Article</title>

    <link href="base.css" rel="stylesheet" />

    <script type="text/javascript" src="base.js"></script>
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>
    </article>
    <img src="mountains.jpg">
  </body>
</html>

این یک صفحه عمداً ساده با عناصر رایج مقالات خبری استاتیک است: CSS، جاوا اسکریپت و یک تگ تصویر.

نسخه AMP مقاله ما در حال حاضر فقط یک کپی از مقاله اصلی است. بیایید آن را به AMP تبدیل کنیم. برای شروع، فایل کتابخانه جاوا اسکریپت AMP را اضافه می‌کنیم و بررسی می‌کنیم که هنگام فعال شدن اعتبارسنج AMP چه خطاهایی ظاهر می‌شوند.

برای اضافه کردن کتابخانه AMP، این خط را به پایین تگ <head> اضافه کنید :

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

حالا بیایید صفحه جدید article.amp.html را از طریق لینک زیر در مرورگر خود بارگذاری کنیم و کنسول توسعه‌دهندگان را در کروم از طریق Menu > More Tools > Developer Tools باز کنیم:

حالا خروجی جاوا اسکریپت را در کنسول توسعه‌دهنده بررسی کنید. مطمئن شوید که تب Console انتخاب شده است:

شما باید این گزارش را مشاهده کنید:

Powered by AMP ⚡ HTML

حالا برای فعال کردن اعتبارسنج AMP، این شناسه قطعه را به URL خود اضافه کنید:

#development=1

برای مثال:

http://localhost:8000/article.amp.html#development=1

ممکن است لازم باشد صفحه را به صورت دستی در مرورگر خود رفرش کنید. می‌توانید با فشار دادن این دکمه، صفحه‌ای را در مرورگر خود به صورت دستی رفرش کنید:

شما باید چندین خطای اعتبارسنجی دریافت کنید:

اگرچه AMP مخفف Accelerated Mobile Pages است، اما می‌توان از آن برای ساخت صفحات واکنش‌گرا که در تمام اندازه‌های صفحه نمایش به خوبی نمایش داده می‌شوند، استفاده کرد. برای اطلاعات بیشتر، بخش طراحی وب واکنش‌گرا را در وب‌سایت توسعه‌دهندگان گوگل بررسی کنید.

برای شبیه‌سازی تجربه دستگاه تلفن همراه در ابزارهای توسعه‌دهنده کروم. روی نماد دستگاه تلفن همراه اینجا کلیک کنید:

اکنون یک دستگاه تلفن همراه (مثلاً "Pixel 2") را از این منو انتخاب کنید:

شما باید یک وضوح شبیه‌سازی شده موبایل مانند این را در مرورگر خود ببینید:

حالا آماده‌ایم که شروع کنیم! بیایید خطاهای اعتبارسنجی را یکی یکی بررسی کنیم و به نحوه ارتباط آنها با AMP بپردازیم.

۵. خطاهای اعتبارسنجی را برطرف کنید

مجموعه کاراکتر مورد نیاز

ما با رفع خطای زیر شروع خواهیم کرد:

The mandatory tag 'meta charset=utf-8' is missing or incorrect.

برای نمایش صحیح متن، AMP نیاز دارد که مجموعه کاراکتر برای صفحه تنظیم شود. همچنین باید اولین فرزند تگ head باشد. دلیل این کار جلوگیری از تفسیر مجدد محتوایی است که قبل از تگ meta charset اضافه شده است.

کد زیر را به عنوان خط اول تگ head اضافه کنید :

<meta charset="utf-8" />  

فایل را ذخیره کنید ، صفحه را مجدداً بارگذاری کنید و بررسی کنید که این خطا دیگر نمایش داده نمی‌شود.

فایل‌های AMP ملزم به داشتن تگ <link rel=canonical> هستند.

هر سند AMP ملزم به داشتن لینکی است که به صفحه کانونیکال ارجاع می‌دهد. بنابراین، بیایید لینک را به مقاله اصلی خود اضافه کنیم.

کد زیر را زیر تگ <meta charset="utf-8" /> اضافه کنید:

<link rel="canonical" href="/article.html">

مهم : می‌توان یک صفحه AMP مستقل ایجاد کرد، که صفحه‌ای است که فاقد تگ کنونیکال است. در این سناریو، لینک کنونیکال همچنان مورد نیاز است، اما باید به خود مقاله AMP اشاره کند:

<link rel="canonical" href="/article.amp.html">

حالا، در صورت نیاز، وب‌سرور خود را مجدداً راه‌اندازی کنید و صفحه را مجدداً بارگذاری کنید. اگرچه هنوز خطاهای زیادی برای رفع وجود دارد، اما خطای «فایل‌های AMP ملزم به داشتن برچسب <link rel=canonical> هستند» دیگر وجود ندارد.

ویژگی AMP مورد نیاز است

AMP برای اعلام صفحه به عنوان یک سند AMP، به یک ویژگی در عنصر HTML ریشه یک صفحه نیاز دارد:

The mandatory attribute '⚡' is missing in tag 'html ⚡ for top-level html'
The mandatory tag 'html ⚡ for top-level html' is missing or incorrect.

این مشکل به سادگی با اضافه کردن ویژگی ⚡ به تگ <html> به صورت زیر حل می‌شود:

<!doctype html>
<html ⚡ lang="en">
  <head>
...

حالا، صفحه را دوباره بارگذاری کنید و بررسی کنید که هر دو خطا از بین رفته باشند.

نکته : اگرچه استفاده از ⚡ رویکرد پیشنهادی است، اما می‌توان از ویژگی amp به جای ویژگی ⚡ نیز استفاده کرد. بنابراین، کد به صورت زیر خواهد بود:

<!doctype html>

<html amp lang="en">

<head>

...

درگاه دید مورد نیاز است

در ادامه به بررسی خطای زیر خواهیم پرداخت:

The mandatory tag 'meta name=viewport' is missing or incorrect.

AMP نیاز به تعریف width و minimum-scale برای viewport دارد. این مقادیر باید به ترتیب به صورت device-width و 1 تعریف شوند. viewport یک تگ رایج است که در <head> یک صفحه HTML قرار می‌گیرد.

این مشکل با اضافه کردن قطعه کد HTML زیر به تگ <head> بهتر حل می‌شود. meta تگ زیر را اضافه کنید :

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />

    <link rel="canonical" href="/article.html">

    <!-- The following is the meta tag and viewport information we must add to the page: -->
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

...

اینها تنها مقادیر معتبر برای width و minimum-scale در AMP هستند. تعریف initial-scale اجباری نیست، اما یک مورد رایج در توسعه وب موبایل است و توصیه می‌شود. می‌توانید اطلاعات بیشتر در مورد viewport و طراحی واکنش‌گرا را اینجا بخوانید.

مانند قبل، صفحه را مجدداً بارگذاری کنید و بررسی کنید که آیا خطا برطرف شده است یا خیر.

شیوه‌نامه‌های خارجی

خطای زیر مربوط به استفاده ما از stylesheets است:

The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'base.css'.

این مشکل به طور خاص در مورد تگ لینک stylesheet زیر در تگ <head> ما وجود دارد:

<link href="base.css" rel="stylesheet" />

مشکل این است که این یک ارجاع به stylesheet خارجی است. در AMP، برای اینکه زمان بارگذاری اسناد تا حد امکان سریع باشد، توسعه‌دهندگان مجاز به استفاده از stylesheet های خارجی نیستند. در عوض، تمام قوانین stylesheet باید به صورت درون‌خطی در سند AMP گنجانده شوند.

بنابراین، تگ لینک را در <head> حذف کنید و آن را با یک تگ درون‌خطی مانند زیر جایگزین کنید :

<style amp-custom>

body {
  width: auto;
  margin: 0;
  padding: 0;
}

...

</style>

محتویات تگ style باید مستقیماً از فایل base.css در دایرکتوری پروژه شما کپی شود. ویژگی amp-custom در تگ style اجباری است.

یک بار دیگر، صفحه را مجدداً بارگذاری کنید و بررسی کنید که آیا خطای stylesheets برطرف شده است یا خیر.

توجه : نه تنها استایل‌دهی درون‌خطی الزامی است، بلکه محدودیت حجم فایل برای تمام اطلاعات استایل‌دهی ۵۰ کیلوبایت است. توصیه می‌شود از پیش‌پردازنده‌های CSS مانند SASS استفاده کنید و قبل از درون‌خطی کردن CSS در صفحات خود، آن را کوچک کنید.

مهم : شما فقط می‌توانید یک تگ استایل در کل سند AMP خود داشته باشید. اگر چندین استایل‌شیت خارجی دارید که مقالات شما به آنها ارجاع می‌دهند، باید این استایل‌شیت‌ها را در یک مجموعه قوانین واحد گردآوری کنید. برای اطلاعات بیشتر در مورد اینکه کدام قوانین CSS در اسناد AMP معتبر هستند، این صفحه مستندات را مطالعه کنید .

جاوا اسکریپت شخص ثالث

در حالی که می‌توان استایل‌شیت‌ها را با استفاده از inline کردن در AMP به راحتی تغییر داد، این موضوع در مورد جاوا اسکریپت صدق نمی‌کند.

The tag 'script' is disallowed except in specific forms.

در AMP، اسکریپت‌های تولید شده توسط کاربر مجاز نیستند. اسکریپت‌ها در AMP فقط در صورتی مجاز هستند که دو الزام اصلی را رعایت کنند:

• تمام کدهای جاوا اسکریپت باید غیرهمزمان باشند، یعنی ویژگی async را در تگ script قرار دهید.
• فقط کتابخانه AMP و اجزای AMP می‌توانند گنجانده شوند.

این امر عملاً استفاده از تمام جاوا اسکریپت‌های شخص ثالث را منتفی می‌کند. یک استثنا وجود دارد - جاوا اسکریپت شخص ثالث ممکن است در iframeها استفاده شود.

فایل خارجی base.js را باز کنید. چه می‌بینید؟ این فایل باید خالی از هرگونه کد جاوا اسکریپت باشد و فقط شامل توضیحاتی مانند این باشد:

/*

This external JavaScript file is intentionally empty.

Its purpose is merely to demonstrate the AMP validation error related to the use of external JavaScript files.

*/

با توجه به اینکه این فایل جاوا اسکریپت خارجی جزء کاربردی وب‌سایت ما نیست، می‌توانیم با خیال راحت ارجاع را به طور کامل حذف کنیم.

مرجع جاوا اسکریپت خارجی زیر را از سند خود حذف کنید :

<script type="text/javascript" src="base.js"></script>

حالا صفحه را دوباره بارگذاری کنید و بررسی کنید که خطای اسکریپت برطرف شده باشد.

نکته مهم : گنجاندن جاوا اسکریپت از طریق iframe باید به عنوان آخرین راه حل در نظر گرفته شود. در صورت امکان، عملکرد جاوا اسکریپت باید با استفاده از اجزای AMP داخلی جایگزین شود. اولین جزء AMP خود را در بخش بعدی بررسی خواهیم کرد.

توجه : تنها استثنائات برای اسکریپت‌های تولید شده توسط کاربر زمانی است که ویژگی نوع application/ld+json یا application/json باشد که برای افزودن متاداده به صفحه و پیکربندی اجزای AMP استفاده می‌شوند. اسکریپت‌های غیر اجرایی دیگری نیز ممکن است در آینده اضافه شوند.

الگوی استاندارد CSS برای AMP

The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect.
The mandatory tag 'head > style : boilerplate' is missing or incorrect.
The mandatory tag 'noscript > style : boilerplate' is missing or incorrect.

خطاهای بعدی به دو تگ گمشده در تگ <head> اشاره دارند. هر سند AMP مستلزم وجود این تگ‌ها است:

<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> سند خود اضافه کنید .

تگ اول، محتوای صفحه را تا زمانی که کتابخانه جاوا اسکریپت AMP تگ body را به‌روزرسانی کند تا پس از آماده شدن محتوای صفحه برای رندر، دوباره قابل مشاهده باشد، نامرئی می‌کند. AMP این کار را انجام می‌دهد تا از نمایش محتوایی از صفحه که هنوز استایل‌بندی نشده است، جلوگیری کند. این تضمین می‌کند که تجربه کاربری واقعاً آنی باشد، زیرا محتوای صفحه به طور همزمان ظاهر می‌شود و همه چیز در بالای صفحه با هم رندر می‌شود. تگ دوم در صورت غیرفعال بودن جاوا اسکریپت در مرورگر، این منطق را برمی‌گرداند.

تگ amp-img

The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'?

AMP یک کامپوننت وب دارد که به طور خاص برای جایگزینی تگ تصویر طراحی شده است، به نام amp-img :

<amp-img src="mountains.jpg"></amp-img>

تگ amp-img بالا را اضافه کنید و اعتبارسنج را دوباره اجرا کنید. باید چندین خطای جدید دریافت کنید:

AMP-IMG# Layout not supported for: container
The implied layout 'CONTAINER' is not supported by tag 'amp-img'.

چرا amp-img خطای دیگری ایجاد کرد؟ زیرا amp-img جایگزین مستقیم تگ img سنتی HTML نیست. هنگام استفاده از amp-img الزامات اضافی وجود دارد.

سیستم چیدمان

این خطا به ما می‌گوید که amp-img از نوع طرح‌بندی 'container' پشتیبانی نمی‌کند. یکی از مهمترین مفاهیم در طراحی AMP، تمرکز آن بر کاهش میزان DOM reflow مورد نیاز برای رندر صفحات وب است.

برای کاهش جریان مجدد DOM، AMP شامل یک سیستم طرح‌بندی است تا اطمینان حاصل شود که طرح‌بندی صفحه در چرخه عمر دانلود و رندر صفحه، تا حد امکان انعطاف‌پذیر است.

سیستم طرح‌بندی به عناصر موجود در یک صفحه اجازه می‌دهد تا به روش‌های مختلفی - ابعاد ثابت، طراحی واکنش‌گرا، ارتفاع ثابت و موارد دیگر - موقعیت‌یابی و مقیاس‌بندی شوند.

در مورد ما، سیستم طرح‌بندی، نوع طرح‌بندی ما را برای amp-img به عنوان نوع container استنباط کرد. با این حال، نوع کانتینر برای عناصری است که شامل عناصر فرزند هستند و با برچسب amp-img ناسازگار است که دلیل این خطا است.

چرا نوع کانتینر استنباط شد؟ چون ما برای تگ amp-img ویژگی height را مشخص نکردیم. در HTML، می‌توان با تعیین عرض و ارتفاع ثابت برای عناصر در یک صفحه، reflow را کاهش داد. در AMP، توصیه می‌شود عرض و ارتفاع را برای عناصر amp-img تعریف کنید زیرا این امر به AMP اجازه می‌دهد نسبت ابعاد عنصر را درک کند.

عرض و ارتفاع را به صورت زیر تنظیم کنید:

<amp-img src="mountains.jpg" width="266" height="150"></amp-img>

صفحه را رفرش کنید و اعتبارسنج را بررسی کنید - دیگر نباید خطایی ببینید! با این حال، تصویر به دلیل قرارگیری نامناسب در صفحه، چندان خوب به نظر نمی‌رسد. اگر می‌توانستیم تصویر را طوری مقیاس‌بندی کنیم که به صورت واکنش‌گرا کشیده شود و صرف نظر از اندازه صفحه نمایش، در صفحه جا شود، عالی می‌شد.

جالب اینجاست که تعریف عرض و ارتفاع، عنصر را به یک اندازه کاملاً ثابت محدود نمی‌کند. سیستم طرح‌بندی AMP می‌تواند با دانستن نسبت ابعاد آن، عنصر را به روش‌های مختلفی قرار داده و مقیاس‌بندی کند - ویژگی طرح‌بندی به AMP اطلاع می‌دهد که شما می‌خواهید عنصر چگونه قرار گرفته و مقیاس‌بندی شود.

با تنظیم ویژگی layout به صورت responsive می‌توانیم به این هدف دست یابیم:

<amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>

خب، تصویر ما نسبت ابعاد صحیحی دارد و به صورت واکنش‌گرا عرض صفحه را پر می‌کند.

موفقیت!

حالا سند AMP شما باید چیزی شبیه به این باشد:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">    

    <link rel="canonical" href="/article.html">
    <link rel="shortcut icon" href="amp_favicon.png">

    <title>News Article</title>

    <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>
    <style amp-custom>
      body {
        width: auto;
        margin: 0;
        padding: 0;
      }

      header {
        background: Tomato;
        color: white;
        font-size: 2em;
        text-align: center;
      }

      h1 {
        margin: 0;
        padding: 0.5em;
        background: white;
        box-shadow: 0px 3px 5px grey;
      }

      p {
        padding: 0.5em;
        margin: 0.5em;
      }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>  
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>

      <amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
    </article>
  </body>
</html>

صفحه را رفرش کنید و به خروجی کنسول نگاه کنید. باید با پیام زیر مواجه شوید:

AMP validation successful.

سوالات متداول

• DOM reflow چیست؟
• اگر ویژگی layout تعریف نشده باشد، چه می‌شود؟
• اگر عرض و ارتفاع تعریف نشده باشند چه؟

۶. URL های متعارف، فراداده و جستجو

بخشی از ابتکار جدید AMP، برجسته‌سازی اسناد معتبر AMP در رابط نتایج جستجوی گوگل به عنوان بخشی از یک رابط کاربری جدید چرخشی است. این رابط کاربری، تجربه کاربری بهتری را برای افرادی که در وب به دنبال مقالات هستند، فراهم می‌کند. برای اینکه این تجربه به بهترین شکل ممکن باشد، صفحات موجود باید معیارهای خاصی فراتر از قبولی در اعتبارسنجی AMP را نیز داشته باشند.

این مرحله، مروری کلی بر الزامات کامل ارائه می‌دهد.

پیوند دادن صفحات متعارف و اسناد AMP

هدف AMP افزایش سرعت وب است و اگرچه این پروژه در روزهای اولیه بیشتر بر محتوای استاتیک متمرکز بود، اما اضافه شدن اجزایی مانند amp-bind ، آن را برای طیف وسیعی از سایت‌ها، مانند ناشران اخبار، تجارت الکترونیک، وب‌سایت‌های مسافرتی، وبلاگ‌ها و موارد دیگر، مناسب می‌کند.

با این حال، درک کامل چگونگی قرارگیری AMP در ساختار یک وب‌سایت مهم است. اگرچه می‌توان از AMP برای ساخت کل وب‌سایت‌ها استفاده کرد، بسیاری از ناشران ترجیح می‌دهند از آن به عنوان رویکرد جفتی استفاده کنند، که در آن اسناد AMP به عنوان همراهی با مقالات HTML معمولی که یک ناشر در وب‌سایت خود میزبانی می‌کند، تولید می‌شوند.

توجه: برای اطلاعات بیشتر در مورد استفاده از AMP برای ساخت کل یک وب‌سایت، که به آن سایت‌های AMP Canonical نیز گفته می‌شود، حتماً codelab مربوط به « صفحات AMP زیبا، تعاملی و متعارف » را بررسی کنید.

لینک‌دهی متعارف در صفحات HTML معمولی، یک تکنیک رایج برای اعلام این است که کدام صفحه باید به عنوان صفحه ترجیحی در نظر گرفته شود، زمانی که چندین صفحه شامل محتوای یکسانی هستند. از آنجایی که اسناد AMP می‌توانند طوری تولید شوند که در کنار صفحات مقاله سنتی یک وب‌سایت در دسترس باشند، باید صفحات HTML سنتی را به عنوان صفحات "متعارف" در نظر بگیریم.

ما قبلاً اولین قدم را برای دستیابی به این هدف در سند AMP خود با قرار دادن یک تگ لینک در <head> به صفحه کانونیکال برداشته‌ایم:

<link rel="canonical" href="/article.html">

مرحله بعدی، لینک کردن مقاله کانونیکال به صفحه AMP است. این کار با اضافه کردن یک تگ <link rel="amphtml"> به بخش <head> مقاله کانونیکال انجام می‌شود.

کد زیر را به بخش <head> فایل article.html اضافه کنید:

<link rel="amphtml" href="/article.amp.html">

نمودار زیر جهت تگ‌های لینک را نشان می‌دهد:

لازم است این لینک دو طرفه تنظیم شود تا خزنده جستجوی گوگل بتواند رابطه بین سند متعارف HTML معمولی ما و سند AMP ما را درک کند. اگر هیچ لینکی ارائه نشود، لزوماً برای خزنده مشخص نخواهد بود که کدام مقالات "نسخه‌های AMP" اسناد HTML معمولی هستند. با ارائه صریح این لینک‌ها، اطمینان حاصل می‌کنیم که هیچ ابهامی وجود ندارد!

فراداده موتور جستجوی Schema.org

یکی دیگر از الزامات نمایش اسناد AMP در رابط کاربری جدید، رعایت مشخصات فراداده موتور جستجو (Search Engine Metadata Specification) در Schema.org است. این فراداده از طریق یک تگ اسکریپت از نوع application/ld+json در تگ <head> اسناد شما قرار می‌گیرد.

کد زیر را به انتهای بخش <head> سند AMP خود اضافه کنید:

<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "NewsArticle",
 "mainEntityOfPage":{
   "@type":"WebPage",
   "@id":"https://example.com/my-article.html"
 },
 "headline": "My First AMP Article",
 "image": {
   "@type": "ImageObject",
   "url": "https://example.com/article_thumbnail1.jpg",
   "height": 800,
   "width": 800
 },
 "datePublished": "2015-02-05T08:00:00+08:00",
 "dateModified": "2015-02-05T09:20:00+08:00",
 "author": {
   "@type": "Person",
   "name": "John Doe"
 },
 "publisher": {
   "@type": "Organization",
   "name": "⚡ AMP Times",
   "logo": {
     "@type": "ImageObject",
     "url": "https://example.com/amptimes_logo.jpg",
     "width": 600,
     "height": 60
   }
 },
 "description": "My first experience in an AMPlified world"
}
</script>

صفحه را در مرورگر مجدداً بارگذاری کنید و دوباره بررسی کنید که هیچ خطای اعتبارسنجی AMP ایجاد نشده باشد.

حالا، ابزار اعتبارسنجی داده‌های ساختاریافته را در یک پنجره مرورگر جدید باز کنید و روی «آزمایش نشانه‌گذاری من» کلیک کنید. سپس تب «قطعه کد» را انتخاب کنید، کد منبع کامل را از صفحه AMP خود کپی کرده و آن را در پنل ویرایشگر متن ابزار اعتبارسنجی قرار دهید و روی «اجرای تست» کلیک کنید :

شما باید چیزی شبیه به این را در صفحه ببینید:

مهم: مطمئن شوید که متن سبز رنگ «همه چیز خوب است» نمایش داده می‌شود. فقط صفحات AMP که این اعتبارسنجی را پشت سر بگذارند، در چرخ فلک AMP نمایش داده می‌شوند.

توجه : محتوا باید همیشه یکسان باشد. برای مقالات خبری از نوع "NewsArticle" استفاده کنید. تیتر باید با عنوان مقاله شما مطابقت داشته باشد. تصویر به تصویر اصلی مقاله اشاره دارد.

الزامات کلیدی برای نمایش در چرخ فلک جدید جستجوی گوگل برای مقالات خبری AMP به شرح زیر است:

1. مطمئن شوید که سند AMP شما اعتبارسنجی می‌شود.
2. سند AMP خود را از صفحه HTML سنتی خود از طریق تگ <link> ارجاع دهید و برعکس.
3. تگ متاداده موتور جستجو را در بالا وارد کنید.

اطلاعات بیشتر را در مورد کشف صفحه بخوانید.

۷. تبریک می‌گویم!

شما آزمایشگاه کد را به پایان رسانده‌اید و با موفقیت بسیاری از مفاهیم اساسی اسناد AMP را بررسی کرده‌اید.

امیدواریم نه تنها نحوه پیاده‌سازی این مفاهیم و ویژگی‌ها را در یک سند AMP درک کرده باشید، بلکه دلیل طراحی AMP به این شکل را نیز فهمیده باشید.

در ادامه به برخی از موضوعات و لینک‌های اضافی اشاره می‌کنیم که شاید بخواهید برای تقویت بیشتر مهارت‌هایتان آنها را بررسی کنید!

• همه چیز درباره کشف صفحه
• تگ‌های HTML غیرمجاز
• قوانین و انیمیشن‌های CSS محدود
• بیشتر در مورد آی‌فریم‌ها
• CDN مربوط به AMP
• فهرست اجزای AMP موجود