Accelerated Mobile Pages یا صفحات موبایلی شتابیافته، پروژهای است که توسط گوگل و توییتر طراحی شده تا صفحات موبایلی سریع ایجاد کنند. سادهتر بگوییم؛ این پلتفرم به شما این امکان را میدهد که صفحات وبسایتتان را سریعتر لود کنید. گوگل این پروژه را در سال 2015 برای رقابت با مقالات فوری فیسبوک و اپل نیوز کلید زد. این پلتفرم به قدری سبک و ساده طراحی شده که وبسایت شما را به سرعت لود میکند و ابزاری برای بهینهسازی وبسایت شما به حساب میآید.
پروژۀ AMP از سه بخش تشکیل شده است:
همان HTML استاندارد است که ویژگیهای خاص AMP را یک جا جمعآوری کرده است. بیشتر تگهایش مشابه HTML استاندارد است اما برخی تگهای آن تغییر کرده تا با اجزاء AMP سازگار باشند. این عناصر خاص در تلاشند تا اطمینان حاصل کنند که استفاده از الگوهای متداول برای کاربر ساده است.
جاوا اسکریپت در AMP کمی متفاوت است. این پلتفرم کتابخانۀ جاوا اسکریپت مخصوص خودش را دارد و از اجرای کدهای غیرضروری جاوا اسکریپت خودداری میکند. فیلتر کردن بعضی کدها و کم شدن تعداد آنها باعث افزایش سرعت در صفحات موبایلی پرشتاب شده است. این ویژگی محدودیتهایی نیز به همراه دارد که به آن میپردازیم.
یک شبکۀ دلیوری بر پایۀ پروکسی است و برای توزیع اسناد معتبر AMP استفاده میشود. هنگام استفاده از این کَش، اسناد مربوطه با تمام فایلهای جاوا اسکریپت و عکسها، از منبعی لود میشوند که برای کارایی بهتر از HTTP 2.0 استفاده میکند. در کنار حافظۀ کَش، یک سیستم اعتبارسنجی وجود دارد که تأیید میکند آیا یک صفحه، بدون اینکه به منابع خارجی وابسته باشد، کار میکند یا نه.
نویسندگان و افرادی که از نسخه AMP برای انتشار محتوا خود را در موبایل استفاده می کنند، باید آن را هم نیز در نسخه دسکتاپ خود معرفی کنند، برای مثال اگر برای صفحه خاص خود در موبایل از نسخه AMP استفاده می کنید باید لینک معرفی آن را به صورت لینک rel AMP HTML در کد HTML صفحه دسکتاپ خود بنویسید.
گاردین، برای هر صفحه خبری خود برروی سایت، از نسخه AMP استفاده می کند .برای مثال شما می توانید حالت AMP یک خبر را با بدون AMP و به صورت عادی سایت گاردین مشاهده کنید و کاملا متوجه تفاوت نحوه نمایش آن ها شوید. برای مثال کافی است که وارد این صفحه سایت گاردین شوید. همانطور که بیان کردیم، AMP باعث افزایش سرعت بارگذاری مطلب می گردد، چون این نسخه روی سرور gstatic کش می شود و از این رو لازم نیست که برای هربار بارگذاری، به سرور اصلی سایت گوگل مراجعه نماید.
AMP HTML برای بهبود سرعت صفحه و قابلیت خوانایی محتوا ایجاد شده است که این معناست که کدهای استفاده به شدت ساده و بهینه می باشند. با این وجود، دراستفاده از این تکنولوژی محدودیت های زیادی وجود دارد که بهتر است آن ها را بدانیم:
اگر شما تولید کننده محتوا هستید و از CMS هایی مانند وردپرس برای فعالیت خود استفاده می کنید، حتما به تکنولوژی AMP درآینده نیاز خواهید داشت، مخصوصا برای اینکه بتوانید قابلیت خوانایی محتوای خود را در نسخه موبایل افزایش دهید. جالب است که در وردپرس، پلاگینی به اسم AMP وجود دارد که به شما این امکان را می دهد تا بتوانید محتوایی براساس این تکنولوژی تولید کنید. اگر هم از CMS های دیگری استفاده می کنید، بهتر است که حتما اگر پلاگینی در این خصوص ندارد، حتما از سعی کنید که توسط یک برنامه نویس از این تکنولوژی استفاده نمایید.
اگر یک توسعه دهندهی وردپرس باشید یا کسی را در این حوزه داشته باشید میتوانید یک قالب با ویژگیها و فناوریهای AMP طراحی و راهاندازی کنید اما اگر توسعه دهنده نیستید یا کسی را ندارید، میتوانید از افزونههای موجود AMP برای وردپرس استفاده کنید.
از سادهترین راههای ساخت صفحات AMP نصب پلاگین بر روی WordPress است. دقت کنید که اگر از wordpress.com استفاده میکنید نمیتوانید از پلاگین استفاده کنید. پلاگینها فقط روی wordpress.org قابل نصب هستند.
برای شروع وارد صفحۀ وردپرس شوید و قسمت Plugin را انتخاب کنید
در مرحلۀ بعد در قسمت مشخص شده، پلاگین مورد نظر را سرچ میکنیم ووقتی پلاگین موردنظر را که انتخاب کردید، وارد صفحۀ ای میشوید. گزینۀ Download را انتخاب کنید و سپس آن را نصب کنید.
دقت کنید که پلاگین ممکن است نصب شود ولی لزوما فعال نخواهد بود. شما باید آن را Activate کنید.
بعد از فعال کردن افزونه (پلاگین) AMP روی WordPress، میتوانید به بخش Appearance رفته و ببینید صفحۀ شما به چه شکل در موبایل دیده میشود. همچنین میتوانید تم، تصویر هدر و رنگها را تغییر دهید. فراموش نکنید که تغییرات را ذخیره کنید.
برای نمایش صفحهتان در نتایج موتور جستجو باید ابتدا آن را اعتبارسنجی کنید و مطمئن باشید صفحۀ AMP شما valid است. برای این کار چند راه دارید:
استفاده از اکستنشن روی مرورگر کروم یا اپرا
لینک این اکستنشنها را برایتان قرار دادهایم. با نصب این اکستنشن، علامتی مشابه علامت AMP در گوشۀ بالا سمت راست مرورگر ظاهر میشود. این اکستنشن با ورود به هر صفحه به طور اتوماتیک آن را بررسی میکند و بسته به شرایط تغییر رنگ میدهد. رنگ قرمز در مواقعی که صفحه معتبر نیست و رنگ سبز برای مواقعی که صفحه معتبر است. در مواردی که صفحه AMP نیست اما میتواند با کد زیر AMP شود، آیکون اکستنشن به رنگ آبی در میآید و با کلیک بر روی آن میتوان صفحۀ AMP مربوط به آن را بارگذاری کرد.
<link rel=”amphtml” href=”…”>
اعتبارسنج AMP میتواند وب اینترفیس /https://validator.ampproject.org باشد. این اینترفیس خطاهای درونخطی ایجاد شده را به همراه HTML به شما نشان میدهد و به صورت تعاملی کار میکند؛ یعنی هر تغییری در HTML منجر به بررسی دوبارۀ آن میشود.
حرف آخر:
استفاده از AMP شاید امری واجب برای سئو سایت باشد اما به این خاطر که در UI سایت تاثیر میگذارد، مسئلهای سلیقهای است و بستگی به نوع کار و سنگینی پروژه شما دارد. اگر وبسایت شما مقالات طولانی و خبری منتشر میکند، یا ویدیوهایی منتشر میکنید که حجم نسبتا بالایی دارند، استفاده از صفحات AMP گزینۀ مناسبی برای شماست. معایب این فناوری جالب و پر سرعت شاید از نظر رابط کاربری آنچنان خوب نباشد اما مزایای بیشتری دارد و شما میتوانید با استفاده از UX (تجربه کاربری) یک تجربهی کاربری خوب ایجاد کنید و نقطهی ضعف AMP را بپوشانید.
طراحی انواع سایت در وب شیفت