سئوفناوریمدیریت سرورمقالات وب

مقدمه ای بر شتاب دهنده صفحات موبایل

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

سرعت همیشه ملاک بوده است:

 در عصر سرعت ، صفحه ای که بارگذاری آن بیشتر از چند ثانیه طول بکشد نمی تواند جذابیت خاصی برای بازدید کنندگان داشته باشد. این موضوع بر روی دستگاه های موبایلی از اهمیت ویژه ای برخوردار است.مطالعات انجام شده نشان داده است که سرعت بارگذاری سایت تاثیر مستقیمی بر روی فروش دارد. به عنوان مثال بعد از یک ثانیه نرخ تبدیل ۲۷ درصد افت پیدا می کند و  بونس ریت بعد از همین مقدار تاخیر تا ۵۶ درصد کاهش پیدا خواهد کرد. در زمینه سئو، سرعت  بارگذاری صفحات سایت یکی از فاکتورهای رتبه بندی در موتورهای جستجویی همچون گوگل است. بنابراین اگر سرعت بارگذاری پایین باشد دیده شدن سایت در موتورهای جستجو به خطر خواهد افتاد. تجربه کاربری، اهداف تجاری و قابلیت دیده شدن سایت در موتورهای جستجو توسط فاکتور سرعت تحت تاثیر قرار می گیرد. طراحی واکنش گرای سایت با عملکرد مناسب می تواند بهترین راه حل برای این موضوع باشد. خوشبختانه پروژه AMP که توسط گوگل ترویج یافته است یک پروژه متن باز است و باید مورد استفاده قرار گیرد.

مروری بر قابلیت های AMP:

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

  • زیر مجموعه ای از HTML با چند تگ جدید باید توسط رندر جاوا اسکریپت به کار گرفته شود.
  • تنها زیرمجموعه ای از CSS قابل استفاده و مجاز است.
  • یک جاوا اسکریپت برای بررسی آنها استفاده می شود و تنها چند اسکریپت برای اکستنشن ها مجاز است. تمامی این موارد از طریق CDN گوگل تامین می شود.

آناتومی یک صفحه AMP:

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

<!doctype html>

<html amp lang=”en”>

  <head>

    <meta charset=”utf-8″>

    <link rel=”canonical” href=”__CANONICAL_URL__” >

    <meta name=”viewport”

          content=”width=device-width,minimum-scale=1,initial-scale=1″>

    <style>body {opacity: 0}</style>

    <noscript>

      <style>body {opacity: 1}</style>

    </noscript>

    <style amp-custom>

      __YOUR_OWN_CSS__

    </style>

    <script async src=”https://cdn.ampproject.org/v0.js”>

    </script>

  </head>

  <body>

    Your actual content.

  </body>

</html>

همانطور که مشاهده می کنید، سبک و استایل پیش فرضی برای اینکار وجود دارد و یک اسکریپت خاص بر روی CDN میزبانی می شود.

استایل ها:

 شما می توانید استایل های جدید را داخل عنصر <style amp-custom> اضافه کنید. همچنین باید توجه داشته باشید که همه قابلیت ها مجاز نیست.

جاوا اسکریپت:

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

این مقاله را نیز بخوانید: AMP یا Accelerated Mobile Pages چیست؟

پرسش ها و پاسخ هایی در مورد AMP:

 

 چگونه می توانم کدهای AMP HTML خود را اعتبار سنجی کنم؟

 اعتبار سنجی کدها در داخل DevTools کروم فراهم شده است. ناوبری با  هش#development=1  که در انتهای هر صفحه URL قرار دارد اعتبار سنجی را ممکن می سازد.

چگونه می توانم یک صفحه AMP HTML را در یک صفحه HTML معمولی ارجاع دهم؟

صفحات AMP به عنوان نوع جایگزین محتوا شناخته شده اند و کمی شبیه فید RSS هستند. هنوز هم، مکانیسم کشف خودکار که  برای RSS  مورد استفاده قرار می گیرد در این مورد به طور کامل اجرا نمی شود. به همین خاطر باید نوع دیگری از MIME همچون text/amphtml ایجاد شود.  ما می توانیم از مقدار جدیدی برای <link> در هد صفحه معمولی استفاده کنیم. به کد زیر توجه کنید:

<link rel=”amphtml” href=”__MY_AMP_URL__”>

 

چگونه می توانم به مرورگرها بگویم که صفحه AMP HTML وجود دارد؟

 ما می توانیم این موضوع را به اطلاع موتورهای جستجو برسانیم . از آنجایی که نمی خواهیم به خاطر محتویات تکراری دچار جریمه گوگل شویم آن را به عنوان canonical اعلام می کنیم. به کد زیر توجه کنید:

<link rel=”canonical” href=”__MY_REGULAR_HTML_PAGE__”>

استفاده از این فرمت جدید چه مزیتی برای سئو دارد؟

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

چرا AMP HTML قانون CSS ای دارد که  عناصر <body> را پنهان می کند؟

