6 روش جلوگیری از اشتباهات رایج در پیاده سازی AMP

در زمان انتشار صفحات شتاب دهنده موبایل (AMP) چگونه از اشتباهات رایج جلوگیری کنیم

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

1. فقط فایل های معتبر AMP را منتشر کنید

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

این اعتبارسنج را می توانید با افزودن "#development=1" به URL صفحه AMP اجرا کنید. برای مثال:

https://ampbyexample.com#development=1

می توانید نتیجه اعتبارسنجی را در Javascript console مرورگر خود ببینید:

2. از متادیتای صحیح استفاده کنید

اضافه کردن متادیتا به فایل های AMP، سایت های واسطه را قادر می سازد تا بهتر صفحات AMP شما را نشان دهند. برای مثال، Google Top Stories Carousel with AMP در حال حاضر از دسته بندی های متادیتای مقاله و ویدئو پشتیبانی کرده و از این موارد برای تفسیر پیش نمایش های مقاله استفاده می کند:

استفاده از ابزار Structured Data Testing Tool روشی عالی برای آزمایش این است که آیا متادیتای موجود در فایل های AMP شما صحیح است یا خیر. اطمینان حاصل کنید که در فیلتر "All data"، "AMP Articles" نشان داده می شود و همه چیز سبز است. اینجا مثالی از این مورد را می توانید مشاهده کنید.

3. اطمینان حاصل کنید که صفحات AMP شما را می توان پیدا کرد

پلتفرم های واسطه ای مانند Google Top Stories Carousel with AMP، صفحات AMP را با ورژن canonical صفحه پیدا می کند. برای به وجود آوردن امکان انجام این کار، از فایل های AMP HTML خود به ورژن canonical آنها لینک بدهید (این ورژن، معمولا ورژن دسکتاپ است):

<link rel="canonical” href="http://example.ampproject.org/article.html" />

و مسئله مهم این است که باید از ورژن canonical (و هر جایگزینی) به فایل های AMP خود لینک دهید:

<link rel="amphtml" href="http://example.ampproject.org/article.amp.html" />

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

4. به Crawler ها یا خزنده ها امکان دسترسی به فایل های AMP خود را بدهید

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

• در فایل txt، برای خزنده ها ممنوعیت دسترسی ایجاد نکنید:

User-agent: *
Disallow: /amp/               <= don't!

• متا تگ robots noindex را به فایل های AMP HTML اضافه نکنید:

<meta name="robots" content="noindex" />                   <= don't!

• در تیتر X-Robots-Tag HTTP فایل های AMP خود، نوایندکس را وارد نکنید:

$ curl -I http://www.example.com/amp.html       

HTTP/1.1 200 OK
Date: Tue, 25 May 2010 21:42:43 GMT
(…)
X-Robots-Tag: noindex                      <= don't!
(…)

5. با استفاده از Google AMP Cache، بررسی کنید صفحات AMP شما به خوبی بارگذاری می شوند

Google AMP Cache صفحات معتبر AMP را ذخیره کرده و دسترسی کاملا سریعی برای آنها فراهم می کند. برای مثال، Google Top Stories Carousel with AMP از Google AMP Cache برای نمایش مقالات استفاده می کند. حافظه cache تصاویر و فونت ها را نیز علاوه بر اسناد ذخیره می کند. به همین دلیل هم حتما باید بررسی کنید که صفحات AMP شما زمانی که با Google AMP Cache بارگذاری می شوند، به خوبی کار می کنند.

بارگذاری صفحات AMP با استفاده از Google AMP Cache ساده است. Google AMP Cache URL بسته به اینکه آیا URL سورس در HTTP یا HTTPS موجود است یا خیر، ساخته می شود:

• HTTP: https://cdn.ampproject.org/c/AMP_URL_WITHOUT_SCHEME
• HTTPS: https://cdn.ampproject.org/c/s/AMP_URL_WITHOUT_SCHEME

وقتی AMP_URL_WITHOUT_SCHEME لوکیشن فایل AMP بدون //:(http(s است. برای مثال، AMP Cache URL برای https://ampbyexample.com عبارت است از:

https://cdn.ampproject.org/c/s/ampbyexample.com

وقتی صفحات AMP خود را با Google AMP Cache بارگذاری می کنید، با استفاده از ابزارهای توسعه دهنده موجود در مرورگر خود بررسی کنید که تمامی منابع خارجی، شامل تمامی موارد زیر با موفقیت قابل بارگذاری باشند:

• تصاویر
• ویدئوها
• Endpoint های تحلیلگر (amp-analytics)
• Endpoint های amp-pixel
• فونت های خاص
• Iframe ها

مهم: دقت کنید که Google AMP Cache از protocol relative URLs های مرتبط با پروتکل پشتیبانی نمی کند. در عوض می توانید در صورت امکان با HTTPS به همه ویژگی ها (asset) لینک دهید. می توانید در این لینک بیشتر درباره نحوه کار Google AMP Cache مطالعه کنید.

6. ورژن یکسانی از صفحات AMP خود را به همه نشان دهید

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