AMP یا Accelerated Mobile Pages چیست؟

صفحات موبایل پرشتاب (AMP) یکی از مهم‌ترین بخش‌هایی است که جستجو در موبایل را ساده‌ترین و بسیار سریع‌تر می‌کند. می‌دانید که سرعت بخش مهمی در ایجاد وب سایت است. گوگل در سال 2015 متوجه شد که بخش اعظمی از جستجوهای اینترنتی با استفاده از موبایل انجام شده و روز به روز نیز این مقدار افزایش می‌یابد. بنابراین پروژه Accelerated Mobile Pages از طرف گوگل و توییتر معرفی شد. AMP مخفف عبارت Accelerated Mobile Pages و به معنی صفحات موبایل پرشتاب است.

به زبان ساده AMP برای سریع‌تر بارگذاری شدن صفحات سایت در تلفن همراه معرفی گشت. طبق گفته گوگل، AMP در اولین آزمایش ها زمان بارگیری را 15 تا 85 درصد کاهش داده است. صفحاتی که از Google AMP استفاده می‌کنند 4 برابر سریعتر بارگیری می‌شوند. این پروژه اوپن سورس بوده و با حذف کدهای سنگین وب‌سایت که برای نمایش در موبایل ضروری نیستند، بارگذاری صفحه را برای تلفن همراه را بسیار سریع‌تر می‌کند.

امروزه شرکت‌های زیادی از جمله اپل، لینکدین، پینترست، وردپرس و. اقدام به همکاری و استفاده از amp کرده‌اند. استفاده از این قابلیت روی رضایت کاربر تاثیر بسیار مثبتی می‌گذارد.

نحوه کار amp:  گوگل چگونه سرعت صفحات را بالا می‌برد؟

گفتیم که امپ باعث می‌شود سرعت لود صفحات در گوشی موبایل بالا برود؛ اما چگونه؟  amp گوگل با حذف هرچیزی که برای بارگذاری در گوشی موبایل ضروری نیست باعث می‌شود سرعت بارگذاری صفحه بالا برود. امپ یک فریم ورک متن باز بوده و با حذف مواردی از قبیل تبلیغات، افزونه‌های مختلف، تصاویر حجیم و یا بهینه‌سازی کدهای HTML، CSS و جاوا اسکریپت باعث سریع‌تر شدن صفحه می‌شود. 

مزایا و معایب AMP

حال که متوجه شدید که amp چیست، بهتر است مزایا و معایب آن را هم بشناسید.

مزایا Google AMP

صادقانه بگوییم، بهینه سازی با AMP مزایای زیادی دارد. اما بیایید نگاهی دقیق به چند مورد برتر بیندازیم: 

•  سرعت بیشتر

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

•   رتبه بالاتر در نتایج گوگل

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

•   افزایش نرخ کلیک (CTR)

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

همچنین سایت‌های دارای AMP با نمادی شبیه به رعد و برق در Google SERP نشان داده می‌شوند. بسیاری از کارشناسان سئو معتقدند که همین علامت میزان نرخ کلیک صفحه را افزایش می‌دهد. کاربران صفحات amp را انتخاب می‌کنند چون این صفحات سریع‌تر بارگیری می‌شوند.

•   پایین آمدن نرخ پرش (Bounce Rate)

سرعت زیاد بارگذاری باعث می‌شود افراد خیلی زود سایت را ترک کنند. به این ترتیب میزان نرخ کلیک نیز کاهش پیدا می‌کند. اما با استفاده از AMP بازدیدکننده تجربه کاربری بهتری خواهد داشت. بنابراین زمان بیش‌تری در سایت مانده و میزانBounce Rate پایین می‌آید. 

معایب Google AMP

در کنار تمام مزایایی که amp دارد، اما محدودیت‌ها و معایبی نیز در استفاده از آن وجود دارد. معایبی مانند:

•   از دست دادن برخی دیتاهای گوگل آنالیتیکس
•   کاهش درآمد تبلیغات
•  مسیر یابی و Track کردن سخت تر کاربر
•  ممکن است نرخ تبدیل کاهش پیدا کند زیر مواردی مانند پاپ آپ به کاربر نمایش داده نمی‌شوند.

تاثیر گوگل AMP روی سئو وب سایت

سوالی که ممکن است برایتان پیش آمده باشد این است که آیا AMP روی سئو سایت شما تاثیرگذار است؟ جواب این است که بله به صورت غیر مستقیم روی سئو شما تاثیرگذار است. تمام مواردی که بالاتر گفته شد به عنوان مزایای استفاده از amp مانند بالاتر رفتن نرخ کلیک، کمتر شدن بانس ریت، سرعت بالاتر صفحه  در بهبود سئو شما موثر هستند.

بنابراین استفاده از amp باعث می‌شود که از نظر سئویی نیز سایتتان بهبود یابد. همچنین گوگل نیز به سایت‌هایی که از amp استفاده می‌کنند علاقه‌مند است و ممکن است در نتایج گوگل رتبه بهتری به آن‌ها تعلق بگیرد. البته استفاده از amp به سایت شما هم بستگی دارد که در ادامه این مورد را نیز توضیح می‌دهیم.

