DEV Community

Amphon Trading
Amphon Trading

Posted on

ทำเว็บธุรกิจ Local Service ด้วย Astro ให้โหลดเร็วและ SEO ดีขึ้น

#webdev #seo #astro #javascript

ทำเว็บธุรกิจ Local Service ด้วย Astro ให้โหลดเร็วและ SEO ดีขึ้น

เว็บธุรกิจบริการท้องถิ่น เช่น ร้านซ่อมคอม ร้านรับซื้อสินค้า IT ร้านซ่อมมือถือ ร้านกล้องมือสอง หรือเว็บบริการเฉพาะพื้นที่ มักมีปัญหาคล้ายกันคือมีหลายหน้า หลายหมวดหมู่ หลายพื้นที่ และต้องการให้แต่ละหน้าชัดเจนพอสำหรับทั้งผู้ใช้และ search engine

ถ้าทำแบบเดิมด้วย CMS ทั่วไป บางครั้งเว็บจะเริ่มหนักขึ้นเมื่อมีจำนวนหน้ามากขึ้น เช่น หน้า service, หน้า area, หน้า blog, หน้า case study และหน้า product category จำนวนมาก

Astro เป็นตัวเลือกที่น่าสนใจสำหรับเว็บประเภทนี้ เพราะเหมาะกับเว็บ content-heavy ที่ต้องการโหลดเร็ว ใช้ JavaScript ฝั่ง client น้อย และสามารถ generate หน้า static จำนวนมากได้ค่อนข้างดี

บทความนี้เป็นแนวทางเชิงปฏิบัติสำหรับการวางโครงสร้างเว็บ Local Service ด้วย Astro โดยยกตัวอย่างจาก workflow ที่ใช้กับเว็บธุรกิจจริงอย่าง อำพล เทรดดิ้ง ซึ่งเป็นเว็บบริการสินค้า IT มือสองที่ต้องจัดการทั้งหน้า service, หน้า content และหน้า SEO หลายกลุ่ม

1. เริ่มจากแยกประเภทหน้าก่อน

ก่อนเขียนโค้ด ควรแยกประเภทหน้าของเว็บให้ชัด เพราะแต่ละหน้ามี intent ไม่เหมือนกัน

ตัวอย่างโครงสร้างพื้นฐาน:

Homepage
Service pages
Area pages
Product category pages
Blog / guide pages
Case study pages
Contact page
About page
Enter fullscreen mode Exit fullscreen mode

สำหรับเว็บ Local Service ไม่ควรสร้างทุกหน้าให้หน้าตาเหมือนกันหมด เพราะจะทำให้ search intent ซ้ำกัน เช่น หน้า “รับซื้อโน๊ตบุ๊ค” กับหน้า “รับซื้อสินค้าไอที” ควรมีจุดประสงค์ต่างกัน

ตัวอย่างการแยก intent:

/                         = ภาพรวมแบรนด์และบริการหลัก
/services/notebook/       = หน้าบริการเฉพาะโน๊ตบุ๊ค
/services/macbook/        = หน้าบริการเฉพาะ MacBook
/services/company-lot/    = หน้าบริการสำหรับบริษัทหรือของยกล็อต
/guides/                  = บทความให้ความรู้
/cases/                   = ตัวอย่างเคสจริงหรือ workflow
Enter fullscreen mode Exit fullscreen mode

การแยกแบบนี้ช่วยลดปัญหาหน้าเว็บแย่ง keyword กันเอง และช่วยให้ internal linking ทำงานได้ชัดขึ้น

2. ใช้ Astro Content Collections จัดการเนื้อหา

ถ้าเว็บมีหลายหน้า แนะนำให้ใช้ Content Collections ของ Astro เพื่อจัดการ metadata และ schema ของแต่ละหน้าให้เป็นระบบ

ตัวอย่างโครงสร้างไฟล์:

src/
  content/
    services/
      notebook.md
      macbook.md
      iphone.md
    guides/
      check-used-laptop.md
      ssd-health-check.md
    areas/
      ubon.md
      warin.md
Enter fullscreen mode Exit fullscreen mode

ตัวอย่าง frontmatter ของ service page:

---
title: "บริการตรวจและรับซื้อโน๊ตบุ๊คมือสอง"
description: "แนวทางตรวจสภาพโน๊ตบุ๊คมือสองก่อนประเมินราคาและส่งต่อ"
slug: "notebook"
category: "service"
area: "nationwide"
updatedAt: "2026-06-30"
---
Enter fullscreen mode Exit fullscreen mode

การเก็บ metadata ไว้ใน frontmatter มีข้อดีคือสามารถนำไปใช้ต่อได้หลายจุด เช่น:

<title>
meta description
canonical
Open Graph
Breadcrumb
JSON-LD
sitemap
internal card
Enter fullscreen mode Exit fullscreen mode

