AMP چیست؟ + تأثیر AMP در سئو سایت چقدر است؟ + |ویدیو|

⚡ سلامی به چالاکیِ صفحات AMP و درودی با طعم خداحافظیِ غم‌انگیز? گوگل‌پلاس ⚡

❔ آیا با تکنولوژی Google AMP آشنایی دارید؟

❔ آیا می‌دانید AMP (درحال‌حاضر) هیچ تأثیری در سئو ندارد؟

❔ آیا از دلیل پیدایش AMP مطلع هستید؟

❔ آیا با نقاط ضعف و قوت AMP آشنا هستید؟

❔ آیا می‌دانید کدهای AMP به‌اصطلاح html دست‌کاری‌شده هستند؟

❔ آیا می‌دانید صفحات amp را چگونه به ربات گوگل معرفی کنید؟

❔ آیا نقشه راه طراحی نسخه‌ی amp صفحات را می‌دانید؟

❔ آیا با نحوه‌ی پیاده‌سازی AMP در وردپرس آشنا هستید؟

❔ آیا می‌دانید چگونه از سلامت ساختار کدنویسی AMP مطمئن شوید؟

تاریخچه‌ای مختصر از AMP

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

? آمار جالب و عجیب:‌ ۵۲ درصد کاربران اینترنت، با استفاده از موبایل نیازهای خود را مرتفع می‌کنند. این آمار ما را به سمتی هدایت می‌کند که هر ابزار، تکنولوژی و موضوعی که درخصوص بهینه‌سازی صفحات وب برای موبایل وجود دارد را به‌طور دقیق مورد بررسی قرار دهیم.

منظور از AMP چیست؟

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

در حقیقت گوگل یک نسخه‌ی کم‌حجم از وب‌سایت شما را در حافظه‌ی کش خود ذخیره می‌کند، در نتیجه کاربران برای بازشدن صفحات amp درخواست خود را مستقیماً به سرورهای گوگل ارسال می‌کنند. به همین جهت، صفحات سایت در کسری از ثانیه برای کاربران لود خواهند شد.

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

داستان به‌وجودآمدن AMP

گوگل چند سال قبل رسماً اعلام کرد که تمامی وب‌سایت‌ها باید Mobile Friendly باشند (یعنی محتوای آن‌ها در موبایل به‌شکل مناسب نمایش داده شود). پس از اعلام این خبر از سوی گوگل، رفته‌رفته Responsive بودن وب‌سایت‌ها به عنوان یک فاکتور موثر در رتبه‌بندی نتایج گوگل مطرح شد.

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

 

اما Mobile Friendly بودن هم رضایت گوگل را به همراه نداشت. زیرا صفحات ریسپانسیو مملو از فایل‌های JS و CSS بود که به‌شدت صفحات سایت را سنگین می‌کرد. همین اتفاق باعث می‌شد صفحات سایت برای کاربران موبایلی، با تأخیر قابل‌توجهی بازشوند.

به همین دلیل گوگل به فکر معرفی روشی جدید برای طراحی صفحات وب، ویژه‌ی موبایل افتاد. راه‌حل گوگل، پروژه‌ی عظیمِ AMP بود.

پیشنهاد گوگل برای طراحان وب‌سایت

گوگل به برنامه‌نویسان (تحت‌وب) پیشنهاد داد؛ یک نسخه‌ی اختصاصی از وب‌سایت اصلی‌تان باتوجه به استانداردهای AMP برای نمایش در موبایل، طراحی نمایید (یعنی یک نسخه ریسپانسیو و نسخه‌ی دیگر AMP برای نمایش در نتایج گوگل مختصِ موبایل).

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

علاوه‌برآن، فایل‌های JS و CSS نسخه‌ی Responsive خود را کنار بگذارید تا صفحاتی کم‌حجم و پرسرعت داشته باشید. ضمناً گوگل تمامی کدها و محتویات نسخه‌ی AMP سایت شما را در سرورهای خود کش می‌کند (یک کپی از صفحه سایت شما را در سرور خود نگه ‌می‌دارد) تا کاربرانی که برای بار دوم صفحه‌ی شما را بازکردند، گوگل از سرور خود، فایل‌ها را به آن‌ها نمایش دهد تا کاربران درکسری از ثانیه به‌شکل ناگهانی محتوای صفحات را در یک لحظه مشاهده نمایند و از سرعت لود محتوای سایت متحیر شوند.

