เว็บบนมือถือกับ SEO: ตรวจอะไรบนจอเล็กบ้าง เมื่อ responsive ผ่านแล้วยังไม่พอ

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

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

เว็บบนมือถือกับ SEO ต้องตรวจอะไรบ้าง

เหตุผลที่เรื่องนี้สำคัญกับอันดับด้วยไม่ใช่แค่กับยอดขาย เพราะเวอร์ชันที่เครื่องมือค้นหาใช้ประเมินหน้าเว็บคือเวอร์ชันมือถือ ถ้าหน้ามือถือแสดงเนื้อหาไม่ครบหรือใช้งานลำบาก สิ่งที่ถูกนำไปประเมินก็คือหน้าที่ไม่ครบนั้น พื้นฐานเรื่องนี้อธิบายไว้ใน Mobile-first Indexing คืออะไร

responsive ผ่านแล้วทำไมยังเสียลูกค้า

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

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

ตรวจเว็บด้วยมือถือเครื่องที่มีอยู่ภายในยี่สิบนาที

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

ปุ่มโทรและปุ่มไลน์คือจุดที่ธุรกิจไทยเสียลูกค้ามากที่สุด

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

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

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

แบบฟอร์มบนจอเล็กที่คนกรอกไม่จบ

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

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

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

ป๊อปอัปและแบนเนอร์ที่บังเนื้อหาบนมือถือ

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

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

ตัวอักษร ระยะห่าง และรูปภาพบนจอเล็ก

ปัญหาการอ่านบนมือถือมักไม่ได้มาจากตัวอักษรเล็กอย่างเดียว แต่มาจากบรรทัดที่ชิดกันเกินไปและย่อหน้าที่ยาวเป็นพืด ภาษาไทยไม่มีการเว้นวรรคระหว่างคำ การมีระยะห่างระหว่างบรรทัดที่เพียงพอจึงสำคัญกว่าภาษาอังกฤษ

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

ความเร็วบนอินเทอร์เน็ตมือถือจริง

เว็บที่เปิดเร็วบนไวไฟในออฟฟิศอาจใช้เวลานานกว่าหลายเท่าบนสัญญาณมือถือในห้างหรือในซอย ความเร็วจึงเป็นเรื่องที่ต้องวัดในสภาพจริง ไม่ใช่ดูจากความรู้สึกตอนเปิดที่โต๊ะทำงาน

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

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

สิ่งที่ไม่ควรทำ

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

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

คำถามที่พบบ่อย

สรุป

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