تجربه استفاده از تکنولوژی amp در وبسایت تازه نفس

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

اصلا AMP چیه؟

مخفف Accelerated Mobile Pages که ویکی پدیا اون رو پروژه صفحات موبایلی پرشتاب تعریف کرده.

چرا تصمیم گرفتم از AMP استفاده کنم؟

در زمینه کاری تازه نفس، استفاده از این تکنولوژی که سرعت بارگذاری سایت رو به شکل سرسام آور افزایش میده، واقعا یک مزیت رقابتی به حساب میاد. به گفته سایت Nailpatel حدود 40% از بازدیدکنندگان سایتها، صفحه ای که بیشتر از 3 ثانیه بارگذاریش طول بکشه رو میبندن!

چقدر بیرحمانه!

سایت تازه نفس در مقابل رقبا

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

دلیل اهمیت سرعت باز شدن سایت روی موبایل

در چنین موقعیتی، تصمیم گرفتم که تکنولوژی AMP گوگل رو روی سایت تازه نفس پیاده کنم.

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

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

تکنولوژی AMP در وردپرس

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

خیلی زود آخرین ورژنش رو از پنل کاربریم توی ژاکت دانلود کردم و شروع کردم به تنظیمش.

اولین تاثیرات AMP روی تازه نفس

در روز سوم از نصب این پلاگین، تاثیرات خیلی زود خودش رو نشون داد.

ورودی گوگل از روزی 50 تا به 100 تا افزایش پیدا کرد و این با توجه به اینکه همش 2 ماه بود که داشتم روی تازه نفس کار میکردم یک جهش اولیه ی خیلی خوب بود و منو به رسیدن به حد نصاب اولیه روزانه 1000 کلیک ورودی گوگل خیلی امیدوارتر کرد.

مشکلات استفاده از AMP در وردپرس

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

خطای The tag 'link rel=canonical' appears more than once in the document

اولین خطای AMP روی تازه نفس مربوط به این مورد بود که در صفحات مطالب، دو بار ویژگی کانونی برای لینک پست تعریف شده بود. یک بار توسط افزونه سئوی RANKMATH و بار دوم توسط خود پلاگین WP AMP

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

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

این کار رو با حذف این قطعه کد که داخل یکی از فایلهای افزونه سئوی rankmath بود انجام دادم:

<?php

if ( ! is_404() ) {

    echo '<link rel=&quotcanonical&quot href=&quot' . $this->get_canonical_url() . '&quot>';

}

?>

خب. به همین راحتی. کار به پایان رسید.

اما آیا این تنها خطایی بود که در کنسول گوگل راجع به تکنولوژی AMP به وجود اومده بود؟ خیر...

مشکل نمایش فریم سیاه به جای بارگذاری ویدیو در کد ویدیوهای amp آپارات!

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

اما حالا این امکان تبدیل به یه مشکل جدید شده بود:

کد AMP ویدیوهای آپارات روی نسخه موبایل سایت تازه نفس کار نمیکرد و یه فریم سیاه به جای ویدیو نمایش داده میشد!

در ابتدا از AMP ناامید شدم اما... نتونستم کاملا قیدش رو بزنم! چون از پیاده سازی AMP هدفی داشتم که می خواستم به اون برسم!

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

[این پست آپدیت می شود...]