Accelerated Mobile Pages (AMP) คืออะไร?

Accelerated Mobile Pages (AMP) คืออะไร?

นักพัฒนาเว็บไซต์ และผู้ดูแลเว็บไซต์ รวมไปถึงผู้ที่สนใจหลายๆท่าน ที่ใช้งาน Google Webmaster Tools น่าจะเคยเห็นเมนู Accelerated Mobile Pages ที่โผล่ขึ้นมาใน Google Webmaster Tools กันบ้างแล้วนะครับ สำหรับบางท่านที่ไม่ได้สังเกตุก็ไม่เป็นไรครับ หรือบางท่านเห็นแล้วแต่ก็อาจจะงงๆ หรือไม่ทราบว่ามันคืออะไร ทำไมมันถึงได้โผล่มา วันนี้ผมจะมาอธิบายว่าเจ้า Accelerated Mobile Pages มันคืออะไร

Accelerated Mobile Pages หรือ AMP เป็น Open Source ที่ทาง Google ได้พัฒนาขึ้นมาเพื่อแก้ไขปัญหาเรื่องการทำงาน หรือการโหลดหน้าเว็บ และการแสดงผลบนอุปกรณ์เคลื่อนที่ หรือสมาร์ทโฟนต่างๆ ที่ช้ามากๆ เพื่อให้เว็บแสดงผลรวดเร็วทันทีที่กดไม่ต้องโหลด ซึ่งเป็น Concept เดียวกับ Instant article ซึ่งหากเรา Search หรือค้นหาเว็บไซต์ต่างๆ บนอุปกรณ์สมาร์ทโฟนแล้ว เว็บไซต์ไหน Support หรือรองรับ AMP ก็จะมีสัญลักษณ์รูปสายฟ้าโผล่ขึ้นมา

Accelerated Mobile Pages (AMP) มีองค์ประกอบหลัก 3 ส่วน ดังนี้
  • HTML Components คือ แท็ก HTML ในข้อกำหนด AMP ที่ Google กำหนดให้เราเปลี่ยนมาใช้แทน แท็ก แบบเดิม
  • Javascript Library คือ AMP JS Libary ที่จะช่วยให้การแสดงผลรวดเร็วของหน้าเว็บ HTML AMP
  • Validator คือ เครื่องมือสำหรับตรวจสอบว่าหน้าเว็บได้เขียน Code ถูกต้องตามหลัก AMP HTML แล้วหรือไม่
ข้อกำหนด เกี่ยวกับ AMP ที่ Google กำหนดไว้
  • หน้า AMP ต้องเป็นไปตาม ข้อกำหนด โครงสร้าง AMP HTML
  • เนื้อหา และการดำเนินการในหน้า AMP จะต้องตรงตามรูปแบบหน้า AMP
  • ชุดรูปแบบ URL ของหน้า AMP ควรดูแล้วสมเหตุสมผลสำหรับผู้ใช้ ตัวอย่างเช่น example.com/giraffes จะต้องกำหนด รูปแบบ URL เป็น amp.example.com/giraffes หรือ example.com/amp/giraffes แทนที่จะเป็น test.com/giraffes เนื่องจากเมื่อผู้ใช้คลิกลิงก์ไปยังหน้า AMP ของคุณจาก Google Search เขาจะเห็น URL ของหน้า AMP ในเบราว์เซอร์ (เหมือนหน้าเว็บทั่วไป) และถ้า URL ที่แสดงไม่เกี่ยวข้องกับเว็บไซต์หลักเลย ผู้ใช้อาจจะสับสนได้
  • หน้า AMP จะต้อง ทำงาน ตามที่คาดไว้สำหรับผู้ใช้ และรวมอยู่ในฟีเจอร์ที่เกี่ยวข้องกับ AMP หน้าที่มี AMP แต่ใช้งานไม่ได้จะไม่มีสิทธิ์ใช้งานฟีเจอร์บางอย่างของ Google Search
  • หากมีการเพิ่มข้อมูลที่มีโครงสร้างลงในหน้าเว็บไซต์ ให้ตรวจสอบว่าได้ปฏิบัติตาม นโยบายข้อมูลที่มีโครงสร้าง แล้ว
ทดลองสร้างหน้าเว็บ Accelerated Mobile Pages (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": "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>


จาก ตัวอย่าง Code AMP HTML ด้านบน การกำหนดโครงสร้าง รูปแบบของ AMP HTML จะต้องกำหนด Attribute ต่างๆ ดังนี้

  • เริ่มต้นระบุ Atrribute amp เพื่อบอกว่าหน้าเว็บนี้ใช้ AMP HTML
<html amp lang="en"></html>
  • กำหนด canonical ให้เป็น url ของหน้าเว็บแบบปกติของเรา
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html">

  • กำหนด Viewport Meta Tag
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

สรุปข้อกำหนด HTML Tags ต่างๆ ใน AMP HTML
  • <script> ใช้งานไม่ได้ยกเว้นจะกำหนด type=”application/ld+json” ที่เป็น config และ runtime ที่ต้องโหลด
  • <img> ต้องเปลี่ยนเป็น <amp-img> และต้องปิดด้วย </amp-img>
  • <video><audio> <iframe> ต้องเปลี่ยนเป็น <amp-video> <amp-audio><amp-iframe>
  • <frame><frameset><object><applet><embed><form> และ input ทั้งหมดยกเว้น button ใช้ไม่ได้
  • <style> ต้องเขียนเป็น <style amp-custom>
  • <link> ใช้ได้เฉพาะ ที่กำหนดไว้ใน http://microformats.org/wiki/existing-rel-values เท่านั้น ส่วน stylesheet, preconnect, prerender, prefetch อาจจะมีปัญหากับ Browser ที่ไม่ support
  • <meta> attubute “http-equiv” ใช้ไม่ได้
  • <a> ใช้กับ link ที่เป็น javascript: ไม่ได้ ถ้าจะใส่ target ต้องเป็น _blank
  • <svg> ใช้ได้
  • Attribute Event On….. ทั้งหลาย เช่น onclick จะไม่สามารถใช้งานได้
  • ใช้ @import ไม่ได้ใน css
  1. Custom font ใช้ได้เฉพาะ
    Typography.com: https://cloud.typography.com
    Fonts.com: https://fast.fonts.net
    Google Fonts: https://fonts.googleapis.com
    Font Awesome: https://maxcdn.bootstrapcdn.com

เครื่องมือสำหรับทดสอบดูว่าเว็บไซต์ของเราเป็น Accelerated Mobile Pages (AMP) หรือไม่ เพิ่มเติมสำหรับท่านที่สนใจ สามารถเข้าไปดูข้อตกลง เพิ่มเติม เกี่ยวกับ Components และ Tags ทั้งหมดได้ที่ Required markup



Siamhttp สยามเอชทีทีพี, บริการรับทำเว็บไซต์, บริการออกแบบเว็บไซต์, บริการออกแบบเว็บไซต์รองรับสมาร์ทโฟน, Responsive Website Design, SEO, พัฒนาโปรแกรมบนเว็บ ราคาเบาๆ

แชร์บทความ

Facebook Twitter Google Digg Reddit LinkedIn StumbleUpon Email
กำลังโหลด ...