amp چیست
تیر ۲۲, ۱۳۹۵

آشنایی با Accelerated Mobile Pages و نصب آن


با گسترش استفاده از تلفن های هوشمند و اینترنت موبایلی سرعت بخشیدن و بهینه سازی صفحات سایتها برای موبایل ها یک نیاز اساسی است و به همین دلیل گوگل در حال معرفی Accelerated Mobile Pages (AMP) یا صفحات بهینه شده برای موبایل است و در نتایج جست و جوی موبایل از این تکنولوژی جدید برای رتبه بندی سایتها استفاده میکند که در ادامه توضیحاتی در مورد این تکنولوژی و روشهای استفاده از آن داده میشود.

Accelerated Mobile Pages چیست

AMP  چیست ؟

در ماه اکتبر سال گذشته گوگل از فریم ورک AMP رونمایی کرد  که استفاده از آن کمک فراوانی به ایجاد صفحات بهینه شده و پر سرعت برای موبایل میکرد. این فریم ورک به صورت متن باز Open Source  ارائه شده است تا توسط تمامی برنامه نویسان به راحتی قابل استفاده و توسعه باشد و بتوانند سرعت بارگذاری صفحات سایت روی تلفن همراه را بهبود بدهند و با این کار تجربه کاربری بهتری ارائه کنند.

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

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

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

۱ – AMP HTML : چند دستور ساده اچ تی ام ال که به صفحات سایت شما اضافه میشود و اگر آشنایی با این زبان داشته باشید میتوانید به راحتی تگ های آن را به سایت اضافه کنید جهت آشنایی بیشتر با پیش نیازها و دستورات لازم برای اجرای AMP  به سایت رسمی آن مراجعه کنید.

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

۳- AMP CDN  : یک شبکه توزیع محتوی Content Delivery Network که صفحات AMP سایت شما را شناسایی میکند و با کش کردن آنها و بعد از بهینه سازی برای نزدیک ترین کاربر نمایش میدهد.

چگونه 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 پشتیبانی میکنند بتوانند صفحات بهینه سازی شده سایت شما را پیدا کنند باید از تگ زیر  در نسخه اصلی صفحات استفاده کنید که نشان میدهد برای آن صفحه نسخه بهینه شده ای هم وجود دارد .

 

همچنین در 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 را انتخاب کنید) ویرایش کنید و

 

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

 

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

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

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

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

 

فراموش نکنید که کد UA-xxxxx-y را با کد آنالیتیکز مخصوص سایت خود جایگزین کنید

در نهایت سایت خود را مجددا در سرچ کنسول تست کنید تا از تغییرات انجام شده مطمئن شوید و با این ۴ مرحله میتوانید یک سایت با تنظیمات عادی بهینه شده با AMP و قابلیت آمارگیری ایجاد کنید.

 

حرف آخر

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

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