آموزش AMP

آموزش AMP - ساخت اولین صفحه AMP

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

در مرحله اول، بهترین کار این است که کد زیر را بطور کامل کپی کنید و در صفحه ای با پسوند .html ذخیره کنید تا ادمه کار رو جلو ببریم:

<!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": "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>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

محتوای موجود در بخش body همون محتوا هایی هستند که تا حالا ازشون استفاده کردیم. اما محتوای موجود در بخش head یک سری ساختارهای جدید دارند که بهتره به توضیح تک تک اونها بپردازیم:

تگ های نشانه گذاری ضروری

یک سند AMP باید حتما دارای موارد زیر باشد:

  • ابتدا با <!doctype html> شروع شود.
  • در بالاترین مرحله شامل <html ⚡> باشد (همچنین <html amp> هم مورد قبول هستش)
  • باید شامل تگ های <head> و <body> باشد (در HTML معمولی، این تگ ها اختیاری هستن)
  • تگ <meta charset="utf-8"> در اولین خط بعد از تگ <head> قرار بگیرد.
  • در خط بعدی حتما باید <script async src="https://cdn.ampproject.org/v0.js"></script> قرار بگیرد تا بتواند کتابخانه AMP JS را قبل از هر کاری فراخوانی کند.
  • حتما شامل یک تگ <link rel="canonical" href="$SOME_URL" /> در داخل <head> باشد. در بخش href باید به سند اصلی اشاره کرد که مربوط به نسخه HTML این صفحه می باشد.
  • حتما کد دستوری <meta name="viewport" content="width=device-width,minimum-scale=1"> را باید در داخل <head> استفاده کنید.
  • در ادامه کدهای داخل <head> باید کدهای مقابل هم قرار گیرند: <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>

تگ های نشانه گذاری اختیاری

علاوه بر موارد بالا، کدهای ما شامل یک تعریف Schema.org می باشد که اجباری به قرار گرفتن آن در کدها وجود نداشت که به منظور بهبود ارتباط با موتور جستجوگر گوگل مورد استفاده قرار می گیرد که توضیح نحوه استفاده از آن، در این بخش ممکن نیست.

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

خبر خوب! ما اولین صفحه AMP خودمون رو ساختیم. البته این صفحه شامل موارد زیادی نیست. در درس های آینده به توضیح اینکه چطوری میتونیم از تصاویر، آیتم های اختصاصی AMP، استایل ها و ... استفاده کنیم، خواهیم پرداخت.

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش AMP

Learn Accelerated Mobile Pages

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...