# Content Workflow

Updated: 2026-07-21

เอกสารนี้อธิบายวิธีเพิ่มบทความใหม่ลงในเว็บนี้ให้พร้อมทั้ง:

- หน้าเว็บปกติ
- SEO
- social sharing
- AI / LLM discovery
- image optimization

## 1. โครงสร้างที่ใช้

```text
content/
  articles/
  media/
  site/
    home.md
    profile.md
    seo.md
  templates/
    article-template.md
```

ความหมาย:

- `articles/` เก็บไฟล์บทความ `.md`
- `media/` เก็บรูปต้นฉบับ
- `site/home.md` คุมหน้าแรก
- `site/profile.md` คุมชื่อและโปรไฟล์ผู้เขียนแบบค่ากลาง
- `site/seo.md` คุม SEO/AI ของเว็บทั้งระบบ
- `templates/` เก็บ template เริ่มต้น

## 2. วิธีเริ่มบทความใหม่

1. คัดลอก `content/templates/article-template.md`
2. ตั้งชื่อใหม่ใน `content/articles/`
3. ตั้ง `status: draft` ไว้ก่อน
4. ตั้ง `slug`
5. เขียน frontmatter ให้ครบ
6. เขียนเนื้อหาด้วย Markdown
7. ใส่รูปใน `content/media/slug-บทความ/`
8. ถ้าจะขึ้นหน้า home ให้แก้ `content/site/home.md`
9. เมื่อพร้อม public ค่อยเปลี่ยน `status: published`
10. รัน `npm run deploy`

## 3. frontmatter ที่สำคัญที่สุด

```yaml
status: draft
title: ชื่อบทความ
slug: your-article-slug
date: 2026-07-21
updated: 2026-07-21
author: Your Name
author_role: Writer
author_bio: ถ้าละไว้ ระบบจะใช้ค่ากลางจาก content/site/profile.md
author_url: ถ้าละไว้ ระบบจะใช้ค่ากลางจาก content/site/profile.md
excerpt: สรุปสั้นสำหรับหน้า archive และหน้าแรก
seo_title: ชื่อสำหรับ Google และ Social
seo_description: คำอธิบายที่ตรงประเด็น
ai_summary: สรุปแบบภาษาตรงให้ AI เข้าใจทันที
keywords:
  - keyword one
  - keyword two
tags:
  - Tag One
  - Tag Two
sources:
  - label: แหล่งอ้างอิง
    url: https://example.com
```

## 4. ใช้แต่ละ field ยังไง

### `title`

ใช้เป็น headline หลักบนหน้าเว็บ  
ควรเป็นภาษาคนอ่านจริงและสื่อสารชัด

### `seo_title`

ใช้เป็น title ใน search/social  
ควรคม, ชัด, และยังเป็นธรรมชาติ

### `excerpt`

ใช้ในหน้าแรก, archive, และบาง listing  
ควรเป็น summary สั้นสำหรับคนอ่าน

### `seo_description`

ใช้เป็น meta description  
ควรตอบว่า “บทความนี้เกี่ยวกับอะไร” ภายใน 1-2 ประโยค

### `ai_summary`

ใช้เป็น summary ที่อ่านง่ายสำหรับ AI และยังอาจถูกใช้ในส่วนสรุปบนหน้า  
ควรเป็นภาษาตรงไปตรงมา

### `updated`

ใช้เมื่อมีการแก้ไขสาระสำคัญของบทความ  
ระบบจะปล่อย `dateModified` ให้ structured data และแสดงวันที่แก้ไขบนหน้า

### `sources`

ใช้เมื่อบทความมีข้อมูลที่ควรอ้างอิง  
ช่วยด้าน trust, citation readiness, และ AI summarization

### `status`

ใช้คุมสถานะบทความ:

- `draft`
  - บทความจะไม่แสดงใน `/home`
  - บทความจะไม่แสดงใน `/articles`
  - บทความจะไม่เข้า sitemap / RSS / llms
  - เปิดตรวจได้ผ่าน `/preview/{slug}/`
- `published`
  - บทความจะกลายเป็น public page ที่ `/articles/{slug}/`
  - บทความสามารถถูกดึงขึ้นหน้า home ได้

## 5. วิธีเขียน body ให้เหมาะกับ search และ AI

### เปิดเรื่องให้ตอบคำถามหลักเร็ว

ย่อหน้าแรกควรบอกให้ได้เลยว่า:

