Next.js app router Metadata, OpenGraph 설정

메타데이터, 오픈그래프 설정

app router에서는 정적 메타데이터 설정을 최상위 layout.tsx 에서 할 수 있다.

Metadata 타입을 import 하고 메타데이터 변수 metadata를 생성하고 아래와 같이 설정했다.

 

오픈그래프 이미지를 설정하는 과정에서 애를 많이 먹었는데, 처음에는 공식문서에 나와있는대로 metadataBase를 설정하고 public/opengraph-image.png 경로로 넣어둔 오픈그래프 이미지를 url에 설정해줬다.

export const metadata: Metadata = {
  metadataBase: new URL("<https://toristar.site>"),
  title: "토리별",
  description: "달나라 토끼들의 꿈에서 태어난 토리와 대화해보세요",
  icons: {
    icon: "/assets/favicon.ico",
  },
  openGraph: {
    title: "토리별",
    siteName: "토리별",
    description: "달나라 토끼들의 꿈에서 태어난 토리와 대화해보세요",
    url: "<https://toristar.site>",
    type: "website",
    locale: "ko_KR",
    images: [
      {
        url: "/opengraph-image.png", // 처음에는 이렇게 설정했다.
        alt: "토리별 오픈그래프",
        width: 1200,
        height: 630,
      },
    ],
  },
};

 

 

근데 도대체 어떤 이유인지 테스트로 카카오톡 공유를 해보니 회색 이미지만 계속 떴다.

 

 

카카오 개발자 콘솔에서 공유 디버거를 돌려보고 이미지가 정상적으로 뜨면 캐시 초기화를 하면 된다고 해서 봤더니 😅 ??

여기에는 잘 뜬다. 하지만,, 캐시 초기화를 돌려보고 다시 공유를 해봤는데도 여전히 회색 이미지.. 다른 방법을 찾아봐야 했다.

 

 

 

쓸데 없는 커밋만 늘어가던 와중,, 최고의 개발 동료이자 선배 짱잼이가 그냥 로컬 경로 말고 이미지 호스팅 사이트에 업로드하고 그 url을 쓰라는 조언을 듣고 아래와 같이 수정했다.

// layout.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  metadataBase: new URL('<https://toristar.site>'),
  title: '토리별',
  description: '달나라 토끼들의 꿈에서 태어난 토리와 대화해보세요',
  icons: {
    icon: '/assets/favicon.ico',
  },
  openGraph: {
    title: '토리별',
    siteName: '토리별',
    description: '달나라 토끼들의 꿈에서 태어난 토리와 대화해보세요',
    url: '<https://toristar.site>',
    type: 'website',
    locale: 'ko_KR',
    images: [
      {
        url: '<https://i.ibb.co/JwsgRR6m/opengraph-image.png>', // 호스팅된 url
        alt: '토리별 오픈그래프',
        width: 1200,
        height: 630,
      },
    ],
  },
  twitter: {
    images: [
      {
        url: '<https://i.ibb.co/JwsgRR6m/opengraph-image.png>',
        alt: '토리별 트위터',
        width: 1200,
        height: 630,
      },
    ],
  },
}

 

 

수정하니까 이제 이미지가 정상적으로 보인다 👍🏻

 

 

카카오톡 디비거에도 호스팅된 url이 잘 연결돼있다.

 

 

근데 변경 전 public 폴더에 있던 이미지도 url은 잘 나왔었다.

공식 문서를 보면서 따라했지만 안되는 이유.. Next 15 버전에서 왜 이러는건지 아시는 분 댓글좀 부탁드립니다 🙏🏻 🤦🏻‍♂️

 

---

 

이렇게 메타데이터, 오픈그래프 설정까지 마쳤다. 이 둘은 SEO 향상에 도움이 되는 역할을 하기때문에 잘 설정해두는 게 좋다. 오픈그래프는 url 공유 시에 미관상으로도 좋기때문에 일석이조가 아닌가 생각한다.