พื้นฐานสำคัญของ Accelerated Mobile Pages

1. ภาพรวม

ใน Codelab นี้ คุณจะได้เรียนรู้วิธีสร้าง Accelerated Mobile Pages หรือ AMP ในการดำเนินการนี้ คุณจะต้องใช้หน้าเว็บของบทความข่าวที่เรียบง่ายซึ่งเป็นไปตามข้อกำหนดของ AMP ขณะเดียวกันก็ต้องรวมฟีเจอร์เว็บทั่วไปหลายอย่างที่มักใช้ในเว็บไซต์ข่าวบนอุปกรณ์เคลื่อนที่

สิ่งที่คุณจะได้เรียนรู้

  • วิธีที่ AMP ช่วยปรับปรุงประสบการณ์ของผู้ใช้เว็บบนอุปกรณ์เคลื่อนที่
  • ข้อมูลพื้นฐานเกี่ยวกับเว็บไซต์ AMP
  • ข้อจำกัดของ AMP
  • วิธีที่คอมโพเนนต์ของเว็บ AMP ช่วยแก้ปัญหาที่พบทั่วไปในเว็บไซต์ข่าว
  • วิธีตรวจสอบความถูกต้องของ AMP
  • วิธีเตรียม AMP สำหรับ Google Search

สิ่งที่คุณต้องมี

  • โค้ดตัวอย่าง
  • Python (แนะนำ 2.7) หรือส่วนขยายเว็บเซิร์ฟเวอร์ Chrome 200 OK
  • Chrome (หรือเบราว์เซอร์ที่เทียบเท่าซึ่งตรวจสอบคอนโซล JavaScript ได้)
  • โปรแกรมแก้ไขโค้ด (เช่น Atom, Sublime, Notepad++)

2. รับโค้ดตัวอย่าง

คุณสามารถดาวน์โหลดโค้ดตัวอย่างทั้งหมดลงในคอมพิวเตอร์ได้โดยทำดังนี้

...หรือโคลนที่เก็บ GitHub จากบรรทัดคำสั่งโดยทำดังนี้

$ git clone https://github.com/googlecodelabs/accelerated-mobile-pages-foundations.git

คุณจะดาวน์โหลดไฟล์ ZIP ที่มีไฟล์ทรัพยากรตัวอย่างหลายไฟล์และหน้าเริ่มต้น article.html

คลายซิปโฟลเดอร์แล้วไปที่ไดเรกทอรีผ่านบรรทัดคำสั่งในคอมพิวเตอร์

3. เรียกใช้หน้าตัวอย่าง

หากต้องการทดสอบหน้าตัวอย่าง เราต้องเข้าถึงไฟล์จากเว็บเซิร์ฟเวอร์ การสร้างเว็บเซิร์ฟเวอร์ในเครื่องชั่วคราวเพื่อวัตถุประสงค์ในการทดสอบทำได้หลายวิธี สำหรับโค้ดแล็บนี้ เราจะให้วิธีการสำหรับตัวเลือกที่มีอยู่ 3 ตัวเลือก

  • แอป Google Chrome "Web Server for Chrome" - วิธีนี้เป็นวิธีที่แนะนำเนื่องจากเป็นโซลูชันที่ง่ายที่สุดและใช้ได้กับหลายแพลตฟอร์ม หมายเหตุ: วิธีนี้ต้องติดตั้ง Google Chrome
  • Firebase Hosting - ตัวเลือกอื่นหากคุณสนใจที่จะสำรวจแพลตฟอร์มการโฮสต์เนื้อหาสแตติกใหม่ของเราที่ชื่อ "Firebase Hosting" ด้วย เปิดใช้ SSL โดยค่าเริ่มต้น
  • เซิร์ฟเวอร์ HTTP Python ในเครื่อง - ต้องมีสิทธิ์เข้าถึงบรรทัดคำสั่ง

ตัวเลือกที่ 1: เว็บเซิร์ฟเวอร์สำหรับ Chrome

คุณสามารถค้นหาแอป "Web Server for Chrome" ได้ที่ลิงก์นี้ใน Chrome เว็บสโตร์

4c1bf1095afed87a.png

หลังจากติดตั้งแอป Chrome แล้ว คุณต้องชี้แอปไปยังโฟลเดอร์ที่ต้องการผ่านปุ่ม "เลือกโฟลเดอร์" สำหรับโค้ดแล็บนี้ คุณควรเลือกโฟลเดอร์ที่คลายซิปไฟล์ตัวอย่างของโค้ดแล็บ