แทนที่จะเขียนซ้ำในหลายไฟล์ ควรดึงข้อมูลจาก content collection แล้ว render ด้วย layout กลาง

3. สร้าง Layout กลางสำหรับหน้า SEO

หน้า SEO ไม่ควรกระจาย logic ไปทั่วเว็บ ควรมี layout กลางที่รับ props เช่น title, description, canonical, schema และ content

ตัวอย่าง layout แบบง่าย:

---
// src/layouts/SeoPageLayout.astro

const {
  title,
  description,
  canonical,
  schema
} = Astro.props;
---

<!doctype html>
<html lang="th">
  <head>
    <meta charset="utf-8" />
    <title>{title}</title>
    <meta name="description" content={description} />
    <link rel="canonical" href={canonical} />

    <meta property="og:title" content={title} />
    <meta property="og:description" content={description} />
    <meta property="og:url" content={canonical} />
    <meta property="og:type" content="website" />

    {schema && (
      <script type="application/ld+json" set:html={JSON.stringify(schema)} />
    )}
  </head>
  <body>
    <main>
      <slot />
    </main>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

ข้อดีของ layout กลางคือเวลาต้องแก้ SEO metadata, canonical หรือ schema จะไม่ต้องไล่แก้ทุกหน้าแยกกัน

4. ทำ canonical ให้ชัดตั้งแต่แรก

เว็บที่มีหลาย service และหลาย area มีโอกาสเกิด canonical ซ้ำหรือ URL ซ้ำได้ง่ายมาก โดยเฉพาะถ้ามีทั้ง slug ภาษาไทย ภาษาอังกฤษ trailing slash และ URL encoded

ควรกำหนดรูปแบบ canonical ตั้งแต่แรก เช่น:

ใช้ https เสมอ
ใช้ domain เดียว
เลือกว่าจะมี trailing slash หรือไม่มี
ไม่ปล่อยให้ URL parameter index
ไม่สร้างหน้า duplicate intent
Enter fullscreen mode Exit fullscreen mode

ตัวอย่าง helper สำหรับ canonical:

// src/lib/url.ts

const SITE_URL = "https://example.com";

export function createCanonical(path: string) {
  const cleanPath = path.startsWith("/") ? path : `/${path}`;
  return `${SITE_URL}${cleanPath}`;
}
Enter fullscreen mode Exit fullscreen mode

ตัวอย่างใช้งาน:

const canonical = createCanonical("/services/notebook/");
Enter fullscreen mode Exit fullscreen mode

สำหรับเว็บที่มีหลายหน้า สิ่งเล็ก ๆ แบบนี้ช่วยลดความผิดพลาดในระยะยาวได้มาก

5. สร้าง JSON-LD แบบเป็นระบบ

เว็บ Local Service ควรมี structured data พื้นฐาน เช่น Organization, LocalBusiness, WebSite, WebPage, BreadcrumbList และ Service

ตัวอย่าง JSON-LD แบบย่อ:

// src/lib/schema.ts

export function createServiceSchema({
  name,
  description,
  url
}: {
  name: string;
  description: string;
  url: string;
}) {
  return {
    "@context": "https://schema.org",
    "@type": "Service",
    name,
    description,
    url,
    provider: {
      "@type": "LocalBusiness",
      name: "Example Business"
    }
  };
}
Enter fullscreen mode Exit fullscreen mode

ตัวอย่าง BreadcrumbList:

export function createBreadcrumbSchema(items: Array<{ name: string; url: string }>) {
  return {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    itemListElement: items.map((item, index) => ({
      "@type": "ListItem",
      position: index + 1,
      name: item.name,
      item: item.url
    }))
  };
}
Enter fullscreen mode Exit fullscreen mode

ใน production จริง อาจรวม schema หลายชุดไว้ใน @graph เพื่อให้จัดการง่ายขึ้น:

export function createGraphSchema(items: unknown[]) {
  return {
    "@context": "https://schema.org",
    "@graph": items
  };
}
Enter fullscreen mode Exit fullscreen mode

สิ่งที่ควรระวังคือ schema ต้องสอดคล้องกับเนื้อหาบนหน้า ไม่ควรใส่ review, rating หรือ claim ที่ไม่มีหลักฐานจริงบนเว็บ

6. Internal Linking สำคัญกว่าที่คิด

เว็บบริการที่มีหลายหน้า ถ้าไม่มี internal link ที่ดี หน้าใหม่จะกลายเป็น orphan page ได้ง่าย

แนวทางง่าย ๆ:

Homepage link ไปยัง service หลัก
Service page link ไปยัง guide ที่เกี่ยวข้อง
Guide page link กลับไปยัง service ที่เหมาะสม
Area page link ไปยัง service ที่เกี่ยวข้อง
Case study link ไปยัง service และ guide
Enter fullscreen mode Exit fullscreen mode