بر اساس یک مطالعه تأخیر 1 ثانیه‌ای در زمان بارگیری تلفن همراه، نرخ تبدیل را 3.50 درصد کاهش می‌دهد؛ بازدید از صفحه را 9.40 درصد کاهش می‌دهد و نرخ پرش را تا 8.30 درصد افزایش می‌دهد.

نحوه پیاده سازی AMP روی سایت وردپرسی

اگر از سیستم مدیریت محتوای وردپرس استفاده می‌کنید؛ به راحتی می‌توانید با استفاده از افزونه amp را برای سایتتان فعال کنید. افزونه‌های مختلفی برای این کار وجود دارند که از بهترین آن‌ها می‌توان به موارد زیر اشاره کرد:

• پلاگین AMP Project (افزونه رسمی AMP)
•  پلاگین accelerated mobile pages
• پلاگین Yoast glue SEO
•  پلاگین Automatic AMP

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

همچنین اگر از CMS جوملا و یا دروپال برای مدیریت سایت خود استفاده می‌کنید نیز برای راه اندازی AMP باید از افزونه یا پلاگین مخصوص آن‌ها استفاده کنید. 

نحوه پیاده سازی AMP برای سایت غیروردپرسی

شما می‌توانید با قرار دادن این کد در صفحه خود amp را برای سایت غیر وردپرسی خود راه اندازی کنید.

<!doctype html>
<html ⚡>
  <head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<meta name="description" content="This is the AMP Boilerplate.">
	<link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">
	<script async src="https://cdn.ampproject.org/v0.js"></script>
	<!-- Import other AMP Extensions here -->
	<style amp-custom>
	/* Add your styles here */
	</style>
	<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>
 
    <link rel="canonical" href=".">
	<title>My AMP Page</title>
  </head>
  <body>
	<h1>Hello World</h1>
  </body>
</html>

نحوه تست AMP

بعد از راه اندازی و به کار گیری از amp باید آن را ارزیابی کنید و ببینید که آیا به درستی کار می‌کند یا خیر؟ برای این که مطمئن شوید صفحه  amp شما به درستی کار می‌کند و از کدهای استفاده شده مطمئن شوید چند روش وجود دارد که در ادامه دو راه را به شما آموزش می‌دهیم.

• استفاده از ابزار گوگل

برای این که بدانید amp به درستی کار می‌کنید می‌توانید از ابزار گوگل استفاده کنید. برای این منظور به آدرس https://search.google.com/test/amp مراجعه کنید و با قرار دادن آدرس صفحه در فیلد مشخص شده AMP را تست کنید.

• استفاده از افزونه AMP Validator

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

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

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

تصمیم گیری در مورد AMP برای همه سایت ها مشخص نیست. مثل اکثر مواقع می‌توانیم به سراغ جمله کلیشه‌ای "بستگی دارد" برویم. گفتیم که استفاده از Amp معایبی هم دارد و استفاده از آن تقریباً ساده‌ترین شکل سایت را به کاربر نمایش می‌دهد. در این حالت کدهای CSS غیر ضروری، تصاویر حجیم و. حذف می‌شوند.

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

جمع بندی: مراحل پیاده سازی AMP

حال که با گوگل امپ یا همان Google AMP آشنا شدید و متوجه شدید AMP چیست و چه مزایایی دارد، شما نیز نظرات خود را با ما درمیان بگذارید. آیا برای سایت خود از امپ استفاده می‌کنید؟ چه تجربه‌ای از استفاده از این پروژه داشته‌اید؟ کارشناسان سئولب در کوتاه‌ترین زمان ممکن پاسخگوی نظرات شما خواهند بود.

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

ابتدا کد زیر را به صفحه اصلی اضافه کنید

<link rel=”amphtml” href=”https://www.yoursite.com/url/to/amp/document.html”>

 سپس در قسمت head صفحه‌ای که می‌خواهید amp را ایجاد کنید کد زیر را قرار دهید:

<link rel=”canonical” href=”https://www yoursite.com/url/to/full/document.html”>

حال تگ را به

<“html amp lang=”fa>

تغییر دهید

همچنین کد زیر را در قسمت head قرار دهید برای دسترسی به کتابخانه js amp

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

در صورتی که کدهای زیر وجود نداشتند آن‌ها را به هد صفحه خود اضافه کنید

<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width,minimum-scale=1″>

سپس تمام تگ‌های تصاویر را از حالت img به تغییر دهید. مانند:

<amp-img src=”welcome.jpg” alt=”Welcome” height=”400″ width=”800″></amp-img>

کد های تغییر ظاهر و تغییر قالب css را در داخل

 <style amp-custom>

قرار دهید:

<style amp-custom>
/* any custom style goes here */
body {
background-color: white;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
</style>