นอกจากนี้ คุณควรเลือกตัวเลือก "แสดง index.html โดยอัตโนมัติ" และตั้งค่าพอร์ตเป็น "8000" คุณจะต้องรีสตาร์ทเว็บเซิร์ฟเวอร์เพื่อให้การเปลี่ยนแปลงเหล่านี้มีผล

เข้าถึง URL นี้ผ่านช่องทางต่อไปนี้

http://localhost:8000/article.html

หาก URL ด้านบนโหลดได้สำเร็จ ให้ทำตามขั้นตอนถัดไป

ตัวเลือกที่ 2: Firebase Hosting

หากสนใจสำรวจเว็บโฮสติ้งแบบคงที่ของ Firebase ใหม่ โปรดทำตามวิธีการที่นี่เพื่อติดตั้งใช้งานเว็บไซต์ AMP ไปยัง URL โฮสติ้งของ Firebase

Firebase Hosting เป็นผู้ให้บริการโฮสติ้งแบบคงที่ที่คุณใช้เพื่อติดตั้งใช้งานและโฮสต์เว็บไซต์แบบคงที่และชิ้นงานของเว็บไซต์ได้อย่างรวดเร็ว ซึ่งรวมถึงไฟล์ HTML, CSS และ JavaScript ผู้ใช้จะได้รับประโยชน์จากเวลาในการตอบสนองที่ลดลงเนื่องจากระบบจะแคชเนื้อหาแบบคงที่ในเครือข่ายนำส่งข้อมูล (CDN) ที่มีจุดเชื่อมต่ออินเทอร์เน็ต (PoP) อยู่ทั่วโลก

สุดท้ายนี้ โฮสติ้งของ Firebase จะแสดงผ่าน SSL เสมอ จึงเหมาะสำหรับ AMP และเว็บโดยทั่วไป หากคุณสนใจที่จะมุ่งเน้นเฉพาะ AMP ก็ไม่ต้องสนใจตัวเลือกนี้

ตัวเลือกที่ 3: เซิร์ฟเวอร์ HTTP Python

หากไม่ได้ใช้ Chrome หรือประสบปัญหาในการติดตั้งส่วนขยาย Chrome คุณยังใช้ Python จากบรรทัดคำสั่งเพื่อเปิดเว็บเซิร์ฟเวอร์ในเครื่องได้ด้วย

หากต้องการเรียกใช้เซิร์ฟเวอร์ HTTP ในตัวของ Python จากบรรทัดคำสั่ง ให้เรียกใช้คำสั่งต่อไปนี้

python -m SimpleHTTPServer

และเข้าถึง URL นี้

http://localhost:8000/article.html

4. สร้างหน้า HTML ปกติ

ในไฟล์ ZIP ที่ดาวน์โหลด คุณจะเห็นไฟล์ชื่อ article.html นี่คือบทความที่เรากำลังสร้างหน้าเทียบเท่า AMP

คัดลอกโค้ดจากarticle.htmlตัวอย่าง แล้ววางลงในไฟล์ใหม่ บันทึกไฟล์นี้เป็น article.amp.html.

ตอนนี้ไฟล์ article.amp.html ควรมีลักษณะดังนี้

<!doctype html>
<html lang="en">
  <head>

    <title>News Article</title>

    <link href="base.css" rel="stylesheet" />

    <script type="text/javascript" src="base.js"></script>
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>
    </article>
    <img src="mountains.jpg">
  </body>
</html>

หน้านี้เป็นหน้าแบบง่ายๆ ที่ตั้งใจสร้างขึ้นโดยมีองค์ประกอบบทความข่าวแบบคงที่ทั่วไป ได้แก่ CSS, JavaScript และแท็กรูปภาพ

ขณะนี้เวอร์ชัน AMP ของบทความเป็นเพียงสำเนาของบทความต้นฉบับ มาแปลงเป็น AMP กัน ก่อนอื่นเราจะเพิ่มไฟล์ไลบรารี JavaScript ของ AMP และดูว่ามีข้อผิดพลาดใดปรากฏขึ้นเมื่อเปิดเครื่องมือตรวจสอบ AMP

หากต้องการรวมไลบรารี AMP ให้เพิ่มบรรทัดนี้ที่ด้านล่างของแท็ก <head>