ตัวอย่าง component สำหรับ related links:

---
// src/components/RelatedLinks.astro

const { links = [] } = Astro.props;
---

<section aria-labelledby="related-links">
  <h2 id="related-links">อ่านต่อที่เกี่ยวข้อง</h2>
  <ul>
    {links.map((link) => (
      <li>
        <a href={link.href}>{link.label}</a>
      </li>
    ))}
  </ul>
</section>
Enter fullscreen mode Exit fullscreen mode

ตัวอย่างข้อมูล:

const relatedLinks = [
  {
    label: "วิธีเช็กสุขภาพ SSD ก่อนส่งต่อเครื่อง",
    href: "/guides/ssd-health-check/"
  },
  {
    label: "Checklist ก่อนขายโน๊ตบุ๊คเก่า",
    href: "/guides/check-used-laptop/"
  }
];
Enter fullscreen mode Exit fullscreen mode

Internal link ที่ดีไม่ควรมีแค่เพื่อ SEO แต่ควรช่วยให้ผู้ใช้เดินต่อได้จริง

7. สร้าง sitemap อัตโนมัติ

ถ้าเว็บมีหลายร้อยหรือหลายพันหน้า การดูแล sitemap ด้วยมือแทบเป็นไปไม่ได้ ควรสร้างจาก route หรือ content collection

ตัวอย่างแนวคิด:

const servicePages = await getCollection("services");
const guidePages = await getCollection("guides");

const urls = [
  ...servicePages.map((page) => `/services/${page.slug}/`),
  ...guidePages.map((page) => `/guides/${page.slug}/`)
];
Enter fullscreen mode Exit fullscreen mode

สิ่งที่ควรตรวจใน sitemap:

ไม่มีหน้า noindex
ไม่มีหน้า duplicate
ไม่มีหน้าที่ redirect แล้ว
ไม่มี URL ผิด encoding
ไม่มีหน้าทดสอบ
ไม่มี query parameter
Enter fullscreen mode Exit fullscreen mode

ถ้าเว็บมีหน้า programmatic SEO จำนวนมาก ควรแยก tier ของหน้า เช่น:

Tier A = หน้า service หลัก
Tier B = หน้า guide หรือ support content
Tier C = หน้า long-tail ที่อาจ noindex หรือไม่ส่งเข้า sitemap
Enter fullscreen mode Exit fullscreen mode

ไม่จำเป็นต้องส่งทุก URL เข้า sitemap ถ้าคุณภาพของหน้านั้นยังไม่พร้อม

8. Performance: ลด JavaScript ฝั่ง client

ข้อดีของ Astro คือ default เป็น HTML ก่อน แล้วค่อย hydrate component เฉพาะที่จำเป็น

แนวทางสำหรับเว็บ Local Service:

ใช้ HTML/CSS ให้มากที่สุด
หลีกเลี่ยง slider หนัก ๆ
ไม่โหลด animation library ถ้าไม่จำเป็น
ใช้ image optimization
โหลด font เท่าที่จำเป็น
ใช้ component interactive เฉพาะจุด
Enter fullscreen mode Exit fullscreen mode

ตัวอย่าง component ที่อาจไม่ต้องใช้ JavaScript:

FAQ accordion แบบเปิดปิดด้วย details/summary
Service card
CTA section
Breadcrumb
Related links
Table of contents
Enter fullscreen mode Exit fullscreen mode

ตัวอย่าง FAQ แบบไม่ใช้ JS:

<details>
  <summary>ต้องเตรียมข้อมูลอะไรก่อนส่งเครื่อง?</summary>
  <p>ควรเตรียมรุ่น สเปก สภาพ ตำหนิ และอุปกรณ์ที่มีให้ครบ</p>
</details>
Enter fullscreen mode Exit fullscreen mode

การลด JavaScript ไม่ได้ช่วยแค่ PageSpeed แต่ช่วยให้เว็บดูนิ่ง โหลดเร็ว และใช้งานบนมือถือได้ดีขึ้น

9. รูปภาพควรมีระบบตั้งแต่แรก

เว็บบริการมักใช้รูป hero, รูปตัวอย่างงาน, รูปสถานที่ และรูปสินค้า ถ้าไม่วางระบบตั้งแต่แรก เว็บจะเริ่มรกเมื่อจำนวนหน้ามากขึ้น

แนวทางที่ใช้ได้:

ตั้งชื่อไฟล์ให้อ่านออก
แยก folder ตามประเภทภาพ
บีบอัดเป็น WebP หรือ AVIF
กำหนด width/height
ใส่ alt text ตามบริบท
อย่าใช้ภาพเดียวกันซ้ำทุกหน้า
Enter fullscreen mode Exit fullscreen mode

ตัวอย่าง component ภาพ:

