Next.js Technical SEO: ปูพรมแดงต้อนรับ Google Bot ด้วย Sitemap & Robots.txt

🏗️ 1. Technical SEO: รากฐานที่สำคัญกว่า Keyword

หลายคนมัวแต่กังวลเรื่อง Keyword หรือ Content แต่ลืมเรื่องพื้นฐานที่สุดไป นั่นคือ "Google Bot จะรู้จักเว็บเราได้ยังไง ถ้าเราไม่เปิดประตูให้เข้ามา?"

การทำ Technical SEO คือการเตรียมโครงสร้างบ้าน (Website) ให้พร้อมต้อนรับแขกวีไอพีอย่าง Google Bot, Bing Bot และ Crawler ต่างๆ ครับ ถ้าโครงสร้างดี Bot ก็เข้ามาเก็บข้อมูลง่าย โอกาสติดอันดับหน้าแรกก็สูงขึ้นแบบก้าวกระโดด

วันนี้ผมจะพามาทำ 2 สิ่งที่ "ขาดไม่ได้" สำหรับเว็บ Next.js ทุกเว็บ คือ Sitemap และ Robots.txt ครับ

🗺️ 2. Dynamic Sitemap: แผนที่นำทางจักรวาลคอนเทนต์

Sitemap ก็เหมือนแผนที่ครับ มันบอก Google ว่าเว็บเรามีกี่หน้า หน้าไหนสำคัญ หน้าไหนเพิ่งอัปเดต ถ้าเราทำ Blog ที่มีหน้าใหม่ๆ งอกขึ้นมาตลอดเวลา การทำ Dynamic Sitemap คือภาคบังคับครับ

ใน Next.js (App Router) เราไม่ต้องลง Plugin ยุ่งยากครับ แค่สร้างไฟล์ sitemap.ts ก็จบเลย

Implementation

สร้างไฟล์ app/sitemap.ts ตามนี้ครับ:

import { MetadataRoute } from "next";
// อย่าลืม import ฟังก์ชันดึงบทความของคุณมาด้วย
import { getAllPosts } from "@/lib/markdown";

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await getAllPosts();
  const baseUrl = "https://your-domain.com"; // ⚠️ เปลี่ยนเป็นโดเมนจริงของคุณ

  // 1. Static Routes: หน้าหลักๆ ที่มีอยู่แน่นอน
  const routes = [
    "",
    "/articles",
    "/about",
  ].map((route) => ({
    url: `${baseUrl}${route}`,
    lastModified: new Date(),
    changeFrequency: "daily" as const,
    priority: route === "" ? 1 : 0.8, // หน้า Home สำคัญสุด (1.0)
  }));

  // 2. Dynamic Routes: หน้าบทความทั้งหมด
  const postRoutes = posts.map((post) => ({
    url: `${baseUrl}/${post.category}/${post.slug}`,
    lastModified: new Date(post.metadata.date),
    changeFrequency: "weekly" as const,
    priority: 0.7, // สำรองความสำคัญให้บทความ
  }));

  return [...routes, ...postRoutes];
}

Senior Tip: priority และ changeFrequency เป็นแค่คำแนะนำ (Hint) ให้ Google ครับ ไม่ได้รับประกันว่า Google จะเชื่อ 100% แต่ใส่ไว้ดีกว่าไม่ใส่แน่นอนครับ

🤖 3. Robots.txt: ยามเฝ้าประตู (Gatekeeper)

เมื่อมีแผนที่แล้ว เราต้องมียามเฝ้าประตูครับ robots.txt จะบอก Crawler ว่า "ตรงไหนเข้าได้ ตรงไหนห้ามเข้า" และ "แผนที่วางอยู่ตรงไหน"

Implementation

สร้างไฟล์ app/robots.ts ครับ:

import { MetadataRoute } from "next";

export default function robots(): MetadataRoute.Robots {
  const baseUrl = "https://your-domain.com";

  return {
    rules: {
      userAgent: "*", // กฎนี้ใช้กับ Bot ทุกตัว
      allow: "/",     // อนุญาตให้เข้าทุกหน้า
      disallow: [
        "/api/",      // ⛔️ ห้ามยุ่งกับ API
        "/admin/",    // ⛔️ ห้ามเข้าหน้า Admin
        "/private/"   // ⛔️ พื้นที่ส่วนตัว
      ],
    },
    // ชี้เป้าว่า Sitemap อยู่ที่ไหน (สำคัญมาก!)
    sitemap: `${baseUrl}/sitemap.xml`,
  };
}

✅ 4. วิธีตรวจสอบผลลัพธ์ (Verification)

เมื่อ Deploy ขึ้น Production หรือรัน npm run dev แล้ว ให้ลองเข้าไปที่:

• http://localhost:3000/sitemap.xml
• http://localhost:3000/robots.txt

ถ้าเห็นหน้าจอเป็น XML หรือ Text ที่มีข้อมูลครบถ้วน แปลว่าคุณพร้อม Go Live แล้วครับ! 🎉

🧠 5. สรุป Senior Mindset

การทำ SEO ไม่ใช่แค่เรื่องของการตลาด (Marketing) แต่เป็นเรื่องของ Engineering ด้วยครับ

ในฐานะ Developer หน้าที่ของเราคือการสร้างเว็บที่ "เป็นมิตรต่อทั้งมนุษย์และหุ่นยนต์" (Human-friendly & Bot-friendly) ยิ่งเราทำให้ Bot ทำงานง่ายเท่าไหร่ Bot ก็จะตอบแทนเราด้วย Traffic มหาศาลเท่านั้นครับ

Next Step: หลังจากทำ 2 อย่างนี้แล้ว อย่าลืมไป submit sitemap ของคุณที่ Google Search Console ด้วยนะครับ เพื่อเร่งกระบวนการ Indexing ให้เร็วยิ่งขึ้น!