<script async src="https://cdn.ampproject.org/v0.js"></script>

ตอนนี้เราจะโหลดหน้า article.amp.html ใหม่ในเบราว์เซอร์ผ่านลิงก์ต่อไปนี้ และเปิดคอนโซลสำหรับนักพัฒนาซอฟต์แวร์ใน Chrome ผ่าน Menu > More Tools > Developer Tools

efc352f418f35761.png

ตอนนี้ให้ตรวจสอบเอาต์พุต JavaScript ในคอนโซลของนักพัฒนาซอฟต์แวร์ ตรวจสอบว่าคุณได้เลือกแท็บคอนโซลแล้ว

597d53fae21a0a60.png

คุณควรเห็นบันทึกต่อไปนี้ปรากฏขึ้น

Powered by AMP ⚡ HTML

ตอนนี้หากต้องการเปิดใช้เครื่องมือตรวจสอบ AMP ให้เพิ่มตัวระบุ Fragment นี้ลงใน URL

#development=1

เช่น

http://localhost:8000/article.amp.html#development=1

คุณอาจต้องรีเฟรชหน้าเว็บในเบราว์เซอร์ด้วยตนเอง คุณรีเฟรชหน้าเว็บในเบราว์เซอร์ด้วยตนเองได้โดยกดปุ่มนี้

3cc0680e695b804d.png

คุณควรได้รับข้อผิดพลาดในการตรวจสอบความถูกต้องหลายรายการ

Screen Shot 2016-05-03 at 10.09.51 AM.png

แม้ว่า AMP จะย่อมาจาก Accelerated Mobile Pages แต่ก็สามารถใช้สร้างหน้าเว็บที่ปรับเปลี่ยนตามพื้นที่โฆษณาซึ่งแสดงผลได้ดีในทุกขนาดหน้าจอ ดูข้อมูลเพิ่มเติมได้ที่ส่วนการออกแบบเว็บที่ตอบสนองตามอุปกรณ์ ในเว็บไซต์ Google Developers

เพื่อจำลองประสบการณ์การใช้งานอุปกรณ์เคลื่อนที่ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome คลิกไอคอนอุปกรณ์โทรศัพท์มือถือที่นี่

46d475a36472b495.png

ตอนนี้ให้เลือกอุปกรณ์เคลื่อนที่ (เช่น "Pixel 2") จากเมนูนี้

f65e7b38557a5807.png

คุณควรเห็นความละเอียดที่จำลองสำหรับอุปกรณ์เคลื่อนที่ในเบราว์เซอร์ เช่น

7da6c754afb2adca.png

ตอนนี้เราก็พร้อมที่จะเริ่มทำงานแล้ว มาดูข้อผิดพลาดในการตรวจสอบทีละรายการและดูว่าข้อผิดพลาดเหล่านั้นเกี่ยวข้องกับ AMP อย่างไร

5. แก้ไขข้อผิดพลาดในการตรวจสอบ

ต้องระบุชุดอักขระ

เราจะเริ่มด้วยการแก้ไขข้อผิดพลาดต่อไปนี้

The mandatory tag 'meta charset=utf-8' is missing or incorrect.

AMP กำหนดให้ตั้งค่าชุดอักขระสำหรับหน้าเว็บเพื่อให้ข้อความแสดงอย่างถูกต้อง และต้องเป็นแท็กย่อยแรกของแท็ก head ด้วย เหตุผลก็คือเพื่อหลีกเลี่ยงการตีความเนื้อหาที่เพิ่มก่อนแท็กชุดอักขระเมตาซ้ำ

เพิ่มโค้ดต่อไปนี้เป็นบรรทัดแรกของแท็ก Head

<meta charset="utf-8" />

บันทึกไฟล์ โหลดหน้าเว็บซ้ำ และตรวจสอบว่าข้อผิดพลาดนี้ไม่ปรากฏอีกต่อไป

เอกสาร AMP ทุกฉบับต้องมีลิงก์ที่อ้างอิงหน้า Canonical ดังนั้น มาเพิ่มลิงก์ไปยังบทความต้นฉบับกัน

เพิ่มโค้ดต่อไปนี้ใต้แท็ก <meta charset="utf-8" />

<link rel="canonical" href="/article.html">

