راهنمای استفاده از AMP

راهنمای استفاده از AMP

راهنمای استفاده از AMP – صفحات موبایل سریع که بطور خلاصه به آنها AMP گفته میشود یکی از پروژه های گوگل است که با هدف ارسال محتوا بر روی وب موبایل، با سرعتی 4 برابر سریعتر و استفاده از داده های کمتر به نسبت صفحات قدیمی راه اندازی شده است. با توجه به افزایش تعداد کاربرهایی که با استفاده از گوشی های همراه وب گردی میکنند، نیاز به وب موبایل سریع افزایش پیدا کرده است. درنتیجه هدف AMP این است که بعنوان یک استاندارد عمل کند که مدیران سایت ها را به داشتن سایتی با صفحات سریع و سبک تشویق کند، طوری که صفحات وب کمتر از 2 ثانیه باز شوند.
amp یک نسخه در حال تکمیل از وب موبایل که روی نسخه های جدید HTML اجرا میشود است. این فریم-ورک منبع باز، HTML را دوبله کرده و عناصری که سرعت بارگذاری صفحات را روی موبایل کند میکنند، مثل جاوااسکریپت و اسکریپت های غیرمعتبر را حذف میکند.
AMP HTML روش جدیدی است که میتوان با آن کاری کرد که صفحات وب روی موبایل کاربر بلافاصله باز شوند. این پروژه برای پشتیبانی از کش هوشمند و عملکرد مدرن و قابل پیش بینی و محتوای موبایلی زیبا طراحی شده است.
گوگل تأیید کرد که صفحه ای که با AMP HTML ساخته شده باشد میتواند همه جا از 15 تا 85% سریع تر از نسخه صفحات غیر AMP انجام شود.
AMP اول از همه، ناشران و سایت هایی را هدف میگیرد که پر از محتوای خبری، مقاله و پست وبلاگند. گوگل با این پروژه میخواهد به ناشران کمک کند تا محتوایی با سرعت نور به کاربرهای موبایل عرضه کند.

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

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

اثر گذاشتن AMP بر روی سرچ طبیعی و سرچ پولی

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

کار کرد AMP

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

مثل iframe، embed، شی، به علاوه تگ های چند رسانه ای HTML5، تصاویر، فیلمها و فایلهای صوتی، همه با عناصر معمول مثل  amp-imgو amp-video.

CSS در  AMP HTML به شدت محدود شدهاست. بین عناصر ممنوع شده میتوانیم امکانات معمول CSS را که برای انیمیشن استفاده میشدند ببینیم. در ضمن با اینکه امکان استفاده از فونتهای سفارشی وجود دارد، در عین حال تعدادی محدودیت هم هست.

میتوان چیزهای زیادی  را روی صفحه  AMP اعمال کرد اما باید از افزونه هایی مثل amp-youtube و amp-twitter که قبلا تأیید شده اند استفاده کنید. به علاوه نمیتوان در AMP نقشه های تعاملی یا داده های بصری ساخت.

پس AMP برای سایتهایی مناسب است که محتوای آنها به صورت مطلب نوشته شده باشند. برای اطلاعات بیشتر به مقاله، بهبود سئو با AMP مراجعه کنید.

چطور روی وب سایت AMP را اجرا کرد؟

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

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

مشخصات AMP رو دنبال کنید

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

بر روی صفحه AMP این کد رو بکار ببرید تا آنرا به نسخه معمولیش ارجاع دهد:

<link rel="canonical" href="https://www.example.com/url/to/regular-html-version.html" />

نکته: اگر طراحی سایت در کرج شما صفحه معمولی (غیرAMP) ندارد، باید روی صفحه AMP یک تگ استاندارد بکار ببرید که صفحه را به خودش ارجاع دهد:

<link rel="canonical" href="https://www.example.com/url/to/amp-document.html" />

صفحات AMP رو تأیید کنید

در کتابخانه JS  تأییدیه AMP هست. برای اطلاعات بیشتر، راهنمای AMP را بخوانید. داده های ساختاریافته را درست اجرا کنید تا صفحات AMP بتوانند در carousel نمایش داده شوند.

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

یک مثال از مارک-آپ که روی وب سایت رسمیAMP ارائه شده بوددر زیر آمده است که شما میتوانید از این نیز استفاده کنید:

<!doctype html>

<html amp lang="en">

<head>

<meta charset="utf-8">

<title>Hello, AMPs</title>

<link rel="canonical" href="https://example.ampproject.org/article-metadata.html" />

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

<script type="application/ld+json">

{

"@context": "https://schema.org",

"@type": "NewsArticle",

"headline": "Open-source framework for publishing content",

"datePublished": "2015-10-07T12:02:41Z",

"image": [

"logo.jpg"

]

}

</script>

<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes

-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes

-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes

-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes

-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes

-amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style

amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

<script async src="https://cdn.ampproject.org/v0.js"></script>

</head>

<body>

<h1>Welcome to the mobile web</h1>

</body>

</html>

چطور درستی اجرایAMP رو بررسی کنیم؟

گوگل، در کنسول سرچ گوگل، یک خطای جدید برای ناشرانی که AMP رو بکار میگیرند گزارش کرده است و میگوید: گزارش خطای AMP یک دید کلی نسبت به شرایط سایت شما به شما ارائه میدهد.

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

نتیجه راهنمای استفاده از AMP

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