مراحل ساخت AMP سایت

مراحل ساخت AMP سایت

همانطور که قبلا در مطلب AMP یا Accelerated Mobile Pages چیست؟ گفتیم ، AMP یک پروژه سرعت بخشیدن به صفحات موبایل است که توسط گوگل ایجاد و پشتیبانی می شود؛

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

AMP شامل AMP HTML، کتابخانه AMP JS و حافظه (Cache) گوگل AMP می باشد.

زمانی که صفحه وب برای استفاده موبایلی بهینه نباشد، خطر افزایش شاخص های منفی بالا می رود؛

اگر صفحه در حداکثر ۳ثانیه بارگزاری نشود، ۳۰ درصد از کاربران صفحه ر ترک می کنند.

محصول نهایی AMP بازدهی سایت ها را در اینترنت به شدت بهبود بخشید.

نحوه ساخت AMP سایت

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

۱-ساختن صفحه AMP HTML

در داخل سایت AMPProject.Org قطعه کد HTML  وجود دارد که باید آن را باید به عنوان یک فایل با پسوند HTML کپی و ذخیره کنید.

محتوای در تگ body نسبتا آسان است ، اما در تگ head در صفحه، کدهای بسیار اضافه تری موجود استکه ممکن است بلافاصله آشکار نشود.

۲- تگ تصویر

اکثر تگ های HTML را می توان به طور مستقیم در AMP HTML به کار برد، اما تگ های خاصی مانند تگ <img> جایگزین تگ های مساوی  یا کمی سفارشی از AMP HTML می شود(و برخی از تگ ها ممنوع می باشند).

۳- اصلاح ارائه و لایه

صفحات وب، صفحات وب می باشند که برای بخش ظاهری صفحه از مشخصات عمومی Css استفاده می شود.

عناصر ظاهری از کلاس یا Inline Stylesheet در <head> استفاده می کند که <Style amp-Custom> نام دارد.

هر صفحه AMP فقط می تواند یک Stylesheet واحد جاسازی شده داشته باشد و چندین Selector مشخص که شما اجازه استفاده از آن را ندارید.

۴- پیش نمایش و اعتباربخشی

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

  • باز کردن صفحه در مرورگر به طور مستقیم از file system (بعضی از عناصر ممکن است به خاطر اشکال در XMLHttpRequests کار نکنند).
  • استفاده از وب سرور محلی مانند Apache2 یا Nginx.

اعتبار بخشی ; بعدی اینکه، اطمینان حاصل کنید صفحه AMP واقعا معتبر باشد.

۵- آماده کردن صفحه برای کشف و توزیع

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

ربط دادن صفحات به وسیله <link>:

برای پیاده سازی صفحه non-AMP و AMP باید با آنها مانند یک زوج رفتار کرد؛ ما اطلاعات صفحه AMP را در صفحه non-AMP اضافه می کنیم و بالعکس، و این کار را در قالب برچسب <link> و در <head> انجام می دهیم.

نحوه نصب AMP روی وب سایت وردپرسی

خب می دانید که در بسیاری از دستگاه های موبایلی، بارگزاری متن ها کند است.این تکنولوژی را می توان از طریق کدهای html و Javascript اجرا کرد.به زبان ساده طریقه عملکرد این تکنولوژی به این صورت است که محتوای سایت در حافظه یا همان کش Google AMP ذخیره می شود و بعد از ورود دوباره کاربر، سایت از روی کش به سرعت لود می شود.وب سایت های معتبری همچون توییتر، لینکدین و … از این ابزار استفاده می کنند.

پشتیبانی از Google Analytics باعث شده تا AMP با قابلیت جست و جوی گوگل سازگار باشد.

مانند نصب همه افزونه های وردپرس، نصب AMP هم روی وردپرس آسان است.این افزونه که مخفف عبارت Accelerated Mobile Pages می باشد را از مخزن افزونه وردپرس دانلود کرده و در فولدر پلاگین ها (Plugins) بارگزاری کنید.

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

تنظیمات بیشتر AMP

برای اعمال تنظیمات و Customize بیشتر به پلاگین AMP for WP – Accelerated Mobile Pages نیاز دارید که آن را هم باید نصب و فعال کنید.

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

AMP JS

کتابخانه JavaScript از تمام بهترین شیوه های عملکردی استفاده می کند، که مدیریت منابع بارگزاری شده مهمترین ویژگی آن می باشد.این بخش باعث می شود تا شما اطمینان داشته باشید که صفحه با سرعت هرچه بیشتر به کاربر ارائه می شود.

تکنیک های دیگری برای افزایش کارایی می باشد شامل پیش محاسبه (Pre-Calculating) لایه و تمامی عناصر آن پیش ازلود شدن منابع، غیرفعال کردن CSS Selector و تمامی iframeها می باشد.

ساخت AMP وب سایت برای کشف و توزیع

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

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

اطلاعات صفحه ای که شامل AMP است باید به صفحه بدون AMP اضافه شود. این کار با استفاده از برچسب لینگ و در تگ head انجام می شود.

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

تنظیمات AMP سایت

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

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

AMP JS به کتابخانه های Javascript اشاره می کند و شامل بهترین شیوه های عملکردی است. یکی از شیوه های مهم در این کتابخانه مدیریت مناسب بارگذاری شده می باشد، این شیوه سبب می شود که سرعت بارگذاری صفحات تضمین شوند.

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

تکنولوژی AMP سایت چطور کار می کند؟

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

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

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

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

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

یک سری فریم ها وجود دارد که اجازه می دهد تبلیغات و یا تصاویر با توجه به اندازه مورد نظر درون HTML تعیین شود تا AMP قادر به شناسایی اندازه ها در هر بخش و همینطور هر موقعیت باشد.

صفحات تعاملی باید تنها از عناصر سفارشی AMP تشکیل شده باشد.

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

منابعی نظیر iframeها، تبلیغات یا تصاویر باید اندازه خود را درون HTML تعیین کنند تا AMP بتواند اندازه آنها را در هر بخش و موقعیت آنها پیش از دانلود تمامی منبع، شناسایی کند.

Amp پیش از اینکه منابع دانلود شود، طرح و لایه صفحه را بارگزاری می کند.

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

AMP برای گسترش مواردی همچون Instagram، Tweets، lightboxes و غیره، سودمند می باشد.

این چیزها نیازمند درخواست های http اضافه هستند و این درخواست ها توانایی مسدود کردن لایه های صفحه و رندر کردن را ندارند.

سئو پارسیان

سئو پارسیان با بیش از 10 سال سابقه فعالیت در زمینه طراحی و بهینه سازی سایت برای موتورهای جستجو یا سئو در مشهد , با شماره عضویت ۵۱۰۳۰۴۷۲ سازمان نظام مهندسی رایانه ای خراسان رضوی ، آماده همکاری در قالب مشاور و مجری پروژه های IT شما می باشد.

شما ممکن است این را هم بپسندید

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

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