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

1. بررسی اجمالی

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

چیزی که یاد خواهید گرفت

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

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

  • کد نمونه
  • Python (ترجیحاً 2.7) یا افزونه Chrome 200 OK Web Server
  • کروم (یا یک مرورگر معادل که می تواند کنسول جاوا اسکریپت را بازرسی کند)
  • ویرایشگر کد (به عنوان مثال Atom، Sublime، Notepad++)

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

می توانید تمام کد نمونه را در رایانه خود بارگیری کنید:

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

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

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

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

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

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

  • برنامه Google Chrome "Web Server for Chrome" - این رویکرد توصیه شده است زیرا ساده ترین و متقابل ترین راه حل موجود است. توجه: این روش نیاز به نصب Google Chrome دارد.
  • میزبانی Firebase - یک گزینه جایگزین اگر شما نیز علاقه مند به کاوش در پلت فرم جدید میزبانی دارایی ثابت ما "Hosting Firebase" هستید. SSL به طور پیش فرض فعال است.
  • یک سرور محلی HTTP Python - به دسترسی به خط فرمان نیاز دارد.

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

می‌توانید برنامه «Web Server for Chrome» را در این پیوند در فروشگاه وب Chrome پیدا کنید.

4c1bf1095afed87a.png

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

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

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

http://localhost:8000/article.html

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

گزینه شماره 2: میزبانی Firebase

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

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

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

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

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

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

python -m SimpleHTTPServer

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

http://localhost:8000/article.html

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

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

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

فایل 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 جدید را از طریق لینک زیر در مرورگر خود بارگذاری کنیم و Developer Console را در کروم از طریق Menu > More Tools > Developer Tools باز کنیم:

efc352f418f35761.png

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

597d53fae21a0a60.png

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

Powered by AMP ⚡ HTML

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

#development=1

به عنوان مثال:

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

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

3cc0680e695b804d.png

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

اسکرین شات 03/05/2016 در ساعت 10.09.51.png

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

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

46d475a36472b495.png

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

f65e7b38557a5807.png

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

7da6c754afb2adca.png

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

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

مجموعه حروف مورد نیاز است

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

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

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

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

<meta charset="utf-8" />

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

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

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

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

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

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

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

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>
...

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

Viewport مورد نیاز است

در ادامه با خطای زیر مقابله می کنیم: 

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 و طراحی واکنش گرا بخوانید.

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

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

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

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

این به طور خاص از برچسب پیوند شیوه نامه زیر در تگ <head> ما شکایت می کند: 

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

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

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

<style amp-custom>

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

...

</style>

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

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

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

در حالی که شیوه نامه ها را می توان نسبتاً به راحتی با AMP از طریق inlining دوباره کار کرد، این امر در مورد جاوا اسکریپت صادق نیست. 

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

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

  • تمام جاوا اسکریپت باید ناهمزمان باشد، یعنی ویژگی async را در تگ اسکریپت قرار دهد.
  • فقط کتابخانه 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>

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

دیگ بخار AMP CSS 

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 تگ بدنه را به روز کند تا پس از آماده شدن محتوای صفحه، دوباره قابل مشاهده باشد. 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 مورد نیاز برای ارائه صفحات وب آن است.

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

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

a6149f5043618189.png

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

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

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

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

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

a7f2a768e9da1a25.png

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

با تنظیم ویژگی layout روی responsive می توانیم به این نتیجه برسیم: 

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

وویلا! تصویر ما در نسبت تصویر صحیح قرار دارد و به صورت پاسخگو عرض صفحه را پر می کند.

de0cbbe31eacbbb1.png

موفقیت!

اکنون سند 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.

F**** سوالات متداول

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

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

این مرحله یک نمای کلی از الزامات کامل ارائه می دهد.

پیوند صفحات Canonical و اسناد AMP

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

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

7152b1ef38f00f36.png

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

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

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

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

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

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

نمودار زیر جهت تگ های پیوند را نشان می دهد:

a880b625c10ffd84.png

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

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

یکی دیگر از الزامات برای نمایش اسناد AMP در رابط چرخ و فلک جدید، پایبندی به مشخصات ابرداده موتور جستجو 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 Validation معرفی نشده باشد.

اکنون ابزار اعتبارسنجی داده های ساختاریافته را در یک پنجره مرورگر جدید باز کنید و روی "Test my markup" کلیک کنید. سپس برگه "کد قطعه" را انتخاب کنید، کد منبع کامل را از صفحه AMP خود کپی کنید و آن را در پنل ویرایشگر متن ابزار اعتبارسنجی قرار دهید، و روی "Run Test" کلیک کنید :

901b629036e0cd62.png

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

ae8e16aff196e5a7.png

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

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

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

7. تبریک می گویم!

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

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

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