7 ส.ค. 2569 11:42

คัมภีร์จับมือทำ: ขั้นตอนการสร้างเว็บด้วย Tech Stack สมัยใหม่ และการพาเว็บเข้า Google Search Console แบบละเอียด

คู่มือฉบับนี้จะพาคุณลงมือทำทีละสเต็ป ตั้งแต่การเลือก Tech Stack การเขียนโครงสร้างโปรเจกต์ ไปจนถึงการส่งเว็บเข้า Google Search Console เพื่อทำ SEO แบบครบถ้วนครับ

ส่วนที่ 1: เลือก Tech Stack และสร้างโครงสร้างโปรเจกต์ (Next.js + Vercel)

สำหรับยุคนี้ Stack ที่ทรงพลังและทำ SEO ได้ดีที่สุดคือ Next.js (React Framework) เพราะรองรับ Server-Side Rendering (SSR) ทำให้บอท Google อ่านหน้าเว็บได้ทันที ขั้นตอนที่ 1.1: ติดตั้งโปรเจกต์ Next.js บนเครื่องของคุณ เปิด Terminal (คอมพิวเตอร์ของคุณ) แล้วรันคำสั่งนี้เพื่อสร้างโปรเจกต์ใหม่: Bash npx create-next-app@latest my-platform

(ตอนระบบถาม ให้เลือกค่าเริ่มต้น เช่น Yes สำหรับ TypeScript, App Router และ Tailwind CSS) เมื่อติดตั้งเสร็จ ให้เข้าไปที่โฟลเดอร์โปรเจกต์: Bash cd my-platform

ขั้นตอนที่ 1.2: โครงสร้างโฟลเดอร์พื้นฐาน (Folder Structure) จัดระเบียบโฟลเดอร์ในโปรเจกต์ (app/ directory) ให้เป็นระเบียบเพื่อรองรับ SEO: Plaintext my-platform/ ├── app/ │ ├── layout.tsx # โครงสร้างหลัก (ใส่ Meta Tags ส่วนกลาง, Navbar, Footer) │ ├── page.tsx # หน้าแรก (Home Page) │ ├── sitemap.ts # ไฟล์สร้าง Sitemap อัตโนมัติ (สำคัญมากสำหรับ SEO) │ ├── robots.ts # ไฟล์บอกบอท Google ว่าให้เก็บข้อมูลหน้าไหนบ้าง │ ├── products/ │ │ └── [slug]/ │ │ └── page.tsx # หน้าแสดงสินค้าแต่ละชิ้น (Dynamic SEO) │ └── developers/ │ └── [username]/ │ └── page.tsx # หน้าโปรไฟล์นักพัฒนาแต่ละคน ├── public/ # เก็บรูปภาพหรือไฟล์ Static └── package.json # รายการแพ็กเกจ

ส่วนที่ 2: การเขียนโค้ดตั้งค่า SEO พื้นฐานในโปรเจกต์ ขั้นตอนที่ 2.1: ตั้งค่า Metadata ในหน้าหลัก (app/layout.tsx) เปิดไฟล์ app/layout.tsx แล้วใส่โค้ดตั้งชื่อเว็บและคำอธิบายเบื้องต้นเพื่อให้ Google รู้จัก: TypeScript import type { Metadata } from 'next';

export const metadata: Metadata = { title: 'ชื่อแพลตฟอร์มของคุณ - แหล่งรวม PWA และนักพัฒนา', description: 'แพลตฟอร์มซื้อขายซอร์สโค้ด PWA ปลั๊กอิน และจ้างนักพัฒนาคุณภาพ', metadataBase: new URL('https://yourdomain.com'), openGraph: { title: 'ชื่อแพลตฟอร์มของคุณ', description: 'แหล่งรวม PWA และนักพัฒนา', url: 'https://yourdomain.com', siteName: 'ชื่อแพลตฟอร์มของคุณ', locale: 'th_TH', type: 'website', }, };

export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang="th"> <body>{children}</body> </html> ); }

ขั้นตอนที่ 2.2: เขียนโค้ดสร้าง Sitemap แบบอัตโนมัติ (app/sitemap.ts) สร้างไฟล์ชื่อ sitemap.ts ในโฟลเดอร์ app/ เพื่อให้ระบบดึงหน้าสินค้าและโปรไฟล์มาทำเป็นแผนที่ให้ Google อัตโนมัติ: TypeScript import { MetadataRoute } from 'next';