❔ یک سوال مهم: باتوجه به این‌که در صفحات AMP اجازه‌ی فراخوانی فایل‌های JS و CSS را نداریم، چگونه امکاناتی نظیرِ: اسلایدر، آکاردئون، لایت‌باکس و… را به صفحات خود اضافه نماییم؟

⬛ جواب: گوگل برای رفع این مشکل، کدهای آماده‌ای (کتابخانه‌های JS) تدارک دیده است که با استفاده از آن‌های می‌توانید تا حدِ نیازهای خود را مرتفع سازید.

مزایای AMP کدام‌اند؟

⚪ چندبرابرشدن سرعت لود صفحات: به دلیل این که حجم کدها کاهش یافته و گوگل نیز فایل‌های js خودش را پس از اولین مراجعه‌ی کاربر به یکی از صفحات amp در سرور خود کش می‌کند، سرعت لود صفحات به‌شدت افزایش خواهد یافت.

⚪ حضور در Carousel News: درحال حاضر فقط صفحاتی که نسخه‌ی amp هستند می‌توانند در نتایج موبایلی گوگل، در قالب Carousel Slider نمایش داده شوند. و این موضوع به‌شدت روی جذب ترافیک تأثیر مثبتی خواهد داشت.

⚪ جلب رضایت کاربران موبایلی: در روزگاری زندگی می‌کنیم که همه‌چیز روزبه‌روز درحال سریع‌شدن می‌باشد و بدیهی است اگر صفحات وب‌سایت در نتایج موبایلی (گوگل) به‌شکل ناگهانی و درلحظه برای کاربران باز شوند، مخاطبان ما نیز خشنودتر خواهند بود.

⚪ امکان لود ناگهانی صفحات: در بخشی از کدهای صفحه‌ی amp بخشی وجود دارد تحت عنوان Boilerplate که از لود خطیِ کدهای صفحه توسط مرورگرها جلوگیری می‌کند و تا زمانی‌که کدهای صفحه به‌طور کامل خوانده نشود، مجوز نمایش المان‌های صفحه به مرورگر داده نخواهد شد (یعنی لود به‌صورت مرحله‌به‌مرحله نخواهد بود). همین امر باعث می‌شود کاربر محتوای صفحات AMP را به‌طور ناگهانی مشاهده کند.

⚪ Lazy Loding خودکار برای تمامی صفحات: امکان خارق‌العاده دیگری که گوگل برای صفحات AMP درنظر گرفته است، Lazy Load خودکار تمامی تصاویر است و ما برای پیاده‌سازی این مورد، نیازی به افزوده کدهای جاوااسکریپت نخواهیم داشت. به این معنی که تا زمانی‌که کاربر با استفاده از اسکرول به محل تصویر نرسد، هیچ تصویری برای وی لود نخواهد شد. بنابراین اگر در یک صفحه از AMP تعداد ۱۰ تصویر وجود داشته باشد و کاربر صرفاً تا اواسط صفحه اسکرول کند، فقط ۵ عکس برای او لود خواهد شد و به‌محض این‌که صفحه را ببندد، ۵ عکس باقی‌مانده نمایش داده نخواهد شد. این موضوع درخواست‌های سمت سرور را کاهش داده و درنهایت تأثیر قابل‌توجهی روی افزایش سرعت لود صفحات سایت خواهد گذاشت.

آشنایی با برخی‌از محدودیت‌های AMP

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

⚪ محدودیت در استفاده از CSS و JS: در نسخه‌‌ی amp مجاز به استفاده از فایل‌های JS و CSS به صورت External نیستید. به همین جهت، پیاده‌سازی اغلب امکاناتی که در نسخه اصلی سایت شما وجود دارند، در نسخه AMP امکان‌پذیر نمی‌باشد (شما حتی مجاز به استفاده از کدهای جاوااسکریپت به روش Internal هم نیستید).

