원시 HTML, WordPress, Next.js 또는 Webflow를 사용하든 관계없이 사이트에 Open Graph 태그를 추가하는 방법은 다음과 같습니다.

방법 1: 원시 HTML(모든 정적 웹사이트)

HTML 파일에 직접 액세스할 수 있는 경우 각 페이지의 섹션 내부에 다음 태그를 추가하세요.

<!-- Open Graph -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A compelling description." />
<meta property="og:image" content="https://yoursite.com/images/preview.jpg" />
<meta property="og:url" content="https://yoursite.com/your-page" />
<meta property="og:type" content="website" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A compelling description." />
<meta name="twitter:image" content="https://yoursite.com/images/preview.jpg" />

og:image URL이 절대 URL인지 확인하세요(https://로 시작). /images/preview.jpg와 같은 상대 경로는 작동하지 않습니다.

방법 2: WordPress (Yoast SEO)

Yoast SEO와 함께 WordPress를 사용하면 OG 태그가 자동으로 처리됩니다.

1. Yoast SEO 플러그인 설치 및 활성화
2. 페이지나 게시물을 편집하세요
3. Yoast SEO 메타박스까지 아래로 스크롤하세요.
4. "소셜" 탭을 클릭하세요
5. "Facebook 제목", "Facebook 설명", "Facebook 이미지"를 설정합니다.
6. Yoast는 올바른 og: 태그를 자동으로 생성합니다.

Yoast는 Twitter Card 태그도 자동으로 추가합니다. Yoast SEO → Social → Twitter에서 구성할 수 있습니다.

방법 3: WordPress (RankMath)

RankMath는 Yoast와 유사하게 작동하지만 설정이 약간 다릅니다.

1. RankMath SEO 설치 및 활성화
2. 페이지나 게시물을 편집하세요
3. RankMath 메타박스 찾기
4. "소셜" 탭으로 이동하세요.
5. 소셜 이미지, 제목, 설명 설정
6. RankMath는 OG 및 Twitter Card 태그를 자동 생성합니다.

방법 4: Next.js (앱 라우터)

Next.js 13+(앱 라우터)에서는 메타데이터 API를 사용합니다.

export const metadata = {
  title: 'Your Page Title',
  description: 'A compelling description.',
  openGraph: {
    title: 'Your Page Title',
    description: 'A compelling description.',
    images: ['https://yoursite.com/images/preview.jpg'],
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Your Page Title',
    description: 'A compelling description.',
    images: ['https://yoursite.com/images/preview.jpg'],
  },
};

블로그 게시물과 같은 동적 페이지의 경우 generateMetadata()에서 메타데이터를 생성합니다.

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
  };
}

더 자세한 내용은 Next.js 가이드의 Open Graph 태그를 참조하세요.

자주 묻는 질문