Meta Tag

head 태그안에 og 관련 meta태그를 작성

<meta property="og:url" content="<http://rororo-marshmallow.store>"> // 접속경로
<meta property="og:title" content="Title">
//이미지경로
<meta property="og:image" content="<http://rororo-marshmallow.store/api/og>">
<meta property="og:description" content="description">

NextSeo 사용

NextSeo 라이브러리를 사용하면 쉽게 설정 가능함

성향테스트 페이지마다 각자 다른 og를 보여주기위해 컴포넌트로 구현

<NextSeo
      openGraph={{
        url: `https://rororo-marshmallow.store${asPath}`,
        title: ogTitle,
        description: ogDescription,
        images: [
          {
            url: ogImageUrl,
            width: 800,
            height: 600,
            alt: altImage,
          },
        ],
      }}
/>

og에 사용할 기본 이미지

vercel/og를 사용하면 og에 사용할 이미지를 쉽게 만들 수 있음

html, css를 이용해 이미지를 생성할 수 있고 마크업으로부터 동적으로 이미지를 생성

https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation

// pages/api/og.tsx 폴더에 위치
// 경로는 <http://rororo-marshmallow.store/api/og>

import { ImageResponse } from '@vercel/og';

export const config = {
  runtime: 'experimental-edge', // <https://nextjs.org/blog/next-12-2>
};

export default function handler() {
  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 40,
          background: 'white',
          width: '100%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          textAlign: 'center',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <img
          src="<http://rororo-marshmallow.store/images/favicon.svg>"
          width="140px"
          height="140px"
        />
        <p>누구나 쉽게 만들고 공유해 보아요</p>
      </div>
    ),
    {
      width: 1200,
      height: 600,
    },
  );
}