ตอนนี้ ให้รีสตาร์ทเว็บเซิร์ฟเวอร์หากจำเป็น แล้วโหลดหน้าเว็บซ้ำ แม้ว่ายังคงมีข้อผิดพลาดอีกมากมายที่ต้องแก้ไข แต่ข้อผิดพลาด "ไฟล์ AMP ต้องมีแท็ก <link rel=canonical>" ก็หายไปแล้ว

ต้องระบุแอตทริบิวต์ AMP

AMP กำหนดให้ต้องมีแอตทริบิวต์ในองค์ประกอบ HTML รูทของหน้าเพื่อประกาศหน้าเป็นเอกสาร AMP

The mandatory attribute '⚡' is missing in tag 'html ⚡ for top-level html'
The mandatory tag 'html ⚡ for top-level html' is missing or incorrect.

ปัญหานี้แก้ไขได้ง่ายๆ เพียงเพิ่มแอตทริบิวต์ ⚡ ลงในแท็ก <html> ดังนี้

<!doctype html>
<html ⚡ lang="en">
  <head>
...

ตอนนี้ให้โหลดหน้าเว็บซ้ำแล้วตรวจสอบว่าไม่มีข้อผิดพลาดทั้ง 2 รายการแล้ว

ต้องระบุวิวพอร์ต

จากนั้นเราจะจัดการกับข้อผิดพลาดต่อไปนี้

The mandatory tag 'meta name=viewport' is missing or incorrect.

AMP กำหนดให้ต้องกำหนด width และ minimum-scale สำหรับ Viewport ค่าเหล่านี้ต้องกำหนดเป็น device-width และ 1 ตามลำดับ วิวพอร์ตเป็นแท็กที่พบบ่อยซึ่งรวมอยู่ใน <head> ของหน้า HTML

วิธีที่ดีที่สุดในการแก้ไขคือการเพิ่มข้อมูลโค้ด HTML ต่อไปนี้ลงในแท็ก <head> เพิ่มแท็ก meta ต่อไปนี้

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />

    <link rel="canonical" href="/article.html">

    <!-- The following is the meta tag and viewport information we must add to the page: -->
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

...

ค่าเหล่านี้เป็นค่าที่ใช้ได้ค่าเดียวสำหรับ width และ minimum-scale ใน AMP การกำหนด initial-scale ไม่ใช่ข้อบังคับ แต่เป็นส่วนประกอบทั่วไปในการพัฒนาเว็บบนอุปกรณ์เคลื่อนที่และเราขอแนะนำให้ใช้ อ่านเพิ่มเติมเกี่ยวกับ Viewport และการออกแบบที่ตอบสนองตามอุปกรณ์ได้ที่นี่

เช่นเดียวกับก่อนหน้านี้ ให้โหลดหน้าเว็บซ้ำและตรวจสอบว่าข้อผิดพลาดหายไปหรือไม่

สไตล์ชีตภายนอก

ข้อผิดพลาดต่อไปนี้เกี่ยวข้องกับการใช้สไตล์ชีตของเรา

The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'base.css'.

โดยเฉพาะอย่างยิ่ง ข้อความนี้เป็นการบ่นเกี่ยวกับแท็กลิงก์ชีตสไตล์ต่อไปนี้ในแท็ก <head> ของเรา

<link href="base.css" rel="stylesheet" />

ปัญหาคือการอ้างอิงสไตล์ชีตนี้เป็นแบบภายนอก ใน AMP นักพัฒนาแอปไม่ได้รับอนุญาตให้รวมสไตล์ชีตภายนอกเพื่อรักษาเวลาในการโหลดเอกสารให้เร็วที่สุด แต่ต้องรวมกฎสไตล์ชีตทั้งหมดในบรรทัดในเอกสาร AMP แทน

ดังนั้น นำแท็กลิงก์ใน <head> ออก แล้วแทนที่ด้วยแท็กอินไลน์ เช่น แท็กต่อไปนี้

<style amp-custom>

body {
  width: auto;
  margin: 0;
  padding: 0;
}

...

</style>

เนื้อหาของแท็กสไตล์ควรคัดลอกจากไฟล์ base.css ในไดเรกทอรีโปรเจ็กต์โดยตรง แอตทริบิวต์ amp-custom ในแท็กสไตล์เป็นแอตทริบิวต์ที่ต้องมี

โหลดหน้าเว็บซ้ำอีกครั้ง แล้วตรวจสอบว่าข้อผิดพลาดของชีตสไตล์หายไปหรือไม่

