SEO เชิงเทคนิค
เครื่องมือตรวจสอบความเป็นมิตรกับมือถือและขนาดจุดแตะ
Google ได้ปิดเครื่องมือ Mobile-Friendly Test ของตัวเองไปแล้วในปี 2023 วาง HTML ของหน้าเว็บ (และ CSS หากไม่ได้ฝังไว้ในหน้า) เครื่องมือนี้จะรันการตรวจสอบจริงเจ็ดข้อ: viewport meta, เลย์เอาต์ความกว้างเดสก์ท็อปตายตัว, ขนาดฟอนต์ที่อ่านง่าย, ขนาดจุดแตะโดยประมาณ, แท็กปลั๊กอินล้าสมัย และความคมชัดสีตาม WCAG
การตรวจสอบที่ต้องใช้ CSS (ความกว้างเลย์เอาต์, ขนาดฟอนต์, จุดแตะ, ความคมชัดสี) จะถูกข้ามหรือระบุว่า "ข้อมูลไม่เพียงพอ" หากไม่พบ CSS ทั้งใน HTML และในช่องนี้
นี่คือการตรวจสอบแบบสถิตตามกฎ — ไม่ได้เรนเดอร์หน้าเว็บเหมือนมือถือจริง ดังนั้นผลลัพธ์เรื่องจุดแตะและเลย์เอาต์เป็นการประมาณการใกล้เคียงจาก CSS ของคุณ ไม่ใช่การวัดระดับพิกเซลที่แม่นยำสมบูรณ์
เครื่องมือนี้ตรวจสอบอะไรบ้าง
เจ็ดการตรวจสอบที่สำคัญต่อผู้เข้าชมมือถือจริงและดัชนี mobile-first ของ Google: แท็ก viewport ที่ถูกต้องและไม่บล็อกการซูม; ไม่มีเลย์เอาต์ความกว้างเดสก์ท็อปที่ตายตัว; ไม่มีข้อความเล็กเกินอ่านยาก; จุดแตะบนลิงก์และปุ่มมีขนาดสบายมือ; ไม่มีมาร์กอัป Flash/Java/marquee ที่ตายแล้ว; และความคมชัดสีข้อความตามมาตรฐาน WCAG วาง HTML หน้าเว็บทั้งหมด (ใช้ View Source ได้) พร้อม CSS หากอยู่ใน stylesheet ภายนอก
แต่ละการตรวจสอบทำงานอย่างไร
ไม่มีอะไรถูกเดาที่นี่ — ทุกผลลัพธ์มาจากการแยกวิเคราะห์ HTML ที่คุณวาง (DOM) และ CSS ที่คุณวาง (ตัวแยกวิเคราะห์กฎจริง ที่คลี่บล็อก @media ออกมา) แล้วนำเกณฑ์เดียวกับที่ Google และ WCAG เผยแพร่มาใช้
แท็ก meta viewport
ตรวจว่ามีแท็กนี้อยู่ ใช้ width=device-width และ initial-scale=1 และไม่บล็อกการซูมด้วยสองนิ้ว (user-scalable=no หรือ maximum-scale ต่ำกว่า 2) ซึ่งถือเป็นความล้มเหลวตาม WCAG 1.4.4
เลย์เอาต์ความกว้างเดสก์ท็อปตายตัว
สแกน CSS ของคุณหา selector เชิงโครงสร้าง (body, .wrapper, .container, #page, ...) ที่กำหนด width หรือ min-width ตายตัวตั้งแต่ 601px ขึ้นไป — สัญญาณคลาสสิกว่าเลย์เอาต์ไม่เคยถูกทำให้ตอบสนอง
ขนาดฟอนต์ที่อ่านง่าย
ตั้งค่าสถานะการประกาศ font-size ที่ต่ำกว่า 12px ซึ่งเป็นค่าต่ำสุดที่ใช้กันทั่วไปเพื่อการอ่านที่สบายบนหน้าจอมือถือโดยไม่ต้องซูมด้วยสองนิ้ว
ขนาดจุดแตะ
ประมาณความสูงที่เรนเดอร์ของลิงก์ ปุ่ม และองค์ประกอบ role="button" จาก font-size, line-height และ padding (หรือ width/height ที่ระบุชัดเจน) แล้วเทียบกับแนวทางประมาณ 44-48px จาก Google Lighthouse และ WCAG 2.5.5
เนื้อหาปลั๊กอินล้าสมัย
ตั้งค่าสถานะ <applet>, <marquee>, <blink> และ <embed>/<object> ใดๆ ที่ชี้ไปยัง Flash (.swf) — ไม่มีสิ่งใดทำงานได้ในเบราว์เซอร์มือถือปัจจุบัน
ความคมชัดสี (WCAG)
สำหรับกฎ CSS ใดๆ ที่กำหนดสีข้อความและสีพื้นหลังพร้อมกัน จะคำนวณอัตราส่วนความคมชัดตามความสว่างสัมพัทธ์ของ WCAG จริง แล้วตรวจสอบกับเกณฑ์ขั้นต่ำ AA ที่ 4.5:1 (หรือ 3:1 สำหรับข้อความขนาดใหญ่/ตัวหนา)
จุดพักการแสดงผลตามขนาดหน้าจอ
นับกฎ @media ใน CSS ของคุณเป็นสัญญาณตรวจสอบเบื้องต้นว่าเลย์เอาต์ปรับตัวตามหน้าจอที่เล็กลง — เป็นข้อมูลเท่านั้น เพราะเลย์เอาต์แบบยืดหยุ่นอาจตอบสนองได้แม้ไม่มี media query เลย
คำถามที่พบบ่อย
ทำไม Google ถึงปิด Mobile-Friendly Test
Google ปิดเครื่องมือ Mobile-Friendly Test แบบเดี่ยวไปเมื่อธันวาคม 2023 โดยรวมการตรวจสอบความเป็นมิตรกับมือถือเข้าไปในรายงานที่ใหญ่กว่าของ Search Console โดยไม่มีเครื่องมือตรวจสอบหน้าเดียวที่รวดเร็วอีกต่อไป เครื่องมือนี้จึงเติมเต็มช่องว่างนั้นด้วยการตรวจสอบตามกฎที่รวดเร็ว ไม่ต้องล็อกอิน และใช้กับ HTML ที่วางได้ทันที
ทำไมฉันต้องวาง CSS แยกต่างหาก
หน้าเว็บจริงส่วนใหญ่โหลด CSS จาก stylesheet ภายนอก (<link rel="stylesheet">) ซึ่งเครื่องมือนี้ไม่สามารถดึงมาให้คุณได้จาก HTML ที่วางเพียงอย่างเดียว วางเนื้อหา stylesheet นั้นลงในช่อง CSS แล้วการตรวจสอบเลย์เอาต์ ขนาดฟอนต์ จุดแตะ และความคมชัดสีจะรันกับมันทั้งหมด
ขนาดจุดแตะที่ดีควรเป็นเท่าไร
ประมาณ 44-48 พิกเซล CSS ทั้งสูงและกว้าง ตามมาตรฐาน Google Lighthouse และ WCAG 2.5.5 (Target Size) ต่ำกว่านั้น นิ้วหัวแม่มือจริงบนหน้าจอจริงจะแตะพลาดไปโดนลิงก์ข้างเคียงบ่อยขึ้นอย่างเห็นได้ชัด
การประมาณขนาดจุดแตะแม่นยำหรือไม่
ไม่ — เป็นการประมาณที่น่าเชื่อถือจาก font-size, line-height และ padding (หรือ width/height ที่ระบุชัดเจน) ที่คุณประกาศไว้ ไม่ใช่การเรนเดอร์เบราว์เซอร์จริง ให้ถือว่าผลลัพธ์ใกล้เส้น 44-48px เป็น "ควรตรวจสอบบนอุปกรณ์จริง" และผลลัพธ์ที่ต่ำกว่ามากเป็นความล้มเหลวที่ชัดเจน
เครื่องมือนี้ส่ง HTML หรือ CSS ของฉันไปที่ไหนหรือไม่
HTML/CSS ที่คุณวางจะถูกส่งครั้งเดียวผ่าน HTTPS ไปยังเซิร์ฟเวอร์ของเราเพื่อรันตัวแยกวิเคราะห์ (จำเป็นเพื่อให้กฎเดียวกันทำงานสำหรับทุกคน) และจะไม่ถูกเก็บไว้หลังจากคำขอนั้น