روش فعال سازی AMP در سایت

روش فعال سازی AMP در سایت

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

AMP چیست؟

گوگل اخیرا یکـی از ابزار ها تازه خود، به نام AMP را در اوایل سـال 2016 منتشر کرده می باشد. با دقت به افزوده شدن بهره گیری از تلفن همراه اکثر اشخـاص برای دست یابی به اطلاعات دنیای وب از تلفن همراه خود بهره گیری می نمایـند و آمار بهره گیری از تلفن همراه روند صعودی خود را می پیماید. در سرانجام سرعت لود صفحات در تلفن همراه از ارزش خاص ای برخوردار می باشد. گوگل اخیرا از ساختـار ورک 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 بهره گیری نمایید می بایست فایل جاوای مربوطه را در

صفحات قرار داده و بوسیـله چند مارک آپ JSON در بخـش

آنان را فراخوانی نمایید .

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

 

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

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

 

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

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

• نصب پلاگین رسمی

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

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

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

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

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

در این بخـش اگر تمام چیز درست باشد پیغام “AMP validation successful” داده می شود و چنان چه ارور یی وجود داشته باشد برای از میـان بردن آن راهنمایی های ضـروری داده می شود .

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

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

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

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

if ( $site_icon_url ) {

$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://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’ );
?>

}
add_action( ‘amp_post_template_footer’, ‘xyz_amp_add_analytics’ );
function xyz_amp_add_analytics( $amp_template ) {
$post_id = $amp_template->get( ‘post_id’ );
?>
}

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

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

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