React에서 오픈그래프 정보 설정하기

React로 서비스를 개발했는데,

이때 각 페이지의 정보에 맞게 og 정보를 설정할 필요가 있었다.

다음과 같은 방법을 사용해 보았다.

 

방법 1. DOM 직접 조작하기

[React] 페이지별 메타 태그 추가

이 방식에는 다음과 같은 장점이 있다.

1. 라이브러리 의존성 없음: 별도의 라이브러리를 사용하지 않으므로, 프로젝트의 의존성을 줄일 수 있다.
2. 간단한 로직: 메타 태그를 설정하는 로직이 간단하다.

간단하므로 먼저 테스트해 보았다.

개발자 도구를 켰을 때 태그가 적절히 변경되는 것을 확인할 수 있었다.
다만 클라이언트가 로딩된 후 교체하는 것이므로 og 정보에는 영향을 줄 수 없었다.

 

방법 2. Helmet 라이브러리 이용하기

react-helmet으로 페이지별 SEO 메타태그 설정하기

이 방식은 다음과 같은 장점이 있다.

1. 코드의 가독성: JSX 형태로 메타 태그를 작성할 수 있으므로, 코드의 가독성이 더 좋다.
2. 컴포넌트의 생명 주기와 연동: react-helmet은 React 컴포넌트의 생명 주기와 연동되므로, 컴포넌트가 마운트되거나 언마운트될 때 메타 태그의 내용도 적절히 업데이트된다.
3. 서버 사이드 렌더링(SSR) 지원: react-helmet은 서버에서 렌더링되는 페이지의 메타 태그도 작성할 수 있다.

다만 firebase에서는 이 방법을 사용하기 어려웠다.

또는 React helmet 라이브러리 자체적인 문제라는 말도 있었다.

 

 

추가

현재는 대표 이미지로 썸네일을 설정하지만, 추후 다음과 같이 커스텀 이미지를 생성하는 것도 좋을 것 같다.

인프런 콘텐츠에 동적으로 생성되는 Open Graph(OG) 이미지 적용하기