From dab1dbcc4851bfbb4dbda910a4f516b6cc1d3877 Mon Sep 17 00:00:00 2001
From: Jaybe <master@jaybe.dev>
Date: Sat, 15 Nov 2025 02:20:47 +0900
Subject: [PATCH] =?UTF-8?q?feat(seo):=20theme-color=20=EB=A9=94=ED=83=80?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20hero=20=EC=9D=B4=EB=AF=B8?=
 =?UTF-8?q?=EC=A7=80=20width/height=EB=A1=9C=20CLS=20=EA=B0=9C=EC=84=A0(TD?=
 =?UTF-8?q?D)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/exporter/html.ts                          |  3 +-
 .../seoPerf.themeColor.heroDims.test.ts       | 31 +++++++++++++++++++
 2 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 lib/exporter/seoPerf.themeColor.heroDims.test.ts

diff --git a/lib/exporter/html.ts b/lib/exporter/html.ts
index 24c33e8..cfd0265 100644
--- a/lib/exporter/html.ts
+++ b/lib/exporter/html.ts
@@ -124,7 +124,7 @@ function renderHero(section: { props: { heading: string; subheading?: string; im
           ${subheading.length > 0 ? `<p>${escapeHtml(subheading)}</p>` : ''}
         </div>
         <div class="media">
-          <img src="${escapeHtml(imageUrl)}" alt="${escapeHtml(heading)}" loading="lazy" decoding="async" />
+          <img src="${escapeHtml(imageUrl)}" alt="${escapeHtml(heading)}" loading="lazy" decoding="async" width="1200" height="675" />
         </div>
       </div>
     </section>
@@ -256,6 +256,7 @@ function buildHead(page: Page) {
     <link rel="canonical" href="/" />
     <link rel="manifest" href="/site.webmanifest" />
     <link rel="icon" href="/favicon.ico" />
+    <meta name="theme-color" content="${page.theme.primaryColor}" />
     <title>${escapeHtml(page.seo.title)}</title>
     <meta name="description" content="${escapeHtml(page.seo.description)}" />
     <meta property="og:title" content="${escapeHtml(page.seo.title)}" />
diff --git a/lib/exporter/seoPerf.themeColor.heroDims.test.ts b/lib/exporter/seoPerf.themeColor.heroDims.test.ts
new file mode 100644
index 0000000..3d730cf
--- /dev/null
+++ b/lib/exporter/seoPerf.themeColor.heroDims.test.ts
@@ -0,0 +1,31 @@
+import { describe, it, expect } from 'vitest'
+import { exportPage } from '@/lib/exporter/html'
+import { pageSchema, type Page } from '@/lib/schema/page'
+
+function makePage(): Page {
+  return pageSchema.parse({
+    title: 'SEO/Perf 2',
+    locale: 'en',
+    theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
+    sections: [
+      { type: 'hero', props: { heading: 'Hello', subheading: 'World', imageUrl: 'https://img.example/hero.png' } },
+    ],
+    form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
+    seo: { title: 'SEO2', description: 'Desc2' },
+  })
+}
+
+describe('Exporter - theme-color meta and hero image intrinsic size', () => {
+  it('includes theme-color meta using page.theme.primaryColor', () => {
+    const out = exportPage(makePage())
+    const html = out.html
+    expect(html).toMatch(/<meta name="theme-color" content="#0ea5e9"\s*\/>/)
+  })
+
+  it('renders hero image with width/height attributes for CLS reduction', () => {
+    const out = exportPage(makePage())
+    const html = out.html
+    expect(html).toMatch(/<img[^>]*\swidth="[0-9]+"/)
+    expect(html).toMatch(/<img[^>]*\sheight="[0-9]+"/)
+  })
+})
-- 
2.52.0