10 ส่วนประกอบสำคัญของ Mobile Pages (AMP) ที่คุณควรรู้

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

สิ่งนี้ส่งผลให้คุณ ไม่สามารถใช้ JavaScript ที่กำหนดเอง (เขียนโดยผู้เขียนหรือบุคคลที่สาม) หรือองค์ประกอบ HTML ใด ๆ ที่เกี่ยวข้องกับทรัพยากรเช่นรูปภาพและวิดีโอในเอกสาร AMP ของคุณ.

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

ส่วนประกอบของ AMP คือ แท็ก HTML เฉพาะ. พวกเขาทำงานคล้ายกับแท็ก HTML ปกติ: พวกเขามีแท็กเปิดและปิด, คุณลักษณะและส่วนใหญ่สามารถสไตล์ด้วย CSS พวกเขาสามารถจดจำได้ง่ายเช่นเดียวกับพวกเขา เริ่มต้นด้วยเสมอ แอมป์- อุปสรรค.

ส่วนประกอบ AMP มีสองประเภท: ในตัว และ ขยาย ส่วนประกอบ.

ส่วนประกอบ AMP ในตัว

Built-in สร้างขึ้นใน JavaScript แบบรันไทม์ของ AMP ดังนั้นคุณไม่จำเป็นต้องรวมไฟล์เหล่านั้น.

1. แอมป์ img

แทนที่ แท็ก ในเอกสาร AMP HTML คุณต้องเพิ่ม src และ Alt คุณลักษณะเช่นเดียวกับเมื่อคุณทำงานกับปกติ ธาตุ.

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

ถ้าคุณต้องการ ทำให้ภาพตอบสนอง, เพิ่ม รูปแบบ = "ตอบสนอง" คุณลักษณะ แบบ คุณลักษณะ ควบคุมเค้าโครง ในเอกสาร AMP และสามารถเพิ่มลงในคอมโพเนนต์ AMP ใด ๆ (เรียนรู้เพิ่มเติมเกี่ยวกับสิ่งนี้ในระบบเค้าโครง AMP).

คุณยังสามารถใช้ srcset คุณลักษณะที่ ติดแท็กไปที่ ระบุภาพที่แตกต่าง สำหรับวิวพอร์ตและความหนาแน่นของพิกเซลที่แตกต่างกัน มันทำงานในลักษณะเดียวกับภาพที่ไม่ใช่แอมป์.

2. แอมป์วิดีโอ

สามารถใช้ในการ ฝังวิดีโอ HTML โดยตรง ในเอกสาร AMP HTML มันแทนที่ ในไฟล์ AMP แท็ก วิดีโอที่โหลดขี้เกียจ เพื่อเพิ่มประสิทธิภาพ.

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

แท็กมีแอตทริบิวต์ที่เป็นตัวเลือกมากมายเช่น เล่นอัตโนมัติ และ โปสเตอร์ ซึ่งคุณสามารถระบุปรับแต่งวิธีการแสดงวิดีโอ HTML5 ของคุณ.

รองรับ mp4, webm, ogg และทุกรูปแบบอื่น ๆ ที่รองรับโดย HTML5

ถ้าคุณต้องการคุณยังสามารถ เพิ่มวิดีโอทางเลือก สำหรับผู้ใช้ที่มีเบราว์เซอร์ที่ไม่รองรับวิดีโอ HTML5 โดยใช้ รั้งท้าย คุณลักษณะและ แท็ก HTML.

  
 
เบราว์เซอร์ของคุณไม่รองรับวิดีโอ HTML5.
 
    

3. แอมป์โฆษณา และ แอมป์ฝัง

ให้คุณด้วย กล่องทราย iframe ซึ่งคุณสามารถ แสดงโฆษณาของคุณ. คุณต้องแสดงโฆษณาของคุณ ผ่านโปรโตคอล HTTPS.

คุณไม่สามารถเรียกใช้สคริปต์ที่เครือข่ายโฆษณาของคุณจัดทำด้วยตัวเอง แต่รันไทม์ AMP จะเรียกใช้ JavaScript ของเครือข่ายที่กำหนดภายใน Sandbox คุณ เพียงระบุเครือข่ายที่คุณใช้, และเพิ่มข้อมูลของคุณ.

องค์ประกอบต้องการให้คุณ เพิ่มขนาดของโฆษณา ใช้ ความกว้าง และ ความสูง แอตทริบิวต์.

