chore(brain): ASTRA 성장 자산 동기화 — 기능 인벤토리·growth(약점프로필/학습큐)·일화기억·장기기억·회의록 원문

2026-06-12 16:37:41 +09:00
parent a97fc7be07
commit 89fb05a28a
781 changed files with 138546 additions and 47 deletions
@@ -0,0 +1,227 @@
+---
+id: wiki-2026-0508-seo-중심의-마케팅-및-블로그-사이트-구축
+title: SEO 중심의 마케팅 및 블로그 사이트 구축
+category: 10_Wiki/Topics
+status: verified
+canonical_id: self
+aliases: [seo-marketing-site, blog-site-construction]
+duplicate_of: none
+source_trust_level: A
+confidence_score: 0.9
+verification_status: applied
+tags: [seo, marketing-site, blog, ssg, frontend, next-js, astro]
+raw_sources: []
+last_reinforced: 2026-05-10
+github_commit: pending
+tech_stack:
+  language: typescript
+  framework: astro-next-js
+---
+
+# SEO 중심의 마케팅 및 블로그 사이트 구축
+
+## 매 한 줄
+> **"매 organic search 의 의 LCP < 2.5s + crawlability + structured data + content velocity 의 four-pillar 의 site architecture."**. 2026 의 의 SEO-first build 의 의 default stack 의 Astro / Next.js (SSG) + MDX content + Schema.org JSON-LD + Core Web Vitals optimization — 매 GEO (Generative Engine Optimization, AI overview) 의 등장 의 의 traditional SEO 의 augment.
+
+## 매 핵심
+
+### 매 4-pillar
+1. **Crawlability**: server-rendered HTML, sitemap, robots.txt, canonical URLs, hreflang.
+2. **Performance**: LCP < 2.5s, INP < 200ms, CLS < 0.1 — Core Web Vitals 의 ranking factor.
+3. **Content**: depth, freshness, E-E-A-T (Experience, Expertise, Authoritativeness, Trust).
+4. **Structure**: Schema.org JSON-LD, OpenGraph, semantic HTML, internal linking.
+
+### 매 stack 선택
+- **Astro**: content-heavy, Islands architecture, minimal JS — best LCP.
+- **Next.js (App Router, SSG mode)**: hybrid 가능, MDX support, vast ecosystem.
+- **Hugo / 11ty**: pure SSG, sub-second build, no JS runtime.
+- **WordPress (headless)**: editorial workflow + Astro/Next frontend.
+
+### 매 2026 GEO consideration
+- AI overview (Google SGE, Perplexity, ChatGPT search) 의 citation 의 desired — clear `<h1>`, summary paragraph, bulleted facts, schema markup.
+- LLM-friendly: clean semantic HTML, llms.txt 의 publishing.
+
+### 매 응용
+1. SaaS marketing site (homepage + features + pricing + blog).
+2. Tech blog with MDX + code highlighting.
+3. Documentation site (Mintlify, Nextra, Starlight).
+4. Local business + multi-region landing pages.
+
+## 💻 패턴
+
+### Astro 의 blog setup
+```astro
+---
+// src/pages/blog/[slug].astro
+import { getCollection } from 'astro:content';
+import Layout from '@/layouts/Article.astro';
+export async function getStaticPaths() {
+  const posts = await getCollection('blog');
+  return posts.map((post) => ({ params: { slug: post.slug }, props: { post } }));
+}
+const { post } = Astro.props;
+const { Content } = await post.render();
+---
+<Layout
+  title={post.data.title}
+  description={post.data.description}
+  canonical={`https://site.com/blog/${post.slug}`}
+  ogImage={post.data.ogImage}
+>
+  <article>
+    <h1>{post.data.title}</h1>
+    <Content />
+  </article>
+</Layout>
+```
+
+### JSON-LD (Article schema)
+```tsx
+// components/ArticleSchema.tsx
+export function ArticleSchema({ post }: { post: Post }) {
+  return (
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{
+        __html: JSON.stringify({
+          '@context': 'https://schema.org',
+          '@type': 'Article',
+          headline: post.title,
+          datePublished: post.publishedAt,
+          dateModified: post.updatedAt,
+          author: { '@type': 'Person', name: post.author },
+          image: post.ogImage,
+        }),
+      }}
+    />
+  );
+}
+```
+
+### Sitemap (Next.js App Router)
+```ts
+// app/sitemap.ts
+import type { MetadataRoute } from 'next';
+import { getAllPosts } from '@/lib/posts';
+
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+  const posts = await getAllPosts();
+  return [
+    { url: 'https://site.com', lastModified: new Date(), priority: 1 },
+    ...posts.map((p) => ({
+      url: `https://site.com/blog/${p.slug}`,
+      lastModified: p.updatedAt,
+      changeFrequency: 'monthly' as const,
+      priority: 0.7,
+    })),
+  ];
+}
+```
+
+### Robots + canonical (Next.js metadata)
+```ts
+// app/blog/[slug]/page.tsx
+export async function generateMetadata({ params }): Promise<Metadata> {
+  const post = await getPost(params.slug);
+  return {
+    title: post.title,
+    description: post.summary,
+    alternates: { canonical: `/blog/${post.slug}` },
+    openGraph: {
+      title: post.title,
+      description: post.summary,
+      images: [post.ogImage],
+      type: 'article',
+    },
+    twitter: { card: 'summary_large_image' },
+  };
+}
+```
+
+### LCP 최적화 (preload hero image)
+```html
+<link rel="preload" as="image" href="/hero.avif" fetchpriority="high" />
+<img src="/hero.avif" alt="..." width="1200" height="630" loading="eager" decoding="async" />
+```
+
+### MDX + content collection (Astro)
+```ts
+// src/content/config.ts
+import { defineCollection, z } from 'astro:content';
+
+export const collections = {
+  blog: defineCollection({
+    type: 'content',
+    schema: z.object({
+      title: z.string(),
+      description: z.string().max(160),
+      publishedAt: z.date(),
+      author: z.string(),
+      tags: z.array(z.string()),
+      ogImage: z.string().optional(),
+    }),
+  }),
+};
+```
+
+### llms.txt (2026 GEO)
+```txt
+# https://site.com/llms.txt
+# Site: Acme Inc. — SaaS for X
+# License: CC-BY-4.0 for blog content
+# Index:
+- /blog/* — engineering articles
+- /docs/* — product documentation
+- /pricing — current pricing
+```
+
+### CWV 의 monitoring (Vercel Speed Insights / web-vitals)
+```ts
+import { onLCP, onINP, onCLS } from 'web-vitals';
+
+function send(metric: any) {
+  navigator.sendBeacon('/api/vitals', JSON.stringify(metric));
+}
+onLCP(send);
+onINP(send);
+onCLS(send);
+```
+
+## 매 결정 기준
+| 상황 | Stack |
+|---|---|
+| Pure content / blog | **Astro** (Islands, near-zero JS) |
+| Marketing + app shell | **Next.js (App Router, SSG/ISR)** |
+| Editorial team (CMS) | **Headless WP / Sanity + Astro** |
+| Docs site | **Starlight / Nextra / Mintlify** |
+| Multi-region SEO | Next.js + i18n routing + hreflang |
+
+**기본값**: Astro + MDX + Vercel/Netlify deploy + Sanity/Contentlayer (if CMS needed).
+
+## 🔗 Graph
+- 부모: [[SEO]] · [[프론트엔드_및_UIUX_표준|Frontend-Architecture]]
+- 응용: [[Astro]] · [[MDX]]
+- Adjacent: [[Core Web Vitals Optimization (INP, LCP 개선)|Core-Web-Vitals]]
+
+## 🤖 LLM 활용
+**언제**: marketing site, blog, docs, public-facing SEO-critical content, GEO optimization.
+**언제 X**: authenticated app (SPA), real-time UI (SPA/SSR), no SEO requirement.
+
+## ❌ 안티패턴
+- **SPA 의 marketing site**: crawlable HTML 의 부재 — SSG/SSR 의 mandatory.
+- **Render-blocking JS / fonts**: LCP 의 destroy — `font-display: swap`, defer non-critical JS.
+- **Image 의 dimensions 의 unspecified**: CLS regression — `width`/`height` 의 항상 의 specify.
+- **Duplicate content 의 canonical 의 부재**: SEO penalty — `<link rel="canonical">` 의 필수.
+- **Schema.org 없음**: rich result + AI overview citation 의 lose — JSON-LD 의 add.
+- **Sitemap 의 stale**: ISR / on-demand revalidate or build-time regenerate.
+- **GEO ignore**: AI search traffic 의 2026 의 surge — llms.txt + clear semantic HTML.
+
+## 🧪 검증 / 중복
+- Verified (Google Search Central, web.dev CWV, Astro/Next.js 2026 docs, llms.txt spec).
+- 신뢰도 A.
+
+## 🕓 Changelog
+| 날짜 | 변경 |
+|---|---|
+| 2026-05-08 | Phase 1 |
+| 2026-05-10 | Manual cleanup — full 2026 SEO playbook with GEO + Astro/Next stack |