SEO

메타데이터

검색·공유에 필요한 Next.js Metadata 또는 HTML meta tag를 만듭니다.

Vibe Ready

사이트 정보

검색과 공유 화면에 사용할 내용을 입력하세요.

사이트 이름TitleDescriptionProduction URLOG Image URLTwitter/X ImageTheme Color

생성 코드

프로젝트 방식에 맞는 코드를 복사하세요.

Metadatatypescript

import type { Metadata } from "next";

export const metadata: Metadata = {
  metadataBase: new URL("https://example.com"),
  title: "My Service | 더 나은 작업을 위한 도구",
  description: "서비스를 한 문장으로 명확하게 설명하세요.",
  alternates: { canonical: "/" },
  openGraph: {
    title: "My Service | 더 나은 작업을 위한 도구",
    description: "서비스를 한 문장으로 명확하게 설명하세요.",
    url: "https://example.com",
    siteName: "My Service",
    images: [{ url: "https://example.com/og.png", width: 1200, height: 630 }],
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "My Service | 더 나은 작업을 위한 도구",
    description: "서비스를 한 문장으로 명확하게 설명하세요.",
    images: ["https://example.com/og.png"],
  },
  themeColor: "#ffffff",
};

GUIDE

메타데이터 작성 팁

제목과 설명은 페이지마다

검색 결과에서 중복되지 않도록 각 페이지의 실제 목적과 내용을 구체적으로 적으세요.

URL은 운영 주소로

localhost가 아닌 실제 배포 주소를 사용하고 canonical과 OG URL의 도메인을 일치시키세요.

APPLY WITH AI

이 결과를 내 프로젝트에 적용하기

입력 내용은 전송되지 않아요

사용 도구

프레임워크

적용 프롬프트

현재 프로젝트 구조를 먼저 분석해줘.

## 목표
Metadata Generator에서 만든 결과를 현재 프로젝트에 적용해줘.

## 환경
- AI 도구: Codex
- 프레임워크: Auto

## 요구사항
- 기존 디자인과 기능은 변경하지 말 것
- 기존 설정과 충돌 여부를 먼저 확인할 것
- 생성 결과의 파일 경로와 참조 경로가 일치하는지 확인할 것
- 현재 프레임워크의 권장 방식을 따를 것

## 제약사항
- 불필요한 리팩터링 금지
- 새로운 dependency 최소화
- 민감한 값을 코드나 저장소에 포함하지 말 것

## 검증
- TypeScript 오류 확인
- build 실행
- 적용 결과와 변경 파일을 설명할 것

QUICK GUIDE

사용 전 알아두세요

Title은 얼마나 길어야 하나요?

길이보다 페이지 목적이 분명한지가 중요합니다. 핵심 검색어와 서비스명을 자연스럽게 앞쪽에 배치하세요.

OG Image URL은 무엇인가요?

페이지를 공유했을 때 보일 1200×630 이미지의 절대 주소입니다. 배포 도메인에서 실제 접근 가능한 주소를 사용하세요.