2nd/10_Wiki/Topics/Frontend/SEO 중심의 마케팅 및 블로그 사이트 구축.md

---
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, CLS)|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 |