با توجه به گسترش استفاده از اسمارت فون ها و اینترنت موبایلی آمار استفاده از موبایل روند صعودی دارد در نتیجه سرعت بخشیدن به سرعت بارگذاری صفحات در موبایل اهمیت ویژه‌ای دارد به همین دلیل گوگل در اوایل سال 2016 از ابزار جدید خود به نام 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 و با حجم کمتر از 50 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 است و اجازه می‌دهد آمار دقیق تری از سایت داشته باشید و همانند نسخه دسکتاپ سایت به همه فعالیت های کاربر دسترسی داشته باشید.
CSS syntax error in tag ‘style amp-custom’.
سلام و ممنون از سایت خوبتون
لطف میفرمایین بگین این ارور در سرچ کنسول وردپرس بدون کد نویسی چطوری رفع میشه
ممنونم