Recode LogNext js 14+ SEO 설정하기 - open graph image, twitter image 설정하기
Next js 14버전 이상 app router를 사용해서 open graph image 및 twitter image를 설정하는 방법을 알아봅니다.
Summary
사용자가 웹사이트를 공유할 때, SNS 소셜 미디어 네트워크에서 웹사이트의 미리보기 이미지를 보여주는 방법을 알아보겠습니다.
Open Graph Image와 Twitter Image를 설정하는 방법은 같습니다.
Open Graph Image 및 twitter image 설정하기
opengraph-image.png와 twitter-image.png 파일의 허용되는 확장자는 다음과 같습니다.
- .jpg
- .jpeg
- .png
- .gif
app
+├── opengraph-image.png
+├── twitter-image.png위 처럼 app/ 최상위 루트폴더에 opengraph-image.png와 twitter-image.png 파일을 생성합니다.
app/ 최상위 폴더에 파일을 추가하면 전체 경로에 opengraph, twitter 이미지를 사용할 수 있습니다.
next js는 다음과 같은 output을 생성합니다.
<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> 부분은 각 이미지 사이즈와 이미지 타입이 자동으로 생성 됩니다.-->만약 다른 경로에 이미지를 사용하고 싶다면, 다음과 같이 설정합니다.
app
├── opengraph-image.png
├── twitter-image.png
+├── about
+├── opengraph-image.png
+├── twitter-image.png위 처럼 개별 페이지(예: /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)를 사용하여 이미지 생성`
image 파일 생성이 아닌 metadata 설정으로 이미지 사용하기
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 설정은 동일합니다.
동적인 경로 app/about/[id]/page.tsx에서 이미지 사용하기
동적인 경로에서 openGraph, twitter 이미지를 사용하고 싶다면, 제가 쓴 다음 글을 참고해주세요.
팁.
웹사이트 제작후 배포까지 끝났다면, `https://www.opengraph.xyz/` 이 사이트에서 opengraph 이미지를 확인할 수 있습니다.