블로그를 준비하고 있어요
잠시만 기다려주세요...
그리고 해당 코드를 layout.tsx에서 호출해서 사용한다.
metadata를 생성하고 이를 export 해주면 홈페이지에 대한 메타 데이터를 생성한다.
import "./globals.css";
import { Metadata } from "next";
import { getMetadata } from "@/utils/getMetadata";
// 메타데이터 객체를 내보냄
export const metadata: Metadata = {
// 전개연산자 ..,를 이용해 객체를 가져온다.
...getMetadata(),
// 만일 다른 제목을 쓰고 싶다면 아래와 같이 하면 된다.
...getMetadata({ title: "다른제목" }),
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="ko">
<body className="h-svh">
<div>
<div className="mx-auto max-w-7xl p-6 lg:px-8">{children}</div>
</div>
</body>
</html>
);
}
자신의 홈페이지로 들어가 F12키를 누른 뒤, 태그를 살펴보면 meatadata를 확인할 수 있다.
동적 라우팅에서는 generateMetadata 함수를 이용했다.
이에 대한 설명은 위의 블로그나 Nextjs 공식문서에 있다.
이 글의 핵심은 metadata를 만들 때 동적 라우팅에 이용되는 객체를 이용할 수 있다는 것이다.
나는 slug와 글 목록이 있는 Json을 이용해 메타 데이터를 만들었다.
export async function generateMetadata({
params,
}: {
params: { slug: string };
}) {
const { slug } = await params;
//카테고리 목록 json을 호출함
const categoryData = fs.readFileSync(categoryJsonPath, "utf-8");
const categorys: postCardFrontMatter[] = JSON.parse(categoryData);
// 현재의 slug와 url이 동일한 것을 1개 찾아 반환함.
const baseMetaData = categorys.find(
(category) => category.postUrlPath === slug
);
//이것을 이용해 메타데이터 설정
const metadata: Metadata = {
...getMetadata({
title: baseMetaData?.data.title,
description: baseMetaData?.data.description,
asPath: `https://earthscience.kr/posts/${slug}`,
ogImage:
baseMetaData?.data.thumbnail &&
`https://earthscience.kr/posts/${slug}/${baseMetaData.data.thumbnail}`,
}),
};
return metadata;
}
보통 페이스북의 공유 디버거를 많이들 활용한다.
그런데 나는 페이스북 아이디가 없어서 그냥 카톡으로 테스트를 해보았다.
단점은 이미지가 뜨기까지 시간이 좀 오래 걸린다.
처음에는 사진이 보이지 않다가 다음날 다시 들여다보니 사진이 잘 뜬다.
하나씩 만들어가는 재미가 있는것 같다.
댓글을 불러오는 중...