گوگل AMP یه روش خفنه که مثل دوپینگ عمل می‌کنه و می‌تونه سرعت لود پیجتون رو تو صفحات موبایل افزایش بده و یجورایی باعث بهینه سازی صفحات سایت شما برای گوشی موبایل بشه. گوگل این فاکتور رو با اصطلاح Accelerated Mobile Pages در ۲۳ فوریه ۲۰۱۶ به بازار معرفی کرد.

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

گوگل AMP چیه؟

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

تو شرایط عادی اینطوریه که مثلاََ شما یه عبارت خبری رو جستجو می‌کنین و گوگل اون صفحاتی رو در رده اول نشون میده که گوگل AMP فعال دارن!

مزیت سایت با AMP فعال

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

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

مهندس پینترست جناب Jon Paris گفته:

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

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

همچنین Jonathan Abrams، سرمایه گذار Nuzzel، تو یه مصاحبه‌ای راجع به سرعت وبسایت‌ها گفته:

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

راستش رو بخوایید من از هر ترفندی برای سرعت بخشیدن به لود پیج استفاده کردم مثل کاهش زمان پاسخ سرور، کش مرورگر، بهینه سازی تصاویر و کلاََ هرکار دیگه‌ای که فکرش رو بکنین!

و وقتی گوگل AMP رو معرفی کرد این شانس رو داشتم که ببینم این فاکتور واقعاََ می‌تونه مثل یه جادو عمل کنه و باعث کاهش سرعت لود پیج بشه یا نه و متوجه شدم که بلأخره وقتش رسیده بود ناشران گوگل بتونن یه عامل سحرآمیز و موثر در سئو رو به کار بگیرن!

صفحه شتاب دهی شده فیسبوک یا اپل یا گوگل؟!

همونطور که می‌دونین در حال حاضر تو قرنی هستیم که رویاهامون راجع به تکنولوژی داره به واقعیت تبدیل میشه.

همه در جریانیم که بین گوگل، اپل و فیسبوک یه حس حسادت و رقابتی درباره فضای تکنولوژی وجود داره و با افزایش استفاده از گوشی موبایل، این سه تا شرکت برای آماده کردن یه وبسایت بهتر و سریع‌تر به تکاپو افتادن و می‌خوان از هم دیگه پیشی بگیرن!

به گفته گوگل ۴۰% کاربر ها، وارد شدن به پیجی که لودش بیشتر از ۳ ثانیه طول بکشه رو بیخیال میشن، حالا حساب کنین که وقتی این زمان برای موبایل حداقل تا هشت ثانیه‌ست، چه اتفاقی برای کاربر ها میفته! به‌نظرتون میشه با این سرعت کند مخاطب جذب کرد؟ اونم وقتی که خیلی از مردم سرچ هاشون رو با تلفن همراه انجام میدن!

پس اپل، فیسبوک و گوگل تلاش کردن مدلی ارائه بدن که انتشار محتوا تو گوشی موبایل سرعت بگیره و ناشر نگران کندی بارگذاری نباشه.

 سیر تغییر انتشار محتوا در موبایل

  • می ۲۰۱۵ (اردیبهشت ۱۳۹۴): فیسبوک Instant Article رو منتشر کرد.
  • ژوئن ۲۰۱۵ (خرداد ۱۳۹۴): اپل Apple News رو منتشر کرد.
  • اکتبر ۲۰۱۵ (مهر ۱۳۹۴): گوگل Accelerated Mobile Pages  رو معرفی کرد.

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

تو این روش وبسایتِ ناشر ، اول ذخیره و بعد بارگذاری میشه که این باعث میشه ناشر حواسش به صفحه‌ش باشه و بهتر کنترلش کنه تازه برخلاف فیسبوک و اپل، شتاب دهنده صفحات موبایل به ناشر اجازه میده که دستمزدش رو تنظیم کنه و شما می‌تونین با ابزار تست سرعت سایت، سرعت صفحه خودتون رو بعد از اعمال این آپشن چک کنین!

Christian Cantrell در رابطه با Instant Article فیسبوک و Apple News میگه که:

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

با این تفاسیر بازیگر اصلی داستان کی می‌تونه باشه؟

Noah Szubski مدیر ارشد محصولات Daily Mail گفته:

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

