| name | seo-optimization |
| description | 블로그 SEO(검색 엔진 최적화) 전문 스킬. 메타데이터, sitemap, robots.txt, 구조화된 데이터, 캐노니컬 URL 등 기술적 SEO 구현을 담당합니다. |
| triggers | ["SEO 최적화해줘","메타데이터 추가해줘","sitemap 생성해줘","검색 최적화"] |
SEO 최적화 스킬
개요
이 스킬은 Next.js 블로그 앱의 SEO(Search Engine Optimization)를 담당합니다.
검색 엔진이 콘텐츠를 효과적으로 크롤링하고 인덱싱할 수 있도록 기술적 최적화를 수행합니다.
핵심 영역
1. 메타데이터 최적화
- 동적 generateMetadata: 각 포스트별 title, description, keywords 자동 생성
- Open Graph 태그: 소셜 미디어 공유 최적화
- Twitter Card: Twitter 전용 메타 태그
- 캐노니컬 URL: 중복 콘텐츠 방지
export async function generateMetadata({ params }): Promise<Metadata> {
const post = await getPost(params.slug);
return {
title: post.title,
description: post.summary,
keywords: post.keywords,
alternates: {
canonical: `https://yourdomain.com/${params.category}/${params.slug}`,
},
openGraph: {
type: 'article',
title: post.title,
description: post.summary,
publishedTime: post.createdAt,
modifiedTime: post.updatedAt,
authors: ['작성자명'],
tags: post.tags,
},
twitter: {
card: 'summary_large_image',
title: post.title,
description: post.summary,
},
};
}
2. 구조화된 데이터 (JSON-LD)
- Article/BlogPosting 스키마: 기사 구조 정의
- BreadcrumbList: 네비게이션 경로
- Organization/Person: 작성자 정보
- WebSite: 사이트 검색 기능
export function ArticleSchema({ post }: { post: Post }) {
const schema = {
'@context': 'https://schema.org',
'@type': 'BlogPosting',
headline: post.title,
description: post.summary,
datePublished: post.createdAt,
dateModified: post.updatedAt,
author: {
'@type': 'Person',
name: '작성자명',
url: 'https://yourdomain.com/me',
},
publisher: {
'@type': 'Organization',
name: 'HM Blog',
logo: {
'@type': 'ImageObject',
url: 'https://yourdomain.com/logo.png',
},
},
mainEntityOfPage: {
'@type': 'WebPage',
'@id': `https://yourdomain.com/${post.category}/${post.slug}`,
},
keywords: post.keywords?.join(', '),
image: post.thumbnailImage,
};
return (
);
}
3. 기술적 SEO 파일
- robots.txt: 크롤러 접근 규칙
- sitemap.xml: 동적 사이트맵 생성
- manifest.json: PWA 메타데이터
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
const posts = await getAllPosts();
const postEntries = posts.map((post) => ({
url: `https://yourdomain.com/${post.category}/${post.slug}`,
lastModified: new Date(post.updatedAt || post.createdAt),
changeFrequency: 'weekly' as const,
priority: 0.8,
}));
return [
{ url: 'https://yourdomain.com', lastModified: new Date(), priority: 1 },
{ url: 'https://yourdomain.com/tech', lastModified: new Date(), priority: 0.9 },
{ url: 'https://yourdomain.com/life', lastModified: new Date(), priority: },
{ : , : (), : },
...postEntries,
];
}
4. 성능 기반 SEO
- Core Web Vitals: LCP, FID, CLS 최적화
- 이미지 최적화: WebP/AVIF, lazy loading
- 폰트 최적화: font-display: swap
- 코드 스플리팅: 번들 사이즈 최적화
체크리스트
필수 구현 항목
권장 구현 항목
참고 자료
