ข้อผิดพลาดที่พบบ่อย

หน้านี้อธิบายข้อผิดพลาดที่พบบ่อยที่สุดบางส่วนซึ่งเกิดขึ้นกับผู้ดูแลเว็บเมื่อทำการออกแบบสำหรับอุปกรณ์เคลื่อนที่

ไฟล์ JavaScript, CSS และรูปภาพที่ถูกบล็อก

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

  1. ตรวจสอบว่า Googlebot รวบรวมข้อมูลไฟล์ JavaScript, CSS และรูปภาพได้โดยใช้เครื่องมือตรวจสอบ URL ใน Search Console เครื่องมือนี้จะแสดงให้เห็นว่า Googlebot เห็นและแสดงเนื้อหาของคุณอย่างไร ทั้งยังช่วยระบุปัญหาการจัดทำดัชนีที่พบในเว็บไซต์ ตลอดจนแก้ไขปัญหาดังกล่าว

  2. ตรวจสอบและทดสอบ robots.txt ใน Search Console

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

  4. หาก URL ของหน้าเว็บอุปกรณ์เคลื่อนที่เป็นคนละอันกับ URL เดสก์ท็อป ให้ทดสอบ URL ทั้ง 2 เพื่อให้แน่ใจว่าระบบทราบถึงการเปลี่ยนเส้นทางและรวบรวมข้อมูลได้

เนื้อหาที่เล่นไม่ได้

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

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

วิดีโอเล่นไม่ได้

ข้อความแสดงข้อผิดพลาดข้างต้นนี้เป็นประสบการณ์ใช้งานในอุปกรณ์เคลื่อนที่ที่แย่

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

สำหรับเนื้อหาที่เป็นภาพเคลื่อนไหว ให้ใช้ภาพเคลื่อนไหว HTML5 ที่ใช้ได้กับทุกเว็บเบราว์เซอร์ Google Web Designer เป็นเครื่องมือที่จะช่วยให้คุณสร้างภาพเคลื่อนไหวในรูปแบบ HTML5 ได้ง่ายๆ

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

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

การเปลี่ยนเส้นทางที่ผิดพลาด

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

ตัวอย่าง

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

  • เว็บไซต์ในเดสก์ท็อปเปลี่ยนเส้นทางอุปกรณ์เคลื่อนที่เฉพาะบางแบรนด์หรือบางรุ่นเท่านั้น ตัวอย่างเช่น เว็บไซต์อาจเปลี่ยนเส้นทางเฉพาะผู้ใช้ Android ไปยังเว็บไซต์ในอุปกรณ์เคลื่อนที่ แต่ไม่เปลี่ยนเส้นทางผู้ใช้ iPhone หรือ Windows Phone

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

  • ตั้งค่าเซิร์ฟเวอร์เพื่อให้เปลี่ยนเส้นทางผู้ใช้สมาร์ทโฟนไปยัง URL ที่เทียบเท่ากันบนเว็บไซต์ในสมาร์ทโฟน

  • หากหน้าใดบนเว็บไซต์ไม่มีหน้าในสมาร์ทโฟนที่เทียบเท่า โปรดให้ผู้ใช้อยู่บนหน้าในเดสก์ท็อปต่อไปแทนที่จะเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าแรกของเว็บไซต์ในสมาร์ทโฟน ในกรณีนี้ การไม่ทำอะไรดีกว่าการดำเนินการแบบผิดๆ

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

ข้อผิดพลาด 404 เฉพาะในอุปกรณ์เคลื่อนที่

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

ข้อผิดพลาด 404 เฉพาะในอุปกรณ์เคลื่อนที่

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

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

  • หากคุณมีเว็บไซต์ในสมาร์ทโฟนซึ่งใช้ URL แยกต่างหาก ให้ตั้งค่าเซิร์ฟเวอร์ให้เปลี่ยนเส้นทางผู้ใช้สมาร์ทโฟนไปยัง URL ที่เทียบเท่าบนเว็บไซต์ในสมาร์ทโฟน

  • หากคุณใช้การแสดงผลแบบไดนามิก ให้ตรวจสอบว่าการตรวจหา User Agent มีการกำหนดค่าไว้ถูกต้อง

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

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

หลีกเลี่ยงโฆษณาคั่นระหว่างหน้า

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

โฆษณาคั่นระหว่างหน้าเพื่อให้ดาวน์โหลดแอป

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

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

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

  • ตรวจสอบลิงก์ว่าชี้ไปยังหน้าเทียบเท่าที่ถูกต้อง

หน้าในอุปกรณ์เคลื่อนที่ที่ช้า

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

ใช้ Google PageSpeed Insights เพื่อดูว่าหน้าเว็บมีปัญหาที่ทำให้หน้าเว็บช้าลงบ้างหรือไม่ โดยมุ่งเน้นที่หัวข้อย่อย "ความเร็ว" พยายามแก้ไขปัญหาที่ระบุว่า “ควรแก้ไข”

ดูข้อมูลเพิ่มเติมจากหัวข้อต่อไปนี้

ตั้งค่าวิวพอร์ตอย่างถูกต้อง

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

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

ขนาดแบบอักษรเล็ก

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

องค์ประกอบที่แตะได้อยู่ใกล้กันเกินไป

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