SEO - Open Graph 적용하기
The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook. https://ogp.me/
OpenGraph 를 적용해봅시다.
OpenGraph 이미지 만들기
DALLE 를 사용해서 OpenGraph 에 사용할 이미지를 생성했습니다.
OpenGraph용 이미지를 DALLE를 활용하여 여러 번의 프롬프트를 통해 만들었습니다. (멋진 이미지를 만들었지만, 처음에 생각했던 의도와는 조금 다르게 표현되어 아쉬움이 남습니다.)
해당 이미지를 OpenGraph 와 favicon 에 사용할 예정입니다.
Metadata 를 작성하자
OpenGraph 설정을 위해서 meta 태그에 정보를 입력해야합니다.
<meta property="og:title" content="Next.js" />
<meta property="og:description" content="The React Framework for the Web" />
<meta property="og:url" content="https://nextjs.org/" />
<meta property="og:site_name" content="Next.js" />
<meta property="og:locale" content="en_US" />
<meta property="og:image" content="https://nextjs.org/og.png" />
<meta property="og:image:width" content="800" />
<meta property="og:image:height" content="600" />
<meta property="og:image" content="https://nextjs.org/og-alt.png" />
<meta property="og:image:width" content="1800" />
<meta property="og:image:height" content="1600" />
<meta property="og:image:alt" content="My custom alt" />
<meta property="og:video" content="https://nextjs.org/video.mp4" />
<meta property="og:video:width" content="800" />
<meta property="og:video:height" content="600" />
<meta property="og:audio" content="https://nextjs.org/audio.mp3" />
<meta property="og:type" content="website" />위와 같은 정보가 존재해야 OpenGraph 기능이 정상적으로 동작합니다.
Next.js 에서는 metadata 를 설정하는 방법을 제공합니다.
NotionPresso 의 가이드 문서에 마지막쯤에 가면 SEO 가이드가 존재합니다. 거기서 OpenGraph 를 설정하는 방법을 가이드해줍니다. 그 방식을 따라서 app/layout.tsx 에 존재하는 metadata 를 다음과 같이 수정했습니다.
export const metadata: Metadata = {
metadataBase: new URL(baseUrl),
title: {
default: "그저 그렇진만은 않은 개발자",
template: "%s | 그저 그렇진만은 않은 개발자",
},
description:
"그저 그렇지도 못한 개발자에서 그저 그런 개발자로, 그저 그런 개발자에서 그저 그렇지만은 않은 개발자가 되기 위해 노력하는 개발자의 블로그.",
// "Started as a not-so-great developer, became an okay one, and now pushing to be anything but ordinary.",
openGraph: {
title: "그저 그렇진만은 않은 개발자",
description:
"그저 그렇지도 못한 개발자에서 그저 그런 개발자로, 그저 그런 개발자에서 그저 그렇지만은 않은 개발자가 되기 위해 노력하는 개발자의 블로그입니다.",
// "Started as a not-so-great developer, became an okay one, and now pushing to be anything but ordinary.",
url: baseUrl,
siteName: "그저 그렇진만은 않은 개발자",
locale: "en_US",
type: "website",
images: [
{
url: "/og_image.png",
width: 800,
height: 600,
alt: "그저 그렇지만은 않은 개발자 블로그 대표 이미지",
},
],
},
robots: {
index: true,
follow: true,
googleBot: {
index: true,
follow: true,
"max-video-preview": -1,
"max-image-preview": "large",
"max-snippet": -1,
},
},
twitter: {
card: "summary_large_image",
images: ["/og_image.png"],
},
icons: {
icon: "/og_image.png",
apple: "/og_image.png",
},
};Vercel 에 배포 완료! 이제 확인해보겠습니다.
OpenGraph 가 정상동작하지 않아요….
이것좀 보세요… OpenGraph 가 정상적으로 동작하지 않습니다… ㅠㅠ
favicon은 잘 작동하는데 OpenGraph 이미지만 정상적으로 동작하지 않고 있습니다… 문제가 favicon과 OpenGraph 설정의 차이에서 발생했을 가능성이 높아 보입니다. 좀 더 면밀히 살펴보겠습니다.
asset 을 못불러오나?!
og_image.png 파일은 /public 경로에 존재합니다. metadata 를 설정할때, "/og_image.png" 이렇게 사용중인데, path 가 잘못되어 못찾는건가 싶어서 여러가지 테스트를 진행해봤습니다.
일단 local server 를 실행하고 localhost:3000/og_image.png 경로로 이동해봤습니다. 정상적으로 이미지를 불러옵니다.
즉, path 의 문제는 아니였습니다.
Vercel 에서 배포 정보를 확인하면 OpenGraph 관련 정보를 보여줍니다.
정상적으로 존재한단 말이죠… 왜 이런걸까요??! 카카오톡에서만 안되는걸까요?
카카오톡 디버거
Vercel 에서 카카오톡을 미리보기 할 수 없길래 카카오톡의 문제일까 싶어서 찾아봤습니다.
카카오톡에서 캐싱을 하고 있어서 OG 가 최신화 안될 수도 있다고 하더라구요?!
여기서 블로그 주소를 입력해서 정보를 살펴봤습니다.
역시나… OpenGraph 정보가 업데이트 되지 않았군요. 캐시를 초기화한다음 다시 시도해봤습니다.
그러나 실패….. 대폭망~
무엇이 문제인가?!
결론적으로 저는 문제를 찾았습니다. 다시 Vercel 의 배포정보를 살펴보면 문제의 원인을 찾을 수 있습니다.
ㄷㄷㄷ… 제 블로그 주소가 아닙니다….
제 블로그 주소를 사용해서 og_image.png 에 접근하면 정상적으로 보인다는 사실~
다시 코드로 돌아가서 metadata 를 보면 metadataBase 라는 속성이 존재하는데요. 여기에 사용하는 baseUrl 이 sitemap.tsx 에서 import 해오고 있습니다.
찾았습니다… 이런… 하드코딩된 base url 을 사용하고 있었군요….. ㄷㄷ 이런 경우에는 어떻게 설정을 해야할까요?!
baseUrl 정상화
하드코딩된 baseUrl은 배포 환경마다 다르게 설정할 수 없어서 문제가 발생할 수 있습니다. 이 문제를 해결하려면 .env 파일로 환경 변수를 설정하면 좋겠지만, Next.js를 Vercel에 배포할 때 .env 파일이 포함되지 않기 때문에, Vercel에서 제공하는 Environment Variables 기능을 활용해야합니다.
환경변수를 추가하고, 다시 재배포 해보겠습니다.
짜잔 정상적으로 OG 가 설정되었습니다.
참고
The Open Graph Protocol https://ogp.me/
Next.js Open Graph 설정 방법 https://nextjs.org/docs/app/api-reference/functions/generate-metadata#opengraph