⚪ استفاده از استایل‌های CSS تا سقف ۷۵kb: در هر صفحه از نسخه‌ی amp تنها می‌توانید تا سقف ۷۵ هزار کاراکتر (۷۵kb) از کدهای CSS استفاده نمایید. تمامی کدها باید به‌ روش Internal و درون تگ

<style amp-custom></style> نوشته شوند. ضمناً استفاده از این تگ برای هر صفحه‌ی amp صرفاً یک مرتبه میسر خواهد بود. این محدودیت باعث می‌شود صفحات سایت ما در موبایل با ظاهری ساده‌تر برای کاربران نمایش داده شوند.

⚪ Mobile Friendly اجباری: اگر با ساختار کدهای HTML تاحدی آشنایی داشته باشید، احتمالاً قطعه کد viewport را به چشم دیده‌اید. این قطعه کد که درون تگ <head> قرار می‌گیرد، مشخص می‌کند صفحه‌ی سایت ما در موبایل و تبلت و دیگر دستگاه‌ها، با چه اندازه‌ای نمایش داده شود. درحقیقت ربات گوگل از طریق این تگ متوجه می‌شود که وب‌سایت شما برای موبایل بهینه شده است یا خیر. ضمناً Mobile Friendly بودن وب‌سایت، مستقیماً در رتبه‌بندی نتایج گوگل موثر است. اما اگر قطعه کد viewport در صفحات سایت ما درج نشود، سایت ما ازلحاظ استاندارد کدنویسی هیچ ایرادی نخواهد داشت و این کد صرفاً برای سئو مفید است. اما در صفحات AMP وجود تگ viewport الزامی می‌باشد.

⚪ کاهش بازدید سایت: چون صفحات AMP سایت شما در صفحه‌ی گوگل باز می‌شود. به همین دلیل شما بازدید قابل توجهی را ازدست خواهید. اضافه‌ بر این ماجرا، چون کاربران وارد صفحه سایت شما نشده‌اند، تحلیل رفتار کاربران نیز میسر نخواهد شد. البته با بهره‌گیری از امکاناتی که گوگل در اختیار برنامه‌نویسان قرار داده که در ادامه معرفی خواهیم کرد، می‌توان با استفاده از برخی سیستم‌های آمارگیر مانند Google Analytics رفتار کاربران را مورد بررسی قرار دهیم.

⚪ بازاریابی اینترنتی تعطیل: از آن‌جایی که پاپ‌آپ‌ها معمولاً توسط کدهای جاوااسکریپت طراحی می‌شوند و ما قادر به فراخوانی فایل‌های جاوااسکریپت نیستیم، لذا اغلب کارهای ماکتینگیِ ما نیز منتفی خواهد شد. در نتیجه، کاربران صفحات سایت ما در موبایل به‌شکلِ ساده و بی‌آلایش مشاهده خواهند کرد.

از طرفی به دلیل این‌که تگ‌های AMP با ساختار HTML5 تاحدی متفاوت است، از این بابت نیز شاید نتوانیم هرآن‌چیزی که در HTML (نسخه‌ی دسکتاپ) طراحی کرده‌ایم را با استفاده از تگ‌های AMP پیاده‌سازی نماییم.

 

سه بخش اصلیِ Accelerated Mobile Pages

AMP به‌طور کلی از سه بخش اصلی تشکیل شده است:

۱) AMP HTML: منظور، کدهای نوشته‌شده در صفحه برای نماش محتوا است. به کدهای AMP اصطلاحاً Manipulated HTML (html دست‌کاری‌شده) نیز گفته می‌شود. درواقع سنگِ‌بنای کدهای AMP براساس استانداردهای HTML است اما یکسری تغییرات جزئی در آن‌ها اعمال شده است. به عنوان مثال: با استفاده از تگ <img> در HTML می‌توانیم یک تصویر را در یک صفحه‌ی وب، نمایش دهیم. اما در نسخه‌ی amp برای نمایش تصاویر مجاز به استفاده از این تگ نیستیم و باید از تگ <amp-img> استفاده نماییم.

