Next js 14버전 이상 app router를 사용해서 open graph image 및 twitter image를 설정하는 방법을 알아봅니다.
사용자가 웹사이트를 공유할 때, SNS 소셜 미디어 네트워크에서 웹사이트의 미리보기 이미지를 보여주는 방법을 알아보겠습니다.
Open Graph Image와 Twitter Image를 설정하는 방법은 같습니다.
opengraph-image.png와 twitter-image.png 파일의 허용되는 확장자는 다음과 같습니다.
위 처럼 app/ 최상위 루트폴더에 opengraph-image.png와 twitter-image.png 파일을 생성합니다.
app/ 최상위 폴더에 파일을 추가하면 전체 경로에 opengraph, twitter 이미지를 사용할 수 있습니다.
next js는 다음과 같은 output을 생성합니다.
Recode Log<meta property="og:image" content="<generated>" />
<meta property="og:image:type" content="<generated>" />
<meta property="og:image:width" content="<generated>" />
<meta property="og:image:height" content="<generated>" />
<meta name="twitter:image" content="<generated>" />
<meta name="twitter:image:type" content="<generated>" />
<meta name="twitter:image:width" content="<generated>" />
<meta name="twitter:image:height" content="<generated>" />
<!-- <generated> 부분은 각 이미지 사이즈와 이미지 타입이 자동으로 생성 됩니다.-->만약 다른 경로에 이미지를 사용하고 싶다면, 다음과 같이 설정합니다.
위 처럼 개별 페이지(예: /about)에 이미지를 사용하고 싶다면, 해당 페이지 폴더에 이미지를 추가합니다.
모든 이미지에는 alt 속성이 필요할 수 있습니다.
이미지의 alt 속성은 opengraph-image.alt.txt, twitter-image.alt.txt를 사용해서 생성할 수 있습니다.
저는 개인적으로 이러한 방법을 사용하지 않습니다. - 다른 방법이 있기 때문입니다. 잠시 후 설명합니다. `metadata설정으로 이미지생성`
만약 .alt.txt 파일을 생성하고 싶다면 다음과 같이 공식문서에서 참고할 수 있습니다. `공식문서 - opengraph-image.alt.txt`
next js전용 .js .ts .tsx 파일을 사용하여 이미지를 생성하고 싶다면 다음과 같이 공식문서를 참고하세요. `공식문서 - 코드(.js, .ts, .tsx)를 사용하여 이미지 생성`
opengraph-image.png와 twitter-image.png 파일을 생성하지 않고, metadata를 설정해서 이미지를 사용할 수 있습니다.
metadata로 openGraph, twitter 이미지 설정후 웹사이트를 배포한다면 반드시
metadataBase설정이 필요합니다.
자세한 내용은 공식문서 `metadataBase`
export const metadata: Metadata = {
metadataBase: new URL("https://...나의주소"), // 배포시 반드시 필요한 설정
// ... 다른 설정
openGraph: {
images: [
{
url: "/opengraph-image.png",
alt: "이미지 설명",
},
],
},
twitter: {
images: [
{
url: "/twitter-image.png",
alt: "이미지 설명",
},
],
},
};위 코드 처럼 metadata를 설정하면, 이미지를 생성하지 않고도 이미지를 사용할 수 있습니다.
이미지의 폴더위치는 public/ 폴더를 기준으로 설정합니다.
만약 이미지의 위치를 다른 폴더 구조를 사용하고 싶다면, 다음과 같이 설정합니다.
// url 경로를 설정합니다.
// 예를들어 /public/opengraph/opengraph-image.png 경로에 이미지가 있다면
images: [
{
url: '/opengraph/opengraph-image.png',
alt: '이미지 설명',
},
],다른 페이지에서 이미지를 사용하고 싶다면, 해당 페이지의 metadata를 설정합니다.
export const metadata: Metadata = {
openGraph: {
images: [
{
url: "/opengraph/about/다른 이미지.png",
alt: "이미지 설명",
},
],
},
twitter: {
images: [
{
url: "/opengraph/about/다른 이미지.png",
alt: "이미지 설명",
},
],
},
};다른 페이지에서 openGraph, twitter 이미지를 사용하고 싶다면, 개별 페이지에 metadata 설정을 추가합니다.
metadata 설정은 동일합니다.
동적인 경로에서 openGraph, twitter 이미지를 사용하고 싶다면, 제가 쓴 다음 글을 참고해주세요.
웹사이트 제작후 배포까지 끝났다면, `https://www.opengraph.xyz/` 이 사이트에서 opengraph 이미지를 확인할 수 있습니다.