ใน 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++)
ดาวน์โหลดโค้ดตัวอย่างทั้งหมดลงในคอมพิวเตอร์ได้โดยทําดังนี้
...หรือโคลนที่เก็บ GitHub จากบรรทัดคําสั่ง:
$ git clone https://github.com/googlecodelabs/accelerated-mobile-pages-foundations.gitคุณจะดาวน์โหลดไฟล์ ZIP ที่มีตัวอย่างไฟล์ทรัพยากรหลายไฟล์และหน้าเริ่มต้น page.html
แตกโฟลเดอร์และไปยังไดเรกทอรีผ่านบรรทัดคําสั่งในคอมพิวเตอร์
หากต้องการทดสอบตัวอย่างหน้าเว็บ เราต้องเข้าถึงไฟล์จากเว็บเซิร์ฟเวอร์ การสร้างเว็บเซิร์ฟเวอร์ในเครื่องชั่วคราวมีวัตถุประสงค์เพื่อการทดสอบหลายวิธี สําหรับ Code Lab นี้ เราจะให้คําแนะนําใน 3 ตัวเลือก ดังนี้
- แอป Google Chrome "เว็บเซิร์ฟเวอร์สําหรับ Chrome" - เป็นวิธีที่แนะนําเนื่องจากเป็นโซลูชันที่เรียบง่ายและครอบคลุมทุกแพลตฟอร์ม หมายเหตุ: วิธีการนี้ต้องติดตั้ง Google Chrome
- Firebase Hosting - มีตัวเลือกอื่นหากคุณสนใจสํารวจแพลตฟอร์มโฮสติ้งเนื้อหาแบบคงที่ใหม่ของเรา "Firebase Hosting" เปิดใช้งาน SSL โดยค่าเริ่มต้น
- เซิร์ฟเวอร์ HTTP Python ในเครื่อง - ต้องมีสิทธิ์เข้าถึงบรรทัดคําสั่ง
ตัวเลือกที่ 1: เว็บเซิร์ฟเวอร์สําหรับ Chrome
ดูแอป "เว็บเซิร์ฟเวอร์สําหรับ Chrome" ได้ที่ลิงก์นี้ใน Chrome เว็บสโตร์
หลังจากติดตั้งแอป Chrome คุณต้องชี้แอปในโฟลเดอร์ที่ต้องการผ่านปุ่ม "เลือกโฟลเดอร์" สําหรับห้องทดลองของโค้ดนี้ คุณควรเลือกโฟลเดอร์ที่คุณแตกไฟล์ตัวอย่าง 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 Hosting จะแสดงผ่าน SSL เสมอ ดังนั้นจึงเหมาะสําหรับ AMP และเว็บ หากคุณสนใจการเน้น AMP มากกว่าก็ไม่ต้องสนใจตัวเลือกนี้
ตัวเลือกที่ 3: HTTP Python Server
หากคุณไม่ได้ใช้ Chrome หรือมีปัญหาในการติดตั้งส่วนขยาย Chrome คุณสามารถใช้ Python จากบรรทัดคําสั่งเพื่อเริ่มการทํางานของเว็บเซิร์ฟเวอร์ในเครื่องได้ด้วย
หากต้องการเรียกใช้เซิร์ฟเวอร์ HTTP ในตัวของ Python' จากบรรทัดคําสั่ง ให้ดําเนินการดังนี้
python -m SimpleHTTPServer
และเข้าถึง URL นี้
http://localhost:8000/article.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
ตรวจสอบเอาต์พุต JavaScript ใน Play Console โปรดตรวจสอบว่าได้เลือกแท็บคอนโซลแล้ว
คุณควรเห็นบันทึกนี้ปรากฏขึ้น
Powered by AMP ⚡ HTML
หากต้องการเปิดใช้โปรแกรมตรวจสอบ AMP ให้เพิ่มตัวระบุส่วนย่อยลงใน URL ดังนี้
#development=1
เช่น
http://localhost:8000/article.amp.html#development=1
คุณอาจต้องรีเฟรชหน้าเว็บด้วยตนเองในเบราว์เซอร์ คุณสามารถรีเฟรชหน้าเว็บในเบราว์เซอร์ได้ด้วยตนเองโดยการกดปุ่มต่อไปนี้
คุณควรได้รับข้อผิดพลาดการตรวจสอบความถูกต้องหลายรายการ
แม้ว่า AMP จะย่อมาจาก Accelerated Mobile Pages แต่ก็สามารถใช้สร้างหน้าเว็บที่ปรับเปลี่ยนตามอุปกรณ์ที่แสดงผลได้ดีในหน้าจอทุกขนาด ดูข้อมูลเพิ่มเติมได้ที่ส่วนการออกแบบเว็บที่ตอบสนองตามอุปกรณ์ของเว็บไซต์ Google Developers
เพื่อจําลองประสบการณ์การใช้งานบนอุปกรณ์เคลื่อนที่ในเครื่องมือสําหรับนักพัฒนาซอฟต์แวร์ของ Chrome คลิกไอคอนโทรศัพท์มือถือที่นี่
ตอนนี้ให้เลือกอุปกรณ์เคลื่อนที่ (เช่น "Pixel 2") จากเมนูนี้
คุณควรเห็นความละเอียดที่จําลองมาจากมือถือในเบราว์เซอร์ของคุณ เช่น
ตอนนี้เราพร้อมลงมือทํางานแล้ว มาดูข้อผิดพลาดในการตรวจสอบความถูกต้องทีละรายการและแก้ไขข้อผิดพลาดเหล่านั้นที่เกี่ยวข้องกับ AMP กัน
ต้องตั้งค่าชุดอักขระ
เราจะเริ่มโดยการแก้ไขข้อผิดพลาดต่อไปนี้
The mandatory tag 'meta charset=utf-8' is missing or incorrect.
AMP กําหนดให้ตั้งค่าชุดอักขระสําหรับหน้าเว็บเพื่อให้แสดงข้อความได้อย่างถูกต้อง และต้องเป็นแท็กระดับย่อยแรกของแท็กส่วนหัว ด้วยเหตุนี้จึงควรหลีกเลี่ยงการตีความเนื้อหาที่เพิ่มเข้ามาใหม่ก่อนเมตาแท็กชุดอักขระ
เพิ่มโค้ดต่อไปนี้เป็นบรรทัดแรกของแท็กส่วนหัว
<meta charset="utf-8" /> บันทึกไฟล์ โหลดซ้ําหน้าเว็บ และตรวจสอบว่าข้อผิดพลาดนี้ไม่แสดงอีกต่อไป
ไฟล์ AMP ต้องมีแท็ก <link rel=canonical>
เอกสาร 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 ในแท็กรูปแบบคือ mandatory
ให้โหลดหน้านี้ซ้ําอีกครั้งและตรวจสอบว่าข้อผิดพลาดสไตล์ชีตหายไปหรือไม่
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>
จากนั้นโหลดหน้านี้ซ้ํา แล้วตรวจสอบว่าข้อผิดพลาดสคริปต์หายไป
Boilerplate ของ 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> ของเอกสาร
แท็กแรกช่วยให้มองไม่เห็นเนื้อหาในหน้าจนกว่าไลบรารี AMP JavaScript จะอัปเดตแท็กเนื้อหาให้มองเห็นได้อีกครั้งเมื่อเนื้อหาของหน้าเว็บพร้อมแสดงผล AMP ดําเนินการดังกล่าวเพื่อป้องกันไม่ให้เนื้อหาของหน้าเว็บปรากฏซึ่งยังไม่ได้รับการจัดรูปแบบ วิธีนี้ทําให้ประสบการณ์ของผู้ใช้ในทันทีในทันทีเมื่อเนื้อหาของหน้าเว็บปรากฏขึ้นพร้อมกันและแสดงทุกอย่างในครึ่งหน้าบน แท็กที่สองจะเปลี่ยนตรรกะนี้ หากมีการปิดใช้ 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 ไม่ได้ใช้แทนแท็ก HTML img แบบดั้งเดิมโดยตรง มีข้อกําหนดเพิ่มเติมเมื่อใช้ amp-img
ระบบเลย์เอาต์
ข้อผิดพลาดนี้บ่งบอกว่า amp-img ไม่รองรับประเภทเลย์เอาต์ "container' แนวคิดที่สําคัญที่สุดอย่างหนึ่งในการออกแบบของ AMP' คือการมุ่งเน้นที่การลดจํานวนการปรับเปลี่ยน DOM ที่จําเป็นในการแสดงผลหน้าเว็บ
เพื่อลด AMP แบบจัดเรียงซ้ํามีระบบเลย์เอาต์ที่ช่วยให้เลย์เอาต์ของหน้ามีความเข้มงวดมากที่สุดเท่าที่จะเป็นไปได้ในวงจรการดาวน์โหลดและดาวน์โหลดหน้าเว็บโดยเร็วที่สุด
ระบบเลย์เอาต์ช่วยให้องค์ประกอบในหน้าเว็บถูกจัดตําแหน่งและปรับขนาดได้หลากหลายวิธี เช่น ขนาดคงที่ การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ ความสูงคงที่ และอื่นๆ
ในกรณีของเรา ระบบเลย์เอาต์ได้อนุมานประเภทเลย์เอาต์ของ amp-img เป็นประเภท container อย่างไรก็ตาม ประเภทของคอนเทนเนอร์มีไว้สําหรับองค์ประกอบที่มีองค์ประกอบย่อยและใช้ไม่ได้กับแท็ก amp-img ซึ่งเป็นสาเหตุของข้อผิดพลาดนี้
เหตุใดจึงมีการอนุมานประเภทคอนเทนเนอร์ เนื่องจากเราไม่ได้ระบุแอตทริบิวต์ความสูงสําหรับแท็ก amp-img HTML จะลดการจัดเรียงได้โดยการระบุความกว้างและความสูงคงที่สําหรับองค์ประกอบในหน้าเว็บเสมอ ใน AMP ขอแนะนําให้กําหนดความกว้างและความสูงขององค์ประกอบ amp-img เนื่องจากจะช่วยให้ AMP เข้าใจอัตราส่วนขององค์ประกอบ
ตั้งค่าความกว้างและความสูงดังนี้
<amp-img src="mountains.jpg" width="266" height="150"></amp-img>รีเฟรชหน้าและตรวจสอบโปรแกรมตรวจสอบ คุณไม่ควรพบข้อผิดพลาดใดๆ อีก แต่ภาพที่เห็นอาจดูไม่ดีนักหากวางไม่ชัดในหน้า จึงเหมาะอย่างยิ่งหากเราปรับขนาดรูปภาพให้ยืดออกให้พอดีและพอดีกับหน้าได้ไม่ว่าหน้าจอจะมีขนาดเท่าใดก็ตาม
น่าแปลกที่การกําหนดความกว้างและความสูงไม่ได้จํากัดองค์ประกอบเป็นขนาดคงที่โดยสมบูรณ์ ระบบเลย์เอาต์ของ AMP จัดตําแหน่งและปรับขนาดองค์ประกอบได้หลากหลายวิธีด้วยการรับรู้อัตราส่วน ซึ่งแอตทริบิวต์เลย์เอาต์จะบอก AMP ว่าคุณต้องการให้องค์ประกอบจัดวางและปรับขนาดองค์ประกอบอย่างไร
เรากําหนดแอตทริบิวต์เลย์เอาต์เป็น responsive เพื่อทําสิ่งต่อไปนี้ได้
<amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>เสร็จแล้ว! รูปภาพของเราอยู่ในอัตราส่วนที่ถูกต้องและเติมเต็มความกว้างของหน้าจอที่ปรับเปลี่ยนตามอุปกรณ์
สำเร็จ!
ตอนนี้เอกสาร 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.
คําถามที่พบบ่อย
ส่วนหนึ่งของโครงการริเริ่ม AMP ใหม่คือการไฮไลต์เอกสาร AMP ที่ถูกต้องในอินเทอร์เฟซผลการค้นหาของ Google โดยเป็นส่วนหนึ่งของอินเทอร์เฟซภาพสไลด์ใหม่ อินเทอร์เฟซนี้มอบประสบการณ์ที่ดียิ่งขึ้นแก่ผู้ใช้ที่กําลังค้นหาบทความบนเว็บ เพื่อประสบการณ์การใช้งานที่ดีที่สุด หน้าเว็บที่ระบุต้องเป็นไปตามเกณฑ์หนึ่งๆ นอกเหนือจากการส่งโปรแกรมตรวจสอบ AMP
ขั้นตอนนี้จะแสดงภาพรวมของข้อกําหนดทั้งหมด
การลิงก์หน้า Canonical และเอกสาร AMP
AMP มีเป้าหมายที่จะทําให้เว็บเร็วขึ้นและแม้ว่าโปรเจ็กต์จะเน้นไปที่เนื้อหาแบบคงที่อยู่แล้วก็ตามตั้งแต่ยุคแรกๆ การเพิ่มคอมโพเนนต์อย่าง amp-bind ทําให้เหมาะกับเว็บไซต์ที่หลากหลาย เช่น ผู้เผยแพร่เนื้อหาข่าว อีคอมเมิร์ซ เว็บไซต์ท่องเที่ยว บล็อก และอื่นๆ
แต่สิ่งสําคัญอีกอย่างคือการทําความเข้าใจขอบเขตทั้งหมดของ AMP ที่ควรวางไว้ในโครงสร้างของเว็บไซต์ แม้ว่าจะใช้ AMP เพื่อสร้างเว็บไซต์ทั้งหมดได้ แต่ผู้เผยแพร่โฆษณาจํานวนมากต้องการใช้ AMP ในลักษณะเดียวกันกับวิธีการจับคู่ซึ่งเอกสาร AMP สร้างขึ้นร่วมกับบทความ HTML ทั่วไปที่ผู้เผยแพร่โฆษณาจะโฮสต์บนเว็บไซต์ของตน
การลิงก์ 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">แผนภาพต่อไปนี้จะแสดงเส้นทางของแท็กลิงก์
ต้องตั้งค่าลิงก์แบบ 2 ทางนี้เพื่อให้โปรแกรมรวบรวมข้อมูลของ Google Search เข้าใจความสัมพันธ์ระหว่างเอกสาร Canonical แบบ 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
ตอนนี้ ให้เปิดเครื่องมือตรวจสอบข้อมูลที่มีโครงสร้างในหน้าต่างเบราว์เซอร์ใหม่ แล้วคลิก "ทดสอบมาร์กอัปของฉัน" จากนั้นเลือกแท็บ "Code snippet" คัดลอกซอร์สโค้ดแบบเต็มจากหน้า AMP แล้ววางลงในเครื่องมือแก้ไขข้อความของเครื่องมือตรวจสอบ แล้วคลิกคลิกที่ "Run Test"
คุณควรจะเห็นเนื้อหาแบบนี้ในหน้าเว็บ
ข้อกําหนดสําคัญสําหรับการปรากฏในภาพหมุน Google Search ใหม่สําหรับบทความข่าวที่ขับเคลื่อนโดย AMP มีดังนี้
- ตรวจสอบว่าเอกสาร AMP ผ่านการตรวจสอบความถูกต้อง
- อ้างอิงเอกสาร AMP จากหน้า HTML แบบดั้งเดิมผ่านแท็ก <link> ในทางกลับกัน
- รวมแท็กข้อมูลเมตาของเครื่องมือค้นหาไว้ด้านบน
อ่านข้อมูลเพิ่มเติมเกี่ยวกับการค้นพบหน้าเว็บ
คุณแสดงห้องทดลองของโค้ดเสร็จแล้วและสํารวจแนวคิดพื้นฐานเกี่ยวกับเอกสาร AMP ต่างๆ ได้สําเร็จ
เราหวังว่าคุณไม่เพียงทราบว่าจะนําแนวคิดและฟีเจอร์เหล่านี้ไปปรับใช้ในเอกสาร AMP ได้อย่างไร แต่ยังเข้าใจเหตุผลที่ออกแบบ AMP มาเพื่อลักษณะของ AMP ด้วย
ต่อไปนี้เป็นหัวข้อและลิงก์เพิ่มเติมบางส่วนที่คุณอาจอยากสํารวจเพื่อเพิ่มพูนทักษะเพิ่มเติม