۲) AMP JS: کتابخانه اختصاصی JS جهت بهره‌گیری از امکانات AMP دراختیار ما قرار گرفته است. خیلی وقت‌ها برای نمایش بهتر سوالات متداول، نیاز به لینک‌های کشویی (Accordion) داریم. از طرفی هم این امکان اغلب با استفاده از کدهای جاوااسکریپت پیاده‌سازی می‌شود و ما هم در صفحات AMP نمی‌توانیم از کتابخانه‌های JS استفاده کنیم.

به همین جهت گوگل برای رفع این مشکلات، حداقل کدهای مورد نیاز ما برای نمایش المان‌های مختلف داخل صفحات وب را به‌صورت آماده، در قالب فایل‌های js در اختیار ما قرار داده و صرفاً با فراخوانی آن‌‌ها از CDN گوگل، می‌توانیم امکاناتی نظیر آکاردئون، لایت‌باکس، تصاویر پارالاکس، اسلایدر و غیره را در سایت خود نمایش دهیم.

۳) AMP Cache: این همان سورپرایز ویژه‌ی گوگل است (سرویس کش گوگل برای لود سریع صفحات AMP). اگر صفحات سایت شما مطابق با استانداردهای amp طراحی شود، گوگل به‌محض این‌که کاربر برای اولین‌بار صفحه‌ای از سایت شما را در نتایج جستجو باز کند، تمامی فایل‌های جاوااسکریپت (که از CDN خودش فراخوانی شده) را در حافظه‌ی پنهان (کش) خود ذخیره می‌کند و اگر کاربر برای بار دوم صفحه‌ای از سایت شما را لود کند، دیگر نیازی به دانلود مجدد فایل‌های js صفحه ندارد و گوگل تا آخر عمر از سرور خودش این فایل‌ها را برای کاربر نمایش می‌دهد و این به‌شدت سرعت لود صفحات را افزایش خواهد داد.

مضاف بر این‌که گوگل محتوای صفحه‌ی شما را نیز در کش خود نگه می‌دارد و اگر کاربر برای بار دوم در کمتر از ۰.۵ ثانیه صفحه را مشاهده خواهد کرد. و این موضوع، رضایت هرچه‌بیشتر کاربران را به‌همراه خواهد داشت.

مقایسه صفحات AMP و صفحات Mobile Friendly

در تصویر زیر تفاوت سرعت لود صفحات AMP و صفحات Responsive کاملاً مشهود است:

آشنایی کلی با مقدمات دستورات HTML

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

به‌طور کلی اگر قصد دارید در حیطه‌ی سئو تکنیکال به‌عنوان یک متخصص مطرح شوید، نیاز است با حداقل کدهای HTML و CSS آشنایی داشته باشید. برای فراگیری این دو موضوع فقط کافیست به مقالات آموزشی HTML5 و CSS3 در سایت مراجعه نمایید.

بنابراین به‌جهت این‌که به‌طور جامع و رایگان این آموزش‌ها در سایت وب‌ایرونی وجود دارد، از بازکردن این مباحث صرف‌نظر می‌کنیم.

حداقل کدهای الزامی در یک صفحه‌ی AMP استاندارد

حداقل دستوراتی که در هر صفحه‌ی AMP باید وجود داشته باشد، در تصویر زیر قابل مشاهده است که در ادامه به‌ترتیب (خط‌‌‌به‌خط) هر بخش را توضیح خواهیم داد.

⚪ Doctype html: اولین تگی که در هر صفحه amp می‌باید درج شود، doctype است. این دستور در زبان HTML اختیاری است اما در صفحات amp الزامی می‌باشد. این تگ نشان می‌دهد صفحه‌ی وب شما توسط استانداردهای چه نسخه‌ای از زبان html طراحی شده است. قطعه کد <!Doctype html> تعیین می‌کند، صفحه‌ی ما توسط HTML5 ساخته شده است.

آیکون amp یا کاراکترهای آن : داخل تگ باز <html>، قراردادن کلمه‌‌‌ی amp یا آیکون رعدوبرق، اجباری است. درواقع تگ <html amp> مشخص می‌کند که این صفحه مطابق با استانداردهای AMP طراحی شده است.

