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

 amp چیست

AMP چیست :

Amp مخفف Accelerated Mobile Page و به معنی صفحه تلفن همراه سریعتر می باشد که یک پروژه از Google و توییتر است که برای ایجاد صفحات سریع تلفن همراه طراحی شده است. اساسا یک HTML ساده است، یک HTML بهینه شده برای نسخه های نمایشی وب سایت شما در گوشی های همراه

به گفته MOZ  نسخه AMP یک فرزند عشق است که از یک پروژه بین گوگل و توییتر متولد شده است، که می خواست یک تجربه سریعتر تلفن همراه را ارائه دهد.

 آموزش AMP گوگل

چرا amp سریع می باشد

Amp  یک کتابخانه بهینه سازی می باشد که برای بالا بردن سرعت وب سایت در گوشی های همراه است شما در صفحات amp همانند نسخه های معمولی html مجاز به استفاده از کد ها به صورت حرفه ای یا دلخواه نیستید شما تنها می توانید برخی از css  ها را استفاده کنید و همچنین از کتابخانه js  این نسخه برای راه اندازی و استفاده از  کدهای js استفاده نمایید

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

 

 

چگونه AMP کار می کند:

( محدودیت های CSS، محدودیت های جاوا اسکریپت ، تصویر و ویدئو )

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

  • برخی از تگ های HTML قابل استفاده نیستند
  • فقط یک نسخه ساده از CSS می تواند مورد استفاده قرار گیرد
  •  مواردی  مانند تصاویر و فیلم ها می توانند در صفحات AMP با ذخیره آن ها در گوگل منتشر شوند

 

 

آیا amp  روی سئو تاثیر گذار می باشد :

در این مورد بحث های زیادی شده است و هر فردی یک نظر خاص را دارد البته شاید این نظرات بر حسب تجربه باشد و برخی از آنها درست و برخی غلط باشد اما این ابزار  در گوگل وبسمتر قرار گرفته است و این نشان می دهد که گوگل به این ابزار توجه دارد amp اگر به  صورت مستقیم در سئو سایت شما تاثیر گذار نباشد قطعا می تواند سرعت وب سایت شما که یک فاکتور مهم در سئو می باشد را بالا ببرد شاید بهتر باشد بگوییم که اگر به  صورت مستقیم در سئو سایت تاثیر گذار نباشد می تواند به  صورت غیر مستقیم در سئو تاثیر گذار باشد

 

 

 

AMP  روی چه دستگاه های قابل مشاهده می باشد

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

البته یک نکته دیگر نیز می تواند نشان دهد که نسخه AMP  می تواند مورد نیاز برای گوشی های همراه باشد و آن این است که سرعت در گوشی های همراه به نظر مهم تر می باشد تا  سرعت در نسخه دسکتاپ  و اگر وب سایت دارای سرعت لود کمی باشد قطعا می تواند موجب ترک وب سایت توسط بازدید کننده شود

 

 

 

نصب AMP

لازم به ذکر می باشد که بدانید که نسخه AMP  و نسخه دسکتاپ وب سایت متفاوت می باشد این به این معنی می باشد شما می توانید برای وب سایت خود دو نسخه مختلف از وب سایت را در دو شکل تحت موبایل(AMP) و تحت دسکتاپ ایجاد نمایید پس سعی کنید در هر دو نسخه به بهترین شکل ممکن طراحی وب سایت خود را انجام دهید

 

 

 

به  طور کلی AMP به  دو صورت قابل نصب و پیاده سازی می باشد

اگر از CMSهای رایج مانند وردپرس و جوملا استفاده می کنید می توانید از پلاگین های رایج استفاده کنید

اگر از CMS اختصاصی استفاده می کنید  باید برای تهیه amp کدنویسی اختصاصی را انجام دهید

نصب AMP  در وردپرس (amp وردپرس)

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

نصب amp برای کد نویسی اختصاصی

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

1- ابتدا کد زیر را به صفحه اصلی و غیر amp اضافه می کنیم

 

<link rel=”amphtml” href=”https://www.example.com/url/to/amp/document.html”>

2-سپس صفحه ای که به  صورت html می باشد و برای amp ایجاد کردیم را باز کرده و در قسمت head آن کد زیر را  قرار می دهیم

<link rel=”canonical” href=”https://www.example.com/url/to/full/document.html”>

3-  تگ <html > را به <“html amp lang=”fa> تغییر دهید 

4- برای دسترسی یه کتابخانه js amp  کد زیر را در <head > قرار دهید 

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

5- در صورت نبودن کدهای زیر آنها را به هد صفحه خود اضافه کنید

<meta charset=”utf-8″>

<meta name=”viewport” content=”width=device-width,minimum-scale=1″>

6-تمامی تگ های تصاویر را از حالت img به  <amp-img> تغییر دهید مانند کد زیر

<amp-img src=”welcome.jpg” alt=”Welcome” height=”400″ width=”800″></amp-img>

7- کد های تغییر ظاهر و تغییر قالب css را در داخل <style amp-custom> قرار دهید

<style amp-custom>
/* any custom style goes here */
body {
background-color: white;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
</style>

تست amp

بعد از اینکه amp رو راه اندازی کردید بهتره amp رو مورد بررسی و تست قرار بدید و در صورتی که به درستی عمل نمیکنه اون رو تصحیح کنید برای تست amp  می توانید از ابزار گوگل استفاده کنید برای این منظور  به  آدرس https://search.google.com/test/amp بروید و صفحات خود رو تست کنید

تست amp

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×