JavaScript ของบุคคลที่สาม

แม้ว่าการปรับแต่งชีตสไตล์ด้วย AMP ผ่านการฝังจะทำได้ค่อนข้างง่าย แต่ JavaScript นั้นไม่เป็นเช่นนั้น

The tag 'script' is disallowed except in specific forms.

ใน AMP ไม่อนุญาตให้ใช้สคริปต์ที่ผู้ใช้สร้างขึ้น สคริปต์ใน AMP จะได้รับอนุญาตก็ต่อเมื่อเป็นไปตามข้อกำหนดหลัก 2 ข้อต่อไปนี้

  • JavaScript ทั้งหมดต้องเป็นแบบไม่พร้อมกัน กล่าวคือ ต้องมีแอตทริบิวต์ async ในแท็กสคริปต์
  • โดยจะรวมได้เฉพาะไลบรารี AMP และคอมโพเนนต์ AMP เท่านั้น

ซึ่งจะตัดการใช้ JavaScript ของบุคคลที่สามทั้งหมดออกไป มีข้อยกเว้น 1 อย่างคือ สามารถใช้ JavaScript ของบุคคลที่สามใน iframe ได้

ลองเปิดbase.jsไฟล์ภายนอก คุณเห็นอะไร ไฟล์ไม่ควรมีโค้ด JavaScript และควรมีเฉพาะความคิดเห็นของข้อมูล เช่น

/*

This external JavaScript file is intentionally empty.

Its purpose is merely to demonstrate the AMP validation error related to the use of external JavaScript files.

*/

เนื่องจากไฟล์ JavaScript ภายนอกนี้ไม่ใช่คอมโพเนนต์ที่ใช้งานได้ของเว็บไซต์ เราจึงนำการอ้างอิงออกได้อย่างปลอดภัย

นำการอ้างอิง JavaScript ภายนอกต่อไปนี้ออกจากเอกสาร

<script type="text/javascript" src="base.js"></script>

ตอนนี้ให้โหลดหน้าเว็บซ้ำและตรวจสอบว่าข้อผิดพลาดของสคริปต์หายไปแล้ว

ต้นแบบ CSS ของ AMP

The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect.
The mandatory tag 'head > style : boilerplate' is missing or incorrect.
The mandatory tag 'noscript > style : boilerplate' is missing or incorrect.

ข้อผิดพลาดถัดไปอ้างอิงถึงแท็ก 2 รายการที่ขาดหายไปในแท็ก <head> เอกสาร AMP ทุกฉบับต้องมีแท็กต่อไปนี้

<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> ในเอกสาร

แท็กแรกจะทำให้เนื้อหาของหน้าเว็บมองไม่เห็นจนกว่าไลบรารี JavaScript ของ AMP จะอัปเดตแท็ก body ให้มองเห็นได้อีกครั้งเมื่อเนื้อหาของหน้าเว็บพร้อมที่จะแสดงผล AMP ทำเช่นนี้เพื่อป้องกันไม่ให้เนื้อหาของหน้าที่ยังไม่ได้จัดรูปแบบปรากฏขึ้น ซึ่งจะช่วยให้ผู้ใช้ได้รับประสบการณ์ที่รวดเร็วอย่างแท้จริง เนื่องจากเนื้อหาของหน้าเว็บจะปรากฏพร้อมกันทั้งหมด และทุกอย่างที่อยู่เหนือพับจะได้รับการแสดงผลพร้อมกัน แท็กที่ 2 จะเปลี่ยนตรรกะนี้หากปิดใช้ JavaScript ในเบราว์เซอร์

แท็ก amp-img

The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'?

AMP มีคอมโพเนนต์เว็บที่ออกแบบมาโดยเฉพาะเพื่อแทนที่แท็กรูปภาพ ซึ่งเรียกว่า amp-img

<amp-img src="mountains.jpg"></amp-img>

ลองใส่แท็ก amp-img ข้างต้นแล้วเรียกใช้เครื่องมือตรวจสอบอีกครั้ง คุณควรได้รับข้อผิดพลาดใหม่หลายรายการดังนี้

AMP-IMG# Layout not supported for: container
The implied layout 'CONTAINER' is not supported by tag 'amp-img'.

