2022년 7월 24일


OG (Open Graph) tag란 무엇일까?

‘대부분의 컨텐츠는 URL로 공유되는데, 컨텐츠가 표시되는 방식을 관리하기 위해 오픈 그래프 태그로 웹 사이트를 마크업하는 것’ 이라고 정의하고 있어요.

또는 SNS에 게시할 때 최적화된 데이터(해당 컨텐츠의 요약 내용, 미리보기 화면 생성)라고 할 수 있고,

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

  1. URL 링크 공유 시 사이트의 크롤러가 URL에 미리 들어가 정보를 수집

  2. 메타 데이터(HTML - meta tag)에 오픈그래프로 지정되어 있는 title, description, image 등 정보를 긁어봐 표시 기본 메타 데이터: title(제목) / description(설명) / iamge(이미지) / URL(표준 링크)

    *표준링크란? 같은 컨텐츠를 가리키는 여러 개의 URL 중 대표 URL (원칙적으로 하나의 대상은 단 하나의 링크만으로 참조되어야 하기 때문)

HTML 작성 시 meta tag를 통해 설정해요.

*meta tag란? HTML 문서가 어떠한 내용을 담고 있는지, 문서의 키워드, 누가 만들었는지 등 문서 자체의 특성을 담고 있는 것

사이트의 제목, 설명, 이미지 등 포털사이트 API 로봇이 크롤링(스크래핑) 할 때 우리가 지정 해놓은 사이트의 부가적인 설명이 담긴 내용을 긁어갈 수 있도록 하는 역할

즉, 브라우저 또는 검색 로봇에게 해당 페이지의 정보를 알려주는 기능

공유 시 나오는 카드의 이미지 사이즈 설정 (1200px X 630px, 1.91:1 비율 유지 권장)

(⚠️ 만약 수정이 이루어진 후에도 해당 내용이 바뀌지 않는 경우가 존재해요. 원인은 캐싱 되었기 때문!)

캐싱(caching)이란? 반복적으로 호출되는 특정한 데이터를 캐시 메모리에 임시로 저장, 다음 호출 시 빠르게 해당 데이터를 공급해주는 기능