[HTML] OG(Open Graph)태그 적용이 안될때

김유라·2023년 10월 24일

들어가며

특정 링크를 카카오톡 공유하기 시, 기존 페이지를 공유할때와 다른 이미지 및 텍스트를 적용할 수 있도록 적용해달라는 요청이 있었다. 기존에 구축하실때 작업해두신게 있어 참고해서 수정해봤으나 계속 기존 미리보기와 똑같이 나오기만을 반복...
어찌저찌 수정해놔도 로컬테스트도 안된다고 하고, 개발 서버에 매번 반영하기도 번거롭고 부담스러웠다. 애초에 무엇이 문제인지 잘 모르는 채로 시간을 허비했어서, 혹시라도 처음 적용해보시는 분들께 도움이 될까 하여 정리해 보았다.

📖 OG (Open Graph) 태그?

링크를 SNS 등에 공유할 때,

1) OG 태그 적용X

2) OG 태그 적용으로 URL에 대한 요약 내용 (썸네일이미지, 제목, 설명) 등이 표시된 경우

강쥐 구경?? 당장 가

2번 예시가 OG태그가 적용된 예시이다.

오픈그래프(OG, 오픈 그래프 프로토콜)란, 어떤 HTML 문서의 메타정보를 쉽게 표시하기 위해서 메타정보에 해당하는 제목, 설명, 문서의 타입, 대표 URL 등 다양한 요소들에 대해서 사람들이 통일해서 쓸 수 있도록 정의해놓은 프로토콜이다.

즉, 카카오톡같은 SNS에 내 웹사이트 링크를 붙여넣으면 미리보기를 구성할 수 있도록 해주는 html meta 태그 종류이다.

페이스북에서 처음 시작하여, 현재는 네이버 블로그, 카카오톡 등에서도 널리 사용하고 있다.
URL 링크를 올렸을 때, 사이트의 크롤러가 URL을 미리 들어가 정보를 수집할 경우, 메타데이터(meta태그)에 오픈그래프(OG)로 지정되어 있는 title, description, 이미지 등의 정보를 긁어와 표시한다.

🌈 태그 사용법

기본 태그
: meta og 태그를 사용하기 위해 HTML의 안쪽에 다음과 같이 태그를 적용해줄 수 있습니다.

<html>
  <head>
    <meta property="og:url" content=“사이트url”/>
    <meta property="og:type" content=“앱/웹_등의_타입(video.movie.website.article..)”/>
    <meta property="og:title" content=“제목”/>
    <meta property="og:description" content=“내용”/>
    <meta property="og:image" content=“이미지 주소 (http://로 시작)”/>
    
    <!-- 선택사항 (이미지 사이즈)-->
    <meta property="og:image:width" content="사이즈 숫자 지정" />
    <meta property="og:image:height" content="사이즈 숫자 지정" />
  </head>
</html>

트위터 : twitter는 자신들만의 메타태그를 따로 설정할 수 있습니다.

<head>
  <meta name="twitter:card" content="트위터 카드 타입(요약정보, 사진, 비디오)" /> 
  <meta name="twitter:title" content="콘텐츠 제목" /> 
  <meta name="twitter:description" content="웹페이지 설명" /> 
  <meta name="twitter:image" content="표시되는 이미지 " /> 
</head>

🍄 테스트 시 주의할 점

1. 캐시 삭제하기

사이트 대표 이미지를 수정했는데, 카카오톡 등에서 여전히 기존 대표 이미지가 표시되고 있다면?

더 빠른 데이터 로딩을 위한 캐시화가 원인으로, 사용자는 카카오 디벨로퍼스에서 디버거 도구를 사용해 기존 대표 이미지를 삭제해야 새로운 대표 이미지로 정상 표시된다.

[ 페이스북 공유 캐시 초기화하기 ] : https://developers.facebook.com/tools/debug/
[ 카카오톡 공유 캐시 초기화하기 ] : https://developers.kakao.com/tool/clear/og

2. ngrok을 사용하기

로컬에서 개발 중인 버전을 배포하지 않고 테스트를 해야하거나, 작업물을 올릴 개발서버가 없다면?

OG 태그를 로컬 환경에서 테스트하기 어려운 이유는, 소셜 미디어 플랫폼이 웹 페이지의 OG 태그 정보를 가져오려고 할 때, 해당 정보가 로컬 호스트 또는 개인 컴퓨터와 같은 비공개 네트워크에서 접근할 수 없기 때문이다.
이 정보는 일반적으로 웹 페이지가 인터넷을 통해 접근 가능한 실제 웹 서버에서 가져오므로 ,로컬 환경에서는 이 정보에 접근 불가능한 것..!
그러나 외부에 접속 가능한 웹 서버가 없는 경우, "ngrok"과 같은 도구를 사용하여 로컬 환경에서도 OG 태그 테스트가 가능하다.
ngrok를 통해서 내 로컬 서버를 한번 올려보겠다!! ngrok는 내 로컬호스트에 퍼블릭 URL을 부여해 주는 툴로, 이를 통해 외부에서 접속 가능하도록 하여 테스트가 가능하다.