export default async function sitemap(): Promise<MetadataRoute.Sitemap> { const baseUrl = 'https://yourdomain.com';

// ตัวอย่าง: ดึงข้อมูลสินค้าจากฐานข้อมูลของคุณ (จำลอง) // const products = await fetchProducts(); const productRoutes = [ { slug: 'pos-system-pwa' }, { slug: 'ecommerce-plugin' }, ].map((product) => ({ url: `${baseUrl}/products/${product.slug}`, lastModified: new Date(), changeFrequency: 'daily' as const, priority: 0.8, }));

return [ { url: baseUrl, lastModified: new Date(), changeFrequency: 'daily', priority: 1.0, }, ...productRoutes, ]; }

ขั้นตอนที่ 2.3: เขียนไฟล์ควบคุมบอท (app/robots.ts) สร้างไฟล์ชื่อ robots.ts ในโฟลเดอร์ app/ เพื่ออนุญาตให้ Google เข้ามาเก็บข้อมูลทุกหน้า:

TypeScript import { MetadataRoute } from 'next';

export default function robots(): MetadataRoute.Robots { const baseUrl = 'https://yourdomain.com'; return { rules: { userAgent: '*', allow: '/', disallow: ['/admin/', '/dashboard/'], // ห้ามบอทเข้าหน้าหลังบ้าน }, sitemap: `${baseUrl}/sitemap.xml`, }; }

ส่วนที่ 3: นำโค้ดขึ้นระบบ Vercel และผูกโดเมน

ขั้นตอนที่ 3.1: ดันโค้ดขึ้น GitHub สร้าง Repository บน GitHub ของคุณ รันคำสั่งใน Terminal เพื่อส่งโค้ดขึ้น GitHub: Bash git init git add . git commit -m "Initial commit" git branch -M main git remote add origin [ลิงก์ GitHub Repository ของคุณ] git push -u origin main

ขั้นตอนที่ 3.2: Deploy บน Vercel ไปที่เว็บไซต์ Vercel และล็อกอินด้วยบัญชี GitHub กดปุ่ม "Add New..." -> "Project" เลือก Repository (my-platform) ที่เพิ่งอัปโหลดขึ้นไป แล้วกด Import กด Deploy รอระบบรันประมาณ 1-2 นาที คุณจะได้ลิงก์ฟรีมา เช่น my-platform.vercel.app (ถ้ามีโดเมนส่วนตัว) ไปที่เมนู Settings -> Domains ใน Vercel แล้วใส่ชื่อโดเมนของคุณ (เช่น yourdomain.com) พร้อมตั้งค่า DNS ตามที่ Vercel แนะนำ

**ส่วนที่ 4: ขั้นตอนการพาเว็บไปรายงานตัวที่ Google Search Console เมื่อเว็บออนไลน์และมีโดเมนเรียบร้อยแล้ว ขั้นตอนสุดท้ายคือการบังคับให้ Google รู้จักเว็บเราครับ**

ขั้นตอนที่ 4.1: สมัครและเพิ่มเว็บไซต์ เข้าไปที่เว็บไซต์ Google Search Console ล็อกอินด้วยบัญชี Google ของคุณ เลือกประเภทการเพิ่มเว็บไซต์ (แนะนำให้เลือกช่อง Domain ด้านขวา): กรอกชื่อโดเมนของคุณลงไป (เช่น yourdomain.com) โดย ไม่ต้องใส่ https:// หรือ www กด Continue

ขั้นตอนที่ 4.2: ยืนยันความเป็นเจ้าของโดเมน (Domain Verification) Google จะให้ TXT Record มาชุดหนึ่ง (เป็นรหัสยาวๆ) ให้คุณหยิบรหัส TXT นั้น ไปใส่ในระบบตั้งค่า DNS ของผู้ให้บริการโดเมนที่คุณจดไว้ (เช่น Namecheap, Cloudflare, หรือ GoDaddy) ไปที่เมนู DNS Management -> Add Record -> เลือกประเภทเป็น TXT -> วางค่าลงไป -> บันทึก กลับมาที่หน้า Google Search Console แล้วกดปุ่ม Verify ถ้าถูกต้องสถานะจะขึ้นว่ายืนยันสำเร็จทันที

ขั้นตอนที่ 4.3: ส่ง Sitemap เข้า Google

*หลังจากเข้าหน้าแดชบอร์ด Google Search Console สำเร็จ ให้มองหาเมนู "Sitemaps" (แผนผังเว็บไซต์) ที่แถบเมนูด้านซ้าย ในช่อง "Add a new sitemap" ให้พิมพ์คำว่า: Plaintext sitemap.xml*