DATAPREPREP

제작 도구 · 공식 문서

Next.js 공식 메타데이터 파일 규칙은 8종이고, Next.js 16 으로 만든 이 사이트는 그중 5종을 그대로 씁니다

글 DATAPREPREP · 2026-10-18 기준

Next.js 는 metadata 객체·generateMetadata 함수·특수 파일 규칙 세 가지로 <head> 태그와 사이트맵·robots.txt 를 만듭니다. JSON-LD 는 공식 가이드가 layout·page 안의 <script> 태그로 내라고 권합니다. 이 사이트(Next.js 16)는 파일 규칙 8종 중 5종을 그대로 씁니다. robots.txt 와 공유 이미지는 라우트 핸들러(응답을 코드로 만드는 route 파일)로 냅니다.

Next.js 는 SEO 태그를 정해진 API와 파일 이름으로 냅니다. 공식 문서의 규칙을 세고, 이 사이트의 코드와 라이브 출력을 나란히 놓았습니다.

발견 01

공식 메타데이터 수단은 객체·함수·특수 파일 세 가지입니다

Next.js 문서가 적은 것원문
메타데이터 APIThe Metadata APIs can be used to define your application metadata for improved SEO and web shareability and include:메타데이터 API로 SEO와 웹 공유성을 높이는 애플리케이션 메타데이터를 정의할 수 있으며, 다음이 포함된다.
① 정적The static metadata object정적 metadata 객체
② 동적The dynamic generateMetadata function동적 generateMetadata 함수
③ 파일Special file conventions that can be used to add static or dynamically generated favicons and OG images.정적이거나 동적으로 생성한 파비콘과 OG 이미지를 추가하는 특수 파일 규칙
출력With all the options above, Next.js will automatically generate the relevant <head> tags for your page, which can be inspected in the browser's developer tools.위 방법 모두 Next.js 가 페이지에 맞는 <head> 태그를 자동으로 생성하며, 브라우저 개발자 도구에서 확인할 수 있다.
쓸 수 있는 컴포넌트The metadata object and generateMetadata function exports are only supported in Server Components.metadata 객체와 generateMetadata 함수 내보내기는 서버 컴포넌트에서만 지원된다.
크롤러에 보내는 방식Streaming metadata is disabled for bots and crawlers that expect metadata to be in the <head> tag (e.g. Twitterbot, Slackbot, Bingbot).메타데이터가 <head> 태그에 있기를 기대하는 봇·크롤러(예: Twitterbot, Slackbot, Bingbot)에는 메타데이터 스트리밍이 꺼진다.
이 사이트는 metadata 객체를 20개 파일, generateMetadata 를 8개 파일(아티클·케이스 같은 동적 페이지)에서 씁니다.
루트 layout 에 두는 값원문이 사이트
metadataBasemetadataBase is a convenience option to set a base URL prefix for metadata fields that require a fully qualified URL.metadataBase 는 전체 URL이 필요한 메타데이터 필드에 붙일 기본 URL 접두어를 정하는 편의 옵션이다.SITE.url 하나로 둡니다
title.templatetitle.template can be used to add a prefix or a suffix to titles defined in child route segments.title.template 으로 하위 경로 세그먼트에서 정의한 제목에 접두어나 접미어를 붙일 수 있다."%s" 로 페이지 제목을 그대로 씁니다
표준 URL(alternates.canonical)은 루트가 아니라 페이지마다 선언합니다. 루트에 두었을 때 404 페이지가 홈 표준 URL을 물려받은 기록이 코드 주석에 남아 있습니다.

발견 02

파일 규칙 8종 중 이 사이트는 5종을 그대로 씁니다

파일 규칙공식 문서이 사이트
sitemap.(xml|js|ts)sitemap.(xml|js|ts) is a special file that matches the Sitemaps XML format to help search engine crawlers index your site more efficiently.sitemap.(xml|js|ts) 는 사이트맵 XML 형식에 맞춘 특수 파일로, 검색엔진 크롤러가 사이트를 더 효율적으로 색인하도록 돕는다.app/sitemap.ts
robots.(txt|js|ts)Add or generate a robots.txt file that matches the Robots Exclusion Standard in the root of app directory to tell search engine crawlers which URLs they can access on your site.app 디렉터리 루트에 로봇 배제 표준에 맞는 robots.txt 파일을 추가하거나 생성해, 검색엔진 크롤러가 사이트의 어떤 URL에 접근할 수 있는지 알린다.라우트 핸들러 app/robots.txt/route.ts
manifestAPI Reference for manifest.json file.manifest.json 파일의 API 참조 문서.app/manifest.ts
favicon · icon · apple-iconFavicons are small icons that represent your site in bookmarks and search results.파비콘은 북마크와 검색 결과에서 사이트를 나타내는 작은 아이콘이다.app/favicon.ico · app/icon.svg · app/apple-icon.png (apple-icon 은 layout 의 icons 에 직접 연결)
opengraph-image · twitter-imageThey are useful for setting the images that appear on social networks and messaging apps when a user shares a link to your site.사용자가 사이트 링크를 공유할 때 소셜 네트워크와 메신저 앱에 나타나는 이미지를 정하는 데 쓴다.라우트 핸들러 …/cover/[file]/route.tsx
공식 「Metadata Files」 목록은 5묶음이고, 파일 이름으로 세면 8종입니다.
두 자리를 라우트로 낸 이유원문 · 이 사이트의 사정
파일 규칙의 우선순위File-based metadata has the higher priority and will override the metadata object and generateMetadata function.파일 기반 메타데이터가 우선순위가 더 높아, metadata 객체와 generateMetadata 함수의 값을 덮어쓴다.
공유 이미지opengraph-image 파일을 두면 그 파일이 metadata 의 openGraph 값보다 앞섭니다. 그래서 16:9·2:1 이미지를 cover 라우트로 내고 metadata 에서 가리킵니다.
robots.txt다음 웹마스터 도구의 소유 확인 줄을 robots.txt 에 함께 내야 해서, 본문을 직접 쓰는 라우트 핸들러로 냅니다.

