SEO ในอุปกรณ์เคลื่อนที่สำหรับอุปกรณ์อื่นๆ

แท็บเล็ต

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

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

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

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

เนื้อหาเฉพาะอุปกรณ์

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

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

หากเว็บไซต์มีการเพิ่มประสิทธิภาพสำหรับแท็บเล็ต หลักเกณฑ์เหล่านี้จะช่วยคุณกำหนดค่าเว็บไซต์ได้

  • การแสดงผลแบบไดนามิก: จะมีการแสดง URL เดียวกันแก่ผู้ใช้เดสก์ท็อป สมาร์ทโฟน และแท็บเล็ต โดยใช้ HTML (และ CSS) ที่แตกต่างกันซึ่งขึ้นอยู่กับ User Agent ขอแนะนำอย่างยิ่งให้คุณใช้ส่วนหัว Vary ของ HTTP ดังที่อธิบายไว้ในคำแนะนำสำหรับเว็บไซต์ในสมาร์ทโฟน
  • มี URL สำหรับแท็บเล็ตโดยเฉพาะแยกต่างหาก: ในกรณีนี้ ขอแนะนำอย่างยิ่งให้คุณอนุญาตให้ Googlebot รวบรวมข้อมูล URL ของแท็บเล็ต และใช้ rel="canonical" ใน URL แท็บเล็ตแต่ละ URL เพื่อชี้ไปยัง URL เดสก์ท็อปที่เทียบเท่ากัน

ฟีเจอร์โฟน

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

ขอแนะนำว่าให้ใส่แท็ก <link rel="alternate" media="handheld"> ในทุกหน้าที่คุณต้องการให้รองรับฟีเจอร์โฟนด้วยดังที่อธิบายไว้ด้านล่าง

ส่วนนี้จะสาธิตวิธีกำหนดค่าแต่ละแบบ

การแสดงผลแบบไดนามิก

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

<link rel="alternate" media="handheld" href="[current page URL]" />

URL แบบแยก

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

การกำหนดค่า URL ที่เฉพาะเจาะจง

ในการกำหนดค่าแบบนี้ การตั้งค่าจะมีลักษณะดังนี้

  • http://www.example.com/page-1 ให้บริการคำขอเดสก์ท็อป
  • http://m.example.com/page-1 ให้บริการผู้ใช้สมาร์ทโฟน
  • http://phone.example.com/page-1 ให้บริการผู้ใช้ฟีเจอร์โฟน

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

ใน www.example.com/page-1 ให้เพิ่มโค้ดต่อไปนี้

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" />
<link rel="alternate" media="handheld" href="http://phone.example.com/page-1" />

ใน m.example.com/page-1 ให้เพิ่มโค้ดต่อไปนี้

<link rel="canonical" href="http://www.example.com/page-1" />

ใน phone.example.com/page-1 ให้เพิ่มโค้ดต่อไปนี้

<link rel="canonical" href="http://www.example.com/page-1" />

การกำหนดค่า URL ของเดสก์ท็อปและอุปกรณ์เคลื่อนที่ทุกประเภท

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

  • http://www.example.com/page-1 ให้บริการผู้ใช้เดสก์ท็อป
  • http://m.example.com/page-1 ให้บริการผู้ใช้ทั้งสมาร์ทโฟนและฟีเจอร์โฟน

ในกรณีนี้ คำอธิบายประกอบใน http://www.example.com/page-1 จะเป็นดังนี้

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" />
<link rel="alternate" media="handheld" href="http://m.example.com/page-1" />

ในหน้า m.example.com ให้ใส่แท็กต่อไปนี้

<link rel="canonical" href="http://www.example.com/page-1" />

คุณจะต้องรวม rel="canonical" ไว้ด้วยไม่ว่าจะเป็นหน้าเว็บในฟีเจอร์โฟนหรือสมาร์ทโฟน

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

การกำหนดค่าแบบแยก URL ของฟีเจอร์โฟน

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

  • http://www.example.com/page-1 ให้บริการผู้ใช้เดสก์ท็อปและสมาร์ทโฟน
  • http://m.example.com/page-1 ให้บริการผู้ใช้ฟีเจอร์โฟน

ในกรณีนี้ คำอธิบายประกอบใน http://www.example.com/page-1 จะเป็นแท็กต่อไปนี้

<link rel="alternate" media="handheld" href="http://m.example.com/page-1" />

คำอธิบายประกอบใน http://m.example.com/page-1 จะเป็นแท็กต่อไปนี้

<link rel="canonical" href="http://www.example.com/page-1" />

การเปลี่ยนเส้นทางและส่วนหัว Vary ของ HTTP

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

แผนผังไซต์

คำแนะนำของเราสำหรับการใช้แผนผังไซต์ฟีเจอร์โฟน และแผนผังไซต์สำหรับ URL ทางเลือกของสมาร์ทโฟนยังคงเหมือนเดิม