คุณสามารถกำหนดเครือข่ายโฆษณาที่คุณใช้กับ ชนิด คุณลักษณะ ดูรายการเครือข่ายโฆษณาที่รองรับ.

แต่ละเครือข่ายโฆษณามีเครือข่ายของตนเอง ข้อมูล-* คุณลักษณะที่คุณต้องเพิ่ม หากต้องการดูว่าคุณต้องการใช้เครือข่ายใดให้คลิกที่เครือข่ายโฆษณาของคุณในรายการด้านบน.

เป็นนามแฝงของ , เอกสารไม่ได้บอกอะไรมากเกี่ยวกับมันนอกจากสามารถใช้แทนได้ เมื่อมัน ถูกต้องมากขึ้นเชิงความหมาย. เนื่องจาก Google สัญญาว่าจะพัฒนาส่วนประกอบ AMP ที่เกี่ยวข้องกับโฆษณาเมื่อเวลาผ่านไปสิ่งนี้อาจเปลี่ยนแปลงได้ในอนาคต.

4. แอมป์พิกเซล

กับ , คุณสามารถ เพิ่มพิกเซลการติดตาม ไปยังเอกสาร AMP HTML ของคุณ นับจำนวนการดูหน้าเว็บ. มันมีเพียงหนึ่งคุณลักษณะที่จำเป็น src คุณลักษณะที่คุณต้องการ ระบุ URL ที่เป็นของพิกเซลการติดตาม.

อนุญาตให้แท็ก การแทนที่ URL มาตรฐาน, ซึ่งหมายความว่าคุณสามารถ สร้างค่า URL แบบสุ่ม เพื่อติดตามการแสดงผลแต่ละครั้ง.

ดูคู่มือการทดแทน URL ของ AMP หากคุณต้องการใช้ส่วนประกอบนี้ โปรดทราบว่าคุณไม่สามารถจัดสไตล์ ส่วนประกอบ.

ส่วนประกอบ AMP เพิ่มเติม

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

หมายเหตุ: องค์ประกอบของรุ่นอาจมีการเปลี่ยนแปลงในอนาคตดังนั้นอย่าลืม ตรวจสอบเวอร์ชั่นปัจจุบัน ในเอกสารประกอบ.

5. แอมป์เสียง

แทนที่ แท็ก HTML5 และทำให้เป็นไปได้ ฝังไฟล์เสียง HTML5 โดยตรง ในหน้า AMP.

ในการใช้งานคุณจะต้องระบุ src, ความกว้าง และ ความสูง แอตทริบิวต์และคุณยังสามารถเพิ่มแอตทริบิวต์ที่เป็นตัวเลือกสามรายการ: เล่นอัตโนมัติ, ห่วง และ ไม่ออกเสียง.

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

ส่วนประกอบ AMP รองรับรูปแบบเสียงเดียวกับ แท็ก HTML5.

  
 
เบราว์เซอร์ของคุณไม่รองรับไฟล์เสียง HTML5.
 
    

ใช้ , รวมสคริปต์ต่อไปนี้ใน ส่วนของเอกสาร AMP ของคุณ:

6. แอมป์ iframe

แสดง iframe ในเอกสาร AMP. ถูกทำให้ปลอดภัยกว่า HTML iframes ปกติ ดังนั้นพวกเขา sandbox ตามค่าเริ่มต้น.

มีกฎบางอย่างที่เกี่ยวข้องกับ คุณต้องปฏิบัติตามเพื่อผ่านการตรวจสอบ.

คุณต้องระบุ ความกว้าง, ความสูง, และ Sandbox แอตทริบิวต์ Sandbox แอททริบิวว่างเปล่าโดยค่าเริ่มต้น แต่คุณสามารถให้ค่าที่แตกต่างเพื่อ ปรับเปลี่ยนพฤติกรรมของ iframe, เช่นSandbox = "อนุญาตให้สคริปต์"อนุญาตให้ iframe เรียกใช้ JavaScript คุณสามารถใช้คุณสมบัติของ iframe มาตรฐานได้เช่นกัน.

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

7. แอมป์หีบเพลง

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

ส่วนของหีบเพลงต้องใช้

  
 
ส่วนที่ 1
 
เนื้อหาของส่วนที่ 1
 
 
 
มาตรา 2
 
เนื้อหาของส่วนที่ 2
 
 
 
มาตรา 3
 
    
 
  

  ขยายตัว