اجرا AMP و آزمایش آن روی وردپرس: راهنمای ۷ مرحله‌ای

افزودن به لیست علاقه‌مندی ها
اجرا AMP و آزمایش آن روی وردپرس: راهنمای ۷ مرحله‌ای

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

کاربران توقع دارند صفحات موبایل نیز همچون صفحات کامپیوتری به سرعت بارگذاری شوند. آمازون، یکی از بزرگترین فروشگاه‌های آنلاین، به این نتیجه رسیده است که حتی یک ثانیه تاخیر در بارگذاری صفحه باعث کاهش ۱.۶ میلیارد دلاری درآمد سالانه‌اش می‌شود.

صفحات پر سرعت موبایل (AMP) به سرعت در حال تبدیل شدن به نمونه‌ای از صفحات با سرعت بارگذاری بالا هستند. با استفاده از پیش بارگذاری صفحه، AMP ها قادرند بدون از بین بردن هیچگونه عملکردی، ۱۵ تا ۸۰ درصد سریعتر از صفحات استاندارد تلفن همراه بارگذاری شوند. در حالی که نحوه اجرای AMP بسته به CMS سیستم مدیریت محتوا شما متفاوت است، وردپرس می‌تواند محیطی آزمایشی مناسبی برای پیش نمایش آنچه در صفحه AMP شما اجرایی است را به شما نمایش دهد.

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

توجه: بخش‌هایی از این راهنما فرض می‌کنند که افزونه Yoast SEO را به عنوان بخشی از راه اندازی وردپرس خود فعال کرده‌اید. اگر این افزونه را ندارید، می‌توانید بخش‌هایی که در اینباره صحبت می‌کند را در نظر نگیرید – اگر در خصوص سئو و وردپرس صفحه خود جدی هستید، پیشنهاد می‌کنیم از این افزونه استفاده کنید.

مرحله ۱: افزونه AMP خود را نصب و فعال کنید

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

amp

افزونه اصل که باید نصب کنید

افزونه AMP بطور خودکار نسخه‌های سازگار با AMP پست‌های شما را تولید می‌کند، که شما می‌توانید با افزودن عبارت /amp/ در انتهای URL خود، آن را مشاهده کنید. به عنوان مثال:

URL اصلی:

https://example.com/aa-bb-277080

AMP URL:

https://example.com/aa-bb-277080/amp

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

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

افزونه AMP for WP: از ویژگی های قابل توجه این افزونه می توان به ادغام Google AdSense، پشتیبانی از برچسب rel = canonical و امکان ایجاد محتوای AMP که با محتوای موجود در صفحات استاندارد تلفن همراه متفاوت است، اشاره کرد.

افزونه Glue for Yoast SEO & AMP:  یکی از مزایای استفاده از این افزونه این مسئله است که به شما این امکان را می‌دهد تا صفحات، پست‌ها و محتوای سازگار با AMP تهیه کنید. افزونه Glue for Yoast & AMP همچنین اطمینان حاصل می‌کند که افزونه پیش فرض AMP از ابر داده‌ای درستی استفاده می‌کند. همانند AMP for WP ، امکان  پیش‌نمایش شخصی صفحات AMP وجود داشته و حتی می‌توان یک لوگو سفارشی را انتخاب کرده و نحوه نمایش آن در وب سایت خود را در صفحه AMP تغییر دهید.

amp

توجه: برای اینکه این افزونه کار کند، باید افزونه Yoast SEO را نصب و فعال کنید.

مرحله ۲: راه اندازی گوگل آنالیتیکس Google Analytics

برای تنظیم صفحات خود برای ردیابی Google Analytics، ابتدا باید شناسه ردیابی خود را پیدا کنید. وارد Google Analytics شوید، سپس روی نماد چرخ دنده در پایین سمت چپ کلیک کنید تا پنل Admin ظاهر شود. هنگامی که ACCOUNT و PROPERTY را از منوهای کشویی مربوطه انتخاب کردید، روی «Tracking Info » در ستون PROPERTY کلیک کنید. از آنجا، روی «Tracking Code» کلیک کنید تا شناسه ردیابی خود را ببینید – شناسه باید با UA شروع شود.

amp

کد آنالیتیکس را مطابق عکس وارد کنید

شناسه ردیابی خود را کپی کنید ، سپس وارد WordPress شوید. در بخش سمت چپ، به AMP> Analytics بروید و شناسه ردیابی خود را در جایی که عبارت «Google Analytics» نوشته شده است، قرار دهید و سپس روی گزینه Save Changes کلیک کنید.

مرحله ۳: تنظیمات افزونه را پیکربندی کنید

در این مرحله، من در مورد برخی از تنظیمات اساسی افزونه Glue for Yoast SEO که در مرحله ۱ ذکر شد، صحبت می‌کنم. اگر شما قصد استفاده از این افزونه را ندارید، می‌توانید این مرحله را نادیده بگیرید.

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

برای شروع به قسمت Yoast SEO > AMP > Post Types بروید. در اینجا شما قادر به انتخاب نوع  پست متناسب  هستید.

amp

نحوه فعال سازی برای هر دسته از پست‌ها

در سربرگ دوم با عنوان Design، می‌توانید ظاهر و احساس صفحات دارای قابلیت AMP را تنظیم کنید. ظاهر طراحی CSS، محتوای سفارشی و رنگ پیوندها را اعمال کنید، یک AMP سفارشی را بارگذاری کنید و برای صفحاتی که تصویر مرتبطی برای آنها ندارید، یک تصویر پیش فرض تنظیم کنید.

مرحله ۴: تنظیم خود را آزمایش و معتبر کنید