เหตุใด amp-img จึงทำให้เกิดข้อผิดพลาดอีก เนื่องจาก amp-img ไม่ใช่แท็ก img HTML แบบเดิมโดยตรง เมื่อใช้ amp-img จะมีข้อกำหนดเพิ่มเติม

ระบบเลย์เอาต์

ข้อผิดพลาดนี้แจ้งให้เราทราบว่า amp-img ไม่รองรับประเภทเลย์เอาต์ "container" แนวคิดที่สำคัญที่สุดอย่างหนึ่งในการออกแบบ AMP คือการมุ่งเน้นที่การลดจำนวนการปรับโฟลว์ DOM ใหม่ที่จำเป็นต่อการแสดงหน้าเว็บ

AMP มีระบบเลย์เอาต์เพื่อลดการปรับเลย์เอาต์ DOM ใหม่ เพื่อให้มั่นใจว่าเลย์เอาต์ของหน้าเว็บจะคงที่มากที่สุดเท่าที่จะเป็นไปได้ตั้งแต่เนิ่นๆ ในวงจรการดาวน์โหลดและการแสดงผลหน้าเว็บ

ระบบเลย์เอาต์ช่วยให้วางตำแหน่งและปรับขนาดองค์ประกอบในหน้าได้หลายวิธี เช่น ขนาดคงที่ การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ ความสูงคงที่ และอื่นๆ

a6149f5043618189.png

ในกรณีของเรา ระบบเลย์เอาต์อนุมานประเภทเลย์เอาต์สำหรับ amp-img เป็นประเภท container อย่างไรก็ตาม ประเภทคอนเทนเนอร์ใช้สำหรับองค์ประกอบที่มีองค์ประกอบย่อย และใช้ร่วมกับแท็ก amp-img ไม่ได้ ซึ่งเป็นสาเหตุของข้อผิดพลาดนี้

เหตุใดจึงมีการอนุมานประเภทคอนเทนเนอร์ เนื่องจากเราไม่ได้ระบุแอตทริบิวต์ความสูงสำหรับแท็ก amp-img ใน HTML คุณสามารถลดการปรับข้อความใหม่ได้โดยการระบุความกว้างและความสูงคงที่สำหรับองค์ประกอบในหน้าเว็บเสมอ ใน AMP เราขอแนะนำให้กำหนดความกว้างและความสูงสำหรับองค์ประกอบ amp-img เนื่องจากจะช่วยให้ AMP เข้าใจสัดส่วนการแสดงผลขององค์ประกอบ

ตั้งค่าความกว้างและความสูงดังนี้

<amp-img src="mountains.jpg" width="266" height="150"></amp-img>

รีเฟรชหน้าเว็บและตรวจสอบโปรแกรมตรวจสอบ คุณไม่ควรเห็นข้อผิดพลาดอีกต่อไป อย่างไรก็ตาม รูปภาพดูไม่ค่อยดีเนื่องจากวางอยู่บนหน้าเว็บอย่างไม่เหมาะสม คงจะดีถ้าเราปรับขนาดรูปภาพให้ยืดและพอดีกับหน้าเว็บได้ไม่ว่าหน้าจอจะมีขนาดเท่าใด

a7f2a768e9da1a25.png

การกำหนดความกว้างและความสูงไม่ได้จำกัดองค์ประกอบให้มีขนาดคงที่ทั้งหมด ระบบเลย์เอาต์ AMP สามารถจัดตำแหน่งและปรับขนาดองค์ประกอบได้หลายวิธีโดยการทราบสัดส่วนภาพขององค์ประกอบนั้น ซึ่งแอตทริบิวต์เลย์เอาต์จะแจ้งให้ AMP ทราบว่าคุณต้องการจัดตำแหน่งและปรับขนาดองค์ประกอบอย่างไร

การตั้งค่าแอตทริบิวต์เลย์เอาต์เป็น responsive จะช่วยให้เราทำสิ่งต่อไปนี้ได้

<amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>

Voila! รูปภาพมีสัดส่วนภาพที่ถูกต้องและปรับให้เข้ากับความกว้างของหน้าจอได้

de0cbbe31eacbbb1.png

สำเร็จ!

