چگونه AMP را روی سایت خود فعال کنید ؟

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

به دلیل اینکه AMP از جاوا اسکریپت پشتیبانی نمیکند در صفحات بهینه شده نمیتوانید از امکاناتی مانند : فرم ها , بخش کامنت و سایر بخشهایی از سایت که نیاز به جاوا دارد استفاده کنید.(در حال حاضر روشی برای استفاده از جاوا توسط iframe  در AMP ایجاد شده که میتوانید اینجا ببینید)

همچین قالب سایت باید با  محدودیت های AMP هماهنگ شود. برای مثال در AMP تمامی CSS ها باید به صورت in-line  و با حجم کمتر از ۵۰ کیلوبایت باشد و به دلیل حداقل رساندن زمان لود شدن فونت ها , باید آنها را توسط افزونه مخصوص amp-font استفاده کنید.

مولتی مدیا هم باید بهینه سازی شود و برای تصاویر باید از افزونه amp-img element استفاده کنید که طول و عرض تصاویر در آن مشخص شود.(این کار وقتی نسخه عادی سایت را به AMP تبدیل میکنید و طول و عرض تصاویر را در قالب اصلی سایت مشخص نکرده باشید برای شما بسیار زمانبر و سخت خواهد شد)

اگر از تصاویر متحرک GIF در سایت استفاده کرده اید باید از افزونه amp-anim extended component استفاده کنید.

برای استفاده از ویدئوهایی که روی هاست خودتان میزبانی شده از تگ  amp-video و برای استفاده از ویدئوهای یوتیوب (که اکثریت ویدئو ها روی این سایت میزبانی میشوند) از افزونه اختصاصی amp-youtube باید استفاده کنید.

همچنین قابلیت استفاده از اسلاید شو تصاویر توسط amp-carousel و لایت باکس تصاویر  توسط amp-image-lightbox  و همچنین شبکه های اجتماعی مانند : Twitter,Instagram,Facebook,Pinterest,Vine هم با افزونه هایاختصاصی خودشان وجود دارد.

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

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

 

<link rel="amphtml" href="http://www.example.com/blog-post/amp/">

 

همچنین در AMP Discovery page توضیح داده شده که بهتر از است از تگ های Schema.org هم برای شناسایی محتوی سایت استفاده کنید که در حال حاضر تگ های : article,recipe,review,video پشتیبانی میشود.

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

نمایش تبلیغات در صفحات بهینه شده با AMP

یکی از مشکلاتی که برای وب مسترها وجود دارد نمایش تبلیغات از شبکه های تبلیغاتی مختلف در صفحات بهینه سازی شده است به صورتی که برای سرعت صفحات مشکلی بوجود نیاید و همچنین تبلیغات توسط بلاکر ها مسدود نشود و به همین دلیل گوگل  افزونه اختصاصی amp-ad extended component را ارائه کرد و در حال حاضر شرکت های تبلیغاتی معروف زیر از آن استفاده میکنند :

  • Amazon A9
  • AdReactor
  • Google AdSense
  • AOL AdTech
  • Google Doubleclick
  • Flite
  • Taboola
  • Adform
  • DotAndAds
  • plista
  • Smart AdServer
  • Yieldmo

اگر میخواهید این افزونه را برای شبکه تبلیغاتی خود فعال کنید میتوانید نمونه های اجرا شده و مثال ها را در صفحه AMP GitHub مشاهده کنید.

آیا آنالیتیکز در AMP وجود دارد ؟

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

Amp-pixel element: یک تگ ساده برای استفاده از صفحات است که برای شمارش بازدید صفحات استفاده میشود و میتوانید مقادیر دیگری را به آن اضافه کنید که اینجا قابل مشاهده است  که از نمونه های آن : DOCUMENT_REFERRER  و Title است.

Amp-Analytics Extended Component : این افزونه اختصاصی برای AMP است و اجازه میدهد آمار دقیق تری از سایت داشته باشید و همانند نسخه دسکتاپ سایت به همه فعالیت های کاربر دسترسی داشته باشید.

اگر میخواهید از افزونه amp-analytics استفاده کنید باید فایل جاوای مربوطه را در <head> صفحات قرار داده و توسط چند مارک آپ JSON در قسمت <body> آنها را فراخوانی کنید.

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

صفحات AMP در گوگل چگونه نمایش داده میشود ؟

گوگل پیش نمایشی از قابلیت AMP در نتایج جست و جو ایجاد کرده است که میتواند با رفتن به لینک g.co/ampdemo توسط تلفن همراه یا شبیه سازی توسط Chrome Developer Tools و جست و جوی عبارتی مانند “Mars” چندد نمونه مقالات بهینه سازی شده توسط AMP را به صورت اسلاید شو مشاهده کنید.

برای مطالعه مقاله روی آن کلیک کنید تا نسخه بهینه سازی شده AMP آن را مشاهده کنید و برای مشاهده سایر مقالات به چپ و راست اسکرول کنید.

نمایش amp در نتایج گوگل

