آموزش فعال سازی افزونه AMP در وردپرس

توسط با بدون دیدگاه سایت سازها

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

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

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

 

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

 

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

  • آدرس عادی : http:// sitename.com/post
  • آدرس AMP : http:// sitename.com/post/amp
  • یا : http:// sitename.com/post/?amp=1

تنظیمات AMP وردپرس بسیار ساده است و به شما کمک میکند تا یک سری تغییرات در ظاهر انجام بدید.برای اینکار وارد بخش “نمایش” یا Appearance در محیط مدریت وردپرس بشید و روی AMP کلیک کنید:

شما میتوانید پس زمینه، متن هدر و رنگ هارو تغییر بدید:

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

نکات مهم در مورد  افزونه AMP وردپرس

Category , Tag ها فعلا با این افزونه پشتیبانی نمیشوند و صفحات آن به AMP تبدیل نمیشود.

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

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

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

  • ورژن اصلی برای کامپیوتر
  • ورژن موبایل برای گوشی های همراه
  • ورژن AMP که بهینه شده برای موبایل است و از ورژن موبایل  سرعت بسیار بالاتری دارد.

جمع بندی کلی:

ابزار google amp یکی از قدرتمند ترین و ساده ترین افزونه های افزایش سرعت و بهینه سازی سایت در تلفن های همراه است که برای خیلی از سایت ها سود مند بوده است.

حتما بعد نصب و فعال سازی AMP وردپرس آن را در تلفن های همراه تست کنید اگر مشکلات زیادی را مشاهده کردید این افزونه را غیر فعال کنید یا از افزونه های کمکی مانند Glue for Yoast SEO & AMP استفاده کنید

آشنایی با نحوه نصب فریم ورک Accelerated Mobile Pages

توسط با بدون دیدگاه سایت سازها

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

فریم ورک AMP چیست؟

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

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

به طور کلی این فریم ورک امپ بر اساس ۳ بخش زیر اجرا می‌شود :

 

  • AMP HTML : چند دستور ساده html که به صفحات سایت شما اضافه می‌شود و اگر آشنایی با  زبان html داشته باشید قادر خواهید بود به راحتی تگ های آن را به سایت اضافه کنید. جهت آشنایی بیشتر با پیش‌نیازها و مستندات لازم برای اجرای AMP  به سایت رسمی آن مراجعه کنید.
  • AMP JS : مجموعه دستورات  جاوا که توسط سایت فراخوانی می‌شود و مدیریت منابع را بر عهده دارد که این فایل جاوا به صورت اختصاصی برای فریم ورک AMP نوشته شده است و باید دقت کنید که این فریم ورک با سایر اپلت های جاوا که به صورت شخصی کد نویسی شده‌اند همخوانی ندارد.
  • AMP CDN  : یک شبکه توزیع محتوای Content Delivery Network که صفحات AMP سایت شما را شناسایی می‌کند و با کش کردن آن‌ها و بعد از بهینه‌سازی برای نزدیک‌ترین کاربر نمایش می‌دهد.

نحوه فعال‌سازی فریم ورک AMP  بر روی سایت

 

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

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

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

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

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

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

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

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

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

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

 

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

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

آیا  امکان استفاده از  آنالیتیکز در AMP وجود دارد ؟

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

برای فعال‌سازی آنالیتیکز در AMP  می‌توان از دو روش زیر بهره برد:

  • Amp-pixel element: یک تگ ساده برای استفاده از صفحات است که برای شمارش بازدید صفحات استفاده می‌شود و می‌توانید مقادیر دیگری را به آن اضافه کنید که اینجا قابل مشاهده است  که از نمونه‌های آن : DOCUMENT_REFERRER  و Title است.
  • Amp-Analytics Extended Component : این افزونه اختصاصی برای AMP است و اجازه می‌دهد آمار دقیق تری از سایت داشته باشید و همانند نسخه دسکتاپ سایت به همه فعالیت های کاربر دسترسی داشته باشید.