22019286مشاوره رایگان طراحی سایت
گوگل فریم ورک AMP را معرفی کرد

گوگل فریم ورک AMP را معرفی کرد

AMP یا Accelerated Mobile Pages چیست؟

گوگل به تازگی یکی از ابزار ها جدید خود، به نام AMP را در اوایل سال 2016 منتشر کرده است. با توجه به افزایش استفاده از تلفن همراه بسیاری از افراد برای دست یابی به اطلاعات دنیای وب از تلفن همراه خود استفاده می کنند و آمار استفاده از موبایل روند صعودی خود را می پیماید. در نتیجه سرعت لود صفحات در موبایل از اهمیت ویژه ای برخوردار است. گوگل به تازگی از فرم ورک AMP رو نمایی کرده است و هدف از ارائه این ابزار بهبود عملکرد صفحات وب حاوی متن, تصویر، فیلم، انیمیشن و…. در موبایل می باشد. هدف از این فناوری گوگل ارائه راهکاری سریع و بهینه برای کاربران می باشد تا به راحتی بتوانند, محتوای صفحات وب, خصوصا سایت هایی که دارای متن زیادی می باشند( مانند سایت های خبری) را به راحتی مشاهده کنند.

فریم ورک AMP چیست؟

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

شرکت های مختلفی از جمله WordPress.com، Pinterest، APPLE، LinkedIn و دیگر شرکت هایی که در فناوری های وب فعالیت می کنند در این پروژه شرکت کرده اند تا همگام با این فناوری گوگل در جهت سهولت کاربران گام بردارند.

چرا AMP موجب افزایش سرعت لود صفحات موبایل می شود؟

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

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

amp چیست

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

چگونگی نمایش AMP در نتایج جستجو

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

نحوه نمایش amp در گوگل
با توجه به اینکه سایت های خبری مانند CNN و BBC هم اکنون به این سیستم مجهز شده اند کافیست عبارت iran را بوسیله موبایل خود در گوگل جستجو کنید تا در بخش Top Stories نمونه هایی از نحوه نمایش AMP را مشاهده نمایید. در این بخش یک اسلایدر قرار داده شده که اطلاعات خود را مستقیما از صفحاتی با ساختار کدنویسی AMP دریافت میکند.

چگونه سایت خود را بر مبنای استاندارد های AMP استاندارد کنیم؟

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

شما با مراجعه به وب سایت رسمی AMP یا صفحه رسمی AMP بر روی Github می توانید در راستای بهینه سازی صفحات سایت خود بر مبنای این فریم ورک گام بردارید.

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

Review: 3.67 - "گوگل فریم ورک AMP را معرفی کرد" by , written on 26/12/2015

پلت فرم AMP یا همان Accelerated Mobile Pages با هدف افزایش خوانایی و سرعت بارگذاری صفحات وب در موبایل پایه گذاری شده است.

