블로그 포스트 작성 및 최적화

개요

이 스킬은 에이전트가 외부 콘텐츠(예: LinkedIn 포스트)를 SEO 최적화, 일관된 구조, 적절한 이미지 관리가 포함된 GitHub.io 블로그 포스트 형식으로 변환할 수 있게 합니다.

기능

•외부 콘텐츠를 GitHub.io 블로그 포스트 형식으로 변환
•기존 포스트와 일관된 구조 및 스타일 유지
•SEO 모범 사례 적용
•이미지 및 메타데이터 관리
•About 페이지의 프로젝트 정보로 콘텐츠 보강

사용 시점

다음과 같은 경우에 이 스킬을 사용하세요:

•LinkedIn 포스트나 외부 기사를 블로그 형식으로 변환할 때
•기존 형식과 일치하는 새 블로그 포스트를 작성할 때
•블로그 포스트를 SEO 최적화할 때
•블로그 포스트의 이미지 및 메타데이터를 관리할 때

사용 방법

1단계: 콘텐츠 수집 및 분석

•
소스 콘텐츠 수집
- •LinkedIn 포스트 또는 외부 기사 콘텐츠
- •기존 블로그 포스트 형식 참고 (예: datadog-live-seoul-2024.md)
- •About 페이지에서 관련 프로젝트 정보 확인
•
콘텐츠 구조 분석
- •요소 식별: 제목, 본문, 이미지, 태그
- •섹션 계층 구조 파악
- •핵심 키워드 및 메시지 추출

2단계: 포맷 변환

•

Frontmatter 작성

yaml

---
title: "제목 (이모지 사용 가능)"
date: "YYYY-MM-DD"
excerpt: "155자 이내의 SEO 최적화된 설명"
tags: ["Tag1", "Tag2", "Tag3", ...]
category: "카테고리"
featured: true
coverImage: "/images/posts/[slug]/[image-name].png"
---

•
본문 콘텐츠 구조화
- •기존 포스트 형식을 따라 섹션 구조 결정
- •이모지 및 헤딩 계층 유지
- •인용구, 리스트, 이미지 삽입 방법 통일

3단계: 이미지 관리

•
이미지 디렉토리 생성
bash
```
mkdir -p public/images/posts/[slug]
```
•
이미지 경로 매핑
- •실제 이미지 파일명 확인
- •포스트 내 이미지 경로를 실제 파일명과 일치시킴
- •Alt 텍스트에 키워드 포함
•
이미지 적절히 배치
- •섹션별 적절한 위치에 이미지 배치
- •중앙 정렬 및 반응형 스타일 적용

4단계: 콘텐츠 보강

•
About 페이지 정보 활용
- •프로젝트 상세 정보 확인
- •코어 라이브러리 구성 내용 추가
- •기술 스택 및 성과 데이터 포함
•
섹션 재구성
- •콘텐츠 성격에 따라 섹션 배치 조정
- •"현재 적용된 내용"과 "향후 계획" 구분
- •일관된 번호 체계 유지

5단계: 태그 및 메타데이터

•
태그 추가
- •Frontmatter의 tags 배열에 추가
- •페이지 하단 태그 섹션에도 동일하게 추가
- •기존 태그 스타일 유지
•
카테고리 분류
- •적절한 category 설정
- •featured 플래그 활용

6단계: SEO 최적화

•
Excerpt 개선
- •핵심 키워드 포함
- •155자 이내 유지 (권장)
- •검색 의도에 맞는 설명 작성
•
이미지 Alt 텍스트
- •모든 이미지에 설명적 alt 텍스트 추가
- •키워드 포함
- •검색 엔진이 이해할 수 있는 명확한 설명 작성
•
내부 링크 추가
- •관련 포스트로의 링크 추가
- •예시: [DATADOG LIVE SEOUL 2024 연사 회고](/posts/datadog-live-seoul-2024)
•
외부 링크 최적화
- •모든 외부 링크에 target="_blank" 및 rel="noopener noreferrer" 추가
- •보안 및 SEO 개선