⚪ دستور Meta Charset: این دستور encoding صفحه را مشخص می‌کند. اگر زبان محتوای سایت شما فارسی است، بهترین مقدار برای این تگ utf-8 می‌باشد. اگر این تگ در صفحه وب شما وجود نداشته باشد، مرورگر حروف فارسی را متوجه نخواهند شد و در نتیجه کاربران محتوای سایت را به صورت علامت سوال و کاراکترهای نامتعارف خواهند دید. در زبان HTML استفاده از این تگ اختیاری است اما در نسخه AMP اجباری می‌باشد. در ضمن این قطعه کد باید اولین تگ داخلی (First-Child) <head> باشد.

⚪ فایل JS گوگل: به‌صورت پیش‌فرض در هر صفحه amp نیاز است تا یک فایل جاوااسکریپت از CDN گوگل فراخوانی شود. حضور این فایل در هر صفحه، اجباری است.

⚪ تگ کنونیکال: تمامی صفحات استاندارد AMP ملزم به داشتن تگ <link> با rel=”canonical” هستند. درواقع با استفاده از این دستور به ربات گوگل اعلام می‌کنیم، نسخه‌ی اصلی این صفحه کدام است. به دلیل این‌که محتوای صفحات AMP می‌باید همان محتوای نسخه‌ی اصلی سایت (دسکتاپی) باشد، اگر با استفاده از این تگ مرجع اصلی محتوا را مشخص نکنیم، به جُرم کپی کردن محتوا، توسط بادیگاردهای گوگل، دست‌گیر خواهیم شد?

⚪ قطعه کد Viewport: ربات گوگل از طریق تگ viewport متوجه می‌شود، وب‌سایت ما Mobile Friendly هست یا خیر. اگر حتی سایت شما Full Responsive هم باشد اما دستور <meta name=”viewport”…> در آن صفحه درج نشود، گوگل متوجه ریسپانسیوبودن صفحات سایت شما نخواهد شد. لازم‌به‌ذکر است که Mobile Friendly بودن جزء فاکتورهای اصلی رتبه‌بندی نتایج گوگل است و مستقیماً روی جایگاه شما تأثیر خواهد گذاشت. با این حال، افزودن این قطعه کد به اسناد html الزامی نیست اما وجود آن در صفحات amp اجباری می‌باشد.

⚪ نشانه‌گذاری‌های استاندارد (Strucured Data): وجود نشانه‌گذاری استاندارد، نه در صفحات html و نه در صفحات amp اجباری نیست. اما در نسخه‌ی اصلی سایت هر قطعه کدی دراین خصوص اضافه کرده‌اید را بدون هیچ تغییری می‌باید در نسخه‌ی amp نیز درج نمایید (Best Practice). نشانه‌گذاری‌های استاندارد یا Structured Dataها در اسناد html به سه روش JSON-LD، RDFa و Microdata می‌توانند پیاده‌سازی شوند اما در صفحات amp شما بالاجبار باید از فرمت JSON-LD استفاده نمایید. ضمناً دستورات JSON-LD صرفاً می‌توانند در تگ <head> صفحات AMP قرار گیرند.

⚪ استایل‌های amp boilerplate: این کد، جزء دستورات پیش‌فرض صفحات amp به حساب می‌آید و حضور آن در همه‌ی صفحات، اجباری است. این دستور که درون تگ <head> قرار می‌گیرد، باعث می‌شود زمانی‌که کاربر صفحه AMP را باز می‌کند، لود خطی تاحدی متوقف شود و کاربر کلِ محتوای سایت را به‌یک‌باره به‌طور ناگهانی مشاهده کند. همین امکان باعث می‌شود کاربران از دیدن نسخه‌ی AMP صفحات در نتایج گوگل لذت مضاعفی ببرند.

? نکته‌ی کنکوری:‌ وجود تگ‌های <head> و <body> در صفحات amp اجباری است (برخلاف html).

نحوه‌ی تشخیص صفحات AMP ما توسط گوگل

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

