올해는 머신러닝이다.
Nextjs15로 seo 적용 방법 본문
Next.js 15로 만든 웹사이트를 구글 검색에서 잘 노출되게 하려면(SEO 적용) 아래 단계를 따르는 것이 좋습니다.
---
1. Next.js의 기본 SEO 설정
1) <head>에 메타 태그 추가
Next.js에서는 next/head를 사용하여 각 페이지의 <head> 태그를 관리할 수 있습니다.
import Head from "next/head";
export default function Home() {
return (
<>
<Head>
<title>Next.js 15 SEO 튜토리얼</title>
<meta name="description" content="Next.js 15을 사용하여 SEO 최적화된 웹사이트 만들기" />
<meta name="robots" content="index, follow" />
<meta property="og:title" content="Next.js 15 SEO" />
<meta property="og:description" content="Next.js 15 기반 웹사이트의 SEO 최적화 가이드" />
</Head>
<h1>Next.js 15 SEO 최적화</h1>
</>
);
}
title 태그: 페이지 제목 (검색결과 제목으로 사용됨)
meta description: 검색결과에서 설명으로 노출됨
robots: index, follow로 설정하여 검색 엔진이 페이지를 크롤링할 수 있도록 허용
---
2. SEO Friendly URL 적용
Next.js에서는 파일 기반 라우팅을 지원하므로, 검색 친화적인 URL을 만들 수 있습니다.
예를 들어, pages/blog.js를 pages/blog/[slug].js로 변경하면 동적인 블로그 URL을 생성할 수 있습니다.
import { useRouter } from "next/router";
import Head from "next/head";
export default function BlogPost({ post }) {
const router = useRouter();
if (router.isFallback) {
return <div>Loading...</div>;
}
return (
<>
<Head>
<title>{post.title} - 블로그</title>
<meta name="description" content={post.excerpt} />
</Head>
<h1>{post.title}</h1>
<p>{post.content}</p>
</>
);
}
export async function getStaticPaths() {
return {
paths: [
{ params: { slug: "nextjs-seo" } },
{ params: { slug: "static-site-generation" } },
],
fallback: true,
};
}
export async function getStaticProps({ params }) {
const posts = {
"nextjs-seo": { title: "Next.js SEO", excerpt: "Next.js에서 SEO 최적화하는 법", content: "..." },
"static-site-generation": { title: "SSG란?", excerpt: "Static Site Generation을 알아보자", content: "..." },
};
return {
props: { post: posts[params.slug] || null },
};
}
✅ getStaticProps()와 getStaticPaths()를 사용하여 정적 생성(SSG) 적용
✅ SEO 친화적인 URL 구조 적용 (/blog/nextjs-seo)
---
3. robots.txt & sitemap.xml 설정
robots.txt 파일을 만들어 크롤러가 사이트를 탐색하도록 설정
🔹 public/robots.txt 파일을 생성하고 아래 내용 추가:
User-agent: *
Disallow:
Sitemap: https://yourdomain.com/sitemap.xml
sitemap.xml 자동 생성 🔹 next-sitemap 패키지를 사용하면 자동으로 생성 가능:
npm install next-sitemap
🔹 next-sitemap.js 설정:
module.exports = {
siteUrl: "https://yourdomain.com",
generateRobotsTxt: true,
};
🔹 package.json에 빌드 스크립트 추가:
"scripts": {
"postbuild": "next-sitemap"
}
---
4. Google Search Console 등록 (구글 색인 요청)
1. Google Search Console에 로그인
2. 도메인 또는 사이트 URL 등록
3. sitemap.xml을 제출하여 크롤링 요청
---
5. 구조화된 데이터 (Schema.org) 적용
검색엔진이 콘텐츠를 더 잘 이해하도록 구조화된 데이터(JSON-LD)를 추가
import Head from "next/head";
export default function Home() {
const jsonLd = {
"@context": "https://schema.org",
"@type": "WebSite",
"url": "https://yourdomain.com",
"name": "Next.js 15 SEO 튜토리얼",
"description": "Next.js를 이용한 SEO 최적화 가이드",
};
return (
<>
<Head>
<script type="application/ld+json">{JSON.stringify(jsonLd)}</script>
</Head>
<h1>Next.js 15 SEO 가이드</h1>
</>
);
}
---
6. 웹사이트 속도 최적화 (Core Web Vitals 개선)
✅ 이미지 최적화 (next/image 사용)
import Image from "next/image";
<Image src="/image.jpg" alt="SEO 최적화 이미지" width={500} height={300} />
✅ CDN 사용 (Vercel 배포 추천)
✅ Lighthouse로 성능 점검 (https://web.dev/measure/ 활용)
---
7. 백링크 & SNS 공유
✅ 외부 웹사이트에서 링크를 걸어주면 SEO에 긍정적 영향
✅ SNS에서 웹사이트를 공유하면 구글 색인 속도 증가
---
정리: Next.js 15 SEO 적용 체크리스트
✅ 메타 태그 설정 (next/head)
✅ SEO 친화적인 URL 적용 (getStaticProps)
✅ robots.txt & sitemap.xml 설정
✅ Google Search Console 등록 및 색인 요청
✅ 구조화된 데이터 적용 (JSON-LD)
✅ 속도 최적화 (이미지 최적화, CDN 사용)
✅ 백링크 및 SNS 공유
이 과정을 따라 하면 Next.js 15로 만든 사이트가 구글에서 잘 검색되도록 최적화할 수 있습니다!
'스터디' 카테고리의 다른 글
| Clerk (프론트 인증 모듈 추천) (0) | 2025.02.27 |
|---|---|
| Convex DB (프론트와 완벽한 풀스택 디비) (0) | 2025.02.27 |
| Next.js에 Google AdSense 광고를 삽입 (1) | 2025.02.27 |
| 파이어폭스(Firefox) 네트워크 응답 조작 방법 (0) | 2025.02.27 |
| PostgreSQL에서 테이블 구조를 확인하는 방법 (0) | 2025.02.26 |
