🌐 오픈그래프(Open Graph)란? | 소셜 공유 미리보기 설정 방법

 

웹페이지를 페이스북이나 카카오톡 같은 SNS에서 공유할 때,
미리보기에 멋진 썸네일과 설명이 함께 보이도록 만들 수 있습니다.
그 핵심이 바로 오픈그래프(Open Graph) 설정입니다.

이번 글에서는 HTML에 오픈그래프 태그를 적용하는 방법과
SNS에서 잘 보이게 하기 위한 팁들을 정리해봤어요.

---

🔹 head 태그 안에서 할 수 있는 기본 설정

<meta name="description" content="이 페이지에 대한 간단한 설명입니다.">

• 이 description은 화면에는 표시되지 않지만,
  검색 엔진이나 일부 SNS에서 페이지를 요약할 때 사용됩니다.
• 대형 서비스같은 경우 각자 요구하는 meta 태그가 있습니다.

 

 

🔹 오픈그래프(Open Graph)란?

웹페이지를 소셜 그래프(social graph) 안의 **풍부한 미디어 객체(rich object)**로 만들어주는 프로토콜

 

📌 공식 사이트: https://ogp.me

Open Graph protocol

대표적으로 사용하는 태그는 다음과 같습니다

<meta property="og:title" content="페이지 제목">
<meta property="og:url" content="https://내사이트주소.com">
<meta property="og:type" content="website">
<meta property="og:image" content="https://내사이트.com/preview.jpg">
<meta property="og:description" content="페이지에 대한 간단한 설명입니다.">

 

🔹 각 태그 설명 정리

속성설명

og:title	공유 시 표시될 제목
og:url	공유할 페이지의 주소
og:type	페이지 타입 (일반적으로 website)
og:image	미리보기로 표시될 대표 이미지 URL
og:description	페이지에 대한 설명

 

🧪 SNS 미리보기 확인하기

구현했는데 잘 나오는지 확인하고 싶을 땐?

✔️ 페이스북 공유 디버거

👉 https://developers.facebook.com/tools/debug/

공유 디버거 - Meta for Developers

 

이곳에서 링크를 입력하고 미리보기 리프레시해보세요.
오픈그래프 태그가 제대로 인식되었는지 확인할 수 있어요.

공유 디버거 안에 url 입력

meta에 작성한 내용은 링크 미리보기로 알 수 있다.

 

⚡ 추가 팁

• 이미지 사이즈 추천: 1200 x 630px
• 카카오, 트위터 등 대형 서비스는 별도의 meta 태그를 요구하는 경우도 있으니 각 문서 참고!
• og:image에 사용하는 이미지는 반드시 **절대경로(URL)**로 지정해야 해요.

---

 

📝 마무리하며

오픈그래프 태그를 설정하면 내 웹사이트가 공유될 때 더 눈에 띄게 만들 수 있어요.
작은 코드 몇 줄로 더 많은 클릭과 유입을 만들 수 있는 팁, 꼭 적용해보시길 바랍니다!

저처럼 프론트엔드 개발을 준비하시는 분들께 조금이나마 도움이 되셨길 바랍니다 😊