بررسی فنی AMP

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

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

بیشتر از ۵۰۰۰ توسعه دهنده روی مخزن Github که شتاب دهنده تلفن‌های همراه از شرکت گوگل است، کار می‌کنن و شاید برای همینه که AMP مثل یه قدرت جادوییه که باعث میشه اوضاع برای کاربران موبایل شگفت انگیز باشه و البته همه چیز سریع‌تر اتفاق بیفته.

AMP عناصر اصلی‌ای که باعث ساخت صفحات موبایل میشن رو مورد بررسی قرارداده و در رابطه با این بررسی فریم وورک اصلی اون به سه بخش تقسیم میشه:

AMP HTML

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

AMP JS

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

AMP CDN (Content Delivery Network)

همونطور که از اسمش پیداست، تو این بخش، CDN محتوای بهینه شده با AMP تون رو دریافت و سپس اون رو برای تحویل سریع، ذخیره میکنه.

درکل Accelerated Mobile Pages از توسعه دهنده ها انتظار داره که markup هاشون رو برای تولید صفحات ساده‌تر و درنتیجه سریع‌تر، کاهش بدن و صفحاتی که این مورد رو رعایت کنن در نتایج جستجو موبایلی گوگل، ارتقا رتبه خوبی به‌دست میارن.

بااین تفاسیر، حالا دیگه ناشران دوبرابر صفحات وب و دو برابر قدرت در SERPها دارند. منظورم اینه که اگه یه وبسایت ساختین باید اون رو در دو نسخه ارتقا بدین، یکی نسخه دسکتاپ و یکی نسخه AMP برای موبایل ها.

سرعت گوگل AMP نسبت به موبایل

گفته میشه که بهینه سازی تلفن همراه برای ارتقا سرعت وبسایت ضروریه، غیر از اون می‌تونه تو رتبه بندی سئو سایت هم تاثیر زیادی داشته باشه و صفحه شما رو جز صفحه‌های مورد تأیید سئو قرار بده.

در کل ارتقای پیج با AMP باعث میشه یه وبسایت موبایل دوست Mobile friendly داشته باشین.

ولی خب ممکنه این سوالم براتون پیش بیاد که آیا واقعاََ لازمه پبج گوگل AMP داشته باشم؟

باید بگم گوگل AMP طراحی کمتری رو پیشنهاد میده اما در عوض سرعت لود صفحه رو بالا میبره. می‌دونین چرا؟

چون هر تگ جاوااسکریپت ، صفحه وب رو زیر ۱۰۰ هزارم ثانیه لود میکنه، پس هرچی تگ کمتری داشته باشین، سرعت بارگذاری بیشتر میشه.

اگه بخوام قضیه رو خیلی ساده کنم باید بگم:

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

پس جواب سوال تیتر میشه: بله! گوگل AMP از موبایل سریع‌تره.

پیدا کردن صفحه های بهینه شده با گوگل AMP

اگه شما هم مثل من تا اسم AMP رو شنیدید سراغ مرورگرتون رفتین و خواستین با یه سرچی مثل “بچه پاندا” امتحانش کنین و اون رو ببینین، باید بگم که خب همچین چیزی به AMP ختم نمیشه و احتمالاََ نمی‌تونین پیجی با این مضمون که با شتاب دهنده صفحات موبایل بهینه شده رو پیدا کنین.

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

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

تاثیر گوگل AMP روی نتایج جستجوی ارگانیک

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

درسته که فهمیدیم شتاب دهنده صفحات موبایل یه فاکتور رتبه بندی نیست ولی روی تعداد کلیک، ایمپرشن و تجربه کاربر تاثیر داره که همه این‌ها هم می‌تونن روی سئو اثر بذارن، پس هر آدم عاقلی لازم میدونه که همچین چیز مهمی رو از دست نده و نهایت استفاده رو ازش کنه.

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

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

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

تأثیر گوگل AMP روی نتایج جستجوی غیرارگانیک

در حال حاضر Google Adwords برای برندهایی که تلاش می‌کنن جای بهتری رو تو فهرست به دست بیارن یه راه حل شگفت انگیزه!

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

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