برای این گوگل از وجود صفحات amp ما باخبر شود و هرچه سریع‌تر آن صفحات را در نتایج خود آیکون‌دار کند، نیاز است تا ابتدا در هر صفحه‌ی اصلی یک تگ <link> با rel=”amphtml” به نسخه‌ی AMP همان صفحه بدهیم. گام دوم؛ لازم است در نسخه‌ی AMP نیز یک تگ <link> با rel=”canonical” به نسخه‌ی اصلی بدهیم.

درحقیقت با این کار، دو صفحه را به هم متصل می‌کنیم و ربات گوگل هویت صفحات را به‌طور دقیق متوجه خواهد شد. علاوه‌بر آن عدم درج این دستورات ممکن است باعث جریمه‌شدن صفحات سایت شود. زیرا گوگل به‌صورت جداگانه صفحات (هر دو نسخه) را ایندکس خواهد کرد. در این صورت Duplicate Content (محتوای تکراری) رخ خواهد داد.

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

❔ پرسش: از کجا بفهمیم کدام صفحات مجهز به AMP هستند؟!

⬛ پاسخ: فقط کافیست نسخه‌ی دسکتاپی هر صفحه را باز کنید و با بهره‌گیری از امکان View Page Source مرورگر خود، کدهای صفحه را مشاهده کنید. در نهایت اگر قطعه کد rel=”amphtml” در آن صفحه وجود داشت، یعنی نسخه‌ی AMP آن صفحه نیز دردسترس است و قادر هستید کدهای آن را هم بررسی نمایید.

در ادامه‌ی به‌طور خلاصه، نمونه‌ کدهای مهم AMP را معرفی خواهیم نمود.

آموزش قرار دادن عکس در نسخه AMP سایت

برای قرار دادن عکس در صفحات AMP می‌باید از تگ <amp-img> استفاده شود. در این تگ مجاز هستیم از تمامی Attributeهای HTML نیز استفاده نماییم (مطابق عکس زیر):

? نکته‌ی کنکوری:  جهت نمایش تصاویر متحرک مانند عکس‌هایی با فرمت GIF در صفحات AMP لازم است کتابخانه‌ی جاوااسکریپت amp-anim را در بخش <head> آن صفحه لود کنید.

نحوه‌ی قرار دادن ویدیو در صفحات AMP

جهت انتشار ویدیو در نسخه‌ی AMP باید از تگ <amp-video> کمک بگیریم. اگر با زبان HTML آشنایی داشته باشید، قطعه کدهایی که در تصویر زیر مشاهده می‌نمایید، کاملاً برای شما قابل‌درک خواهند بود:

آموزش قراردادن فایل صوتی در صفحه‌ی AMP

انتشار فایل صوتی در صفحات amp صرفاً با بهره‌گیری از تگ <amp-audio> (به‌جای تگ <audio> در html) امکان‌پذیر خواهد بود. نمونه کدی که در تصویر زیر مشاهده می‌کنید، گویای همه‌چیز است:

⚪ نکته۱‌: در خلال کدهای <amp-audio> می‌توانیم یک تگ <div> همراه با ویژگیِ fallback اضافه کنیم. این attribute مانند ویژگیِ alt در تصاویر عمل می‌کند. به این معنی که اگر به هر علتی، این فایل صوتی برای کاربر نمایش داده نشود، متن جایگزین آن برای کاربر نمایان خواهد شد. به‌طور معمول، از این ویژگی، برای مواقعی استفاده می‌شود که مرورگر کاربر قادر به پخش رسانه‌ها نمی‌باشد. ضمناً افزودن این خاصیت در تگ <amp-video> نیز امکان‌پذیر می‌باشد.

⚪ نکته‌۲: برای استفاده از Player فایل‌های صوتی لازم است کتابخانه‌ی JS تحت عنوان amp-audio را در بخش <head> صفحه‌ی مورد نظر  لود نمایید.

افزودن فونت دل‌خواه به صفحات AMP

برای افزودن فونت‌های دل‌خواه به نسخه‌ی amp کم‌دردسرترین راه، استفاده از دستور @font-face در CSS می‌باشد. برای این کار همان‌طور که در تصویر زیر نیز قابل مشاهده است، فقط کافیست دستورات مربوط که فراخوانی فونت را داخل تگ <style amp-custom> وارد نماییم.

اضافه‌کردن اسلایدر به صفحه‌ی AMP