اکنون که URLهای خود را ایجاد کرده‌ایم، بسیار مهم است که از صحت کار کردن آن‌ها اطمینان حاصل کنیم. اگر درست این صفحات  پیکربندی نشوند، Google آنها را در نتایج جستجو نمایش نمی‌دهد. اگرچه این امر شما را در برابر نمایش صفحه AMP نیمه کاربردی محافظت می‌کند، اما همین امر می‌تواند برای بسیاری از وب مسترها دردسرآفرین شود.

خوشبختانه، چندین راه‌حل برای آزمایش URLها شما وجود دارد. چند صفحه کلیدی را انتخاب کنید و نسخه‌های ای ام پی را با استفاده از یکی از روش‌های زیر آزمایش کنید. همانطور که در مرحله ۱ ذکر شد، می توانید برای مشاهده یک URL استاندارد، در انتهای آن amp/ ضمیمه کنید.

 

گزینه ۱: تست صفحات

به سایت https://search.google.com/test/amp مراجعه کنید

URL خود را در اینجا کپی کنید و بر روی گزینه «اجرای تست» کلیک کنید و نتیجه را یادداشت کنید.

amp

باید این پیغام را ببینید

گزینه ۲: کنسول توسعه دهنده

این گزینه مخصوص کسانی است که از مرورگر Google Chrome استفاده می‌کنند. اگر از مرورگر دیگری استفاده می‌کنید ، این گزینه برای شما مناسب نیست.

  • صفحه  را در مرورگر خود باز کنید
  • # development = 1 را به URL اضافه کنید
  • مثال:
amp

تست اعتبار سنجی در کورم

http:// example.com/hhh-sss-/amp/#development=1

  • کنسول Dev Tools کروم را باز و خطاهای اعتبارسنجی را بررسی کنید.
  • اگر همه چیز صحیح باشد، اعتبارسنجی باید موفق باشد.

خطاها را یکی یکی در اینجا ببینید

گزینه ۳: اعتبار سنجی

  • به سایت https://validator.ampproject.org/ بروید
  • URL AMP را در قسمت URL جاگذاری کرده و بر روی گزینه Validate کلیک کنید.
  • این ابزار هر گونه خطایی را برجسته می‌کند و آنها را در HTML پرچم گذاری می‌کند.

 

amp

نکته: شما همچنین می‌توانید از افزونه AMP Validator Chrome extension استفاده کنید تا همان نتایج مشابه را در URL AMP خود مشاهده کنید.

مرحله ۵: مهم‌ترین URLهای AMP خود را برای ایندکس شدن در گوگل ارسال کنید

اگر از تست AMP از طریق کنسول جستجوی گوگل استفاده می‌کنید، می‌توانید هنگامی که آزمون را اجرا کردید و صفحه تأیید شد، بر روی دکمه submit to Google  کلیک کنید:

amp

نمایی از بخش amp در گوگل سرچ کنسول و خطا‌های آن

از طرف دیگر، اگر به حساب جستجوی کنسول گوگل خود وارد شوید، می‌توانید گزینه submit to Google  را جستجو کرده و URL را مستقیماً در نتایج جستجوی گوگل ارسال کنید:

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

مرحله ۶: به منظور عیب‌یابی خطاها، کنسول جستجوی گوگل را بررسی کنید

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

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

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

مرحله ۷: سرعت AMP را تست کنید

پس از اتمام موارد فوق، اکنون زمان آن رسیده است که مزایای تلاش‌هایتان را ببینید. صفحات استاندارد تلفن همراه و AMP خود را از طریق ابزار سرعت صفحه مانند google pagespeed insights  اجرا کنید و نتایج را با یکدیگر مقایسه کنید:

با AMP شروع کنید!

گوگل با مبنا قرار دادن معیارهای فهرست ” اول موبایل”  و pagespeed inches برای تبدیل شدن به یک عامل رتبه بندی تلفن همراه استفاده می‌کند و اهمیت این موارد به اوج خود رسانه است. اما قبل از این نیز برای آن که ترافیک تلفن همراه شما به موفقیت چشم‌گیری دست یابد، استفاده از  این دسته صفحات  از اهمیت بسیاری برخوردار است. با دنبال کردن مراحل بالا، باید بتوانید این صفحات را برای سایت وردپرسی خود به سرعت و به راحتی فعال کنید.

خلاصه مطلب

۰ ۰ vote
Article Rating

AMP چیست؟

نوعی از صفحات وبی هستند که مخصوص موبایل ساخته شده‌اند و سرعت بارگذاری 15 تا 80٪‌بیشتر از دیگر انواع صفحات دارند.

در وردپرس AMP چگونه راه اندازی می‌شود؟

افزونه AMP ساخته شده توسط Automattic برای شروع اجرای AMP لازم است.

برای بهینه سازی اولیه AMP باید چه کار کنیم؟

نیاز به یک افزونه دیگر داریم تا آن را به افزونه Yoast وصل کنیم به نام افزونه Glue for Yoast SEO & AMP

آنالیز AMP چگونه انجام می شود؟

باید آن را به گوگل آنالیتیکس وصل کنید

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

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

تاریخ انتشار: ۲۷ بهمن, ۱۳۹۸
آخرین ویرایش: ۲۷ بهمن, ۱۳۹۸
منبع: searchengineland
      اشتراک گذاری

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

    طراحی سایت

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

    طراحی سایت
    نظرات کاربران (0)
    اشتراک
    اطلاع از
    guest
    0 Comments
    Inline Feedbacks
    View all comments
    0
    Would love your thoughts, please comment.x
    ()
    x