Next.js / 정적 메타 데이터 , 동적 메타 데이터 선언 방법

제미나이가 생성해준 Next.js 이미지

 

 

메타 데이터를 사용하는 이유....

 

1. SEO(검색 엔진 최적화)

 

- 구글, 네이버 같은 검색 엔진은 페이지 내용을 크롤링할 때, <title>과 <meta description>을 참고한다.

- 적절한 메타데이터를 사용하면, 검색 결과에 표시되는 내용을 제어할 수 있다.

- 적절한 조작을 가하면 검색 시 클릭률(CTR) 증가, 검색 랭킹 개선이 가능하다.

<title>Next.js 배우기</title>
<meta name="description" content="Next.js 정적/동적 데이터 활용법"/>

 

2. SNS  공유 최적화 (Open Graph, Twitter Cards)

 

- 페이스북, 트위터, 카카오톡 같은 SNS에서 페이지를 공유할 때 메타데이터를 참고한다.

- 이미지, 제목, 설명을 동적으로 바꾸면 공유 카드 미리보기를 컨트롤 할 수 있다.

- 페이지 공유 시 보기 좋은 카드, 클릭 유도할 수 있는 카드를 해당 데이터를 이용해 만들 수 있다.

<title>Next.js 배우기</title>
<meta name="description" content="Next.js 정적/동적 데이터 활용법"/>
<meta property="og:image" content="https://example.com/thumnail.png"/>

 

3. 접근성 & 표준 준수

 

- <meta charset="UTF-8"> 처럼  문자 인코딩 설정은 한글/영문 혼합 페이지에서 문자 깨짐 방지.

- 표준 메타데이터를 사용하면 크롤러, 스크린리더 등 접근성에 도움을 준다. 

 

 자 그럼 웹 크롤러 등이 사이트의 어떤 부분을 크롤링해도 되는지 또는 안되는지 명시하는 규칙을 

 가지는 파일을 뭐라고 할까? 

 

해당 파일을 robots.txt 라고 한다.

 

4. robots.txt?

 

- 검색 엔진 로봇(크롤러)가 웹사이트를 방문할 때 어떤 페이지를 크롤링할지, 어떤 페이지를 제외할지

  알려주는 텍스트 파일이다.

 

- 웹사이트 루트 디렉토리에 위치해야 한다.

 

크롤러 기본 구조(.txt)

User-agent : [크롤러 이름] -> 적용할 크롤러, *은 모든 크롤러, 

Disallow : [접근 금지할 경로] -> 크롤러 금지 경로,

Allow : [허용할 경로] -> 크롤링 허용 경로

Sitemap : [사이트맵 URL] -> 사이트맵 URL을 알려줘 크롤링 효율 향상

// 만약 robots.txt 파일을 동적으로 생성하고 싶다면, app 디렉터리의 최상위 경로에 robots.ts 파일을 생성하고
// robots() 함수를 디폴트 익스포트 하면 된다.
// 프로젝트 전체에서 단 1개의 robots.txt만 만들어진다.
 
import {MetadataRoute} from 'next';
 
export default function robots(): MetadataRoute.Robots {
    return {
        rules: {
            userAgent: '*',
            allow: '/',
            disallow: '/private/'
        },
        sitemap: 'https://www.example.com/sitemap.xml', 
        // sitemap만 크롤러가 탐색하는게 아닌 해당 우선 참고 대상이 된다.(더 빠른 크롤링 가능)
    };
}

 

 

정적 메타데이터 (Static Metadata)

 

- 정적 메타데이터는 빌드 시점에 고정된 메타 정보이다.

-  보통 블로그나 사이트 전체에 공통으로 들어가는 사이트 이름, 기본 설명 등이 이에 해당된다.

 

import type {metadata} from 'next';
 
interface PageProps {
    params: Promise<{postId: string}>;
}
 
export async function generateMetadata(props: PageProps): Promise<Metadata>{
    const {params} = props;
    const {postId} = await params;
 
    return {
        title: `Title (Post ID: ${postId})`,
        description: `Description (Post ID: ${postId})`,
    }
}

 

동적 메타데이터 (Dynamic Metadata)

 

- 동적 메타데이터는 페이지 요청이나 데이터에 따라 변하는 메타 정보이다.

- 블로그 글 제목, 설명, 이미지 등을 글 내용에 따라 동적으로 설정한다.

 

import {notFound} from 'next/navigation';
 
interface Post {
    id: string;
    title: string;
    description: string;
}
 
 
async function getPost(id: string): Promise<Post | null> {
    const posts = [
        { id: '1', title: 'Next.js 배우기', description: 'Next.js를 배우는 방법'},
        { id: '2', title: 'React 배우기', description: 'React를 배우는 방법'},
    ];
 
    return posts.find(p => p.id === id) || null;
}
 
// 동적 메타데이터
export async function generateMetadata({ params } : { params: {id: string } }) {
    const post = await getPost(params.id);
 
    if (!post) return {title: 'Not Found'};
 
    return {
        title: post.title,
        description: post.description,
    };
}
 
 
// 페이지 컴포넌트
export default async function PostPage({ params }: { params: { id: string } }) {
 
const post = await getPost(params.id);
  
if (!post) return notFound();
 
return <div>{post.title}</div>;
 
}