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

1. ภาพรวม

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

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

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

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

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

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

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

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

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

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

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

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

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

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

คุณจะเห็นส่วน "เว็บเซิร์ฟเวอร์สำหรับ Chrome" ที่ลิงก์นี้ใน Chrome เว็บสโตร์

4c1bf1095afed87a.png

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

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

เข้าถึง URL นี้ผ่าน:

http://localhost:8000/article.html

หาก URL ด้านบนโหลดสำเร็จแล้ว คุณสามารถดำเนินการต่อไปยังขั้นตอนถัดไปได้

ตัวเลือกที่ 2: โฮสติ้งของ Firebase

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

โฮสติ้งของ Firebase เป็นผู้ให้บริการโฮสติ้งแบบคงที่ที่คุณสามารถใช้เพื่อติดตั้งใช้งานและโฮสต์เว็บไซต์แบบคงที่รวมถึงเนื้อหาของเว็บไซต์ได้อย่างรวดเร็ว รวมถึงไฟล์ 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 กัน ในการเริ่มต้น เราจะเพิ่มไฟล์ไลบรารี AMP JavaScript แล้วดูว่าข้อผิดพลาดใดปรากฏขึ้นเมื่อเปิดโปรแกรมตรวจสอบ 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 ใน Developer Console ตรวจสอบว่าได้เลือกแท็บ Console ไว้ ดังนี้

597d53fae21a0a60.png

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

Powered by AMP ⚡ HTML

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

#development=1

เช่น

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

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

3cc0680e695b804d.png

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

Screen Shot 03-05-2016 เวลา 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 ด้วย ทั้งนี้ก็เพื่อหลีกเลี่ยงการตีความเนื้อหาที่เพิ่มก่อนแท็กชุดอักขระเมตาซ้ำ

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

<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 สำหรับวิวพอร์ต ค่าเหล่านี้ต้องกำหนดเป็น 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 แต่เป็นการรวมที่พบได้ทั่วไปในการพัฒนาเว็บบนอุปกรณ์เคลื่อนที่และเราแนะนำให้กำหนด อ่านเพิ่มเติมเกี่ยวกับวิวพอร์ตและการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ได้ที่นี่

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

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

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

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>

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

ต้นแบบสำหรับ AMP CSS

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 จะอัปเดตแท็กเนื้อหาให้แสดงอีกครั้งเมื่อเนื้อหาของหน้าพร้อมที่จะแสดง 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 จึงแสดงข้อผิดพลาดอีก 1 รายการ เนื่องจาก amp-img ไม่ใช่สิ่งที่ใช้แทนแท็ก HTML img แบบดั้งเดิมโดยตรง มีข้อกำหนดเพิ่มเติมเมื่อใช้ amp-img

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

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

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

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

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>

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

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 ควบคู่กับบทความ 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 เข้าใจความสัมพันธ์ระหว่างเอกสารตามรูปแบบบัญญัติของ HTML ปกติกับเอกสาร AMP หากไม่ได้ให้ลิงก์ไว้ โปรแกรมรวบรวมข้อมูลจะไม่ทราบชัดเจนว่าบทความใดเป็น "เวอร์ชัน 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 ในหน้าต่างเบราว์เซอร์ใหม่แล้วคลิก "ทดสอบมาร์กอัปของฉัน" จากนั้นเลือก "ข้อมูลโค้ด" คัดลอกซอร์สโค้ดแบบเต็มจากหน้า AMP และวางในแผงเครื่องมือแก้ไขข้อความของเครื่องมือตรวจสอบ จากนั้นคลิก "เรียกใช้การทดสอบ"

901b629036e0cd62.png

คุณควรจะเห็นบางอย่างเช่นนี้บนหน้าเว็บ

ae8e16aff196e5a7.png

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

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

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

7. ยินดีด้วย

คุณศึกษา Code Lab เสร็จแล้ว และสำรวจแนวคิดพื้นฐานมากมายของเอกสาร AMP

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

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