- เรื่องนี้คืออะไร
- ทำไมสำคัญ
- ใครควรอ่าน
- อ่านแล้วจะได้อะไร

### ใช้หัวข้อ `##` แบบมีความหมาย

ดี:

- `## วิธีทำ canonical URL ให้ถูก`
- `## ทำไม ai_summary ถึงสำคัญกับ LLM`

ไม่ดี:

- `## เพิ่มเติม`
- `## เรื่องต่อไป`

### เขียนแบบ people-first

ให้คิดก่อนเสมอว่าคนอ่านจะเข้าใจไหม  
อย่าเขียนเพื่อยัด keyword อย่างเดียว

### ถ้ามี claim ให้ใส่แหล่งอ้างอิง

โดยเฉพาะเรื่อง:

- SEO best practices
- crawler behavior
- AI bot policy
- performance claims

### ลิงก์บทความที่เกี่ยวข้องภายในเว็บ

internal links ช่วยทั้งคนอ่านและ crawler

## 6. วิธีใส่รูป

เก็บรูปใน:

```text
content/media/your-article/
```

ตัวอย่าง:

```text
content/media/your-article/cover.jpg
content/media/your-article/detail-1.jpg
```

อ้างใน Markdown:

```md
![คำอธิบายภาพ](/media/your-article/detail-1.jpg)
```

ถ้าจะใช้เป็นรูป hero:

```yaml
hero_image: /media/your-article/cover.jpg
hero_image_alt: คำอธิบายภาพปก
```

หลักการรูปที่ดี:

- ชื่อไฟล์สื่อความหมาย
- alt text ต้องบอกว่ารูปคืออะไร
- รูปควรอยู่ใกล้ย่อหน้าที่เกี่ยวข้อง
- ถ้ามี caption สำคัญ ให้เขียนไว้ในเนื้อหา

ระบบจะ:

1. copy รูปจาก `content/media/`
2. แปลง `.jpg`, `.jpeg`, `.png` เป็น `.webp`
3. เสิร์ฟแบบเหมาะกับหน้าเว็บอัตโนมัติ

## 7. route พิเศษที่ระบบสร้างให้

- `/articles/{slug}/`
- `/articles/{slug}/content.md`
- `/sitemap.xml`
- `/robots.txt`
- `/rss.xml`
- `/llms.txt`
- `/llms-full.txt`

## 8. global SEO config

ถ้าจะปรับข้อมูลระดับเว็บ ให้แก้:

```text
content/site/seo.md
```

ไฟล์นี้ใช้คุม:

- `site_url`
- default description
- default OG image
- llms summary
- IndexNow key

## 9. author profile config

ถ้าจะปรับข้อมูลผู้เขียนแบบค่ากลาง ให้แก้:

```text
content/site/profile.md
```

ไฟล์นี้ใช้คุม:

- ชื่อผู้เขียน default
- role default
- bio default
- URL โปรไฟล์ default

ถ้าบทความไหนใส่ `author`, `author_role`, `author_bio`, `author_url` เองใน frontmatter
บทความนั้นจะ override ค่ากลางได้

## 10. homepage config

ถ้าจะคุมหน้าแรก ให้แก้:

```text
content/site/home.md
```

ค่าหลัก:

- `root_mode`
- `holding_title`
- `holding_description`
- `home_page_title`
- `home_page_description`
- `editor_picks_label`
- `editor_picks_link_label`
- `latest_stories_label`
- `project_links_label`
- `selected_reads_label`
- `footer_description`
- `hero_slug`
- `lead_slugs`
- `rail_slugs`
- `nav`

ความหมายของ `root_mode`:

- `holding`
  - `/` จะยังเป็นหน้า `f(x)=0`
  - `/home` จะเป็นหน้า magazine สำหรับตรวจงาน
- `home`
  - `/` จะกลายเป็นหน้า magazine ทันที

## 11. คำสั่งที่ใช้บ่อย

```bash
npm run check
npm run images
npm run build
npm run deploy
```

## 12. สรุป flow ที่เร็วที่สุด

1. สร้างไฟล์ `.md` ใน `content/articles/`
2. วางรูปใน `content/media/`
3. ใส่ `seo_title`, `seo_description`, `ai_summary`
4. ใส่ `sources` ถ้ามีข้อมูลเชิงข้อเท็จจริง
5. แก้ `content/site/home.md` ถ้าจะขึ้นหน้าแรก
6. รัน `npm run deploy`