เจาะลึก SEO สำหรับนักพัฒนา: หยุดหมกมุ่นเรื่องคีย์เวิร์ดแล้วหันมาแก้ Core Web Vitals

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

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

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

ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง

วิธีการแก้ไขปัญหานี้คือ เลิกปล่อยให้เบราว์เซอร์เดาสัดส่วนขององค์ประกอบต่างๆ ด้วยตัวเอง ให้กำหนดแอตทริบิวต์ width และ height บนรูปภาพทุกครั้ง หากคุณกำลังใช้งานรูปภาพแบบ responsive ที่มีความกว้าง 100% ให้ใช้คุณสมบัติ CSS แบบ aspect-ratio การทำเช่นนี้จะช่วยจองพื้นที่ว่างไว้รอก่อนที่ไฟล์ภาพจะดาวน์โหลดเสร็จ ช่วยรักษาเสถียรภาพของหน้าเว็บเอาไว้ได้

หากคุณกำลังพัฒนาเว็บแอปพลิเคชันเดี่ยว (SPA) ขนาดใหญ่ด้วย React, Vue หรือ Angular คุณอาจกำลังทำลาย SEO ของตัวเองอยู่ แม้ว่า Google จะสามารถประมวลผล JavaScript ได้ แต่ก็ไม่ได้มีความเสถียรหรือรวดเร็วเท่ากับการแยกวิเคราะห์ไฟล์ HTML แบบสถิต บอตของเสิร์ชเอนจิ้นบางตัวอาจยอมแพ้และปิดหน้าเว็บไปเลยหากเนื้อหาใช้เวลาเรนเดอร์นานเกินไป

ถ้านำเสนอเนื้อหาแบบไดนามิกแต่ยังจำเป็นต้องถูกจัดทำดัชนี ให้ย้ายไปใช้ระบบ Server-Side Rendering (SSR) หรือ Static Site Generation (SSG) วิธีนี้จะช่วยให้มั่นใจได้ว่าเมื่อบอตเข้ามาเข้าถึง URL ของคุณ มันจะได้รับเอกสาร HTML ที่สมบูรณ์พร้อมใช้งานทันที หากไม่สามารถหลุดพ้นจากสถาปัตยกรรมแบบ CSR ล้วนๆ ได้ ให้ลองมองหาเครื่องมือ pre-rendering ที่คอยสร้างหน้าเว็บเวอร์ชันสถิตเอาไว้ล่วงหน้าระหว่างกระบวนการ build โปรเจกต์

นอกเหนือจากเรื่อง SEO พื้นฐานแล้ว อย่าลืมติดตั้งแท็ก Open Graph (og:) และ Twitter Card แม้ว่าแท็กเหล่านี้จะไม่ช่วยดันอันดับการค้นหาโดยตรง แต่จะทำหน้าที่ควบคุมรูปลักษณ์ของลิงก์เมื่อถูกแชร์ลงบนโซเชียลมีเดีย ลิงก์ที่มีรูปภาพประกอบที่เหมาะสมและมีข้อความสรุปกระชับมักจะดึงดูดคลิกได้ดีกว่า ซึ่งจะนำไปสู่ปริมาณทราฟฟิกที่สูงขึ้นและส่งสัญญาณทางอ้อมไปยังเสิร์ชเอนจิ้นว่าเนื้อหาของคุณมีคุณค่า

อีกจุดสำคัญคือต้องไม่ปล่อยให้เสิร์ชเอนจิ้นต้องเสีย งบประมาณในการรวบรวมข้อมูล (crawl budget) ไปกับหน้าเว็บไซต์ที่ไม่จำเป็น อย่างเช่น หน้าแผงควบคุมแอดมิน (/admin), หน้าผลการค้นหา (/search) และหน้าขอบคุณ (/thank-you) ควรถูกปิดกั้นไม่ให้จัดทำดัชนี

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

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

ที่มา: Dev.to