زمانی که جاوا اسکریپت توسط مشتری پشتیبانی نشود، به طور پیش فرض عناصر <body> توسط CSS پنهان خواهد شد.  زمانی که طرح کلی صفحه توسط جاوا اسکریپت AMP رندر شد، بدنه ای که به صورت موقت پنهان شده است از نمایش صفحات شکسته و معیوب جلوگیری می کند. زمانی که از فونت CSS استفاده می شود این گزینه از افکت FOUT جلوگیری می کند. در یک صفحه AMP، استایل Opacity زمانی که فونت مورد استفاده در صفحه بارگذاری می شود حذف خواهد شد.

 چگونه می توانم یک تصویر را در آن تعبیه کنم؟

خوب باید بدانید که عنصر <img> توسط AMP پشتیبانی نمی شود و توسط عنصر <amp-img> جایگزین خواهد شد. تصویر AMP باید  عرض و ارتفاع آن را تنظیم کند و پشتیبانی برای این صفت فراهم آورد. به کد زیر توجه کنید:

<div class=”image_container”>

  <amp-img

    src=”pine-trees-snow.jpg”

    alt=”Pine trees covered with snow”

    width=”220″ height=”318″>

</div>

 

چگونه می توانم ویدئویی در آن تعبیه کنم؟

عنصر <video> توسط عنصر amp-video جایگزین شده است و یک کامپوننت درون ساخت محسوب می شود. در میان اکستنشن های پشتیبانی شده، می توانید اکستنشن یوتیوب را برای مدیریت ویدئوهای بارگذاری شده در یوتیوب پیدا کنید. همانند سایر اکستنش ها ، باید جاوا اسکریپت خاصی در <head> خود call کنید  که از آن پشتیبانی می کند. در این شرایط  از کدهای زیر استفاده کنید:

<script async

  custom-element=”amp-youtube”

  src=”https://cdn.ampproject.org/v0/amp-youtube-0.1.js”>

</script>

اگر می خواهید از فایل های ویدئویی واکنشگرا استفاده کنید مقدار عرض و ارتفاع اجزا باید نسبت۱۶:۹ داشته باشد:

<amp-youtube

  data-videoid=”SqT0glwuYYo”

  layout=”responsive”

  width=”480″ height=”270″>

</amp-youtube>

 

آیا کامپوننت های دیگری در دسترس هست؟

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

  • amp-ad: کانتینری(ظرف) برای نمایش تبلیغ است.
  • amp-img: جایگزینی برای عنصر <img> در Html است.
  • amp-pixel: به عنوان پیکسل ردیابی و پیگیری برای شمارش بازدید از صفحات به کار می رود.
  • amp-video: جایگزینی برای عنصر <video> است.

لیست اکستنشن ها نیز به شرح زیر است:

  • amp-anim: تصاویر انیمیشنی مدیریت شده به خصوص GIF
  • amp-audio: جایگزینی برای عنصر <audio> است.
  • amp-carousel: کاروسل عمومی برای نمایش محتوای مشابه در طول محور افقی است.
  • amp-fit-text: اندازه فونت گسترش یافته یا کوتاه شده برای تطبیق با محتوایی است که در فضای مشخصی نمایش داده می شود.
  • amp-iframe: نمایش عنصر iFrame است.
  • amp-image-lightbox: اجازه مشاهده image lightbox یا تجریبات مشابه را می دهد.
  • amp-instagram: اینستاگرام تعبیه شده را نشان می دهد.
  • amp-twitter: توییت واحدی را نمایش می دهد.
  • amp-youtube: ویدئوهای یوتیوب را نشان می دهد.

چگونه می توانم تبلیغات Google AdSense را نمایش دهم؟

کامپوننت amp-ad  برای نمایش  تبلیغات مورد استفاده قرار می گیرد. همانند سایر کامپوننت ها، مقدار عرض و ارتفاع  باید تنظیم گردد.برای نمایش تبلیغات گوگل، کد زیر باید  مورد استفاده قرار گیرد. فراموش نکنید که مقدار data-ad-client و data-ad-slot باید بر اساس اطلاعات شخصی تنظیم گردد.

<amp-ad width=”300″ height=”200″ type=”adsense”

  data-ad-client=”ca-pub-1234567890123456″

  data-ad-slot=”1234567890″>

</amp-ad>

چگونه می توانم بازدیدکننده های خود را با گوگل آنالیتیکس پیگیری کنم؟

 ردیاب ها  از طریق عنصر amp-pixel برای شمارش بازدیدهای انجام شده از صفحات به کار گرفته شده اند. برای استفاده از گوگل آنالیتیکس بر روی صفحات AMP، باید از پروتکل اندازه گیری آنالیتیکس پیروی کنید:

<amp-pixel src=”https://ssl.google-analytics.com/collect?v=1

                &tid=UA-12345678-1&t=pageview&cid=__CID__

                &dt=__PAGE_TITLE__&dl=__PAGE_URL__

                &z=__RANDOM_STRING__”>

</amp-pixel>

همانطور که مشاهده کردید شما می توانید به سادگی صفحات کاربردی با تصاویر، ویدئوها، تبلیغات و ردیاب ها ایجاد کنید. انیمیشن ها، کاروسل ها، SVG ها و سایر کامپوننت ها برای ایجاد تجربه کاربری بهتر در دسترس شما قرار دارند.

مقدمه ای بر شتاب دهنده صفحات موبایل
امتیاز دهید
برچسب ها

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

بستن