گوگل قبلاََ هم اظهار کرده بود که برای ناشران گزینه‌های زیاد تبلیغاتی رو در AMP قرار میده و راجع به این مورد خیلی خلاصه میگه:

  • سرعت بیشتر: سرعت تبلیغات AMP به همون اندازه زیاده که خود AMP سریعه.
  • زیبایی: تبلیغات AMP با زیبایی و خلاقیت همراهن.
  • امنیت: تمامی تبلیغات باید شامل HTTPS باشن.
  • باهم بودن: تبلیغات AMP باید از طرف کسب و کارهای اصلی پشتیبانی بشن!

تاثیر گوگل AMP بر روی نتایج جستجوی محلی

اگه دقت کنین متوجه میشین که نتایج جستجوهای محلی هم تحت تأثیر گوگل AMP قرار گرفتن، شاید بپرسین چطوری!؟ راستش به‌نظر من گوگل از رفتار کلیک یا همون Click behavior تصمیم میگیره که کدوم یکی از نتایج، محتوا محلی یا AMP ، برای شخص مناسب تره!

گوگل AMP

نحوه ساخت صفحات گوگل AMP روی وردپرس wordpress

برای ساخت شتاب دهنده صفحات موبایل برای بهینه سازی وب سایت لازم نیست برین سراغ یوتیوب یا هرچیز دیگه، چون هر بخش از اون کار خاصی رو میطلبه، البته فکر نکنین که این‌کار مثل شکستن شاخ غوله، اتفاقاََ به آسونیِ دانلود یه برنامه‌ست!

  1. وارد سایت Github بشین و فایل زیپ amp-wp رو دانلود کنین.
  2. حالا وارد وردپرس بشین و Add new و سپس Upload Plugin رو کلیک کنین.
  3. فایل زیپ رو آپلود کنین.
  4. پلاگین رو فعال کنین.
  5. برای این که کارکردن پلاگین رو تأیید کنین، با اضافه کردن “/amp/” یه مقاله تو سایتتون جستجو کنید.

دو مورد دیگه هم هست که باید برای چک کردن مجدد کار پلاگین بهش توجه کنید:

  1. حواستون باشه تگ rel=canonical به مقاله اصلی اشاره می‌کنه نه نسخه AMP شده.
  2. تگ rel=amphtml و herf=AMP PAGE به مقاله اصلی اضافه شده باشه.

بعد از ساختن گوگل AMP چیکار کنیم؟

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

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

۱. تایید صفحات:

قدم بعدی تأیید کردن صفحاتتونه که خودش چندتا مرحله ست:

  • از کروم استفاده کنین، به این صورت که در آخر URL پست وبلاگ AMP این عبارت رو اضافه کنین development=1#.
  • تو مرحله دوم یه کلیک راست کنین و Inspect رو کلیک کنین.
  • پیجتون رو رفرش کنین.
  • حالا باید زیر کنسول بنویسه که تأیید AMP تون موفق بوده!

۲. Schema markup:

بعد از این که مراحل تأیید صفحه اوکی شدن، باید بریم سراغ تأیید schema markup، البته برای این‌کار هم یه سری مرحله خاص وجود داره که الان یکی یکی براتون میگم:

  • URL پست وبلاگ AMP رو به ابزار تست داده‌های ساختار یافته گوگل وصل کنین.
  • اگه با لوگو مشکل دارین، فقط کافیه که پلاگین رو ادیت کنین.
  • وارد Plugin > Editor بشین.
  • AMP رو بعنوان پلاگینی که قراره ادیت کنین انتخاب کنین.
  • amp-wp-master/includes/class-amp-post-template.php رو تو قسمت راست پنل پیدا کنین.
  • و سپس کد زیر رو به کد بعدی تغییر بدین.
                            
            $metadata[‘publisher’][‘logo’] = array(
‘@type’ => ‘ImageObject’,
‘url’ => $site_icon_url,
‘height’ => self::SITE_ICON_SIZE,
‘width’ => self::SITE_ICON_SIZE,
                            
            
                            
            $metadata[‘publisher’][‘logo’] = array(
‘@type’ => ‘ImageObject’,
‘url’ => ‘http://www.yourdomain.com/wp-content/uploads/name-of-your-logo.png’,
‘height’ => 60,
‘width’ => 65,
                            
            

۳. گوگل آنلتیکس:

آخر از همه لازمه که گوگل انلیتیکس رو تأیید کنین که طبق مراحل زیر انجام میشه:

  • تعیین کردن محل amp-wp-master/includes/class-amp-post-template.php در پنل سمت راست.
  • اضافه کردن اسکریپت زیر به آخر اون.
                            
            add_action( 'amp_post_template_head', 'amp_post_template_add_analytics_js' );
function amp_post_template_add_analytics_js( $amp_template ) {
	$post_id = $amp_template->get( 'post_id' );
	?>
	<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
	<?php
}

add_action( 'amp_post_template_footer', 'xyz_amp_add_analytics' );

function xyz_amp_add_analytics( $amp_template ) {
    $post_id = $amp_template->get( 'post_id' );
    ?>
	<amp-analytics type="googleanalytics" id="analytics1">
	<script type="application/json">
	{
	  "vars": {
		"account": "UA-XXXXX-Y"
	  },
	  "triggers": {
		"trackPageview": {
		  "on": "visible",
		  "request": "pageview"
		}
	  }
	}
	</script>
	</amp-analytics>
    <?php
}
                            
            
  • برای خوندن شناسه گوگل انلتیکس، “UA-XXXXX-Y” اکانت خودتون رو تغییر بدین.

مزایا گوگل AMP

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

  • این ابزار باعث بهبود سرعت لود وب سایت شما و امنیت و عملکرد بهتر در گوشی موبایل میشه که این عوامل جز فاکتورهای رتبه بندی سایت در گوگل است.
  • افزایش نرخ کلیک و در نتیجه افزایش بازدید از سایت!
  • کاملاََ رایگان و منبع باز.
  • می‌تونه نرخ تبدیل سایت رو افزایش بده.
  • تصاویر رو به‌صورت خودکار فشرده سازی می‌کنه.
  • به تازگی امکان اضافه کردن تبلیغات به AMP اضافه شده که خودش می‌تونه منبع درآمد خوبی باشه.
  • به عملکرد وبسایت کمک می‌کنه و مثلاََ فریم وورک‌های حجیم لود نمیشن!
  • AMP Lite باعث افزایش سرعت لود تو اتصالات ضعیف میشه که به گفته گوگل این قابلیت، وبسایت رو ۴۵% نسبت به قبل فشرده‌تر می‌کنه.

معایب گوگل AMP

بله خب نمیشه یه ابزاری کاملاََ خوب باشه و هیچ معایبی نداشته باشه، یجورایی این قانون کاره که بعد از هر مزیتی یه سری عیب هم گفته بشه!!

  • ممکنه به نرخ تبدیلتون آسیب بزنه و نتیجه منفی داشته باشه.
  • از اسکریپت‌ها و برنامه‌هایی استفاده کنه که هنوز توسط بعضی مرورگرها پشتیبانی نمیشن.
  • جز فاکتورهای رتبه بندی نیست ولی در آینده‌ای نزدیک ممکنه بشه و تأثیر زیادی روی سایتتون بذاره!
  • می‌تونه باعث نگرانیتون بشه که بعد از بهینه سازی چه اتفاقی برای وب سایتتون میفته.
  • اگه توسعه دهنده وب نباشین، فعالسازی AMP یکم براتون سخت میشه که خوشبختانه ورد پرس با اضافه کردن یه سری افزونه این کار رو راحت‌تر کرده!
  • در بعضی از مرورگرهای قدیمی مثل Internet Explorer 11 پشتیبانی نمیشن.
  • برای بعضی‌ها در میزان نرخ مشارکت و دفع کاربری مشکل ساز بوده.

 

 

کلام آخر راجع به صفحه های شتاب دهی شده

بعضی از ماها اصلاََ برامون مهم نیست که توی موبایل چطوری دیده میشیم، درواقع کل تمرکزمون روی دسکتاپه!

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

گوگل اعلام کرده که بیشتر از ۵۰% سرچ‌ ها تو جهان با گوشی موبایله!!

اصلاََ شما چه از گوگل AMP استفاده کنین چه نه، یه چیز مشخصی وجود داره:

کاربر یه صفحه پرسرعت می‌خواد و شما باید بتونین این خواسته رو برآورده کنین!