آموزش ساخت amp

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

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

پیشنهاد ویژه  :‌ آموزش رایگان طراحی سایت صفر تا صد

amp چیست؟

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

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

سایت‌هایی که از نسخه amp گوگل پشتیبانی می‌کنند در نتایج جستجو مشابه تصویر زیر یک آیکون با نام AMP مبنی بر پشتیبانی از این پروژه گوگل دریافت خواهند کرد. همچنین از نظر سئو و بهینه سازی امتیاز ویژه‌ای برای چنین سایت‌هایی در نظر گرفته شده است.

نحوه ساخت amp گوگل در وردپرس

برای ساخت amp وردپرس از یک افزونه که ساخت خود وردپرس هست با نام AMP استفاده خواهیم کرد. این افزونه تا به امروز تونسته تا بیش از 200.000 نصب فعال و کسب امتیاز 3.3 را ازآن خودش کنه که با استفاده از اون میتونید سایت خودتون را به amp گوگل مجهز کنید. پیش از هر کاری با کلیک روی دکمه زیر افزونه را دانلود کرده و نصب کنید.

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

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

Header Text Color: از این قسمت رنگ دلخواه خودتون را برای رنگ نوشته در هدر سایت انتخاب کنید.

Header Background & Link Color: از این قسمت رنگ دلخوه خودتون برای پس زمینه هدر سایت و محتوای لینک دار را تعیین کنید.

Color Scheme: در نهایت از این قسمت هم میتونید تا تم تاریک و یا روشن را برای نسخه amp در سایت خودتون انتخاب کنید. فراموش نکنید که روی دکمه ذخیره و انتشار کلیک کنید تا تنظیمات هم ذخیره شوند.

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

بهینه‌سازی سئو نسخه AMP وردپرس

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

برای این منظور افزونه‌ای که قصد دارم معرفی کنم با عنوان Glue for Yoast SEO & AMP در مخزن وردپرس ثبت شده و تا به امروز تونسته تا بیش از 50.000 نصب فعال و کسب امتیاز 4.3 را ازآن خودش کنه که برای افزایش سئو وردپرس در حالت amp گوگل میتونید ازش استفاده کنید. برای استفاده از افزونه با کلیک روی دکمه زیر اونو دانلود کرده و در سایت خودتون نصب و فعال کنید.

بعد از نصب و فعال سازی این افزونه زیرمنویی با عنوان AMP در منوی افزونه Yoast اضافه خواهد شد. روی منوی مورد نظر کلیک کنید تا مشابه تصویر زیر به صفحه یکپارچه سازی amp وردپرس با افزونه سئو وردپرس هدایت شوید.

همانطوری که در تصویر مشاهده میکنید ابتدا به تب Post Types مراجعه کنید و مطابق تصویر پست تایپ‌هایی که امکان یکپارچه سازی اونها برای amp وردپرس فراهم است را فعال کنید. برای این کار کافیه تا آنها را در حالت وضعیت قرار دهید.

سفارشی سازی amp وردپرس

همونطور که در تصویر مشاهده می‌کنید در تب Design قادر خواهید بود تا اقدام به سفارشی سازی amp در وردپرس کنید و از رنگ و استایل دلخواه هم استفاده کنید.

images: در این دو قسمت میتونید تا تصویر و آیکون دلخواه خودتون را به ترتیب برای آیکون amp سایت و نوشته‌هایی که دارای تصویر شاخص نیستند و یا اینکه تصویر شاخص نمایش داده نمیشه را تعیین کنید.

Content colors: با مراجعه به این بخش می تونید تا رنگ بندی دلخواه خودتونو برای محتوای amp وردپرس انتخاب کنید. از AMP Header color برای انتخاب رنگ هدر، Title color برای انتخاب رنگ عنوان صفحه، Text color برای انتخاب رنگ متن نوشته و در نهایت از Post meta info color هم برای انتخاب رنگ متاداده‌های یک نوشته استفاده کنید.

Links: در این بخش می تونید تا اقدام به سفارشی سازی رنگ و استایل برای لینک‌های موجود در صفحات اقدام کنید. از قسمت Text color رنگ متن‌های لینکدار را انتخاب کنید و سپس از قسمت Hover color رنگ دلخواه برای زمانی که نشانگر ماوس روی متن لیندار قرار میگیرد را انتخاب کنید. در نهایت اگه مایل بودید تا لینک‌ها زیرخط دار شوند هم قسمت Underline را فعال کنید.

Blockquotes: از این قسمت هم میتونید تا محتوایی که به صورت نقل قول شده است را سفارشی سازی کنید. از قسمت Text color رنگ متن نقل قول را انتخاب کنید و سپس از بخش Background color هم رنگ دلخواه برای پس‌زمینه نقل قول را انتخاب کنید و در نهایت از قسمت Border color هم رنگ حاشیه برای نقل قول را انتخاب کنید.

Extra CSS و Extra code in: در نهایت از این دو بخش هم میتونید تا به ترتیب استایل سفارشی و کدهای اضافی در هدر سایت را برای نسخه amp وردپرس تعریف کنید.

غیرفعال کردن AMP وردپرس

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

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

• Enable: با انتخاب این گزینه که در حالت پیش فرض روی این گزینه قرار داره امکان نمایش نوشته یا برگه به صورت AMP وجود داره و اگر کاربری با استفاده از گوگل وارد سایت بشه نسخه amp وردپرس بهش نمایش داده میشه.
• Disable:  اما با انتخاب این گزینه نسخه amp وردپرس برای این نوشته یا برگه‌ای که مشخص میکنید غیرفعال میشه. بنابراین با کلیک روی این نوشته یا برگه از طرف گوگل کاربران به نسخه اصلی سایت هدایت خواهند شد.

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

این را هم بخوانید :