Sitemap เพื่อ SEO

ทางเลือกที่ดีที่สุดสำหรับการแจ้งเกิดเว็บไซต์ใหม่ เพื่อติดต่อกับ Google สำหรับเว็บที่ต้องการผลลัพธ์ของ SEO

คือการจัดทำ sitemap เปรียบเสมือนเครื่องชี้ทางให้ Google วิ่งตาม URL ภายในเว็บได้อย่างสะดวก

และยิ่งสะดวกเข้าใจง่ายแก่ Bot ที่วิ่งมาเมื่อไร ก็ทำให้เว็บไซต์ของเราได้รับการบันทึกเร็วเท่านั้น

ส่วนหน้าตาหลักของ Sitemap ก็คือไฟล์ที่ชื่อว่า sitemap.xml อาจถูกสร้างด้วย RSS หรือ Atom หรือไฟล์ข้อความธรรมดาก็ได้ทั้งนั้น

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

Bot ของทาง Google เจอไฟล์นี้ จะทำการวิ่งตรวจสอบตามที่ระบุได้เพื่อจัดทำดัชนีค้นหาต่อไป

ที่สำคัญคือ สิ่งที่เว็บมาสเตอร์ควรรู้ไว้ก็คือ เว็บที่ต้องการ Sitemap มากที่สุดคือ คือเว็บที่เพิ่งเกิดใหม่

เหตุผลเพราะ วัดจาก External Link หรือ ลิงก์เชื่อมโยงภายนอกจากแหล่งอื่น ยิ่งเรามีตรงนี้น้อย ยิ่งเป็นการยากที่ Googlebot จะค้นหาเราไม่เจอ

การทำงานมีเงื่อนไขสั้นๆ คือ กระโดดจาก A ไป B ดังนั้นหากเว็บเราเป็นที่พูดถึงหน่อย หรือไม่มีการวางลิงก์เลย ก็ยากที่จะถูกค้นพบ

วิธีเพิ่ม Sitemap

พิมพ์ทุกอย่างด้วยตนเอง (Manual) โดยการสร้าง sitemap.xml ใน public folder และลงมือกรอกทุกอย่างตัวตนเอง

  <!-- public/sitemap.xml -->
   <xml version="1.0" encoding="UTF-8">
   <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
     <url>
       <loc>http://www.example.com/foo</loc>
       <lastmod>2021-06-01</lastmod>
     </url>
   </urlset>
   </xml>

สร้างผ่านฟังชั่น getServerSideProps สำหรับ Next.js สำหรับวิธีนี้จะขอสาธิตการทำด้วย Next.js เวอร์ชั่นใหม่ App Router เพราะไฟล์ทุกอย่างที่สร้างมาแล้ว จะถูกเรนเดอร์บน Server ทั้งหมด ยกเว้นจะเพิ่มที่หัวข้อไฟล์ว่า 'use client' ทำให้การทำผ่าน getServerSideProps ไม่จำเป็นต้องใช้อีกต่อไป

ดังนั้นสำหรับปี 2563 ใน Next.js รุ่นปัจจุบันคือ 13 รองรับโครงสร้างไฟล์แบบ App Router ที่ช่วยลดระยะเวลาพัฒนาและเชื่อมต่อกับ Server ปลายทาง

สำหรับการเพิ่ม sitemap นั้นตัวอย่างด้านล่าง

import { MetadataRoute } from 'next'

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://example.com',
      lastModified: new Date(),
      changeFrequency: 'yearly',
      priority: 1,
    },
    {
      url: 'https://example.com/about',
      lastModified: new Date(),
      changeFrequency: 'monthly',
      priority: 0.8,
    },
    {
      url: 'https://example.com/blog',
      lastModified: new Date(),
      changeFrequency: 'weekly',
      priority: 0.5,
    },
  ]
}