نحوه ساخت صفحات 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 بارگزاری سریع بهینه سازی سایت
آخرین مطالب
بیستمین دورهمی در مسیر بازاریابی دیجیتال
بیستمین دورهمی در مسیر بازاریابی دیجیتال

رویداد «در مسیر بازاریابی دیجیتال» از سال ۹۷ با هدف انتقال تجربه افراد موفق در حوزه دیجیتال مارکتینگ آغاز شده است.

طراحی محصول چیست؟ برای طراحی محصول از کجا باید شروع کنیم؟
طراحی محصول چیست؟ برای طراحی محصول از کجا باید شروع کنیم؟

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

تفاوت طراح و توسعه دهنده وب چیست؟
تفاوت طراح و توسعه دهنده وب چیست؟

مسئلۀ اصلی در ایجاد و راه اندازی سایت این است که از بین یک توسعه دهنده وب‌ سایت و یک طراح سایت کدام را استخدام کنید؟

پایان بخش ویدئو در بازار
پایان بخش ویدئو در بازار

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

کاردانو، ارز دیجیتال نوظهوری برای سرمایه گذاری
کاردانو، ارز دیجیتال نوظهوری برای سرمایه گذاری

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

کمک خیریه‌های آمریکایی با ارز دیجیتال به شهروندان افغانستان
کمک خیریه‌های آمریکایی با ارز دیجیتال به شهروندان افغانستان

اوضاع نابسمان و بسیار دردناک این روزهای افغاانستان باعث شده تا تکنولوژی و ارزهای دیجیتال نیز وارد میدان برای کمک به پناهجویان افغان شوند.

طراحی سایت فروشگاهی و دریافت گواهی اینماد
طراحی سایت فروشگاهی و دریافت گواهی اینماد

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

دوج کوین باز هم پر و بال گرفت؛ بهترین کوین برای پرداخت!
دوج کوین باز هم پر و بال گرفت؛ بهترین کوین برای پرداخت!

ایلان ماسک باز هم به تمجید از دوج کوین پرداخته و امنیت این کوین را برای پرداخت تضمین کرده است.

لایت کوین چیست؟
لایت کوین چیست؟

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

پای لیونل مسی و باشگاه پاری‌سن‌‌ژرمن به بازار ارز دیجیتال باز شد
پای لیونل مسی و باشگاه پاری‌سن‌‌ژرمن به بازار ارز دیجیتال باز شد

انتقال جنجالی لیونل مسی به پاری‌سن‌ژرمن سر و صدای فراوانی را در دنیای رسانه به پا کرد، اتفاقی که بدون ارز دیجیتال هرگز امکان پذیر نبود.

سرور مجازی یا VPS چیست؟ توضیح به زبان ساده
سرور مجازی یا VPS چیست؟ توضیح به زبان ساده

همواره شما برای راه‌اندازی سایت خود، نیازمند آن هستید که از میزبان وب یا هاست استفاده کنید.

انواع CMS کدامند؟ هر سیستم مدیریت محتوا برای چه کاری مناسب است؟
انواع CMS کدامند؟ هر سیستم مدیریت محتوا برای چه کاری مناسب است؟

سیستم مدیریت محتواهای فراوانی وجود دارند که هرکدام برای طراحی سایت ویژه‌ای در اختیار کاربران قرار گرفته‌اند.

پهنای باند چیست؟ و چه فرقی با سرعت اینترنت و ترافیک دارد؟
پهنای باند چیست؟ و چه فرقی با سرعت اینترنت و ترافیک دارد؟

درک مفاهیم اینترنت به شما کمک خواهد کرد تا نسبت به چگونگی کارکرد سرویس‌های اینترنتی آگاهی بسیار خوب پیدا کنید.

مقالات مرتبط
بیستمین دورهمی در مسیر بازاریابی دیجیتال
بیستمین دورهمی در مسیر بازاریابی دیجیتال

رویداد «در مسیر بازاریابی دیجیتال» از سال ۹۷ با هدف انتقال تجربه افراد موفق در حوزه دیجیتال مارکتینگ آغاز شده است.

طراحی محصول چیست؟ برای طراحی محصول از کجا باید شروع کنیم؟
طراحی محصول چیست؟ برای طراحی محصول از کجا باید شروع کنیم؟

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

تفاوت طراح و توسعه دهنده وب چیست؟
تفاوت طراح و توسعه دهنده وب چیست؟

مسئلۀ اصلی در ایجاد و راه اندازی سایت این است که از بین یک توسعه دهنده وب‌ سایت و یک طراح سایت کدام را استخدام کنید؟


وب ‌پارسه

ما به‌عنوان یکی از تخصصی‌ترین گروه‌های طراحی سایت و برنامه نویسی سایت، خدمات گسترده‌ای در این زمینه را ارائه می‌نماییم.

تهران، خیابان فاطمی، میدان‌ فاطمی(جهاد)، ساختمان چهلستون، طبقه دوم، پلاک 203

info@webparseh.com

۰۹۱۹-۰۹۷۳۴۴۶