[Web] OG 태그 동적으로 생성하기

🔍 현재 프로젝트 환경

현재 OG 태그를 적용할 프로젝트는 Preact를 사용한 전형적인 **CSR 기반의 SPA(Single Page Application)**이다. 서버는 API와 정적 파일 서빙만 담당하고, 실제 UI 렌더링은 브라우저에서 JavaScript로 처리한다.

💡OG 태그란?

OG(Open Graph) 태그는 웹 페이지를 소셜 미디어(예: 카카오톡, 페이스북, 트위터 등)에서 공유할 때 링크 미리보기의 제목, 설명, 이미지등을 제어하는 메타태그이다.

OG 태그가 적용되는 흐름

사용자가 웹 링크를 공유
플랫폼(카카오, 페북 등)이 해당 URL에 요청
서버는 HTML 문서 응답
<head>의 OG 태그를 파싱
그 정보를 기반으로 링크 미리보기를 생성

👉 클라이언트에서 동적으로 삽입한 OG는 무시됨

→ 이유는 크롤러는 JS 실행을 하지 않기 때문

⚙️ CSR에서 동적 OG태그 이용하기

CSR 방식(Preact, React, Vue 등)에서는 클라이언트가 마운트되고 나서야 JavaScript에 의해 DOM이 변경되므로 OG 태그가 늦게 삽입된다.

👉 카카오/페북/트위터 같은 크롤러(봇)는 OG 태그를 인식하지 못함.

해결방법

SSR로 OG 태그까지 포함된 HTML을 바로 렌더링하기
서버에서 <head>를 직접 조작해 OG 태그를 삽입해서 반환

프로젝트를 CSR에서 SSR로 변경하기에는 공수가 크기 때문에 2번 방법을 이용해 해결을 시도해보았다.

🛠️서버에서 <head>를 직접 조작해 동적 OG 태그 생성하기

해결 방법 요약

OG 태그에 들어갈 정보를 API(비동기)로 조회
전달 받은 데이터로 OG 태그 문자열을 생성
정적인 HTML 템플릿 파일(index.html)을 읽음
<head> 태그 안에 동적으로 생성한 OG 태그 문자열을 삽입
삽입된 HTML을 ctx.body로 응답하여 서버에서 OG 메타 정보를 포함한 HTML을 제공

코드로 설명

1. OG 정보 로딩

외부 API 또는 내부 DB에서 OG 정보를 비동기로 불러옴
실패 시 기본 OG 정보(defaultTitle, defaultImage) 반환

loadOgInformation: async code => {
  const {title, imgUrl, description} = await getOgTagTittleAndImage(code);
  return {title, imgUrl, description};
}

2. OG 태그 문자열 생성

전달받은 데이터로 OG 태그 문자열을 생성

createOgMetaTags: ({title, imgUrl, description}) => `
  <meta property="og:title" content="${title}" />
  <meta property="og:image" content="${imgUrl}" />
  <meta property="og:description" content="${description}" />
`,

3. HTML에 OG 태그 삽입

<head> 태그를 찾아 OG 태그를 삽입

injectOgTags: (html, ogTags) => html.replace(/<head[^>]*>/i, match => `${match}\\n${ogTags.trim()}`)

전체코드

index.html은 미리 렌더된 템플릿 HTML 파일로, OG 태그가 삽입될 베이스 파일
필요한 OG 정보(title, image)를 불러와 <head>에 삽입 후 클라이언트에 전달

// OG Tag Util
const ogTagUtils = {
  loadOgInformation: async code => {
    try {
      const {title, imgUrl, description} = await getOgTagTittleAndImage(code);
      return {title, imgUrl, description};
    } catch (error) {
      console.error('[ERROR]', error.message);
      return {
        title: config.og.defaultTitle,
        imgUrl: config.og.defaultImage,
        description: config.og.defaultDescription
      };
    }
  },

  createOgMetaTags: ({title, imgUrl, description}) => `
    <meta property="og:title" content="${title}" />
    <meta property="og:image" content="${imgUrl}" />
    <meta property="og:description" content="${description}" />
  `,

  injectOgTags: (html, ogTags) => html.replace(/<head[^>]*>/i, match => `${match}\\n${ogTags.trim()}`),
};

// Server Code
try {
  const { title: ogTitle, imgUrl: ogImageUrl, description: ogDescription } = await ogTagUtils.loadOgInformation(code);

  const ogMetaTags = ogTagUtils.createOgMetaTags({
    title: ogTitle,
    imgUrl: ogImageUrl,
    description: ogDescription
  });

  const bridgeHtmlPath = `${config.static.distDir}/bridge.html`;
  const bridgeHtml = await readFilePromise(bridgeHtmlPath, 'utf8');

  const finalHtml = ogTagUtils.injectOgTags(bridgeHtml, ogMetaTags);

  ctx.body = finalHtml;
} catch (error) {
  console.error('[ERROR] OG 정보 조회 실패:', error);
  ctx.status = 500;
}

유의할 점

OG 태그는 반드시 SSR 혹은 HTML 조작으로 제공되어야 크롤러가 정상적으로 인식 가능
index.html은 최소한의 HTML 구조 (<!DOCTYPE html>, <html>, <head>, <body>)를 포함해야 함
<head> 태그는 반드시 존재해야 하며, 정규표현식으로 치환되므로 의도치 않은 HTML 구조에 주의
OG 정보 로딩 시 캐싱 전략 고려 필요 (예: 동일 코드 요청에 대해 반복 조회 방지)

확장 아이디어

url, type 등의 태그도 함께 동적으로 추가
user-agent 검사로 봇 요청 시에만 OG 삽입 처리
Redis 등으로 OG 데이터 캐싱

저작자표시 (새창열림)

'FrontEnd' 카테고리의 다른 글

[Web] 타 서비스에 임베딩해서 사용하는 서비스 개발 방법 (10)	2025.07.16
[Web] 번들러(Bundler)의 종류 및 비교 분석 (2)	2025.06.01
[Cross Browsing] 모바일 iOS 크롬에서는 WebM을 지원하지 않는다? (0)	2023.03.29
[Cross Browsing] webm 영상의 투명도를 지원하지 않는 Safari 브라우저 (2)	2023.03.14
[양방향 통신 방법] Polling vs WebSocket (0)	2022.05.17

WISDOM

[Web] OG 태그 동적으로 생성하기

🔍 현재 프로젝트 환경

💡OG 태그란?

OG 태그가 적용되는 흐름

⚙️ CSR에서 동적 OG태그 이용하기

해결방법

🛠️서버에서 <head>를 직접 조작해 동적 OG 태그 생성하기

해결 방법 요약

코드로 설명

전체코드

유의할 점

확장 아이디어

'FrontEnd' 카테고리의 다른 글

댓글

티스토리툴바

[Web] OG 태그 동적으로 생성하기

🔍 현재 프로젝트 환경

💡OG 태그란?

OG 태그가 적용되는 흐름

⚙️ CSR에서 동적 OG태그 이용하기

해결방법

🛠️서버에서 <head>를 직접 조작해 동적 OG 태그 생성하기

해결 방법 요약

코드로 설명

전체코드

유의할 점

확장 아이디어

'FrontEnd' 카테고리의 다른 글

관련글

댓글

티스토리툴바