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

پنج شنبه ۱۶ تیر ۱۴۰۱

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

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

AMP یک پروژه سرعت بخشیدن به صفحات موبایل است که توسط گوگل ایجاد و پشتیبانی می‌شود. گوگل به وسیله آن می‌تواند سرعت بارگزاری صفحات را در دستگاه‌های موبایلی افزایش داد.  در تاریخ 24 فوریه 2016، گوگل رسما لیست AMP را در نتایج جستجوی خود قرار داد. صفحاتی که از کدگذاری AMP استفاده می‌کنند، در جاهای خاصی از نتایج جستجو ظاهر می‌شوند و یا با علامت مخصوص AMP به نمایش در می‌آیند.

 

  AMP شامل AMP HTML، کتابخانه AMP JS و حافظه (Cache) گوگل AMP می‌باشد. زمانی که صفحه وب برای استفاده موبایلی بهینه نباشد، خطر افزایش شاخص‌های منفی بالا می‌رود؛ اگر صفحه در حداکثر 3ثانیه بارگزاری نشود، 30 درصد از کاربران صفحه را ترک می کنند. محصول نهایی AMP بازدهی سایت‌ها را در اینترنت به شدت بهبود می‌بخشد. این تکنولوژی فقط به تکنیک‌هایی برای ایجاد صفحات محدود نمی‌شود، در واقع شامل HTML معمولی با چندین محدودیت و اضافه شدن برچسب‌های تخصصی است و کارهای اضافه بیشتری نیاز ندارد. AMP JS این اطمینان را ایجاد می‌کند که محتوا با سرعت و وضوح بارگزاری شوند، در حالی که محتواهایی مانند تبلیغات در اولویت قرار نمی‌گیرند. این تکنولوژی کشف کرد که محتویاتی که به سرعت بارگزاری می شوند، سریعتر هم خوانده می‌شود.

 

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

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

2- تگ تصویر

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

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

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

6- قدم‌های پایانی پیش از انتشار

 

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

در داخل سایت AMPProject.Org قطعه کد HTML  وجود دارد که باید آن را به عنوان یک فایل با پسوند HTML کپی و ذخیره کنید. محتوای در تگ body نسبتا آسان است. اما در تگ head در صفحه، کدهای بسیار اضافه‌تری موجود است که ممکن است بلافاصله آشکار نشود.

 

 2- تگ تصویر

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

 

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

صفحات وب: برای بخش ظاهری صفحه از مشخصات عمومی Css استفاده می شود. عناصر ظاهری از کلاس یا Inline Stylesheet در <head> استفاده می کند که <Style amp-Custom> نام دارد.

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

 

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

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

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

 • استفاده از وب سرور محلی مانند Apache2 یا Nginx

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

 

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

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

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

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

 اگر فقط یک صفحه باشیم چطور؟

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

 "این نکته را مدنظر داشته باشید که در این 5 مرحله قطعه کدهایی در تگ‌های مختص به خود وجود دارند که می‌توانید با جستجویی ساده این قطعه‌ها را بدست بیاورید. وب سایت ampproject.Org که وب سایت رسمی AMP می‌باشد، می‌تواند در این راه به شما کمک کند".

 

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

 

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

 

AMP  اجازه نمی دهد که مکانیزم‌های توسعه رندر کردن صفحه را بلاک کنند.AMP برای گسترش مواردی همچون Instagram، Tweets، lightboxes و غیره، سودمند می‌باشد.



تگ‌ها: وب سایت AMP ساختن صفحه AMP صفحه AMP بارگزاری سریع بهینه سازی سایت
آخرین مطالب
تفاوت گارانتی و خدمات پس از فروش در طراحی سایت
تفاوت گارانتی و خدمات پس از فروش در طراحی سایت

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

10 چالش راه اندازی کسب و کار اینترنتی
10 چالش راه اندازی کسب و کار اینترنتی

هرچند راه اندازی کسب و کار اینترنتی جذاب به نظر می‌رسد اما مشکلاتی مانند: رقابت شدید، چالش های فنی و تأمین مالی، ممکن است مسیر کارآفرینان را دشوارتر از حد انتظار کند.

مراحل ده گانه راه‌اندازی کسب‌وکار اینترنتی
مراحل ده گانه راه‌اندازی کسب‌وکار اینترنتی

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

بهترین زبان برنامه نویسی برای وب
بهترین زبان برنامه نویسی برای وب

برای کدنویسی وب سایتی ایده‌آل، باید با توجه به نوع آن از زبان‌های برنامه نویسی مناسب برای دو بخش بک اند (کدنویسی سمت سرور) و فرانت اند (ظاهر سایت) استفاده کرد.

راهنمای جامع طراحی صفحه وب ساده
راهنمای جامع طراحی صفحه وب ساده

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

تکنیک های بهینه سازی سرعت وب سایت
تکنیک های بهینه سازی سرعت وب سایت

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

قالب آماده پست و استوری آموزشـی برای اینستاگرام
قالب آماده پست و استوری آموزشـی برای اینستاگرام

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

راهنمای جامع تدوین نقشه راه کسب‌وکار اینترنتی
راهنمای جامع تدوین نقشه راه کسب‌وکار اینترنتی

نقشه راه کسب و کار اینترنتی، ابزاری استراتژیک است که با تحلیل دقیق بازار، تعیین اهداف و تدوین استراتژی های مؤثر، کسب و کارها را در مسیر رشد و موفقیت هدایت می‌کند.

مشخصات و قیمت احتمالی پیکسل بادز پرو 2
مشخصات و قیمت احتمالی پیکسل بادز پرو 2

گوگل قصد دارد نسل دوم پیکسل بادز پرو را با طراحی بهبودیافته، رنگ‌های جدید و تراشه قدرتمند سری Tensor A رونمایی کند.

راهنمای گام به گام ساخت اینفوگرافیک
راهنمای گام به گام ساخت اینفوگرافیک

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

نحوه ساخت پادکست معرفی محصولات سایت
نحوه ساخت پادکست معرفی محصولات سایت

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

مانیتور جدید ردمی با کیفیت 4K و قیمت کمتر از 170 دلار
مانیتور جدید ردمی با کیفیت 4K و قیمت کمتر از 170 دلار

شیائومی بی سروصدا مانیتور جدیدی را از برند ردمی معرفی کرد. این دستگاه که A27U نام دارد، مانیتوری 27 اینچی و مقرون ‌به‌ صرفه است.

آیفون 15 پرفروش‌ترین گوشی سه‌ماهه دوم سال 2024
آیفون 15 پرفروش‌ترین گوشی سه‌ماهه دوم سال 2024

اپل دوباره صدرنشین فهرست پرفروش‌ترین گوشی‌های جهان شد و سه مدل از آیفون 15 جایگاه‌های اول تا سوم را تسخیر کردند.



استعلام قیمت