پرسش و پاسخ تکمیلی سوال شما توسط کارشناسان وبسیما پاسخ داده شده و از طریق پیامک اطلاع رسانی میشود
1 Star2 Stars3 Stars4 Stars5 Stars
37
  • مستر گمنام

    روی سایت بنده amp توسط افزونه وردپرس فعال است الان در url یا آدرس بار amp اضافه شده و بصورت site.ir/amp/id/addres/ است در صورتی اکثر سایت ها مثل شما amp آخر آدرس بار است در این صورت اگر یک روز نخوام استفاده کنم و افزونه را غیرفعال کنم آیا همه صفحات 404 خواهد شد؟

    18/02/2018پاسخ...
    • Websima

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

      18/02/2018پاسخ...
  • مستر گمنام

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

    12/02/2018پاسخ...
    • Websima

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

      12/02/2018پاسخ...
  • محمد ایرانی

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

    07/02/2018پاسخ...
    • Websima

      سلام
      زمانیکه با موبایل توی گوگل جستجو میکنید سایت هایی که AMP دارند در کنار نتایج آنها یک علامت شبیه به رعد و برق (لوگوی AMP) نمایش داده میشود. بعنوان مثال سایت وبسیما از AMP استفاده میکند.

      08/02/2018پاسخ...
  • محمد رحیمی

    سلام
    بنده برای وب سایتم یه تم دارم آیا لازمه یه تم دیگه برای amp هم طراحی کنم یا نمیخواد — چون من کدای amp رو چک کردم یکیش برای مثال img رو تبدیل کرده بود به amp-imgو مقادیر خودش رو هم داده بود — بعد مسئله بعدی اینکه چطور ما ریسپاسیو رو بهش اعمال کنیم ؟
    تشکر

    28/11/2017پاسخ...
    • Websima

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

      28/11/2017پاسخ...
  • valkano

    بسیار مفید و قابل استفاده بود
    میشه از این فریم ورد در کنار فرم ورد کدیگنایتر هم استفاده کرد؟

    24/10/2017پاسخ...
    • Websima

      سلام دوست عزیز
      بله این یک فریم ورک برای frontend هست و با هر سیستمی میتونه سازگار بشه

      26/10/2017پاسخ...
  • مهسا

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

    23/08/2017پاسخ...
    • Websima

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

      30/08/2017پاسخ...
  • مهسا

    قالب من ریسپانسیو هست ولی چطور می تونم به amp تبدیل کنم؟

    21/08/2017پاسخ...
    • Websima

      سلام دوست خوبم
      این دو مورد کاملا مستقل از هم هستند. برای AMP شما نیاز به کدنویسی های جانبی دارید و باید ساختار اون رو به سایت خودتون اضافه کنید. اگر از وردپرس استفاده میکنید براش افزونه هست ولی برای سیستم های دیگه میتونید از آموزش های ampproject.org استفاده کنید.

      23/08/2017پاسخ...
  • مهسا

    با اینکه توو ایران میگن روی بازدید تاثیری نمیذاره ولی دقیقا بعد از پیام گوگل ورودی گوگل من نصف شد:
    Search results on mobile devices have begun to direct users to the equivalent AMP page, in preference to the equivalent app or web page. This might result in a decrease of traffic to your app pages when an equivalent AMP page exists.

    21/08/2017پاسخ...
    • Websima

      سلام
      متوجه نشدم. بعد از راه اندازی AMP بازدید شما نصف شد؟

      23/08/2017پاسخ...
  • سایت ساز

    با سلام و ممنون بابت مقاله خوبتان
    ما یک سایت بانک مشاغل داریم که میخواهیم برای اون یک اپلیکیشن موبایل بسازیم.سوالم این هست میشه سایت رو با amp بهینه کرد و درون یک وب ویو اندروید نمایش بدهیم.آیا کارایی نسخه native را خواهد داشت.
    ارتباط amp با pwa چیست؟

    01/07/2017پاسخ...
  • امیر

    سلام.
    خیلی مفید و کاربردی بود.
    ممنون

    20/10/2016پاسخ...
  • رضا

    سلام در وبمستر در تنظیمات زیر نمودار قرمز رنگ به حالت صعودی بالا میرود مشکل از کجاست ؟

    Accelerated Mobile Pages > Prohibited or invalid use of HTML Tag
    Remove prohibited HTML tags, or fix attributes or values not supported by the AMP standard. AMP pages with prohibited or invalidly used HTML tags may appear in Google search results without AMP-specific display features. Learn more.

    04/08/2016پاسخ...
    • Websima

      سلام
      صفحاتی که برای آنها AMP فعال نیست نمایش میدهد. آیا در سایت شما چنین امکانی فراهم شده؟

      05/08/2016پاسخ...
  • محمد

    سلام وب سیمای عزیز. سوال دارم:
    پس استفاده از این نوع از کدنویسی چه فرقی با استفاده از Microdata هایی نظیر Schema و json-ld داره؟ ممنون میشم تفاوت این دو نوع رو مختصراً توضیح بدید برام.

    03/04/2016پاسخ...
    • Websima

      سلام دوست عزیز
      هیچ تفاوتی با هم ندارند. مثل این میمونه که شما سایت رو با php بنویسید یا ASP. با هر کدوم که باشه اگر مسلط باشید و خوب پیاده سازی کنید نتیجه مثبت خواهد بود. البته خود گوگل پیشنهاد میده که از microdata استفاده کنید بهتره.

      04/04/2016پاسخ...
      • محمد

        وب سیما جان، ظاهراً سوال من رو متوجه نشدید. البته جواب یه چیزی بهم یاد داد ولی سوالم اون نبود. منظور اینکه استفاده از میکرودیتا ها بهتر یا این ای ام پی؟یا هردو رو باید استفاده کنیم؟
        شما قضاوت کن، یه cms دارم شونصد هزار صفحه شده. چه طور همه این ها رو روش اعمال کنم اخه؟ هم AMP هم میکرودیتا! هر روز یه فریم ورد اضافه میشه! عجبا!
        چه کنیم به نظر شما؟

        24/05/2016
        • Websima

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

          24/05/2016
        • محمد

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

          28/05/2016
        • Websima

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

          30/05/2016
  • اشکان

    با سلام و خسته نباشید خدمت شما و ممنون از مطالب خوبتون
    یه سوال داشتم ممنو میشم جواب بدید
    این دوتا فایل که توی سورس سایت وردپرسی بارگذاری میشن چه کاری انجام میدن و ایا میشه کاری کرد تو قالب بارگذاری نشن چون حجم جاوای سایت رو بالا بردن

    wp-includes-js/query/jquery.js
    wp-includes/js/jquery/jquery-migrate.min.js

    11/02/2016پاسخ...
    • Websima

      سلام دوست عزیز
      اینها فایل های مربوط به jquery هستند و اگر نباشند ممکنه سایر فایل های شما که به این دوتا وابسته هستند به درستی کار نکنند. اگر خودتون نسخه دیگری از فایل jQuery را فعال کردید میتونید اینها رو غیرفعال کنید و مشکلی پیش نمیاد

      12/02/2016پاسخ...
  • ترک زاده

    مطلبتون جالب بود ممنون

    27/01/2016پاسخ...
  • رضا

    سلام وقت بخیر
    لطفا چند نمونه از پلاگین AMP برای وردپرس معرفی کنید

    03/01/2016پاسخ...
    • Websima

      سلام
      یه افزونه هست که خود وردپرس معرفی کرده. توی گوگل جستجو کنید wordpress amp plugin اولین نتیجه رو کلیک کنید

      03/01/2016پاسخ...
      • رضا

        سلام وقت بخیر
        من پلاگین amp رو نصب کردم به نظرم تغییری در سرعت لود سایت انجام نشد
        این پلاگین قسمتی به نام تنظیمات نداره و فقط ویرایش دارد؟
        ایا امکان دارد ان پلاگین رو نصب و بررسی کنید؟
        با تشکر

        04/01/2016
        • Websima

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

          04/01/2016
  • پروانه

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

    28/12/2015پاسخ...
    • Websima

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

      29/12/2015پاسخ...
  • امین

    لطفا درباره flexbox در css صحبت کنید .
    flexboxfroggy.com به زبان فارسی هم ترجمه شده بدنیست به کاربران معرفی کنید ….
    ممنون بابت مطلب خوبتون !

    28/12/2015پاسخ...
    • Websima

      بله، ممنون از پشنهاد شما

      29/12/2015پاسخ...
ورود رمز عبور خود را فراموش کرده اید؟
ارسال قبلا ثبت نام کردید؟
ثبت نام قبلا ثبت نام کردید؟