dongho-log
Frontend

오픈 그래프 프로토콜에 대해서 알아보자

date
Jun 12, 2023
thumbnail
The-Open-Graph-Protocol-Guide.jpg
slug
what-is-open-graph-protocol
author
status
Public
tags
OpenGraph
TIL
summary
웹 개발을 하다 보면 만나는 메타 태그의 og: 프로퍼티는 무엇일까? 🤪
type
Post
category
Frontend
 
흔히 만나게 되는 메타 태그의 og: 프로퍼티
흔히 만나게 되는 메타 태그의 og: 프로퍼티
 
웹을 들여보다 보면 HTML 문서의 meta 태그에 og:~와 같은 형태의 프로퍼티를 흔히 만나게 된다.
처음에는 original ~ 뭐시깽이. 흑인음악을 좋아하다보니 original gang 🔫…. 인가 싶기도 했지만,
찾아보니 오픈 그래프의 줄임말이었다. 이게 뭔지 한 번 알아보자.
 

OGP (Open Graph Protocol)

Open Graph protocol
The Open Graph protocol enables any web page to become a rich object in a social graph.
Open Graph protocol
https://ogp.me/
Open Graph protocol
 
정확하게 말하면 오픈 그래프 프로토콜이라고 한다. 프로토콜이니 규약이고, 어떠한 인터넷 웹사이트 HTML 문서의 <head> → <meta> 태그 중 og:XXX가 있는 태그들을 찾아내어 보여주는 프로토콜이다. 2010년 페이스북에서 개발했다고 한다.
 
요약하자면 SNS를 통해 사이트의 URL이 공유되면 그 사이트에 대한 메타데이터를 보여주기 위한 규악이라고 할 수 있겠다.
 
어떠한 웹사이트가 OGP를 지원하면, 웹사이트에 들어가기 전 메타 태그 og: 프로퍼티 중 content를 불러와 이를 확인할 수 있다. 최근 카카오톡, 디스코드, 슬랙 등에서도 URL을 보내면 해당 페이지의 정보가 함께 담겨 보여지는 것을 확인할 수 있다.
 
카카오톡에서 OGP 지원
카카오톡에서 OGP 지원
슬랙에서 OGP 지원
슬랙에서 OGP 지원
디스코드에서 OGP 지원
디스코드에서 OGP 지원
 
‘While many different technologies and schemas exist and could be combined together, there isn't a single technology which provides enough information to richly represent any web page within the social graph. The Open Graph protocol builds on these existing technologies and gives developers one thing to implement. Developer simplicity is a key goal of the Open Graph protocol which has informed many of the technical design decisions.’ - ogp.me
“다양한 기술과 스키마가 존재하고 이를 결합할 수 있지만, 소셜 그래프 내에서 웹 페이지를 풍부하게 나타낼 정보를 제공하는 단일 기술은 없습니다. 오픈 그래프 프로토콜은 이러한 기존 기술을 기반으로 하며 개발자가 구현할 수 있는 하나의 항목을 제공합니다. 개발자의 간편성은 오픈 그래프 프로토콜의 주요 목표 중 하나이며 기술적 설계 결정에 많은 영향을 미쳤습니다.”
 

사용 방법

사용 방법은 무지 간단하다. 본인이 개발하는 웹 페이지 HTML 문서의 <head>에 <meta> 태그를 넣고 property로 og:XXX와 같이 입력해준 뒤 content 값을 넣어주면 된다.
 

메타데이터의 종류

  • Basic Metadata
    • og:title : 해당 웹사이트의 제목을 입력한다.
    • og:type : 해당 웹사이트의 종류를 입력한다. 무지 많은 타입이 있으니 공홈에서 확인하자.
      • 내 경우 ‘website’
    • og:url : 해당 오픈 그래프 객체의 URL을 적어줄 수 있다. 라우트 마다 오픈 그래프 객체 데이터는 바뀔 수 있다.
    • og:image : 해당 오픈 그래프 객체에서 보여줄 이미지 url을 입력한다. 썸네일이라고 보면 된다.
 
이외에도 Optional Metadata가 있다.
표시하고 싶은 메타데이터만 선택해서 content를 넣어주면 된다.
 
  • Optional Metadata
    • og:audio : 함께 제공되는 오디오 파일의 URL
    • og:description : 해당 그래프 객체에 대한 설명
    • og:determiner : 문장에서 오브젝트 앞에 나타낼 단어 (the, “”, a, an, auto)
    • og:locale : 사이트의 언어 (ko-KR, en-US)
    • og:locale:alternate : 사용 가능한 다른 언어, 여러 태그를 적용할 수 있다.
    • og:site_name : 세부 타이틀 (서브 네임)
    • og:video : 오브젝트 보완을 위한 비디오 URL
 
