การแสดงผลแบบไดนามิก

การแสดงผลแบบไดนามิกคือการตั้งค่าที่เซิร์ฟเวอร์ตอบสนองด้วย HTML (และ CSS) ที่แตกต่างกันใน URL เดียวกันโดยขึ้นอยู่กับ User Agent ที่ขอหน้านั้นๆ (อุปกรณ์เคลื่อนที่ แท็บเล็ต หรือเดสก์ท็อป)

เนื่องจากการเปลี่ยนแปลง HTML สำหรับ User Agent ของอุปกรณ์เคลื่อนที่ที่เกิดขึ้นในเว็บไซต์จะไม่ปรากฏขึ้นทันทีในการตั้งค่านี้ (ระบบจะ "ซ่อน" เนื้อหาในอุปกรณ์เคลื่อนที่เมื่อ User Agent ของเดสก์ท็อปรวบรวมข้อมูล) เราขอแนะนำให้เซิร์ฟเวอร์ส่งคำชี้แนะเพื่อขอให้ Googlebot สำหรับสมาร์ทโฟนรวบรวมข้อมูลหน้าเว็บนั้นด้วย ซึ่งจะทำให้ค้นพบเนื้อหาสำหรับอุปกรณ์เคลื่อนที่ได้ คุณสร้างคำชี้แนะนี้ได้โดยใช้ส่วนหัว Vary ของ HTTP

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

TL;DR

  • ใช้ส่วนหัว Vary ของ HTTP เพื่อส่งสัญญาณแจ้งการเปลี่ยนแปลงของคุณโดยขึ้นอยู่กับ User Agent
  • ตรวจหาสตริงของ User Agent อย่างถูกต้อง

ส่วนหัว Vary ของ HTTP

ส่วนหัว Vary ของ HTTP มีนัยสำคัญและเป็นประโยชน์ 2 ประการดังนี้

  • จะส่งสัญญาณแจ้งไปยังเซิร์ฟเวอร์แคชที่ใช้ใน ISP และที่อื่นๆ เพื่อบอกว่าควรคำนึงถึง User Agent เมื่อตัดสินใจว่าจะแสดงหน้าเว็บจากแคชหรือไม่ หากไม่มีส่วนหัว Vary ของ HTTP เซิร์ฟเวอร์แคชอาจแสดงแคชของหน้า HTML ในเดสก์ท็อปแก่ผู้ใช้อุปกรณ์เคลื่อนที่อย่างผิดพลาด หรือในทางกลับกัน
  • ช่วยให้ Googlebot ค้นพบเนื้อหาที่เพิ่มประสิทธิภาพสำหรับอุปกรณ์เคลื่อนที่ของคุณได้เร็วขึ้น เนื่องจากส่วนหัว Vary ของ HTTP ที่ถูกต้องเป็นสัญญาณหนึ่งที่เราอาจใช้เพื่อรวบรวมข้อมูล URL ที่แสดงเนื้อหาที่เพิ่มประสิทธิภาพสำหรับอุปกรณ์เคลื่อนที่

ส่วนหัว Vary ของ HTTP เป็นส่วนหนึ่งของการตอบสนองของเซิร์ฟเวอร์ที่มีต่อคำขอ ดังเช่นตัวอย่างด้านล่าง

HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710
(... rest of HTTP response headers...)

ส่วนหัว Vary ของ HTTP จะบอกเบราว์เซอร์ว่าเนื้อหาในการตอบสนองจะแตกต่างกันไปโดยขึ้นอยู่กับ User Agent ที่ขอหน้านั้นๆ หากเซิร์ฟเวอร์ของคุณใช้ส่วนหัว Vary ของ HTTP อยู่แล้ว คุณจะเพิ่ม User-Agent ลงในรายการที่ใช้อยู่แล้วได้

การตรวจหา User Agent อย่างถูกต้อง

โดยทั่วไปแล้วการตรวจหา User Agent (บางครั้งเรียกว่าการ "Sniffing" หา User Agent) เป็นเทคนิคที่มักเกิดข้อผิดพลาดได้ง่าย ซึ่งมีสาเหตุหลายประการ แต่ข้อผิดพลาดที่เกิดบ่อยมี 3 ประการดังนี้

  1. การตรวจหา User Agent ขึ้นอยู่กับการมีรายการสตริงของ User Agent (หรือสตริงย่อย) ที่จะใช้จับคู่กัน รายการดังกล่าวต้องมีการดูแลและอัปเดตเป็นประจำ มิเช่นนั้นจะจับคู่กับ User Agent ใหม่ๆ ไม่ได้ ในความเป็นจริง รายการดังกล่าวจำนวนมากไม่มีการดูแลหรืออัปเดตอย่างเหมาะสม ซึ่งทำให้ผู้ใช้ได้รับประสบการณ์ที่ไม่ดี

  2. เวลาที่จับคู่ User Agent มักจะเกิดการจับคู่ผิด บางครั้งมีการตรวจพบ User Agent ของเดสก์ท็อปเป็น User Agent ของอุปกรณ์เคลื่อนที่ หรือตรวจพบ User Agent ของอุปกรณ์เคลื่อนที่เป็น User Agent ของเดสก์ท็อป ในทำนองเดียวกัน ข้อผิดพลาดที่พบบ่อยสำหรับเว็บไซต์ต่างๆ คือมีการดำเนินการกับแท็บเล็ตเหมือนเป็นสมาร์ทโฟนโดยไม่ได้ตั้งใจ หากคุณกำลังตรวจหา User Agent ของเบราว์เซอร์ที่เข้าถึงเว็บไซต์ของคุณ ให้ดูว่าการตรวจหานั้นมองหาสตริงเฉพาะสำหรับสมาร์ทโฟน (เช่น หาทั้งคำว่า "Android" และ "Mobile") แทนที่จะหาสตริงของอุปกรณ์เคลื่อนที่โดยทั่วไป (คือหาเฉพาะคำว่า “Android”) ดูข้อมูลเพิ่มเติมได้ในบล็อกโพสต์ของเรา

  3. ระมัดระวังการปิดบังหน้าเว็บจริงเมื่อตรวจหา User Agent เวลาที่ตรวจหา User Agent เว็บไซต์จะตรวจหาคลาสหรือประเภทของอุปกรณ์โดยมองหาชื่ออุปกรณ์ในสตริง User Agent ซึ่งไม่ควรจะมองหาคำว่า Googlebot โดยเฉพาะ User Agent ทั้งหมดของ Googlebot ระบุตัวเองว่าเป็นอุปกรณ์เคลื่อนที่ที่เฉพาะเจาะจง และคุณควรดำเนินการกับ User Agent ของ Googlebot เหล่านี้เหมือนกับที่ดำเนินการกับอุปกรณ์ดังกล่าวทุกประการ

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