---
const {
  src,
  alt,
  width = 1200,
  height = 800
} = Astro.props;
---

<img
  src={src}
  alt={alt}
  width={width}
  height={height}
  loading="lazy"
  decoding="async"
/>
Enter fullscreen mode Exit fullscreen mode

สำหรับ hero image ด้านบนสุด อาจใช้ loading="eager" และ preload เฉพาะภาพสำคัญจริง ๆ

10. Mobile UX สำคัญกับเว็บบริการมาก

ผู้ใช้เว็บบริการส่วนใหญ่มักเข้าจากมือถือ จึงควรออกแบบจาก mobile ก่อน ไม่ใช่ desktop ก่อนแล้วค่อยย่อ

Checklist ง่าย ๆ:

ปุ่มติดต่อใหญ่พอกดง่าย
ข้อความไม่ยาวเกินไปใน first screen
ไม่ใช้ตารางที่ล้นจอ
เบอร์โทรหรือปุ่มแชตเห็นชัด
รูปไม่ใหญ่จนโหลดช้า
ช่องไฟอ่านง่าย
ไม่มี popup บังเนื้อหา
Enter fullscreen mode Exit fullscreen mode

ตัวอย่าง CTA แบบเรียบง่าย:

<section>
  <h2>ต้องการให้ช่วยตรวจข้อมูลก่อนส่งต่อเครื่อง?</h2>
  <p>เตรียมรุ่น สเปก รูปเครื่อง และตำหนิให้ครบก่อนติดต่อ</p>
  <a href="/contact/">ดูช่องทางติดต่อ</a>
</section>
Enter fullscreen mode Exit fullscreen mode

CTA ไม่จำเป็นต้อง aggressive เสมอไป เว็บบริการที่ดีควรช่วยให้ผู้ใช้ตัดสินใจง่ายขึ้น ไม่ใช่กดดันให้ติดต่อทันที

11. QA ก่อน deploy

ก่อน deploy เว็บ Astro ควรมี checklist สั้น ๆ ทุกครั้ง

npm run build ผ่าน
ไม่มี broken link
ไม่มีรูปเสีย
canonical ถูกต้อง
title ไม่ซ้ำเกินไป
description ไม่ว่าง
H1 มีหนึ่งจุดต่อหน้า
schema valid
sitemap ไม่มี URL ที่ไม่ควร index
หน้า mobile อ่านง่าย
Enter fullscreen mode Exit fullscreen mode

อาจเขียน script ง่าย ๆ เพื่อตรวจ HTML หลัง build เช่น:

import fs from "node:fs";
import path from "node:path";

function walk(dir) {
  return fs.readdirSync(dir).flatMap((file) => {
    const fullPath = path.join(dir, file);
    return fs.statSync(fullPath).isDirectory()
      ? walk(fullPath)
      : [fullPath];
  });
}

const htmlFiles = walk("./dist").filter((file) => file.endsWith(".html"));

for (const file of htmlFiles) {
  const html = fs.readFileSync(file, "utf8");

  if (!html.includes("<h1")) {
    console.warn(`Missing H1: ${file}`);
  }

  if (!html.includes('rel="canonical"')) {
    console.warn(`Missing canonical: ${file}`);
  }
}
Enter fullscreen mode Exit fullscreen mode

script ง่าย ๆ แบบนี้ช่วยจับปัญหาพื้นฐานก่อน deploy ได้ดี โดยเฉพาะเว็บที่มีหลายหน้า

12. สรุป

Astro เหมาะกับเว็บธุรกิจ Local Service ที่ต้องการความเร็ว ความเรียบง่าย และโครงสร้าง SEO ที่ควบคุมได้

สิ่งที่ควรวางตั้งแต่ต้น:

แยก intent ของแต่ละหน้า
ใช้ Content Collections
ทำ layout กลางสำหรับ SEO
สร้าง canonical ให้เป็นระบบ
ใช้ JSON-LD เท่าที่มีข้อมูลจริง
วาง internal linking ให้ช่วยผู้ใช้
สร้าง sitemap อัตโนมัติ
ลด JavaScript ฝั่ง client
จัดการรูปภาพอย่างเป็นระบบ
ตรวจ mobile UX
ทำ QA ก่อน deploy
Enter fullscreen mode Exit fullscreen mode

หัวใจสำคัญไม่ใช่แค่ “สร้างหน้าให้เยอะ” แต่คือสร้างหน้าให้แต่ละหน้ามีหน้าที่ชัดเจน โหลดเร็ว อ่านง่าย และไม่ซ้ำ intent กันเอง

ถ้าวางระบบดีตั้งแต่ต้น เว็บ Local Service จะขยายจำนวนหน้าได้ง่ายขึ้น โดยไม่ทำให้ performance และ SEO quality ตกลงเมื่อเว็บโตขึ้น

Top comments (0)