021-91014197 call

مفهوم و کاربرد AMP در طراحی صفحات وب

سارا راد
در تاریخ: ۱۷ آبان، ۱۳۹۹

در این مقاله قصد داریم با پروژه متن‌باز (Open Source) AMP  که در سال ۲۰۱۶ توسط گوگل رونمایی شد و کاربرد آن در طراحی صفحات وب بیشتر آشنا شویم. در ادامه در مقالات بعدی به رابطه‌ی این صفحات و CDNها خواهیم پرداخت.

AMP یا Accelerated Mobile Page چیست؟

AMP یک پروژه تحت نظر گوگل است که هدف آن افزایش سرعت ارائه محتوا با استفاده از کدهای ساده مانند AMP HTML در صفحه‌های کوچک مانند موبایل می باشد. به عبارت ساده تر، AMP راهی برای ایجاد صفحات وب برای محتوای استاتیک و به صورت HTML  (صفحاتی که بسته به رفتار و عملیات کاربر تغییری نمی کنند) است که باعث بارگذاری سریع آن‌ها گردد.

این صفحات می‌توانند توسط CDNها Cache بشوند که به صورت مفصل در مورد آن صحبت خواهیم کرد.

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

صفحات AMP برای گوگل به عنوان یک نتیجه مطمئن و سریع index می‌شوند. به این معنی که زمانی که یک صفحه AMP در دسترس است در جست‌وجوی موبایل به عنوان یک نتیجه غنی (Rich) به صورت برجسته نمایش داده می‌شود.

برای این منظور هنگام نمایش نتیجه‌ی جست‌وجو در کنار تاریخ مربوط به نتیجه، عبارت AMP نیز نمایش داده می‌شود.

اما AMP چگونه کار می‌کند؟

در هنگام بارگذاری یک صفحه‌ی AMP بر روی گوشی موبایل، بخش قابل توجهی از محتوای اصلی صفحه کنار گذاشته شده و تنها محتوای اصلی به صورت بهینه بر روی موبایل نمایش داده می‌شود. این کار به دو منظور انجام می‌شود: اول افزایش سرعت بارگذاری و دوم بهبود تجربه کاربر؛ چرا که کاربر به صورت متوسط تنها ۳ ثانیه منتظر بارگذاری نتیجه‌ی جست‌وجو خواهد ماند. AMP سرعت بارگذاری صفحات را به ۱/۶ کاهش می‌دهد.

( AMP یک معیار امتیازدهی برای رتبه‌بندی نتایج گوگل نیست، و جست‌وجوی گوگل استاندارد مشابهی را در مورد همه صفحات فارغ از تکنولوژی مورد استفاده در ساخت صفحه به کار می‌برد. اما سرعت بارگذاری صفحه، یک معیاراصلی برای این امتیازدهی خواهد بود.)

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

بر اساس الگوریتم Mobilegeddon گوگل، مناسب‌سازی صفحه برای موبایل (Mobile Friendly) در رتبه‌بندی آن صفحه در جست‌وجو موثر خواهد بود.

Prerendering یک نمونه از این بهبودهاست. در حال حاضر صفحات AMP در دسکتاپ با ویژگی‌هایی مثل لوگوی AMP و Caousel و از طریق Google AMP Cache یا AMP Viewer ارائه نمی‌شوند. با صفحات AMP از نوع  Canonical نیز مانند نتایج استاندارد رفتار می‌شود.

نمایش اولیه در نتایج جستجو

اگر می‌خواهید صفحه شما در نتایج گوگل به صورت AMP نمایش داده شود، کافیست یک داده ساختارمند (Data Structure) را به صفحه خود اضافه کنید. به این نکته توجه کنید که گوگل صرفا با اضافه کردن داده ساختارمند یک نتیجه جست‌وجوی قوی را ضمانت نمی‌کند. اگر شما صفحات با محتوای مشابه را تکرار کرده‌اید، باید داده ساختارمند را روی همه نسخه‌های تکراری صفحات قراردهید، نه فقط صفحه Canonical.

بعد از اینکه کار بر روی محتوای AMP کلیک می‌کند چه می‌شود؟

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

  • Google AMP Viewer: راه پیش‌فرض به این صورت است که محتوا Cache شده و تجربه‌ی بهتری برای تحویل محتوا به کاربر ایجاد شود. در قسمت بالای Google AMP Viewer، دامنه‌ی (Domain) مربوط به محتوا نمایش داده می‌شود تا کاربران متوجه بشوند محتوا به‌وسیله‌ی چه کسی منتشر شده است.
  • Signed Exchange: این تکنولوژی به مرورگر اجازه می‌دهد که با مستندات به عنوان متعلقات سرور اصلی (Origin) شما رفتار کند.
نمایش AMP

این شکل تفاوت نحوه نمایش محتوای AMP را در این دو روش نشان می‌دهد:

عکس سمت چپ محتوای AMP در Google AMP Viewer را نشان می‌دهد. آدرس Google AMP Viewer به عنوان دامنه‌ی اصلی در Address Bar نمایش داده شده و آدرس دامنه‌ی مالک محتوا در AMP Source Bar.
عکس سمت راست آدرس‌دهی با استفاده از Signed Exchange را نشان می‌دهد. آدرس URL یک وب‌سایت در Address Bar مرورگر و فضای بیشتر برای نمایش وب‌سایت.

Google AMP Viewer

Google AMP Viewer یک محیط ترکیبی است که برای شما امکان جمع‌آوری داده درباره کاربر را فراهم می‌کند. مجموعه این داده‌ها توسط سیاست‌های حریم خصوصی شما محافظت می‌شود.

Signed Exchange

یک Signed Exchange به شما اجازه می‌‌دهد که از First Party Cookieها برای سفارشی‌سازی محتوا و اندازه‌گیری آنالیزها استفاده کنیم. آدرس صفحه شما بجای google.com/amp در Address Bar نمایش داده می‌شود. جست‌وجوی گوگل نمایش محتوا به صورت Signed Exchange را اولویت می‌دهد، به شرط اینکه مرورگر از آن پشتیبانی کند. برای این کار شما باید محتوای وب‌سایت خود را علاوه بر قالب معمول AMP HTML، به صورت Signed Exchange منتشر کنید. در حال حاضر Signed Exchange در جست‌وجوی گوگل تنها برای نتایج غنی (Rich) و پایه‌ای نمایش داده می‌شود و برای Carousel قابل استفاده نیست.

در مقاله بعد درباره‌ی تاثیرات CDNها و AMP بر یکدیگر صحبت خواهیم کرد.


منابع: