✔ 메타 태그 설정 (next/head)
• title, description, og:title, og:description 등의 메타 태그가 설정되어 있음.
• SEO 기본 메타데이터가 적용된 상태.
✔ Open Graph & Twitter 카드 적용
• og:image, twitter:image 등의 태그가 있어 SNS 공유 최적화됨.
• Notion 기반 이미지 썸네일을 자동 생성.
✔ 사이트맵 자동 생성 (sitemap.xml)
• sitemap.xml이 존재하며, Google 검색 색인을 위한 사이트맵이 자동 생성됨.
• Google Search Console에서 색인 등록 가능.
✔ 모바일 반응형 최적화
• Tailwind CSS와 Next.js의 Image 최적화 기능을 활용해 반응형 지원됨.
• SEO 점수 중 “모바일 친화성” 부분에서 좋은 점수를 받을 가능성 높음.
확인 또는 보완해야 할 SEO 최적화 사항
이후 확인한 사항은 ☑️ 표시
☑️ SSR (서버사이드 렌더링) 또는 ISR 적용 필요
• getStaticProps()는 적용되어 있지만, Notion API로 데이터를 가져오는 방식이
CSR(Client-Side Rendering)일 가능성이 있음.
🚀 확인
• ISR(Incremental Static Regeneration) 적용 확인
→ 검색엔진이 읽을 수 있도록 HTML 사전 렌더링.
☑️ SEO 최적화된 URL 구조 개선
• 현재 Notion 기반의 URL 구조가 긴 슬러그 형식일 가능성이 있음.
🚀 확인
• slug를 짧고 직관적인 URL로 변경 (예: /ai-first-development 대신 /ai-dev) 가능
☑️ 검색엔진 색인 허용 여부 확인 (robots.txt)
• robots.txt에서 Disallow: / 설정이 있을 경우, 검색엔진이 크롤링을 못 함.
🚀 확인 및 조치완료
• robots.txt를 수정하여 Allow: /로 변경 → 해당 없음
• sitemap.xml을 Google Search Console에 등록 → 완료
☑️ 내부 링크 최적화 (사이트 내 네비게이션 강화)
• 현재 블로그 내에서 관련 글 간 연결(내부 링크)이 적을 가능성 있음.
🚀 적용중
• 블로그 글 중간에 관련 글 링크 추가 → SEO 점수 향상 + 체류 시간 증가.
• “이 글도 추천합니다” 같은 위젯 추가.
☑️ Lighthouse SEO 점수 테스트 및 최적화
• Google Lighthouse를 활용하여 SEO 점수, 속도 점수, 접근성 점수 측정 필요.
🚀 확인
• Lighthouse 실행 (https://web.dev/lighthouse/) 후 개선해야 할 항목 수정. → 100점
2️⃣ 새 사이트 등록
• “속성 추가” 버튼 클릭
• “도메인” 또는 “URL 접두어” 선택
• 도메인 선택: yourdomain.com (하위 도메인 포함 전체 추적)
• URL 접두어 선택: https://yourdomain.com (특정 프로토콜 포함)
3️⃣ 소유권 확인 (필수 단계!)
방법 1: DNS 레코드 추가 (추천)
✔ 도메인 제공업체(DNS 관리)에서 TXT 레코드 추가
✔ ex) Cloudflare, AWS Route53, GoDaddy, Netlify 등
방법 2: HTML 파일 업로드
✔ 제공된 HTML 파일을 서버에 업로드
✔ ex) Next.js 배포한 경우 Vercel, Netlify, 자체 서버에서 처리 가능
방법 3: HTML 메타 태그 추가
✔ <head> 안에 제공된 <meta> 태그 삽입
전 1번 방법을 선택했습니다.
확인 시작 버튼을 누르면 공급업체로 리다이렉팅이 됩니다.
여기서 권한부여를 클릭하면
속성으로 이동하면
아직 아무것도 없는 게 정상입니다.
✔
사이트맵 등록
✅ 📌 Search Console 등록 후 해야 할 것!
✔ 사이트맵 제출 (검색 색인 속도 UP!)
• “색인 > 사이트맵” 메뉴에서
• https://yourdomain.com/sitemap.xml 추가
• 색인 요청하면 Google 검색 반영 속도 🚀 빨라짐
참고로 사이트맵은 이렇게 생겼습니다.
색인 요청 (→ 1~2일 후 확인)
✅ 📌 색인 요청 방법 (즉시 반영시키기!)
✔ 사이트맵 제출하면 자동으로 색인되긴 하는데, 시간이 오래 걸릴 수도 있음
✔ 수동 색인 요청하면 몇 시간 내로 반영 가능! (보통 하루 이내)
✅ 색인 요청 (검색 엔진에 즉시 반영!)
1️⃣ URL 검사 도구 사용하기
👉 Search Console에서 “URL 검사” 메뉴 클릭
👉 https://yourdomain.com/포스트-URL 입력
👉 결과가 나오면 “색인 생성 요청” 버튼 클릭
👉 Google이 해당 페이지를 크롤링하고 빠르게 반영 🚀
2️⃣ 중요 페이지 먼저 색인 요청하기
✔ 블로그 홈 (https://yourdomain.com)
✔ 최신 포스트 몇 개 (https://yourdomain.com/게시글-url)
✔ 카테고리 페이지 (https://yourdomain.com/category/…)
🔥 TIP:
• 새 글을 작성하면 URL 검사 도구에서 색인 요청하면 즉시 반영됨
• 자동 색인 기다리면 며칠~몇 주 걸릴 수도 있음 🤯
• “색인 생성 요청이 너무 많으면 일시적으로 차단될 수도 있음” → 하루에 10~20개씩 나눠서 요청
03 robots.txt & noindex 확인 및 조치
robots.txt
이거 잘못되어 있으면 색인이 막혀서 검색이 아예 안 될 수도 있습니다. 🤯
✅ 📌 1️⃣ robots.txt 확인 (검색 엔진 크롤링 허용 여부 체크!)
👉 직접 확인하는 방법:
📌 브라우저에서 아래 URL 입력
https://yourdomain.com/robots.txt
예시
https://blog.flexyz.work/robots.txt
✔ 열리는지 확인!
✔ 파일 내용이 어떻게 되어 있는지 체크
👉 정상적인 robots.txt 예시 (검색 허용)
🚨 ⚠ 주의해야 할 robots.txt 설정! (색인 막히는 경우)
🚫 이런 코드가 있으면 문제가 있음!!
User-agent: *
Disallow: /
🔥 🚨 이러면 모든 검색 엔진이 사이트 크롤링 불가능! 🚨
🚫 특정 경로가 막혀 있으면?
User-agent: *
Disallow: /blog/
🔥 🚨 이러면 /blog 아래 모든 글이 검색에서 제외됨! 🚨
bots.txt 수정 (검색 허용)
User-agent: *
Allow: /
Sitemap: https://yourdomain.com/sitemap.xml
✔ Disallow: / 있으면 삭제!
noindex
크롬 개발자 도구(F12)에서 meta 태그 확인!
1️⃣ 블로그 페이지 열고
2️⃣ F12 (개발자 도구) → Elements 탭 이동
3️⃣ Ctrl + F (검색) → meta name="robots" 입력
4️⃣ 아래 태그가 있는지 확인!
👉 정상적인 경우 (검색 허용)
<meta name="robots" content="index, follow">
✔ 이러면 정상! Google이 색인 가능!
🚨 문제 있는 경우 (색인 막힘)
<meta name="robots" content="noindex, nofollow">
🔥 🚨 이러면 검색 색인 안 됨! 🚨
✔ noindex가 있으면 검색 노출 X
✔ nofollow는 페이지 내 링크도 검색에 안 걸림
Next/head에서 meta 태그 확인 후 수정
✔ Next.js 프로젝트에서 _app.tsx 또는 _document.tsx 파일에서
✔ meta name="robots" 태그가 noindex로 되어 있다면 수정!
👉 Next.js에서 기본 SEO 설정 적용 방법
import Head from "next/head";
export default function SEO() {
return (
<Head>
<meta name="robots" content="index, follow" />
<meta name="googlebot" content="index, follow" />
</Head>
);
}
✔ 이렇게 설정하면 모든 페이지 검색 색인 허용됨!
04 키워드 최적화
키워드 리서치
목표: 사람들이 실제로 검색하는 키워드를 내 블로그에 반영!
✔ Google Trends → 현재 인기 검색어 체크
✔ Ahrefs, SEMrush, Ubersuggest → SEO 키워드 분석
✔ Google 검색 자동완성 & 연관검색어 활용
✔ 경쟁 사이트 분석 (비슷한 블로그의 키워드 참고)
🚀 직접 할 방법:
1️⃣ Google 검색창에 Next.js 블로그 입력
2️⃣ 자동완성 추천 키워드 확인
3️⃣ 맨 아래 “관련 검색어” 체크
4️⃣ 이 키워드를 제목, 본문, 태그에 자연스럽게 반영!
✅ 📌 주요 검색 키워드 분석
📌 사람들이 Next.js 블로그 관련해서 많이 검색하는 키워드:
✔ next.js blog template → “Next.js 블로그 템플릿”
✔ next.js blog starter → “Next.js 블로그 스타터”
✔ next.js blog starter kit → “Next.js 블로그 스타터 키트”
✔ next.js blog example → “Next.js 블로그 예제”
✔ next.js blog github → “Next.js 블로그 GitHub 관련”
✔ next js blog app github → “Next.js 블로그 앱 GitHub 프로젝트”
✔ next js blog website github → “Next.js 블로그 웹사이트 GitHub”
✔ next js blog project github → “Next.js 블로그 프로젝트 GitHub”
📌 결론:
“GitHub 기반 Next.js 블로그”, “템플릿 & 스타터 키트” 관련 키워드가 많음!
🔥 이 키워드를 블로그 글에 자연스럽게 포함하면 검색 유입 가능!
SEO 키워드 최적화
블로그 = 특정 키워드로 검색 상위 노출!
🔥 1️⃣ 제목 (Title) 최적화
✔ 기존 제목보다 검색어가 포함된 형태로 변경
✔ 예제: "Next.js + Notion 블로그 SEO 최적화: 검색 인싸 되기"
✔ 한 번에 이해되는 짧고 강력한 제목 만들기!
최적화된 제목 예제 (키워드 포함!)
✔ "Next.js 블로그 템플릿 & 스타터 키트 정리 (GitHub 예제 포함)"
✔ "Next.js Blog Starter: 블로그 템플릿 & GitHub 프로젝트"
✔ "Next.js 블로그 만들기: Starter Kit, Example, GitHub 활용법"
📌 제목 최적화 TIP
✔ 긴 제목보다는 짧고 명확하게!
✔ 사람들이 많이 검색하는 키워드 포함!
✔ GitHub, Starter, Example 같은 검색 키워드 활용!
🔥 2️⃣ 메타 설명 (Description) 최적화
✔ next/head에서 description 태그 추가
✔ meta name="description" content="Next.js 기반 Notion 블로그 SEO 최적화 방법 정리.
Search Console 등록부터 키워드 최적화까지 검색 노출을 극대화하는 과정!"
✔ 자연스럽고 검색 유입이 잘될 문장 사용
// 메타 태그 예제 (next/head에서 설정!)
import Head from "next/head";
export default function SEO() {
return (
<Head>
<title>Next.js 블로그 템플릿 & 스타터 키트 (GitHub 예제 포함)</title>
<meta name="description" content="Next.js 블로그를 빠르게 시작하는 방법! 블로그 템플릿, Starter Kit, Example, GitHub 프로젝트 정리." />
<meta name="robots" content="index, follow" />
</Head>
);
}
✔ 검색 결과에서 클릭을 유도할 수 있는 설명 포함!
✔ 자동완성된 키워드 최대한 자연스럽게 배치!
🔥 3️⃣ 본문 키워드 배치 (자연스럽게 포함하기)
✔ 본문 첫 문장에 핵심 키워드 포함 (SEO 중요!)
✔ 중간에 2~3번 더 등장하도록 자연스럽게 배치
✔ H2/H3 제목 태그에도 키워드 포함
문장에 키워드 배치!
✔ H2/H3 제목 태그에도 추가!
✔ 중간중간 키워드 자연스럽게 반복!
🚀 본문 예제 (최적화된 키워드 포함!)
# Next.js 블로그 템플릿 & Starter Kit 정리 🚀
Next.js 블로그를 빠르게 시작하고 싶다면?
GitHub에 공개된 **Next.js 블로그 템플릿**과 **Starter Kit**을 활용하면 쉽고 빠르게 만들 수 있습니다.
이번 포스트에서는 **Next.js 블로그 Example**을 직접 테스트하고,
GitHub에서 찾을 수 있는 **Next.js Blog Starter 프로젝트**를 소개합니다.
✔ 이렇게 하면 검색 엔진이 주요 키워드를 잘 인식함!
🔥 4️⃣ URL 최적화
✔ https://yourdomain.com/nextjs-notion-seo-guide
✔ 짧고 직관적인 URL로 설정 (불필요한 숫자 & 특수문자 제거)
O-friendly URL 예제
✔ /nextjs-blog-template-guide
✔ /nextjs-blog-github-example
✔ /nextjs-blog-starter-kit
✔ 짧고 직관적으로!
✔ 검색 키워드 포함되게!
🔥 5️⃣ 내부 링크 & 외부 링크 추가
✔ 내 블로그 내에서 관련된 다른 글로 연결 (내부 링크 최적화)
✔ 다른 블로그나 공식 문서 링크 추가 (Google이 신뢰성 높게 평가)
