title: Next.js 애플리케이션에서 JSON-LD 구현하는 방법
description: 검색 엔진과 AI에게 여러분의 콘텐츠를 잘 설명할 수 있도록 Next.js 애플리케이션에 JSON-LD를 추가하는 방법을 배워보세요.
url: "https://nextjs.org/docs/app/guides/json-ld"
version: 16.1.6
lastUpdated: 2026-02-27
prerequisites:
안녕하세요! 프론트엔드 개발의 길을 걷고 계신 여러분을 환영합니다. 오늘은 Next.js 공식 문서 중에서 아주 매력적인 주제인 JSON-LD 구현 방법에 대해 함께 살펴볼 거예요. 영문으로 된 공식 문서를 단순히 직역하는 것에 그치지 않고, 여러분이 실무에서 바로 써먹을 수 있도록 제가 살을 덧붙여서 친절하게 설명해 드릴게요. 자, 시작해볼까요?
JSON-LD는 검색 엔진과 AI가 단순히 화면에 보이는 텍스트 콘텐츠를 넘어서, 웹 페이지의 구조와 의미를 깊이 있게 이해할 수 있도록 도와주는 '구조화된 데이터(structured data)' 포맷이에요. 예를 들어볼까요? 여러분이 사람, 특별한 이벤트, 회사나 조직, 영화, 책, 심지어 맛있는 레시피까지 아주 다양한 종류의 정보(엔티티)들을 명확하게 설명할 때 이 JSON-LD를 사용할 수 있답니다.
👨🏫 강사의 부연 설명:
우리가 구글에 무언가를 검색했을 때, 어떤 검색 결과는 단순히 제목과 설명만 나오는 게 아니라 별점, 리뷰 개수, 요리 시간, 상품 가격 같은 정보가 아주 예쁘게 카드로 정리되어 나오는 걸 본 적 있으시죠? 그걸 리치 리절트(Rich Results) 라고 부르는데요, 검색 엔진 봇에게 "이 페이지는 이런 정보(JSON-LD)를 담고 있어!"라고 친절하게 떠먹여 주면 검색 엔진이 그걸 바탕으로 화면에 예쁘게 띄워주는 원리랍니다. 검색 유입을 늘려야 하는 실무 서비스에서는 선택이 아닌 필수예요!
현재 Next.js에서 JSON-LD를 적용할 때 가장 강력하게 권장하는 방법은, 구조화된 데이터를 여러분의 layout.js나 page.js 컴포넌트 안에 <script> 태그 형태로 렌더링하는 거예요.
아래에 나올 코드 예시를 보면 JSON.stringify 함수를 사용하고 있는데요, 여기서 주의할 점이 하나 있어요! 이 함수는 XSS(크로스 사이트 스크립팅) 공격에 악용될 수 있는 악의적인 문자열을 자동으로 소독(sanitize)해 주지 않아요. 이런 치명적인 보안 취약점을 예방하려면, JSON-LD 데이터(페이로드) 안에서 혹시 모를 HTML 태그가 실행되지 않도록 싹 지워주거나 변환해야 합니다. 예를 들면, 자바스크립트의 .replace() 메서드를 사용해서 태그를 여는 문자 <를 유니코드 형태인 \u003c로 치환해 버리는 방식이 있죠.
👨🏫 강사의 부연 설명:
프론트엔드 개발을 하다 보면 사용자에게 입력받은 데이터나 외부 API에서 가져온 데이터를 화면에 그릴 때 항상 '보안'을 염두에 두어야 해요. 특히 리액트(React)에서dangerouslySetInnerHTML속성을 사용할 때는 이름 그대로 '위험하게' HTML을 삽입하는 것이기 때문에 해커가 악성 스크립트를 심어놓았을 경우 그대로 실행될 위험이 큽니다. 그래서 꺾쇠<를 무력화시키는 과정이 반드시 필요한 거예요.
여러분이 속한 조직이나 회사에서 이런 잠재적으로 위험한 문자열을 안전하게 처리하기 위해 권장하는 방법이 따로 있다면 그 방식을 꼭 검토해 보시고요! 또는 커뮤니티에서 아주 잘 관리되고 있는 JSON.stringify의 훌륭한 대체제인 serialize-javascript 같은 NPM 패키지를 사용하시는 것도 적극 추천합니다.
export default async function Page({ params }) {
const { id } = await params
const product = await getProduct(id)
const jsonLd = {
'@context': '[https://schema.org](https://schema.org)',
'@type': 'Product',
name: product.name,
image: product.image,
description: product.description,
}
return (
<section>
{/* Add JSON-LD to your page */}
<script
type="application/ld+json"
dangerouslySetInnerHTML={{
__html: JSON.stringify(jsonLd).replace(/</g, '\\u003c'),
}}
/>
{/* ... */}
</section>
)
}export default async function Page({ params }) {
const { id } = await params
const product = await getProduct(id)
const jsonLd = {
'@context': '[https://schema.org](https://schema.org)',
'@type': 'Product',
name: product.name,
image: product.image,
description: product.description,
}
return (
<section>
{/* Add JSON-LD to your page */}
<script
type="application/ld+json"
dangerouslySetInnerHTML={{
__html: JSON.stringify(jsonLd).replace(/</g, '\\u003c'),
}}
/>
{/* ... */}
</section>
)
}코드를 작성하셨다면, 내가 만든 구조화된 데이터가 검색 엔진에 잘 읽히는지 검증하고 테스트해 볼 수 있어요. 구글에서 제공하는 리치 결과 테스트(Rich Results Test) 도구나, 웹 표준을 확인하는 일반적인 스키마 마크업 검사기(Schema Markup Validator)를 활용하시면 아주 쉽게 확인하실 수 있답니다.
만약 여러분이 타입스크립트(TypeScript)를 사용하고 계신다면, schema-dts와 같은 훌륭한 커뮤니티 패키지를 이용해서 JSON-LD 객체에 엄격하게 타입을 지정해 줄 수도 있어요. (타입스크립트를 쓰면 자동완성도 되고 오타도 잡아주니까 정말 편리하죠!)
import { Product, WithContext } from 'schema-dts'
const jsonLd: WithContext<Product> = {
'@context': '[https://schema.org](https://schema.org)',
'@type': 'Product',
name: 'Next.js Sticker',
image: '[https://nextjs.org/imgs/sticker.png](https://nextjs.org/imgs/sticker.png)',
description: 'Dynamic at the speed of static.',
}모든 문서의 의미론적(semantic) 개요를 한눈에 살펴보고 싶으시다면, https://nextjs.org/docs/sitemap.md 문서를 참고해 주세요.
현재 이용 가능한 전체 문서의 색인(index) 목록을 확인하시려면, https://nextjs.org/docs/llms.txt 문서를 참조하시면 됩니다.
💡 강사님의 실무 & 취업 꿀팁!
공식 문서 내용은 여기까지예요! 잘 따라오셨나요? 여기서 끝나면 아쉬우니, 프론트엔드 실무와 관련된 꿀팁을 하나 드릴게요.
많은 프론트엔드 개발자들이 React나 Next.js를 배울 때 상태 관리나 UI 컴포넌트 설계에만 집중하는 경향이 있어요. 하지만 실제 서비스(특히 B2C 서비스나 이커머스 등)에서는 "우리 사이트가 구글 검색 상단에 얼마나 잘 노출되는가(SEO)"가 회사의 매출과 직결됩니다.
면접관들은 단순히 "Next.js 할 줄 압니다"라고 말하는 지원자보다, "Next.js를 활용해 SEO를 최적화해 본 경험이 있고, JSON-LD를 삽입하여 크롤러가 사이트 구조를 잘 이해하도록 개선했습니다"라고 말하는 지원자에게 훨씬 더 큰 매력을 느낍니다. 나중에 포트폴리오 프로젝트(예: 블로그나 책 리뷰 사이트 등)를 만드실 때, 오늘 배운 이 JSON-LD 코드를 꼭 넣어서 구글 리치 결과 테스트까지 통과시켜 보세요. 그리고 그 경험을 이력서나 기술 면접에서 적극적으로 어필해 보시기 바랍니다! 분명 좋은 결과가 있을 거예요. 화이팅입니다!
