React에서 Open Graph Protocol 설정하기

728x90

날씨가 따뜻해지고 있는 요즘 저는 회사에서 B2B용 사이트 새로 만드는 중입니다.

덕분에 웹 사이트의 기초가 되는 여러 작업들을 해 볼 수 있었는데,

오늘은 그중 사이트 URL을 공유했을 때 나오는 오픈 그래프에 대해 글을 작성하려고 합니다.

오픈 그래프(Open Graph)란?

오픈 그래프란 (줄여서 og) 사이트를 공유했을 때 접속하기 전 사이트에 대한 정보를 '미리' 확인해 볼 수 있는 미리 보기이며,

HTML 문서의 meta 태그 중 "og:XXX"가 있는 태그들을 찾아내서 보여주는 프로토콜입니다.

카카오톡이나 슬랙 같은 메신저에 링크를 공유하면 쉽게 확인할 수 있으며 소셜 미디어에 특화된 프로토콜이라고 할 수 있습니다.

(참고로 오픈 그래프에서 사용되는 오픈 그래프 프로토콜은 React처럼 페이스북에서 개발했습니다.)

왜 오픈 그래프를 사용하는가?

오픈 그래프를 사용하는 이유는 썸네일을 포함한 웹페이지 미리 보기가 제공되기 때문입니다.

이를 통해 사용자는 대략적으로 이 페이지가 어떤 내용을 다루고 있는지 쉽게 확인할 수 있으며, 실제 페이지 이동까지 이어지기가 쉽습니다.

오픈 그래프 사용이 SEO에 직접적인 영향을 주지는 않지만, 웹 사이트의 사용자 유입과 전환율에 확실한 영향을 준다는 점에서 SEO 못지않은 큰 장점을 가지고 있습니다.

Metadate 오픈 그래프 종류

기본(Basic Metadata)

og:title	웹사이트(콘텐츠) 제목 사이트의 이름은 og:site_name을 통해 표시할 수 있으므로 다른 이름 사용 가능
og:type	웹사이트(콘텐츠 미디어) 종류 명시하지 않을 경우 기본 값 website
og:image	공유했을 떄 나오는 URL 이미지 (대표 이미지) 보통 2:1 비율로 나타내며 페이스북 추천은 1.9 : 1
og:url	웹사이트 표준 URL

고급(Optional Metadata)

og:audio	함께 제공되는 오디오 파일 URL
og:description	콘텐츠의 간략한 설명 보통 2 ~ 4개의 문장으로 구성 이 설명은 링크가 공유된 곳 title 아래에 표시
og:determiner	문장에서 오브젝트 앞에 나타낼 단어(관사: a,an,the,"",auto) 한글에서는 상관없으며 기본값은 공백
og:locale	사이트 언어 기본값은 en_US이며 링크에서 다른 나라 확인 가능 (한국은 ko_KR)
og:locale:alternate	페이지에 사용가능한 다른 언어
og:site_name	사이트의 세부이름 (Title보다 더 작은 개념)
og:video	오브젝트 보완을 위한 비디오 URL

구조화 속성(Structured Properties)

og:image:url	og:image와 동일
og:image:secure_url	https접속이 필요할 경우 이동할 https 주소
og:image:type	이미지 MIME 타입
og:image:width	width 크기
og:image:height	height 크기
og:image:alt	이미지에 대한 설명 (페이지를 og:image로 지정할 경우 필요)

로컬 환경에서 오픈 그래프를 테스트하는 방법

오픈 그래프가 잘 적용 됐는지 로컬 환경에서 테스트하고 싶지만, 배포가 되지 않으면 확인할 수 없습니다.

그래서 다른 방법을 사용해야 하는데 저는 크롬 익스텐션을 사용했습니다.

사용 방법은 크롬 브라우저에서 localhost 환경에 접속 후, 익스텐션을 실행시켜 주면 firebase에 임시 배포 된(15분 정도) 주소가 나오는데 이를 확인하면 됩니다. (저는 테스트에 페이스북 오픈 그래프 테스터를 이용했습니다)

만약 아래 사진처럼 '공유된 적이 없는 URL입니다'가 나온다면, 이는 페이스북 내에서 이 링크가 사용된 적이 없다는 것이지 에러가 아니기 때문에 '새 정보 가져오기'를 클릭하면 됩니다.

SPA에서의 문제점과 해결 방법

SPA는 하나의 index.html을 사용하는 것과 같기 때문에 라우터를 사용하여 URI 가 변경되는 경우,

해당 페이지의 메타 데이터가 정확하게 명시되어 있지 않음으로 og가 정상적으로 작동하지 않는 문제점이 있습니다.

(ex. https://sdfafsdaf.com 은 정상적으로 og가 작동하지만 https://sdfafsdaf.com/signup/ 은 아무런 정보를 주지 않게 됩니다.)

리액트에서는 react-helmet 라이브러리를 사용해서 이 문제를 해결할 수 있는데, 그 방법을 간략하게 작성해 보겠습니다.

1. react-helmet-async 설치

$ yarn add react-helmet-async

2. 감싸주기

우선, Helmet 컴포넌트는 HelmetProvider 컴포넌트 안에 있어야 하기 때문에 App 컴포넌트를 <HelmetProvider>로 감싸줍니다.

// Index.js
import { HelmetProvider } from 'react-helmet-async';

ReactDOM.render(
	...
      <HelmetProvider>
        <App />
      </HelmetProvider>
	...
  document.getElementById(‘root‘),
);

그 후 Helmet 컴포넌트에 원하는 내용을 작성하면 됩니다.

(저는 meta 용 컴포넌트를 따로 만들어 분리했습니다.)

// App.js
import { Helmet } from 'react-helmet-async';

const App = () => {
  return (
    <>
      <Helmet>
          <title>A fancy webpage</title>
          <link rel="notImportant" href="https://www.chipotle.com" />
          <meta name="whatever" value="notImportant" />
          <link rel="canonical" href="https://www.tacobell.com" />
          <meta property="og:title" content="A very important title"/>
        </Helmet>
	...
    </>
  );
};

* 주의해야 할 점 *

더 깊숙한 곳에 위치한 Helmet이 우선순위가 더 높다.
index.html에 메타태그가 이미 정의되어 있는 경우, App.js에 Helmet으로 메타태그를 정의하게 되면 중복이 되기 때문에 index.html의 내용을 제거해야 합니다.

끝