ตอนนี้เอกสาร AMP ควรมีลักษณะดังนี้

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">    

    <link rel="canonical" href="/article.html">
    <link rel="shortcut icon" href="amp_favicon.png">

    <title>News Article</title>

    <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>
    <style amp-custom>
      body {
        width: auto;
        margin: 0;
        padding: 0;
      }

      header {
        background: Tomato;
        color: white;
        font-size: 2em;
        text-align: center;
      }

      h1 {
        margin: 0;
        padding: 0.5em;
        background: white;
        box-shadow: 0px 3px 5px grey;
      }

      p {
        padding: 0.5em;
        margin: 0.5em;
      }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>  
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>

      <amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
    </article>
  </body>
</html>

รีเฟรชหน้าเว็บและดูเอาต์พุตของคอนโซล คุณควรได้รับข้อความต่อไปนี้

AMP validation successful.

คำถามที่พบบ่อย

6. Canonical URL, ข้อมูลเมตา และการค้นหา

ส่วนหนึ่งของโครงการริเริ่ม AMP ใหม่คือการไฮไลต์เอกสาร AMP ที่ถูกต้องในอินเทอร์เฟซผลการค้นหาของ Google ซึ่งเป็นส่วนหนึ่งของอินเทอร์เฟซภาพหมุนใหม่ อินเทอร์เฟซนี้มอบประสบการณ์การใช้งานที่ดียิ่งขึ้นแก่ผู้ที่ค้นหาบทความบนเว็บ หน้าเว็บที่รวมอยู่ต้องเป็นไปตามเกณฑ์บางอย่างนอกเหนือจากการผ่านโปรแกรมตรวจสอบ AMP เพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดีที่สุด

ขั้นตอนนี้จะให้ภาพรวมของข้อกำหนดทั้งหมด

การลิงก์หน้า Canonical และเอกสาร AMP

AMP มีเป้าหมายที่จะทำให้เว็บเร็วขึ้น และแม้ว่าในช่วงแรกๆ โครงการจะมุ่งเน้นไปที่เนื้อหาแบบคงที่ แต่การเพิ่มคอมโพเนนต์อย่าง amp-bind ทำให้ AMP เหมาะกับเว็บไซต์หลากหลายประเภท เช่น ผู้เผยแพร่ข่าวสาร อีคอมเมิร์ซ เว็บไซต์ท่องเที่ยว บล็อก และอื่นๆ

อย่างไรก็ตาม คุณควรทำความเข้าใจขอบเขตทั้งหมดของวิธีที่ AMP ควรอยู่ในโครงสร้างของเว็บไซต์ แม้ว่า AMP จะใช้สร้างเว็บไซต์ทั้งเว็บไซต์ได้ แต่ผู้เผยแพร่โฆษณาจำนวนมากก็เลือกใช้ AMP ในลักษณะของแนวทางที่จับคู่กัน ซึ่งเอกสาร AMP จะสร้างขึ้นควบคู่ไปกับบทความ HTML ปกติที่ผู้เผยแพร่โฆษณาจะโฮสต์ในเว็บไซต์ของตน

7152b1ef38f00f36.png

การลิงก์ Canonical ในหน้า HTML ปกติเป็นเทคนิคที่ใช้กันโดยทั่วไปในการประกาศว่าควรพิจารณาหน้าใดเป็นหน้าเว็บที่ต้องการเมื่อมีหลายหน้าที่มีเนื้อหาเดียวกัน เนื่องจากสามารถสร้างเอกสาร AMP ให้พร้อมใช้งานควบคู่ไปกับหน้าบทความแบบเดิมของเว็บไซต์ เราจึงควรถือว่าหน้า HTML แบบเดิมเป็นหน้า "Canonical"

เราได้ดำเนินการขั้นตอนแรกเพื่อให้บรรลุเป้าหมายนี้ในเอกสาร AMP โดยการใส่แท็กลิงก์ใน <head> ที่นำกลับไปยังหน้า Canonical แล้ว ดังนี้

<link rel="canonical" href="/article.html">

ขั้นตอนถัดไปคือการลิงก์บทความ Canonical กับหน้า AMP ซึ่งทำได้โดยการใส่แท็ก <link rel="amphtml"> ในส่วน <head> ของบทความ Canonical

เพิ่มโค้ดต่อไปนี้ลงในส่วน <head> ของไฟล์ article.html

<link rel="amphtml" href="/article.amp.html">

แผนภาพต่อไปนี้แสดงทิศทางของแท็กลิงก์

a880b625c10ffd84.png