7단계: 검증 및 최종 점검

•
구조 검증
- •섹션 번호 일관성 확인
- •헤딩 계층 구조 확인
- •이미지 경로 유효성 검증
•
콘텐츠 검증
- •오타 및 문법 확인
- •링크 유효성 확인
- •이미지 표시 확인
•
SEO 체크리스트
- • 제목에 키워드 포함
- • Excerpt 155자 이내, 키워드 포함
- • 모든 이미지에 alt 텍스트
- • 내부 링크 추가
- • 외부 링크에 보안 속성
- • 태그 적절히 설정
- • 헤딩 구조가 계층적

모범 사례

성공적으로 작성된 블로그 포스트(frontend-architecture-turborepo.md)를 기반으로:

1. 포맷 일관성

•기존 포스트(datadog-live-seoul-2024.md)의 구조 및 스타일 유지
•이모지 사용 패턴 통일
•일관된 섹션 구분 방법 유지

2. 콘텐츠 구조

•서론: 포스트 개요 및 다룰 내용
•
본론: 주요 내용을 논리적 순서로 구성
- •고려사항
- •아키텍처 구성
- •효과 및 성과
- •고도화 계획
•결론: 마무리 및 관련 링크

3. 이미지 활용

•섹션별 적절한 위치에 이미지 배치
•실제 파일명과 경로 일치 확인
•Alt 텍스트에 키워드 포함

4. SEO 전략

•핵심 키워드를 자연스럽게 포함
•내부 링크를 통한 사이트 내 연결 강화
•메타데이터 최적화

5. 태그 전략

•관련 기술 및 도구 태그 포함
•비즈니스 도메인 태그 포함
•검색 가능성을 고려한 태그 선택

예시

예시: Turborepo 포스트 작성

1단계: 콘텐츠 수집

•LinkedIn 포스트 콘텐츠 수집
•기존 datadog-live-seoul-2024.md 형식 분석
•About 페이지에서 코어 라이브러리 정보 확인

2단계: 포맷 변환

•Frontmatter 작성 (제목, 날짜, excerpt, 태그)
•섹션 구조 결정 (개요, 고려사항, 아키텍처, 효과, 고도화)

3단계: 이미지 관리

•이미지 디렉토리 생성
•실제 파일명 확인 및 경로 매핑
•Alt 텍스트 작성

4단계: 콘텐츠 보강

•About 페이지의 코어 라이브러리 구성 내용 추가
•AI Agent Skills 섹션 추가 및 배치 조정
•섹션 번호 일관성 확인

5단계: 태그 추가

•Vercel, AX 태그 추가
•Frontmatter와 페이지 하단 태그 섹션 동기화

6단계: SEO 최적화

•Excerpt 개선 (키워드 포함)
•이미지 Alt 텍스트 개선
•내부 링크 추가
•외부 링크에 보안 속성 추가

7단계: 검증

•섹션 번호 일관성 확인
•이미지 경로 유효성 확인
•SEO 체크리스트 확인

참고 파일

•기존 포스트 구조: public/posts/datadog-live-seoul-2024.md
•프로젝트 상세 정보: app/about/page.tsx
•SEO 가이드: SEO_GUIDE.md
•이미지 디렉토리: public/images/posts/[slug]/

팁

•일관성 유지: 기존 포스트의 스타일과 구조를 최대한 유지
•자연스러운 키워드: SEO를 위해 키워드를 억지로 넣지 말고 자연스럽게 포함
•이미지 최적화: 실제 파일명과 경로를 정확히 일치시켜 404 에러 방지
•내부 링크: 관련 포스트로의 내부 링크는 SEO에 도움이 됨
•검증: 로컬에서 실행하여 이미지 및 링크 확인

Blog Post Creation