เอกสารโกงสำหรับการออกแบบมือถือ: การออกแบบที่ตอบสนอง การให้บริการแบบไดนามิก และไซต์บนมือถือ

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

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

ตัวเลือกที่ 1: การออกแบบที่ตอบสนอง

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

ข้อดี :

1. มีเพียงเวอร์ชันเดียวในแต่ละหน้า หน้าเดียวกันจะปรับให้เข้ากับประเภทของอุปกรณ์ที่แสดง (แทนที่จะตรวจจับประเภทของอุปกรณ์แล้วให้บริการเนื้อหาต่างๆ ตามนั้น) การมี HTML และ URL เดียวกันในอุปกรณ์ทั้งหมดช่วยลดความยุ่งยากในการบำรุงรักษาไซต์ของคุณ
2. การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ไม่ได้อาศัยการตรวจหา user-agent เหมือนกับอีกสองตัวเลือกที่ทำ การตรวจจับ User-agent (เช่น การตรวจหาว่าเบราว์เซอร์หรืออุปกรณ์ใดที่ร้องขอหน้าเว็บ) ไม่ได้แย่ในตัวเอง แต่ก็ไม่ได้สมบูรณ์แบบ และหากมีข้อผิดพลาดในกระบวนการ ผู้ใช้อาจได้รับไซต์เวอร์ชันที่ไม่ถูกต้อง นอกจากนี้ ยังช่วยสไปเดอร์ของเครื่องมือค้นหาไม่ต้องรวบรวมข้อมูลไซต์ของคุณในฐานะตัวแทนผู้ใช้ต่างๆ ซึ่งหมายความว่าไซต์ของคุณจะถูกรวบรวมข้อมูลมากขึ้น
3. โดยทั่วไปแล้วการตอบสนองจะโหลดได้เร็วกว่าในเบราว์เซอร์ เนื่องจากอุปกรณ์ทั้งหมดได้รับเนื้อหาเดียวกัน จึงไม่มีกระบวนการร้องขอการเปลี่ยนเส้นทางที่เป็นไปได้สำหรับการตรวจจับตัวแทนผู้ใช้ และใครก็ตามที่เคยหิวโหยและมองหาร้านอาหารดีๆ สักร้านบนสมาร์ทโฟนของตนจะรู้ดีว่าความเร็วนั้นสำคัญ

จุดด้อย:

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

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

ตัวเลือก 2: การแสดงแบบไดนามิก

บางครั้งเรียกว่า "การดมกลิ่น" ของตัวแทนผู้ใช้ การให้บริการแบบไดนามิกสามารถทำได้สองวิธีและยากที่จะนำไปใช้ อันที่จริง Google ได้สรุปข้อผิดพลาดทั่วไปบางประการเกี่ยวกับการแสดงโฆษณาแบบไดนามิก สิ่งที่เทคนิคนี้ทำคือการตรวจหา user-agent ของผู้เข้าชม (เช่น อุปกรณ์ที่พวกเขาใช้เพื่อดูไซต์ของคุณ) แล้ว เปลี่ยนเส้นทางที่ระดับเซิร์ฟเวอร์ วิธีหนึ่งในการใช้การแสดงผลแบบไดนามิกคือ การเปลี่ยนเส้นทางแบบทิศทางเดียว ซึ่งลิงก์ไปยังไซต์โดยค่าเริ่มต้นไปยังไซต์เดสก์ท็อป แต่อุปกรณ์เคลื่อนที่จะเปลี่ยนเส้นทางจากเว็บไซต์เดสก์ท็อปไปยังไซต์บนมือถือ

ประเภทที่ สอง การเปลี่ยนเส้นทางแบบสองทิศทาง มีรหัสทั้งบนเดสก์ท็อปและไซต์มือถือ ตรวจสอบให้แน่ใจว่าผู้เยี่ยมชมรายใดได้รับเนื้อหาที่เหมาะสมโดยไม่คำนึงถึงอุปกรณ์ (โค้ดเหล่านี้บางครั้งเรียกว่าแท็กสวิตช์บอร์ด) การใช้งานหมายถึงการวางแท็ก rel=”alternate” บนเดสก์ท็อปโดยชี้ไปที่ไซต์บนมือถือ และในไซต์บนมือถือ ให้ใส่แท็ก rel=”canonical” ที่ชี้ไปที่ไซต์เดสก์ท็อป

ข้อดี:

1. เนื่องจากการเปลี่ยนเส้นทางทำได้ที่ระดับเซิร์ฟเวอร์ คุณจึงต้องการเพียงหนึ่ง URL ต่อหน้า
2. การให้บริการแบบไดนามิกยังทำงานได้ดีสำหรับ ฟีเจอร์โฟน ตามที่ PCMag.com กำหนด ฟีเจอร์โฟนคือ "โทรศัพท์มือถือที่มีชุดฟังก์ชันตายตัวนอกเหนือจากการโทรด้วยเสียงและการส่งข้อความ แต่ไม่ครอบคลุมเท่าสมาร์ทโฟน" ตัวอย่างเช่น ฟีเจอร์โฟนมักจะไม่สามารถดาวน์โหลดแอป แต่มักจะมีความสามารถในการท่องเว็บบางอย่าง ตาม Google ความแตกต่างที่ใหญ่ที่สุดคือฟีเจอร์โฟนไม่สามารถประมวลผล CSS ได้ ดังนั้นจึงไม่สามารถจัดการการออกแบบที่ตอบสนองได้ดีนัก ดังนั้นจึงเป็นสิ่งสำคัญที่จะรู้ว่าผู้ชมของคุณและอุปกรณ์เคลื่อนที่ประเภทใดที่พวกเขาใช้อยู่
3. หากคุณต้องการมีชุดคำหลักแยกต่างหากสำหรับผู้ใช้มือถือของคุณ ตัวเลือกนี้จะช่วยให้คุณทำอย่างนั้นได้ เนื่องจากผู้ใช้มือถือและผู้ใช้เดสก์ท็อปต่างก็เห็น HTML ที่แตกต่างกัน (Search Engine Land มีบทความดีๆ ที่กล่าวถึงคำหลักเฉพาะสำหรับมือถือ)

