seo-scanner-th

1/**
2 * ============================================================================
3 * MOD 20: SEO Scanner TH - ตรวจ SEO ของหน้าเว็บจริง (ฉบับสอนทำ)
4 * ============================================================================
5 * แรงบันดาลใจจาก: Lighthouse SEO audit และ Google Search Central
6 *
7 * หน้าที่ของ Mod นี้:
8 * 1. /seo <url> ดึงหน้าเว็บจริงแล้วตรวจ 15+ ข้อ ให้คะแนน 0-100 พร้อมวิธีแก้
9 * 2. ตรวจ title, meta description, H1, alt รูป, lang, viewport, canonical, OG/Twitter tags,
10 *    structured data (JSON-LD), robots.txt, sitemap.xml, noindex, ขนาดหน้าและเวลาโหลด
11 * 3. /seo links <url> ตรวจลิงก์เสีย (สูงสุด 30 ลิงก์)
12 * 4. /seo compare เทียบหลายเว็บ, /seo export บันทึกรายงานเป็น Markdown
13 *
14 * ข้อจำกัด: อ่าน HTML ที่เซิร์ฟเวอร์ส่งมา (ไม่รัน JavaScript) เว็บที่สร้างหน้าด้วย JS ล้วนอาจได้คะแนนต่ำกว่าจริง
15 */
16
17import type { EngineInterface, Register } from 'claude-code'
18
19type Status = 'pass' | 'warn' | 'fail'
20interface Check {
21  name: string
22  status: Status
23  detail: string
24  fix?: string
25  weight: number
26}
27interface Report {
28  url: string
29  finalUrl: string
30  status: number
31  ms: number
32  bytes: number
33  checks: Check[]
34  score: number
35  at: number
36}
37
38const ICON: Record<Status, string> = { pass: '✅', warn: '🟡', fail: '❌' }
39const UA = { 'User-Agent': 'Mozilla/5.0 (compatible; claude-code-seo-scanner-th)' }
40let reports: Report[] = []
41
42// ==========================================================================
43// บทที่ 1: อ่านค่าจาก HTML ด้วย regex (ไม่มี DOM ใน Mod)
44// ==========================================================================
45function decode(s: string): string {
46  return s.replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/\s+/g, ' ').trim()
47}
48
49function tagText(html: string, tag: string): string[] {
50  return [...html.matchAll(new RegExp(`<${tag}[^>]*>([\\s\\S]*?)</${tag}>`, 'gi'))].map(m => decode((m[1] ?? '').replace(/<[^>]+>/g, '')))
51}
52
53function attr(tag: string, name: string): string | undefined {
54  const m = new RegExp(`\\b${name}\\s*=\\s*("([^"]*)"|'([^']*)'|([^\\s>]+))`, 'i').exec(tag)
55  return m ? decode(m[2] ?? m[3] ?? m[4] ?? '') : undefined
56}
57
58// <meta name="description" content="..."> หรือ <meta property="og:title" ...>
59function meta(html: string, key: string): string | undefined {
60  for (const m of html.matchAll(/<meta\b[^>]*>/gi)) {
61    const tag = m[0]
62    if ((attr(tag, 'name') ?? attr(tag, 'property'))?.toLowerCase() === key) return attr(tag, 'content')
63  }
64  return undefined
65}
66
67function link(html: string, rel: string): string | undefined {
68  for (const m of html.matchAll(/<link\b[^>]*>/gi)) {
69    if (attr(m[0], 'rel')?.toLowerCase().split(/\s+/).includes(rel)) return attr(m[0], 'href')
70  }
71  return undefined
72}
73
74// ==========================================================================
75// บทที่ 2: เกณฑ์ตรวจแต่ละข้อ (ความยาวอิงคำแนะนำทั่วไปของ Google)
76// ==========================================================================
77function check(name: string, ok: boolean | 'warn', detail: string, fix: string, weight: number): Check {
78  return { name, status: ok === true ? 'pass' : ok === 'warn' ? 'warn' : 'fail', detail, fix: ok === true ? undefined : fix, weight }
79}
80
81function auditHtml(html: string, url: URL): Check[] {
82  const checks: Check[] = []
83  const title = tagText(html, 'title')[0] ?? ''
84  checks.push(check('Title', title.length >= 15 && title.length <= 65 ? true : title ? 'warn' : false, title ? `"${title.slice(0, 70)}" (${title.length} ตัว)` : 'ไม่มี <title>', 'ใส่ title 15-65 ตัวอักษร มีคีย์เวิร์ดหลัก', 15))
85
86  const desc = meta(html, 'description') ?? ''
87  checks.push(check('Meta description', desc.length >= 50 && desc.length <= 160 ? true : desc ? 'warn' : false, desc ? `${desc.length} ตัว` : 'ไม่มี', 'ใส่ <meta name="description"> 50-160 ตัวอักษร สรุปเนื้อหาหน้า', 10))
88
89  const h1 = tagText(html, 'h1')
90  checks.push(check('H1', h1.length === 1 ? true : h1.length > 1 ? 'warn' : false, h1.length ? `${h1.length} อัน: "${(h1[0] ?? '').slice(0, 50)}"` : 'ไม่มี H1', 'ควรมี H1 หนึ่งอันต่อหน้า', 10))
91
92  const imgs = [...html.matchAll(/<img\b[^>]*>/gi)].map(m => m[0])
93  const noAlt = imgs.filter(t => attr(t, 'alt') === undefined)
94  checks.push(check('Alt ของรูป', noAlt.length === 0 ? true : noAlt.length <= imgs.length / 4 ? 'warn' : false, `${imgs.length - noAlt.length}/${imgs.length} รูปมี alt`, 'ใส่ alt อธิบายรูปทุกรูป (รูปตกแต่งใส่ alt="")', 10))
95
96  const lang = /<html\b[^>]*\blang\s*=\s*["']?([\w-]+)/i.exec(html)?.[1]
97  checks.push(check('ภาษา (lang)', Boolean(lang), lang ?? 'ไม่ระบุ', 'ใส่ <html lang="th">', 5))
98
99  const viewport = meta(html, 'viewport')
100  checks.push(check('Mobile viewport', Boolean(viewport?.includes('width=device-width')), viewport ?? 'ไม่มี', 'ใส่ <meta name="viewport" content="width=device-width, initial-scale=1">', 10))
101
102  const canonical = link(html, 'canonical')
103  checks.push(check('Canonical', canonical ? true : 'warn', canonical ?? 'ไม่มี', 'ใส่ <link rel="canonical"> กันเนื้อหาซ้ำ', 5))
104
105  const og = ['og:title', 'og:description', 'og:image'].filter(k => !meta(html, k))
106  checks.push(check('Open Graph (แชร์ Facebook/LINE)', og.length === 0 ? true : og.length < 3 ? 'warn' : false, og.length ? `ขาด ${og.join(', ')}` : 'ครบ', 'ใส่ og:title, og:description, og:image ให้แชร์แล้วมีรูปและหัวข้อ', 10))
107
108  const twitter = meta(html, 'twitter:card')
109  checks.push(check('Twitter card', twitter ? true : 'warn', twitter ?? 'ไม่มี', 'ใส่ <meta name="twitter:card" content="summary_large_image">', 3))
110
111  const jsonLd = (html.match(/<script[^>]+application\/ld\+json/gi) ?? []).length
112  checks.push(check('Structured data (JSON-LD)', jsonLd > 0 ? true : 'warn', jsonLd ? `${jsonLd} ชุด` : 'ไม่มี', 'ใส่ JSON-LD ของ schema.org (เช่น Organization, Product) ช่วยให้ Google แสดงผลพิเศษ', 5))
113
114  const robotsMeta = meta(html, 'robots') ?? ''
115  checks.push(check('ไม่ถูกบล็อกจาก Google', !/noindex/i.test(robotsMeta), robotsMeta || 'ไม่มี meta robots (index ได้)', 'เอา noindex ออกถ้าต้องการให้หน้านี้ขึ้น Google', 15))
116
117  checks.push(check('HTTPS', url.protocol === 'https:', url.protocol, 'ใช้ HTTPS (Google ให้คะแนนเว็บที่ปลอดภัย)', 10))
118  return checks
119}
120
121// ==========================================================================
122// บทที่ 3: ดึงหน้าเว็บ + robots.txt + sitemap แล้วรวมคะแนน
123// ==========================================================================
124async function scan($: EngineInterface, input: string): Promise<Report> {
125  const url = new URL(/^https?:\/\//i.test(input) ? input : `https://${input}`)
126  const start = await $.clock.now()
127  const res = await $.http.fetch(url.href, { headers: UA })
128  const ms = (await $.clock.now()) - start
129  const bytes = new TextEncoder().encode(res.text).length
130  const checks = res.ok ? auditHtml(res.text, url) : []
131  checks.unshift(check('หน้าเว็บตอบกลับ', res.ok, `HTTP ${res.status}`, 'หน้าเว็บต้องตอบ 200', 20))
132  checks.push(check('ความเร็วโหลด HTML', ms < 1000 ? true : ms < 3000 ? 'warn' : false, `${ms} ms`, 'ลดเวลาตอบของเซิร์ฟเวอร์ ใช้ cache/CDN', 5))
133  checks.push(check('ขนาด HTML', bytes < 300_000 ? true : bytes < 1_000_000 ? 'warn' : false, `${(bytes / 1024).toFixed(0)} KB`, 'ลดขนาด HTML (ย้าย inline script/style ออก)', 3))
134
135  const robots = await $.http.fetch(`${url.origin}/robots.txt`, { headers: UA }).catch(() => undefined)
136  const hasRobots = Boolean(robots?.ok && /user-agent/i.test(robots.text))
137  checks.push(check('robots.txt', hasRobots ? true : 'warn', hasRobots ? 'มี' : 'ไม่มี', 'สร้าง /robots.txt และระบุ Sitemap:', 3))
138  const sitemapUrl = /^\s*sitemap:\s*(\S+)/im.exec(robots?.text ?? '')?.[1] ?? `${url.origin}/sitemap.xml`
139  const sitemap = await $.http.fetch(sitemapUrl, { headers: UA }).catch(() => undefined)
140  const hasSitemap = Boolean(sitemap?.ok && /<(urlset|sitemapindex)/i.test(sitemap.text))
141  checks.push(check('sitemap.xml', hasSitemap ? true : 'warn', hasSitemap ? sitemapUrl : 'ไม่พบ', 'สร้าง sitemap.xml แล้วส่งใน Google Search Console', 5))
142
143  // คะแนน: ผ่าน = เต็ม, เตือน = ครึ่ง, ไม่ผ่าน = 0
144  const total = checks.reduce((s, c) => s + c.weight, 0)
145  const got = checks.reduce((s, c) => s + (c.status === 'pass' ? c.weight : c.status === 'warn' ? c.weight / 2 : 0), 0)
146  return { url: input, finalUrl: url.href, status: res.status, ms, bytes, checks, score: Math.round((got / total) * 100), at: await $.clock.now() }
147}
148
149function grade(score: number): string {
150  return score >= 90 ? '🟢 ดีมาก' : score >= 70 ? '🟡 พอใช้' : score >= 50 ? '🟠 ควรปรับ' : '🔴 ต้องแก้ด่วน'
151}
152
153function reportText(r: Report): string {
154  const fails = r.checks.filter(c => c.status !== 'pass').sort((a, b) => b.weight - a.weight)
155  return [
156    `🔍 SEO: ${r.finalUrl}`,
157    `คะแนน ${r.score}/100 ${grade(r.score)} | HTTP ${r.status} | ${r.ms} ms | ${(r.bytes / 1024).toFixed(0)} KB`,
158    '----------------------------------------',
159    ...r.checks.map(c => `${ICON[c.status]} ${c.name}: ${c.detail}`),
160    ...(fails.length ? ['', '💡 แก้ก่อน (เรียงตามผลต่อคะแนน):', ...fails.slice(0, 6).map((c, i) => `  ${i + 1}. ${c.fix}`)] : ['', '🎉 ผ่านทุกข้อ']),
161  ].join('\n')
162}
163
164// ==========================================================================
165// บทที่ 4: ตรวจลิงก์เสีย (ขอพร้อมกันทีละ 5 ลิงก์ ไม่ยิงเว็บเขาหนักเกิน)
166// ==========================================================================
167async function checkLinks($: EngineInterface, input: string): Promise<string> {
168  const base = new URL(/^https?:\/\//i.test(input) ? input : `https://${input}`)
169  const res = await $.http.fetch(base.href, { headers: UA })
170  const hrefs = [...res.text.matchAll(/<a\b[^>]*>/gi)].map(m => attr(m[0], 'href')).filter((h): h is string => Boolean(h) && !/^(#|mailto:|tel:|javascript:)/i.test(h ?? ''))
171  const urls = [...new Set(hrefs.map(h => { try { return new URL(h, base).href } catch { return '' } }).filter(Boolean))].slice(0, 30)
172  const broken: string[] = []
173  for (let i = 0; i < urls.length; i += 5) {
174    await Promise.all(
175      urls.slice(i, i + 5).map(async u => {
176        const r = await $.http.fetch(u, { headers: UA }).catch(() => undefined)
177        if (!r || r.status >= 400) broken.push(`${r ? r.status : 'error'}  ${u}`)
178      }),
179    )
180  }
181  return [`🔗 ตรวจ ${urls.length} ลิงก์${hrefs.length > 30 ? ` (จาก ${hrefs.length})` : ''}: เสีย ${broken.length}`, ...broken.map(b => `  ❌ ${b}`)].join('\n')
182}
183
184const HELP = `🔍 SEO Scanner TH (Mod 20)
185========================================
186/seo <url>               ตรวจ SEO ให้คะแนน 0-100 พร้อมวิธีแก้
187/seo links <url>         ตรวจลิงก์เสีย (สูงสุด 30 ลิงก์)
188/seo compare <url> <url> เทียบคะแนนหลายเว็บ
189/seo list                ผลที่ตรวจไว้
190/seo export              บันทึกรายงานล่าสุดเป็น seo-report.md`
191
192export const register: Register = on => {
193  on('session.start', async ($, e, next) => {
194    reports = []
195    await $.command.register({ name: 'seo', description: 'ตรวจ SEO ของหน้าเว็บ (/seo <url>)', argumentHint: '<url>|links|compare|export' })
196    return next(e)
197  })
198
199  // ==========================================================================
200  // บทที่ 5: คำสั่ง /seo
201  // ==========================================================================
202  on('command.run', { command: 'seo' }, async ($, e) => {
203    const [sub = 'help', ...rest] = e.args.trim().split(/\s+/).filter(Boolean)
204    try {
205      switch (sub) {
206        case 'help':
207          return { text: HELP }
208        case 'links':
209          return { text: rest[0] ? await checkLinks($, rest[0]) : 'วิธีใช้: /seo links https://example.com' }
210        case 'compare': {
211          if (rest.length < 2) return { text: 'วิธีใช้: /seo compare https://a.com https://b.com' }
212          const results = await Promise.all(rest.slice(0, 5).map(u => scan($, u).catch(err => ({ url: u, score: -1, error: String(err) }))))
213          for (const r of results) if ('checks' in r) reports.push(r)
214          return { text: ['📊 เทียบคะแนน SEO', ...results.sort((a, b) => b.score - a.score).map(r => ('checks' in r ? `  ${String(r.score).padStart(3)} ${grade(r.score)}  ${r.url}` : `  ❌ ${r.url}: ${r.error}`))].join('\n') }
215        }
216        case 'list':
217          return { text: reports.length ? ['📋 ผลที่ตรวจไว้', ...reports.map(r => `  ${r.score} ${grade(r.score)}  ${r.finalUrl}`)].join('\n') : 'ยังไม่ได้ตรวจ ลอง /seo https://example.com' }
218        case 'export': {
219          const last = reports.at(-1)
220          if (!last) return { text: 'ยังไม่ได้ตรวจ' }
221          const root = (await $.session.cwd()).replace(/[\\/]$/, '')
222          const path = `${root}${root.includes('\\') ? '\\' : '/'}seo-report.md`
223          await $.fs.write(path, `# SEO Report\n\n\`\`\`\n${reportText(last)}\n\`\`\`\n`)
224          return { text: `💾 บันทึกแล้ว: ${path}` }
225        }
226        default: {
227          const r = await scan($, sub)
228          reports = [...reports.filter(x => x.finalUrl !== r.finalUrl), r].slice(-20)
229          return { text: reportText(r) }
230        }
231      }
232    } catch (err) {
233      return { text: `❌ ตรวจไม่สำเร็จ: ${err instanceof Error ? err.message : String(err)}` }
234    }
235  })
236}
237
238/**
239 * ========================================================================
240 * การบ้าน / ต่อยอด
241 * ========================================================================
242 * 1. วัด Core Web Vitals จริงด้วย PageSpeed Insights API (ต้องใช้ API key ของ Google)
243 * 2. ให้ Claude ช่วยเขียน title/description ใหม่: $.model.complete จากเนื้อหาหน้าเว็บ
244 * 3. ตรวจทั้งเว็บ: อ่าน sitemap.xml แล้ววนตรวจทุกหน้า
245 */
246