چند شرکت بزرگ مانند گاردین (صفحه بهینه شده) و واشینگتن پست (صفحه بهینه شده) از تکنولوژی AMP استفاده میکنند.

فعال سازی AMP روی وردپرس :

یکی از ساده ترین روش های استفاده از AMP روی سایتهای وردپرس نصب و فعال سازی پلاگین رسمی آن است که توسط  Automattic/Wordpres ایجاد شده و چندین بروزرسانی در  GitHub داشته است.

  • نصب افزونه رسمی

برای دانلود این افزونه به صفحه اختصاصی آن amp-wp در گیت هاب بروید و دانلود کنید

افزونه amp وردپرس

سپس مانند سایر افزونه ای وردپرس آن را نصب  و فعال سازی کنید و برای تست کافی است بعد از لینک مقالات خود از /amp/ استفاده کنید یا از ?amp=1 در انتهای لینک صفحات سایت خود استفاده کنید.

  • تست و بهینه سازی

برای تست فعال شدن قابلیت AMP روی سایت خود میتوانید به سرچ کنسول گوگل مراجعه کنید و ببینید که در قسمت Mobile Accelerated Pages صفحات سایت شما شناسایی شده است با خیر. این صفحات بعد از فعال سازی پلاگین با تگ rel=”amphtml”  شناسایی میشود . تنها ایراد این قسمت تاخیر در بروزرسانی اطلاعات است که وقتی شما تغییری در سایت ایجاد میکنید ممکن است تا چند روز طول بکشد تا در سرچ کنسول تغییرات جدید اعمال شود.

amp-validation-search-console-webmaster-tools-800x339

پیشنهاد میکنم برای سرعت بخشیدن به این پروسه از ترکیب سرچ کنسول Search Console  و  Chrome Validation استفاده کنید تا بتوانید مشکلات احتمالی را شناسایی و رفع کنید.برای این کار به صفحات بهینه شده توسط AMP در سایت خود در مروگر کروم بروید و دستور #development=1 را به انتهای لینک اضافه کنید  و با کلیدهای ترکیبی Ctrl+shift+i وارد قسمت Chrome Developer Tools شوید و به تب Console بروید.

در این قسمت اگر همه چیز درست باشد پیام “AMP validation successful” داده میشود و اگر خطایی وجود داشته باشد برای رفع آن راهنمایی های لازم داده میشود.

validating-amp-pages-in-chrome

با این روش میتوانید پلاگین مخصوص AMP را نصب کرده و صفحات سایت را برای این فریم ورک  بهینه کنید ولی این کار برای بهینه سازی کامل کافی نیست.برای اینکه بتوانید سایت خود را کاملا برای AMPبهینه کنید باید تغییراتی در کدنویسی قالب آن ایجاد کنید و معمولا بیشترین مشکلاتی که در قالب وجود دارد مشخص نشده ابعاد طول و عرض تصاویر , فعال نبودن https برای ویدئو ها و استفاده نکردن از تگ های Schema است.

  • افزودن مارک آپ های Schema به سایت

همانطور که قبلا خواندید برای بهینه سازی صفحات توسط AMP باید از تگ های Schema در صفحات استفاده کنید و برای تست استفاه درست از این تگ ها از ابزار Google Structured Data Testing Tool استفاده کنید. یکی از مشکلات رایج در این کار نمایش داده نشدن لوگوی شما در صفحات AMP است که برای رفع آن باید تغییرات زیر را در پلاگین انجام بدهید.

باید فایل class-amp-post-template.php را توسط FTP یا پنل مدیریت وردپرس (به قسمت افزونه ها بروید و از بخش ویرایشگر , افزونه AMP را انتخاب کنید) ویرایش کنید و

 

 

را با دستور زیر جایگزین کنید

 

$metadata['publisher']['logo'] = array(
'@type' => 'ImageObject',
'url' => 'http://domain.com/wp-content/uploads/logo-60.png',
'height' => 60,
'width' => 170,
);

باید آدرس لوگوی مورد نظرتان را در قسمت url وارد کنید و طول و عرض آن را بر اساس پیکسل مشخص کنید. اندازه ایده آل برای لوگو طول ۶۰ پیکسل و عرض کمتر از ۶۰۰ پیکس است. اطلاعات بیشتر در مورد تصاویر اینجاببینید.

  • استفاده از آنالیتیکز در پلاگین AMP وردپرس

وقتی نتوانید آماری از صفحات ایجاد شده برای AMP داشته باشید در عمل هیچ کنترل و اطلاعاتی از رفتار کاربرانتان نخواهید داشت.افزونه وردپرس  AMP  به صورت پیش فرض از قابلیت amp-analytics پشتیبانی نمیکند اما به راحتی قابل فعال سازی است.

برای فعال سازی این قابلیت باید فایل amp-post-template-actions.php  را توسط ftp یا ادیتور وردپرس ویرایش کنید و کد زیر را به انتهای فایل اضافه کنید :

 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 بسیار ساده است و فقط مقداری زمان برای مطالعه و آشنایی با مفاهیم آن نیاز دارید.