گوگل برای تسهیل در روند طراحی صفحات AMP یکسری کتابخانه‌های (کدهای آماده) جاوااسکریپتی در اختیار طراحان‌ سایت قرار داد که با لود آن‌ها در قسمت <head> هر صفحه می‌توان امکانات خاصی را به صفحات amp اضافه نمود. اصطلاحاً به این امکانات Component نیز گفته می‌شود. در ادامه با چند مورد از این امکانات آشنا خواهیم شد.

یکی از امکانات پرکاربردی که گوگل دردسترس ما قرار داده است، Carousel Slider می‌باشد که با استفاده از فراخوانی فایل amp-carousel و درج کدهایی که در تصویر زیر مشهود است، می‌توانید اسلایدرهای زیبایی را برای نسخه‌ی موبایل طراحی نمایید.

⚪ نکته: در اسلایدها می‌توان به‌جای تصویر از ویدیو نیز نمایش داد.

قراردادن آکاردئون در نسخه AMP سایت

با فراخوانی کتابخانه‌ی amp-accordion در هد صفحه، می‌توان از امکان آکاردئون نیز بهره‌مند شد. این امکان اغلب برای نمایش سوالات متداول به‌صورت دکمه‌های کشویی بازشونده، دکمه‌های نمایش بیشتر محتوا و حتی آیتم‌های منو کاربرد دارد. کدهای ساده و کم‌حجم زیر می‌توانند آکاردئون را برای شما نمایان کنند:

افزودن منوی بازشونده (Sidebar) در صفحه‌ی AMP

این امکان برای نمایش منوی بازشوند از سمت چپ به راست مورد استفاده قرار می‌گیرد. برای بهره‌گیری از این Component نیاز است تا کتابخانه‌ی js تحت عنوان amp-sidebar در هدر صفحه (تمامی صفحاتی که به منو نیاز دارند) لود شود.

با استفاده از کدهای زیر می‌توانید Sidebar دل‌خواه خود را بسازید. فراموش نکنید که برای زیباتر کردن بخش‌های مختلف سایدبار، باید از کدهای سی اس اس در تگ <style amp-custom> استفاده کنید.

⚪ نکته: کدهای Sidebar باید مستقیماً درون تگ <body> قرار گیرند و نمی‌توانند زیر مجموعه‌ی دیگر تگ‌ها باشد.

اتصال سیستم‌های آمارگیر به صفحات AMP

برای تجزیه‌وتحلیل رفتار کاربران در صفحات amp می‌توانیم از سیستم‌های آمارگیر مانند گوگل آنالیتیکس استفاده نماییم. برای این کار ابتدا نیاز است فایل js تحت عنوان amp-analytics را در هدر تمامی صفحات هدف، لود شود. سپس با درج تگ amp-analytics می‌توان (همانند عکس زیر) یک صفحه‌ی AMP را به سیستم‌های آنالیتیکس متصل کرد.

⚪ نکته۱: در ویژگی Type در تگ <amp-analytics> باید نوع سیستم آمارگیر شما مشخص گردد. بدیهی است که این سیستم قابلیت اتصال به ابزارهای آمارگیر دیگری را داشته و مختص Google Analytics نیست. اما تأکید ما استفاده از گوگل آنالیز است.

⚪ نکته۲: مقداری که در بخش account قرار می‌گیرد همان شناسه‌ی اختصاصی شما در گوگل آنالیتیکس (Tracking ID) می‌باشد.

آزمایش سلامت کدهای AMP

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

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

به ۳ روش می‌توانید از صحت کدهای خود مطمئن شوید:

⚪ افزونه گوگل کروم: فقط کافیست مرورگر Chrome خود را باز کرده و از قسمت More Tools، گزینه‌ی Extentions را انتخاب کنید. سپس در بخش سرچ باکس، عبارت AMP Validator را جستجو کنید و درنهایت روی دکمه‌ی Add to Chrome کلیک نمایید. پس از اتمام کار، آیکون amp به نوار بالای مرورگر شما افزوده خواهد شد و هر وب‌سایتی که مشکلی از لحاظ استاندارد کدنویسی amp داشته باشد، با رنگ قرمز به شما اطلاع خواهد داد.

