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

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-seo-중심의-마케팅-및-블로그-사이트-구축	SEO 중심의 마케팅 및 블로그 사이트 구축	10_Wiki/Topics	verified	self	seo-marketing-site blog-site-construction	none	A	0.9	applied	seo marketing-site blog ssg frontend next-js astro		2026-05-10	pending	language framework typescript 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

---
// 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)

// 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)

// 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)

// 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)

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

// 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)

# 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)

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 표준
• 응용: Astro · MDX
• Adjacent: Core Web Vitals Optimization (INP, LCP, CLS)

🤖 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