คุณต้องตั้งค่าการลิงก์แบบ 2 ทิศทางนี้เพื่อให้ Crawler ของ Google Search เข้าใจความสัมพันธ์ระหว่างเอกสาร Canonical HTML ปกติกับเอกสาร AMP หากไม่มีการระบุลิงก์ Crawler อาจไม่ทราบว่าบทความใดเป็น "เวอร์ชัน AMP" ของเอกสาร HTML ปกติ การระบุลิงก์เหล่านี้อย่างชัดเจนจะช่วยให้มั่นใจได้ว่าจะไม่มีความคลุมเครือ

ข้อมูลเมตาของเครื่องมือค้นหา Schema.org

ข้อกำหนดอีกอย่างหนึ่งสำหรับเอกสาร AMP ที่จะปรากฏในอินเทอร์เฟซภาพหมุนใหม่คือการปฏิบัติตามข้อกำหนดของข้อมูลเมตาของเครื่องมือค้นหาของ Schema.org ข้อมูลเมตานี้จะรวมอยู่ในแท็ก <head> ของเอกสารผ่านแท็กสคริปต์ประเภท application/ld+json

เพิ่มโค้ดต่อไปนี้ที่ด้านล่างของส่วน <head> ของเอกสาร AMP

<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "NewsArticle",
 "mainEntityOfPage":{
   "@type":"WebPage",
   "@id":"https://example.com/my-article.html"
 },
 "headline": "My First AMP Article",
 "image": {
   "@type": "ImageObject",
   "url": "https://example.com/article_thumbnail1.jpg",
   "height": 800,
   "width": 800
 },
 "datePublished": "2015-02-05T08:00:00+08:00",
 "dateModified": "2015-02-05T09:20:00+08:00",
 "author": {
   "@type": "Person",
   "name": "John Doe"
 },
 "publisher": {
   "@type": "Organization",
   "name": "⚡ AMP Times",
   "logo": {
     "@type": "ImageObject",
     "url": "https://example.com/amptimes_logo.jpg",
     "width": 600,
     "height": 60
   }
 },
 "description": "My first experience in an AMPlified world"
}
</script>

โหลดหน้าเว็บในเบราว์เซอร์ซ้ำ แล้วตรวจสอบอีกครั้งว่าไม่มีข้อผิดพลาดในการตรวจสอบความถูกต้องของ AMP

ตอนนี้เปิดเครื่องมือตรวจสอบ Structured Data ในหน้าต่างเบราว์เซอร์ใหม่ แล้วคลิก "ทดสอบมาร์กอัปของฉัน" จากนั้นเลือกแท็บ "Code Snippet" คัดลอกซอร์สโค้ดทั้งหมดจากหน้า AMP แล้ววางลงในแผงโปรแกรมแก้ไขข้อความของเครื่องมือตรวจสอบ และคลิก "เรียกใช้การทดสอบ"

901b629036e0cd62.png

คุณควรเห็นข้อความคล้ายกับข้อความต่อไปนี้ในหน้าเว็บ

ae8e16aff196e5a7.png

ข้อกำหนดที่สำคัญสำหรับการปรากฏในภาพหมุนของ Google Search เวอร์ชันใหม่สำหรับบทความข่าวที่ขับเคลื่อนด้วย AMP มีดังนี้

  1. ตรวจสอบว่าเอกสาร AMP ถูกต้อง
  2. อ้างอิงเอกสาร AMP จากหน้า HTML แบบเดิมผ่านแท็ก <link> และในทางกลับกัน
  3. ใส่แท็กข้อมูลเมตาของเครื่องมือค้นหาไว้ด้านบน

อ่านข้อมูลเพิ่มเติมเกี่ยวกับการค้นพบหน้าเว็บ

7. ยินดีด้วย

คุณได้ทำโค้ดแล็บเสร็จแล้วและได้สำรวจแนวคิดพื้นฐานหลายอย่างของเอกสาร AMP เรียบร้อยแล้ว

เราหวังว่าคุณจะเข้าใจไม่เพียงแต่วิธีการนำแนวคิดและฟีเจอร์เหล่านี้ไปใช้ในเอกสาร AMP แต่ยังเข้าใจด้วยว่าเหตุใด AMP จึงได้รับการออกแบบมาในลักษณะที่เป็นอยู่

ต่อไปนี้คือหัวข้อและลิงก์เพิ่มเติมบางส่วนที่คุณอาจต้องการสำรวจเพื่อเพิ่มพูนทักษะให้มากยิ่งขึ้น