⚪ سایت رسمی گوگل: به آدرس https://validator.ampproject.org/ مراجعه نمایید و کدهای خود را در باکس مربوطه وارد کنید. درآخر نیز ایرادات اساسی کدها توسط این ابزار، در مقابل دیده‌گان شما ظاهر خواهد گردید.

⚪ گوگل سرچ کنسول: اگر سایت خود را در Google Search Console ثبت کرده باشید، می‌توانید به قسمت amp validator مراجعه کنید و خطاهای مربوط به نسخه‌ی AMP سایت خود را ملاحظه نمایید.

آموزش راه‌اندازی صفحات AMP در وردپرس

در برخی دوره‌های آموزشی مدرسان گرانقدر، نگاهی سطحی نسبت به راه‌اندازی صفحات AMP در وردپرس دارند و صرفاً به معرفی افزونه‌های amp for wordpress بسنده می‌کنند.

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

? نکته فراکنکوری: این‌که صفحات شما دارای تگ‌های AMP باشد ملاکِ رتبه‌بندی نیست. مسئله اصلی، خلق تجربه‌ی لذت‌بخش برای کاربر در نسخه AMP می‌باشد.

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

فراموش نکنیم؛ AMP با هدف بهبود تجربه‌ی کاربری چشم به جهان گشوده و درصورتی که نتوانیم صفحات amp را در وردپرس شخصی‌سازی کنیم، نصب پلاگین‌های وردپرسی نه‌تنها به افزایش رتبه‌ی سایت کمک نخواهد کرد، بلکه ممکن است باعث افت جایگاه ما در گوگل شود (به‌ دلیل نارضایتی کاربران).

نقشه راه ما برای تبدیل صفحات اصلی به نسخه AMP

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

 

فقط در سه مرحله صفحات سایت خود را به نسخه‌ی amp تبدیل کنید:

۱) آشنایی با استانداردها و قوانین AMP:   تنها راه برای شروع کار با AMP، تسلط کامل بر قوانین و ساختار کدنویسی آن است. راه مفید برای کسب دانش کافی، مراجعه به سایت رسمی Google AMP به آدرس amp.dev می‌باشد. نیاز است تا تمامی مقالات و مطالب این سایت مطالعه و تمرین شود. حجم آموزه‌های این سایت شاید نزدیک به چندین کتاب قطور باشد. بنابراین مسیر دشواری برای ورود به این حوزه پیش روی ماست.

۲) کپی‌گرفتن از تمامی صفحات هدف:   در گام دوم باید انتخاب کنیم، نسخه‌‌ی AMP باید برای  کدام‌یک از صفحات، ایجاد شود (پس نیاز نیست تمامی صفحات سایت AMP شوند). مثلاً چند مقاله از سایت خود را انتخاب کرده و یک نسخه‌‌ی کپی از تمامی آن صفحات تهیه می‌کنیم.

۳) اعمال تغییرات براساس پروتکل‌های AMP:   درنهایت صفحات کپی‌شده (که قرار است amp شوند) را براساس ساختار کدنویسی AMP تغییر می‌دهیم. به‌عنوان‌مثال؛ ابتدا فایل‌های js و css را حذف نموده و به‌جای آن، فایل‌های جاوااسکریپت مخصوص AMP را از CDN گوگل فراخونی می‌نماییم. به‌همین‌ترتیب تا انتها، خط‌به‌خط تغییرات را روی کدها اعمال خواهیم کرد.

جمع‌بندی مبحث جذاب Accelerated Mobile Pages

کدنویسی سمت AMP کارِ بسیار دشواری است و مانند نکات افزایش سرعت سایت نیست که هرنوع سایتی به آن نیاز داشته باشد.

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

هدف از نگارش این آموزش، آشنایی نسبی با مفهوم، اهمیت و نحوه‌ی کارکرد فریمورک AMP بود. و بدیهی است که صرفاً با مطالعه‌ی این مقاله شما به عنوان یک Super Expert در حیطه‌ی AMP حرفی برای گفتن نخواهید داشت و نیاز است تا فراگیری این مبحث را تا انتها ادامه دهید.