발견 03

sitemap.ts 하나가 URL 123개를 모두 lastmod 와 함께 냈습니다(2026-10-18 라이브)

라이브 출력(2026-10-18)값
sitemap.xml 의 URL123개
그중 lastmod 가 붙은 URL123개
이미지 사이트맵 항목(image:image)97개
robots.txtUser-Agent: * · Allow: / · Disallow: /api/ · Sitemap 1줄
아티클 한 편의 <head>title · description · canonical · robots(max-image-preview:large) · og:image · twitter:card · manifest
lastmod 에는 빌드 날짜가 아니라 페이지의 실제 수정일·확인일만 넣습니다.

발견 04

JSON-LD 는 전용 API 없이 <script> 태그로 냅니다

Next.js 가이드가 적은 것원문
권장 방식Our current recommendation for JSON-LD is to render structured data as a <script> tag in your layout.js or page.js components.JSON-LD 는 현재 layout.js 나 page.js 컴포넌트 안에서 구조화 데이터를 <script> 태그로 렌더링하는 방식을 권장한다.
XSS 주의The following snippet uses JSON.stringify, which does not sanitize malicious strings used in XSS injection.아래 코드는 JSON.stringify 를 쓰는데, 이 함수는 XSS 삽입에 쓰이는 악성 문자열을 걸러 내지 못한다.
대처To prevent this type of vulnerability, you can scrub HTML tags from the JSON-LD payload, for example, by replacing the character, <, with its unicode equivalent, \u003c.이런 취약점을 막으려면 JSON-LD 데이터에서 HTML 태그를 걸러 낸다. 예를 들어 < 문자를 유니코드 값 \u003c 로 바꾼다.
next/script 대신Since JSON-LD is structured data, not executable code, a native <script> tag is the right choice here.JSON-LD 는 실행 코드가 아니라 구조화 데이터이므로, 여기서는 기본 <script> 태그가 맞는 선택이다.
이 사이트는 20개 파일에서 <script type="application/ld+json"> 으로 구조화 데이터를 냅니다.

그럼 Next.js 사이트에서 무엇부터 설정하나요?

  1. 루트 layout 에 metadataBase 와 title 기본값을 두고, 페이지마다 title·description·alternates.canonical 을 냅니다.
  2. 데이터로 만드는 페이지는 generateMetadata 로 편마다 다른 제목과 설명을 냅니다.
  3. app/sitemap.ts 로 URL 목록을 코드에서 만들고, lastModified 에는 실제 수정일만 넣습니다.
  4. robots.txt 에 규칙 객체로 낼 수 없는 줄이 필요하면 라우트 핸들러로 내고, 같은 경로에는 둘 중 하나만 둡니다.
  5. 공유 이미지 규격을 metadata 에서 정하려면 opengraph-image 파일과 함께 쓰지 말고 한쪽만 씁니다.
  6. JSON-LD 는 <script type="application/ld+json"> 으로 내고, 가이드대로 < 를 \u003c 로 바꿉니다.

조사 방법

  • Next.js Docs 「Metadata and OG images」 · https://nextjs.org/docs/app/getting-started/metadata-and-og-images
  • Next.js Docs 「Metadata Files API Reference」 · https://nextjs.org/docs/app/api-reference/file-conventions/metadata
  • Next.js Docs 「generateMetadata」 · https://nextjs.org/docs/app/api-reference/functions/generate-metadata
  • Next.js Docs 「sitemap.xml」 · https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap
  • Next.js Docs 「robots.txt」 · https://nextjs.org/docs/app/api-reference/file-conventions/metadata/robots
  • Next.js Docs 「opengraph-image and twitter-image」 · https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image
  • Next.js Docs 「How to implement JSON-LD in your Next.js application」 · https://nextjs.org/docs/app/guides/json-ld
  • 파일 규칙 8종 = 공식 「Metadata Files」 목록 5묶음의 파일 이름(favicon·icon·apple-icon·manifest·opengraph-image·twitter-image·robots·sitemap)을 하나씩 셌습니다.
  • 이 사이트 = Next.js 16.2.2 레포의 app/ 를 읽어 파일 규칙 파일, metadata·generateMetadata 를 내보내는 파일, application/ld+json 을 내는 파일을 셌습니다.
  • 라이브 = 2026-10-18 에 UA MarketResearchBot/0.1 로 robots.txt 를 먼저 받고, sitemap.xml 과 아티클 한 편을 한 번씩 받아 태그 수를 셌습니다.