آموزش طراحی قالب امپ AMP

آموزش وردپرس / طراحی پوسته

آموزش ساخت قالب امپ AMP

AMP مخفف Accelerated Mobile Pages به معنای افزایش سرعت لود سایت در موبایل می باشد. اگر شما قصد دارید برای سایت خود یک قالب امپ طراحی کنید باید چند نکته را در نظر بگیرد:

  1. نوع مرورگر بازدیدکننده های سایت شما
  2. نوع گجت بازدید کننده شما (موبال یا رایانه)

تا این لحظه که در حال نگارش این مطلب هستم مرورگر های Chrome  Firefox  Edge  Safari  Opera از AMP پشتیبانی می کنند پس اگر بازدیدکننده های سایت شما اکثرا از مروگر دیگری استفاده می کنند استفاده از AMP توصیه نمی شود چرا که سایت شما به درستی برای بازدیدکننده لود نخواهد شد.

نکته دوم گجتی می باشد که بازدید کننده وارد سایت شما می شود، اگر اکثرا با رایانه از سایت شما بازدید میکنند پس نیازی به استفاده از AMP ندارید چرا که AMP بیشتر برای بازدید کننده موبایل می باشد.

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

ساختار یک صفحه AMP :

  • ساختار HTML کلی یک صفحه AMP به صورت زیر می باشد:
<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://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": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "۲۰۱۵-۱۰-۰۷T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <style amp-boilerplate>
استیال شما
</style>
</noscript>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

 

ادامه دارد…

سوالات و مشکلات خود را در دیدگاه ها بیان کنید، حتما پاسخ خواهیم داد.

دیدن این مطالب رو به شما پیشنهاد میکنیم...

پاسخ دهید

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