Accelerated Mobile Pages (AMP) Jot Down

Posted on by yiingw

AMP: Accelerated Mobile Pages (Google出品)

Use HTML, CSS, and JavaScript to create mobile pages and utilize a number of optimization techniques for lightning-fast load times.

AMP is a highly specialized way of making super-fast mobile web pages.

Currently, the ideal use for AMP is static content, such as articles, blog entries, and informational pages.

Core Component: AMP HTML, AMP JS, AMP Cache; Better using HTTPS

Rules

AMP Required Markup

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>......</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">
      {
       ......
      }
    </script>
    <style amp-boilerplate>......</style>
  </head>
  <body>
    ......
  </body>
</html>

AMP Image Tag

加上layout=”responsive”可讓image scales and resizes.

<amp-img src="...." alt="..." layout="responsive" height="..." width="..."></amp-img>

Customed Style

AMP cannot include external stylesheets. Every AMP page can only have a single embedded stylesheet.  AMP requires all elements to have an explicit size set.

<style amp-custom>...

Link AMP + NonAMP Page

<link rel="amphtml" href="AMP Page"> → link AMP Page
<link rel="canonical" href="NonAMP Page"> → link NonAMP Page

// 如果只有一個Page也需加上
<link rel="canonical" href="指向自己">

Validate AMP

加上#development=1時，使用Chrome→More Tools→Developer Tools，在Console中會列出invalid AMP的Code，可將其修改為符合AMP的syntax

https://..../AMP Page#development=1

Reference

http://www.business2community.com/mobile-apps/amp-vs-responsive-web-design-01420003#ript19OGkSf3XxLG.97

https://www.ampproject.org/docs/tutorials/create/basic_markup

https://validator.ampproject.org

https://search.google.com/structured-data/testing-tool (Data Structure Testing Tool)

Leave a comment