ทำ SEO ใน NuxtJS ด้วยปลายนิ้ว

วิธีการตั้งค่า SEO ง่าย ๆ ในโปรเจคเว็บที่ใช้ NuxtJS

SEO หรือ Search Engine Optimization เป็นองค์ประกอบหลักหนึ่งในการทำเว็บไซต์ ที่สำคัญเอามากๆ เพราะมันคือสิ่งที่จะทำคนทุกคนบนโลกสามารถที่จะพิมพ์ค้นหา หรือสามารถเจอเว็บไซต์เราได้ง่ายขึ้นบนอินเตอร์เน็ต

อยากรู้ความสำคัญของเจ้า SEO เพิ่มเติม สามารถอ่านได้จาก

บทความดีๆเกี่ยวกับ SEO ของทางบริษัท igitalgeek

เข้าเรื่องหลักกันเลย !!

ตั้งค่า SEO แบบพื้นฐานในโปรเจค NuxtJS

เมื่อเราได้ทำการสร้างโปรเจค Nuxt ขึ้นมาแล้ว มันก็จะมีเจ้าไฟล์ที่ชื่อว่า nuxt.config.js อยู่ด้วยซึ่งเป็นไฟล์ที่สามารถตั้งค่า config ของทั้ง project

“ บทความนี้เราจะเน้นกันตรงการตั้งค่าที่เกี่ยวข้องกับ SEO ภายในโปรเจค Nuxt ”

1. ขั้นแรกเลย เราเข้ามาดูกันในไฟล์ nuxt.config.js

เราจะพบกับส่วนการตั้งค่า head ซึ่งส่วนนี้มีไว้สำหรับการตั้งค่าต่างๆ ที่เกี่ยวข้องกับ SEO ของเว็บเรา

2. สังเกตที่ส่วนย่อยภายใน head

โดยพื้นฐานหลังการสร้างโปรเจค NuxtJS จะมีอยู่สามส่วน ได้แก่ title, meta และ link

title ใช้ตั้งค่าชื่อของเว็บไซต์หรือหน้าเว็บ ซึ่งจะแสดงบนแท็บของเบราว์เซอร์

meta ใช้ตั้งค่า meta tags ต่างๆ ของไฟล์ HTML หรือหน้าเว็บ

link ใช้เชื่อมโยงกับทรัพยากรภายนอก เช่น รูปภาพ ไฟล์ CSS และ favicon

เราสามารถตั้งค่าเพิ่มเติมและปรับปรุงข้อมูลให้เหมาะสมกับเว็บไซต์ของตนเอง

SEO ผ่านการตั้งค่าในหน้าเว็บ

เราสามารถตั้งค่า SEO แบบ dynamic ที่เปลี่ยนแปลงไปตามคอนเทนต์ของแต่ละหน้าเว็บ

ในโปรเจค Nuxt ภายในไฟล์ .vue เราสามารถตั้งค่าที่ head หรือ head method เพื่อใช้ตั้งค่า title tag, meta tags และ link tags ของหน้าเว็บนั้นๆ ได้

SEO ผ่านการใช้งานแบบ Plugin

เรามาเริ่มดูการตั้งค่า SEO ผ่านการใช้งานแบบ Plugin กันเลย

ขั้นที่ 1: สร้างไฟล์สำหรับช่วยอำนวยความสะดวกในการตั้งค่า SEO ไว้ที่ directory plugins

ขั้นที่ 2: ตั้งค่าเรียกใช้งาน plugins ในไฟล์ nuxt.config.js

ขั้นที่ 3: สร้าง plugin ภายในไฟล์ที่เตรียมไว้ โดยสามารถกำหนดค่าพื้นฐานและส่งค่าผ่านตัวแปรได้

ขั้นที่ 4: ใส่ค่าที่ต้องการใน head method ของไฟล์ .vue แต่ละหน้า

การทำ SEO ใน NuxtJS นั้นไม่ยากเลย