จุดด้อย:

1. การเปลี่ยนเส้นทางแบบไดนามิกช่วยเพิ่มงานบำรุงรักษาไซต์ของคุณเป็นสองเท่า เนื่องจากเป็นการตั้งค่าไซต์แยกต่างหากสำหรับมือถือ โดยมีชุด HTML ที่จัดทำดัชนีแยกกันซึ่งต้องใช้โปรเจ็กต์ SEO แยกต่างหาก
2. รายการที่จำเป็นของสตริง user-agent ยังต้องการการบำรุงรักษาอย่างต่อเนื่อง เนื่องจากต้องเพิ่มสตริงใหม่ทุกครั้งที่มีการเปิดตัวอุปกรณ์มือถือใหม่
3. สุดท้ายนี้ โปรดทราบว่าคุณจะต้องใช้ส่วนหัว "Vary HTTP-User Agents" หากไซต์ของคุณให้บริการเนื้อหาแบบไดนามิก ส่วนหัวช่วยให้เนื้อหาได้รับการบริการอย่างถูกต้องและช่วยให้เอ็นจิ้นแคชได้อย่างถูกต้อง Google มีรายละเอียดเกี่ยวกับวิธีการเพิ่มส่วนหัวนี้

ตัวเลือกที่ 3: ไซต์บนมือถือ

ตัวเลือกนี้ ตามความหมายของชื่อ เกี่ยวข้องกับการสร้างโดเมนแยกต่างหากสำหรับผู้ใช้มือถือโดยเฉพาะ ตัวอย่างที่พบบ่อยที่สุดคือ m.domain.com หรือ mobile.domain.com เป็นตัวเลือกยอดนิยมสำหรับผู้ค้าปลีกรายใหญ่ Bridget Randolph ชี้ให้เห็นว่า "73% ของเว็บไซต์ที่อยู่ในอันดับต้น ๆ ของ Quantcast Top 100,000 ไซต์ใช้ URL เปลี่ยนเส้นทางไปยัง URL เฉพาะมือถือ" เช่นเดียวกับการให้บริการแบบไดนามิก เทคนิคนี้เกี่ยวข้องกับการพัฒนาเนื้อหาเฉพาะสำหรับผู้เข้าชมที่ใช้อุปกรณ์เคลื่อนที่ อย่างไรก็ตาม URL ของไซต์บนมือถือที่แยกจากกันนั้นแตกต่างกัน ดังนั้นจึงไม่มีการเปลี่ยนเส้นทางระดับเซิร์ฟเวอร์

ข้อดี:

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

ข้อเสีย :

1. ไซต์บนมือถือของคุณจะไม่ได้รับประโยชน์จากโปรไฟล์ลิงก์ย้อนกลับเชิงบวกใดๆ ที่ไซต์เดสก์ท็อปของคุณสร้างขึ้น (เว้นแต่คุณจะใช้การเปลี่ยนเส้นทางแบบสองทิศทาง) ดังนั้น หากคุณต้องการให้ผู้ใช้มือถือของคุณพบคุณในการค้นหาทั่วไป นี่อาจเป็นความพ่ายแพ้ที่แท้จริง
2. ไซต์บนมือถือของคุณจะต้องมีการทำ SEO เพิ่มเติม คุณจะต้องส่ง XML Sitemap แยกต่างหากไปยัง Google และ Bing Webmaster Tools นอกจากนี้ หน้าจอที่เล็กกว่าหมายถึง SERP ที่เล็กกว่า ดังนั้นคุณอาจต้องแก้ไข Meta tag ของคุณ เมตาแท็กเฉพาะมือถือควรสั้นกว่าสำหรับไซต์เดสก์ท็อป

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

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

สำหรับข้อมูลเกี่ยวกับวิธีการเพิ่มประสิทธิภาพหน้าเว็บของคุณสำหรับความเร็วและ SEO บนมือถือ เราขอแนะนำให้เริ่มต้นด้วยแหล่งข้อมูลเหล่านี้:

• รายการตรวจสอบ SEO และการออกแบบสำหรับมือถือ All-In-One
• 7 แนวทางปฏิบัติที่ดีที่สุดสำหรับการนำทางที่เหมาะกับอุปกรณ์เคลื่อนที่
• คู่มือ SEO: SEO บนมือถือและ UX Optimization
• การปรับภาพให้เหมาะสม: สิ่ง #1 ที่คุณสามารถทำได้เพื่อปรับปรุง Mobile UX
• คู่มือมือถือของผู้ดูแลเว็บโดย Google Developers