การออกแบบเว็บที่ตอบสนองตามอุปกรณ์

การออกแบบเว็บที่ตอบสนองตามอุปกรณ์ (Responsive Web Design หรือ RWD) คือการตั้งค่าให้เซิร์ฟเวอร์ส่งโค้ด HTML ชุดเดียวกันไปยังอุปกรณ์ทั้งหมดทุกครั้งและมีการใช้ CSS เพื่อเปลี่ยนการแสดงผลของหน้าในอุปกรณ์ อัลกอริทึมของ Google ควรตรวจพบการตั้งค่านี้ได้โดยอัตโนมัติหาก User Agent ทั้งหมดของ Googlebot ได้รับอนุญาตให้รวบรวมข้อมูลหน้าเว็บและเนื้อหาในหน้า (CSS, JavaScript และรูปภาพ)

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

TL;DR

  • ใช้แท็ก meta name="viewport" เพื่อบอกเบราว์เซอร์ว่าจะปรับเนื้อหาอย่างไร
  • ดูเอกสารประกอบเพิ่มเติมในเว็บไซต์ "หลักพื้นฐานในการทำเว็บไซต์"

ใช้ meta name="viewport"

หากต้องการส่งสัญญาณแจ้งไปยังเบราว์เซอร์ว่าหน้าเว็บจะปรับตัวเองให้เหมาะสมกับอุปกรณ์ทั้งหมด ให้เพิ่มเมตาแท็กที่ส่วนหัวของเอกสารดังนี้

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

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

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

สำหรับรูปภาพที่ตอบสนองตามอุปกรณ์ ให้ใส่เอลิเมนต์ <picture>

โดยปกติแล้ว หากเว็บไซต์ของคุณใช้งานได้ในเบราว์เซอร์รุ่นใหม่อย่าง Google Chrome หรือ Apple Mobile Safari ก็น่าจะทำงานกับอัลกอริทึมของเราได้

ทำไมถึงต้องใช้การออกแบบที่ตอบสนองตามอุปกรณ์

ขอแนะนำให้ใช้การออกแบบเว็บที่ตอบสนองตามอุปกรณ์เนื่องจากจะช่วยในเรื่องต่อไปนี้

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

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

JavaScript

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

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

การกำหนดค่าที่พบทั่วไป

การใช้งาน JavaScript ในเว็บไซต์บนอุปกรณ์เคลื่อนที่ที่นิยมกันมี 3 แบบดังนี้

  • การปรับเปลี่ยนด้วย JavaScript (JavaScript-Adaptive): ในการกำหนดค่าแบบนี้ จะมีการส่งเนื้อหา HTML, CSS และ JavaScript ชุดเดียวกันไปยังอุปกรณ์ทั้งหมด เมื่อระบบเรียกใช้ JavaScript ในอุปกรณ์ การแสดงผลหรือลักษณะการทำงานของเว็บไซต์จะมีการเปลี่ยนแปลง หากเว็บไซต์ใดต้องใช้ JavaScript ทาง Google ขอแนะนำให้ใช้การกำหนดค่าแบบนี้
  • การตรวจหาแบบรวม: ในการใช้งาน เว็บไซต์จะใช้ทั้ง JavaScript และการตรวจหาความสามารถของอุปกรณ์ในฝั่งเซิร์ฟเวอร์เพื่อแสดงเนื้อหาที่แตกต่างกันในอุปกรณ์ต่างๆ
  • JavaScript ที่ส่งแบบไดนามิก: ในการกำหนดค่าแบบนี้ ระบบจะส่ง HTML ชุดเดียวกันไปยังอุปกรณ์ทั้งหมด แต่จะส่ง JavaScript จาก URL ที่ส่งโค้ด JavaScript ที่แตกต่างกันแบบไดนามิกโดยขึ้นอยู่กับ User Agent ของอุปกรณ์

ลองดูรายละเอียดของการกำหนดค่าแต่ละแบบข้างต้น

การปรับเปลี่ยนด้วย JavaScript

ในการกำหนดค่าแบบนี้ URL หนึ่งๆ จะส่งเนื้อหาเดียวกัน (HTML, CSS, JavaScript, รูปภาพ) ไปยังอุปกรณ์ทั้งหมด การแสดงผลหรือลักษณะการทำงานของเว็บไซต์จะเปลี่ยนแปลงไปเฉพาะเมื่อระบบเรียกใช้ JavaScript ในอุปกรณ์เท่านั้น ซึ่งคล้ายกับลักษณะการทำงานในการออกแบบเว็บที่ตอบสนองตามอุปกรณ์ซึ่งใช้คำค้นหาสื่อ CSS

ตัวอย่างเช่น หน้าเว็บหนึ่งๆ จะส่ง HTML ชุดเดียวกันไปยังอุปกรณ์ทุกประเภท โดย HTML นั้นมีเอลิเมนต์ <script> ที่ขอ URL ภายนอกซึ่งส่ง JavaScript อุปกรณ์ทุกประเภทที่ขอ URL ของ JavaScript จะได้รับโค้ดชุดเดียวกัน เมื่อระบบเรียกใช้ JavaScript โค้ด JavaScript นั้นจะตรวจหาอุปกรณ์และตัดสินว่าจะปรับเปลี่ยนบางอย่างเกี่ยวกับหน้าเว็บหรือไม่ เช่น ให้ใส่รูปภาพหรือโค้ดโฆษณาที่เหมาะกับสมาร์ทโฟน แทนที่จะแสดงรายการดังกล่าวของเดสก์ท็อป

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

การตรวจหาแบบรวม

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

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

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

JavaScript ที่ส่งแบบไดนามิก

ในการกำหนดค่าแบบนี้ อุปกรณ์ทั้งหมดจะได้รับ HTML ชุดเดียวกัน ซึ่งมีเอลิเมนต์ <script> เพื่อรวมไฟล์ JavaScript ภายนอกที่มีเนื้อหาที่แตกต่างกันได้โดยขึ้นอยู่กับ User Agent ที่ส่งคำขอ กล่าวคือ จะมีการส่งโค้ด JavaScript แบบไดนามิก

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