ทำ SEO ใน NuxtJS ด้วยปลายนิ้ว
วิธีการตั้งค่า SEO ง่าย ๆ ในโปรเจคเว็บที่ใช้ NuxtJS
SEO หรือ Search Engine Optimization เป็นองค์ประกอบหลักหนึ่งในการทำเว็บไซต์ ที่สำคัญเอามากๆ เพราะมันคือสิ่งที่จะทำคนทุกคนบนโลกสามารถที่จะพิมพ์ค้นหา หรือสามารถเจอเว็บไซต์เราได้ง่ายขึ้นบนอินเตอร์เน็ต
อยากรู้ความสำคัญของเจ้า SEO เพิ่มเติม สามารถอ่านได้จาก
บทความดีๆเกี่ยวกับ SEO ของทางบริษัท igitalgeek <<< คลิกที่นี่
เข้าเรื่องหลักกันเลย !!
ตั้งค่า SEO แบบพื้นฐานในโปรเจค NuxtJS
เมื่อเราได้ทำการสร้างโปรเจค Nuxt ขึ้นมาแล้ว มันก็จะมีเจ้าไฟล์ที่ชื่อว่า nuxt.config.js อยู่ด้วยซึ่งเป็นไฟล์ที่สามารถตั้งค่า config ของทั้ง project
สำหรับผู้เริ่มต้นสามารถเริ่มสร้างโปรเจค NuxtJS กันตามบทความด้านล่างอย่างละเอียดเลยได้ที่
“ บทความนี้เราจะเน้นกันตรงการตั้งค่าที่เกี่ยวข้องกับ SEO ภายในโปรเจค Nuxt ”
1. ขั้นแรกเลย เราเข้ามาดูกันในไฟล์ nuxt.config.js
เราจะพบกับส่วนการตั้งค่า “head” ซึ่งส่วนนี้นี่เองที่มีไว้สำหรับการตั้งค่าต่างๆที่เกี่ยวข้องกับ SEO ของเว็บเรา
2. สังเกตที่ส่วนย่อยภายใน “head”
โดยพื้นฐานหลังการสร้างโปรเจค Nuxt ขึ้นมา มันจะมีให้อยู่สามส่วนไว้เลยดังนี้
2.1 title → ไว้ตั้งค่าชื่อ หรือ title ของตัวเว็บ หรือหน้าเว็บนั้นๆของเรา (ส่วนนี้จะปรากฎบนแท็บของบราวเซอร์)
2.2 meta → สำหรับการตั้งค่า mata tags ต่างๆของไฟล์ html หรือ หน้าเว็บของเรา
2.3 link → สำหรับการเชื่อมโยงกับทรัพยากรภายนอก (รูปภาพ, ไฟล์สไตล์ต่างๆ เช่น ไฟล์ css, ไอคอนของเว็บไซต์อย่าง favicon, …)
ซึ่งเราสามารถตั้งค่าเพิ่มเติม และปรับปรุงข้อมูลที่เราจะนำมาใส่ในส่วนนี้ตามความเหมาะสมของเว็บไซต์ของตนเอง
ค่าที่ตั้งไว้ตรงส่วนของ head ภายในไฟล์ nuxt.config.js นั้นจะถูกนำไปใช้กับหน้าเว็บทุกๆหน้าในเว็บของเรา
งั้นค่าก็เหมือนกันหมดน่ะสิ …. !!
เปล่าเลย!! ใน nuxt ยังมีวิธีการตั้งค่า SEO ให้แต่ละหน้าเว็บต่างกันได้อยู่ซึ่งก็คือ
SEO ผ่านการตั้งค่าในหน้าเว็บ
เราสามารถตั้งค่า SEO แบบ dynamic ที่เปลี่ยนแปลงไปตามคอนเทนต์แต่ละหน้าเว็บ
ในโปรเจค nuxt ภายในไฟล์ .vue ที่เป็นไฟล์ในการเขียนสร้างแต่ละหน้าเว็บนั้น เราสามารถตั้งค่าที่ head () หรือ head method เพื่อใช้ในการตั้งค่าในส่วนของ <head> หรือ tags ต่างๆ เช่น title tag, meta tags, link tags ของหน้าเว็บนั้นๆได้
ข้อดี เราสามารถที่จะตั้งค่า SEO ใน head() ของแต่ละหน้าเว็บย่อยภายในเว็บไซต์ของเราให้มีส่วนที่ต่างกันได้ เพื่อเก็บการค้นหาจากผู้ใช้งานให้ครอบคลุม และเข้าถึงส่วนต่างๆของเว็บเราให้ได้ดีที่สุด
ข้อเสีย ก็มีบ้างเช่นกัน อย่างเช่นเราต้องการตั้งค่าให้รองรับการค้นหา ทั้งทาง Open Graph protocol หรือ og, Twitter protocol (ใครยังไม่รู้จักสิ่งเหล่านี้ เดี๋ยวจะมีอธิบายในบทความถัดไปครับ หากเขียนเสร็จแล้วจะนำมาเพิ่มให้ในบทความนี้ด้วย) ซึ่งถ้าเว็บเรามีหลายหน้าแต่ละหน้าเราต้องมานั่งตั้งค่า ยาวเหยียด เพื่อให้มีครบครอบคลุม protocol ต่างๆเหมือนกันทั้งๆที่เราอาจต้องการเปลี่ยนเพียงแค่บางจุด และค่าส่วนที่เหลือต้องการให้เหมือนกัน
งั้นเราตั้งแค่บางค่า แล้วให้ที่เหลือมีตามเดิมได้ไหม …. !!
ได้สิ!! ใน nuxt มีวิธีการเรียกใช้ plugin อยู่เราสามารถนำมาใช้กับการตั้งค่า SEOได้
SEO ผ่านการใช้งานแบบ Plugin
เรามาเริ่มดูการตั้งค่า SEO ผ่านการใช้งานแบบ Plugin กันเลย …
ขั้นที่ 1: ให้เราไปสร้างไฟล์ที่เราจะใช้เป็นตัวช่วยอำนวยความสะดวกในการตั้งค่า SEO ในหลายๆหน้าเว็บของเว็บเรา ไว้ที่ directory ชื่อ “plugins” (directory นี้มีอยู่ในโครงสร้างของโปรเจค nuxt อยู่แล้วเราไม่จำเป็นต้องสร้างใหม่)
ขั้นที่ 2: ไปตั้งค่าเรียกใช้งาน plugins ของเราที่ส่วนของ “plugins” ในไฟล์ nuxt.config.js
ขั้นที่ 3: ทำการสร้าง plugin ของเราภายในไฟล์ที่เราได้สร้างเอาไว้
ชื่อไฟล์ของ plugin และชื่อตัว plugin ที่เราจะ inject ออกมาสำหรับใช้งานสามารถตั้งตามความเหมาะสม ตามกิจกรรมการใช้งานได้เลย ในตัวอย่างข้างบน จะตั้งชื่อไฟล์ว่า “head-util.js” และ inject ออกมาใช้งานด้วยชื่อ plugin ว่า “headUtil” เพื่อความสะดวกในการจำและนำไปใช้งาน เนื่องจากมีจุดประสงค์ใช้งาน plugin นี้เพียงอย่างเดียวคือการตั้งค่าในส่วนของ head
โดยในการตั้งค่าภายใน plugin เราสามารถเขียนให้สามารถผ่านค่าผ่านตัวแปล (ในตัวอย่างใช้การผ่านค่าในรูปแบบ object) และตั้งค่าพื้นฐานของแต่ละอันไว้ได้เลย สำหรับกรณีที่เปลี่ยนแปลงเพียงบางค่า จะทำให้ส่วนที่เหลือจะมีค่าพื้นฐานดังที่ตั้งไว้แล้วโดยอัตโนมัติ
ขั้นที่ 4: ลุยใส่ค่าที่เราต้องการใน head method ที่ไฟล์ .vue ของหน้าเว็บต่างๆ (เราไม่จำเป็นต้องตั้งค่า SEO ทุกส่วนที่เราตั้งไว้ใน plugin หากเราได้ตั้งค่าพื้นฐานไว้ใน plugin แล้ว)
และทั้งหมดกล่าวมาในบทความนี้คือรูปแบบส่วนหนึ่งที่สามารถใช้ในการตั้งค่า SEO ภายในโปรเจค Nuxt
เห็นไหมครับการทำ SEO ใน NuxtJS นั้นไม่ยากเลย
