metadata 를 간단하게 사용하고 있다가 다양하게 사용할 수 있는 걸
알게 되어 정리해 보았습니다.
설명
metadata 를 모른다면 개인적으로 조금 공부하고 오거나 제 블로그에 next.js 소개 part 부분을 읽어 보시면 좋습니다.
기본적인 metadata 활용은 아래처럼 사용 할 수 있습니다.
export const metadata = {
title: "next.js",
description: "hello next.js"
}
하지만 항상 페이지별로 metadata 를 적용하고 설명하고 추가하고 하는것은 귀찮을 수 있기 때문에 동적으로 만들 수도 있습니다.
import { Metadata } from 'next';
export const metadata:Metadata = {
title: {
template: "%s | Next Movies",
default: "Loading..."
},
description: 'Generated by Next.js',
}
// 다른곳에서
export const metadata:Metadata = {
title: "not found"
}
만약 블로그 홈페이지를 제작하고 있다고 생각해 봅시다.
블로그 홈페이지에 특정 페이지는 몇개의 댓글이 있는지 metadata 에 포함시키고 싶을 수 있습니다.
그럴 때 사용할 수 있는 코드가 아래에 있습니다.
export async function generateMetadata() {
const posts = await getPosts();
const number = posts.length;
return {
title: `Browse all our ${number}`,
description: "Browse all our posts"
}
}
여기서 주의해야 할 점은 generateMetadata 라는 이름은 규칙이기 때문에 바꾸시면 안됩니다.
이렇게 설정을 하면 next.js 에서는 자동으로 해당 generateMetadata 을 metadata 로 인식하게 됩니다.
심화 버전
정적, HTML 태그 메타 데이터
metadata 를 이용해서 정적, HTML 태그 를 넣어줄 수 있습니다.
아래 코드들은 HTML 메타 태그와 정적 메타데이터를 설정하는 데 사용됩니다.
이 설정은 웹 페이지의 `<head>` 섹션에 포함되며, 다양한 메타데이터를 정의할 수 있습니다.
`generator`: 사이트를 생성한 기술 스택 또는 프레임워크.
`applicationName`: 애플리케이션 이름.
`referrer`: 참조 정책 설정.
`keywords`: 검색 엔진 최적화를 위한 키워드.
`authors`: 사이트의 작성자.
`colorScheme`: 사이트의 색상 테마 (예: 다크 모드).
`creator`: 사이트의 제작자.
`publisher`: 사이트의 발행자.
`alternates`: 대체 리소스 링크.
`formatDetection`: 이메일, 주소, 전화번호 등의 자동 형식 감지 설정.
export const metadata = {
generator: 'Next.js',
applicationName: 'Next.js',
referrer: 'origin-when-cross-origin',
keywords: ['Next.js', 'React', 'JavaScript'],
authors: [{ name: 'Seb' }, { name: 'Josh', url: 'https://nextjs.org' }],
colorScheme: 'dark',
creator: 'Jiachi Liu',
publisher: 'Sebastian Markbåge',
alternates: {},
formatDetection: {
email: false,
address: false,
telephone: false,
},
};
Open Graph 메타데이터
Open Graph 메타데이터는 소셜 미디어 플랫폼 (예: Facebook, Twitter) 에서 링크가 공유될 때 보여지는 정보를 정의합니다
`title`: 페이지의 제목.
`description`: 페이지의 설명.
`url`: 페이지의 URL.
`siteName`: 사이트의 이름.
`images`: 페이지와 관련된 이미지 (소셜 미디어 미리보기 이미지 등).
`locale`: 페이지의 로케일 (언어 및 지역 설정).
`type`: 페이지의 유형 (예: `website`, `article`)
export const metadata = {
openGraph: {
title: 'Next.js',
description: 'The React Framework for the Web',
url: 'https://nextjs.org',
siteName: 'Next.js',
images: [
{
url: 'https://nextjs.org/og.png',
width: 800,
height: 600,
},
{
url: 'https://nextjs.org/og-alt.png',
width: 1800,
height: 1600,
alt: 'My custom alt',
},
],
locale: 'en-US',
type: 'website',
},
};
openGraph , 정적, HTMl 태그 메타데이터 같이 사용
// app/layout.tsx (Next.js 13+에서 사용하는 경우)
import { Metadata } from 'next';
export const metadata: Metadata = {
title: {
template: "%s | Next Movies",
default: "Loading..."
},
generator: 'Next.js',
applicationName: 'Next.js',
referrer: 'origin-when-cross-origin',
keywords: ['Next.js', 'React', 'JavaScript'],
authors: [{ name: 'Seb' }, { name: 'Josh', url: 'https://nextjs.org' }],
colorScheme: 'dark',
creator: 'Jiachi Liu',
publisher: 'Sebastian Markbåge',
alternates: {},
formatDetection: {
email: false,
address: false,
telephone: false,
},
openGraph: {
title: 'Next.js',
description: 'The React Framework for the Web',
url: 'https://nextjs.org',
siteName: 'Next.js',
images: [
{
url: 'https://nextjs.org/og.png',
width: 800,
height: 600,
},
{
url: 'https://nextjs.org/og-alt.png',
width: 1800,
height: 1600,
alt: 'My custom alt',
},
],
locale: 'en-US',
type: 'website',
},
};
// 페이지 컴포넌트
export default function Home() {
return (
<div>
{/* 페이지 내용 */}
</div>
);
}'Next' 카테고리의 다른 글
| [Next.js] 이미지 최적화 (4) | 2024.09.22 |
|---|---|
| [Next.js] 배포시 console 지우기 (1) | 2024.09.20 |
| Next.js - 경로 (1) | 2024.05.21 |
| Next.js (0) | 2024.05.21 |