더 자세한 건 opg.me 오픈 그래프 프로토콜 오피셜 웹사이트에서 확인할 수 있다.
 
 
메타데이터를 넣어주면 사이트에 접속하지 않고도 사이트의 대략적인 정보를 파악할 수 있다.
나만 해도 구글링을 할 때, 사이트에 대한 메타데이터와 이미지가 깔끔히 정리되어 있는 사이트를 무의식적으로 선호하게 되고 실제로 접속을 하기도 한다. 내 웹사이트를 조금 더 정갈하고 깔끔하게 만들고 싶으면 사이트를 만들 때 메타데이터를 넣어주는 것이 좋다.
 

블로그에 적용해보기

이 노션 API 활용 블로그는 메타 데이터를 설정하는 MetaConfig 컴포넌트 디렉토리가 있다.
해당 컴포넌트는 <head> 태그를 동적으로 작성해서 반환하는데, 루트 디렉토리의 site.config.js 파일에 작성한 데이터를 가져와서 작성된다.
 
간단히 반환부만 확인해보자.
return (
    <Head>
      <title>{meta.title}</title>
      <meta name="robots" content="follow, index" />
      <meta charSet="UTF-8" />
      {CONFIG.seo.keywords && (
        <meta name="keywords" content={CONFIG.seo.keywords.join(", ")} />
      )}
      <meta name="description" content={meta.description} />
      {/* og */}
      <meta property="og:type" content={meta.type} />
      <meta property="og:title" content={meta.title} />
      <meta property="og:description" content={meta.description} />
      <meta property="og:url" content={meta.url} />
      {CONFIG.lang && <meta property="og:locale" content={CONFIG.lang} />}
      {CONFIG.ogImageGenerateURL && <meta property="og:image" content={CONFIG.ogImageGenerateURL} />}
      {/* metadata images
        !meta.image && CONFIG.ogImageGenerateURL && <meta property="og:image" content={CONFIG.ogImageGenerateURL} />
        meta.image && <meta property="og:image" content={meta.image} />
      */}
      
      {/* twitter */}
      <meta name="twitter:title" content={meta.title} />
      <meta name="twitter:description" content={meta.description} />
      <meta name="twitter:card" content="summary_large_image" />
      {meta.image && <meta name="twitter:image" content={meta.image} />}
      {/* post */}
      {meta.type === "Post" && (
        <>
          <meta property="article:published_time" content={meta.date} />
          <meta property="article:author" content={CONFIG.profile.name} />
        </>
      )}
    </Head>
  )
 
중간에 metadata images로 주석처리한 부분과 그 윗 라인을 작성했다.
주석 처리한 부분은 블로그 포스트의 thumbnail 이미지를 가져와서 og:image 값으로 사용하는데, 나는 이것보다 이미지를 항상 동일하게 설정하고 싶어서 그 윗 라인을 작성해서 사용했다.
 
{CONFIG.ogImageGenerateURL && <meta property="og:image" content={CONFIG.ogImageGenerateURL} />}
 
CONFIG 객체는 site.config.js 전역 설정 파일로, 해당 파일에 이미지 URL을 입력했다.
깃헙으로 메인 브랜치에 푸시하니 곧 vercel에서 빌드를 해주었다. 테스트해보자!
 

테스트

카카오톡

notion image
 
오잉? 이미지 메타데이터가 보이지 않는다!
관련해서 검색을 해보니 아래와 같은 문제가 있었다.
 
카카오톡에서는 서버 부하를 줄이기 위해 공유 데이터를 캐싱한다고 한다. 이 캐시 데이터를 직접 초기화하거나 디버그할 수 있다.
 
즉 이전에 카카오톡으로 URL을 보내면서 테스트를 했을 때 og:image는 없었으므로 캐시 데이터에 남아있지 않았던 것이다. 아래 링크로 가면 공유 URL 캐시 데이터를 초기화하고 디버그할 수 있다.
developers.kakao.com
https://developers.kakao.com/tool/debugger/sharing
 
카카오톡 공유 디버거를 사용해서 캐시 데이터를 초기화해준다!
카카오톡 공유 디버거를 사용해서 캐시 데이터를 초기화해준다!
 
나이스
나이스
다시 테스트해보니 이제 이미지가 잘 나온다.
 
 

디스코드

notion image
마찬가지로 잘 나온다.
 
profile-image
@khakiD

직관에 근거를 더하기 위해 학습하고 공유합니다.사용자 중심의 프론트엔드 개발자 카키디입니다.