IT회사에서 성장하는 이야기

[기획노트] 링크 공유 기능 기획 이것만 기억하세요! - OG meta tag 본문

카테고리 없음

[기획노트] 링크 공유 기능 기획 이것만 기억하세요! - OG meta tag

somsamtam 2025. 3. 24. 23:07

링크 공유 기능은 사용자가 콘텐츠를 외부에 퍼뜨려 유입을 확장하는 핵심 수단입니다.
OG 태그를 활용해 썸네일과 미리보기를 최적화하여 클릭을 유도할 수 있어서 고객 확보 목적으로 필요한 기능 중 하나입니다.
레퍼럴 파라미터를 추가하면 추천인 추적도 가능해 마케팅 효과까지 극대화할 수 있습니다.

 

최근 2주 전 링크를 외부 채널에 공유하는 기능을 기획하고 개발했는데요, 워낙 보편적인 기능이다보니 경험이 없는 분들에게 도움이 될까하여 해당 기능에 대한 PRD 일부를 소개해보겠습니다. 

 

"메타태그(meta tag)" 한 가지만 기억하시면 됩니다. 

 

🎯 메타태그(meta tag)가 뭐죠?

👉 메타태그는 HTML 문서의 <head> 안에 들어가는 웹페이지의 정보(메타데이터)를 담는 태그입니다.

  • 사용자에게는 보이지 않지만,
  • 검색엔진(Google 등), SNS(Facebook, Pinterest 등), 브라우저가 이 정보를 읽고
    페이지를 어떻게 표시할지 결정하는 요소입니다. 
  • 미리보기 이미지, 제목, 설명이 의도대로 잘 노출되도록 하죠.

 

🎯 메타태그(meta tag)종류는?

메타태그는 목적에 맞게 여러 개를 동시에 쓸 수 있습니다.
SEO, SNS 공유, 브라우저 설정 등 각 목적에 맞는 메타태그들을 조합해서 사용해요.

아래는 메타태그의 종류예요.

📚 메타태그 종류 정리

 

🔹 1. 기본 메타태그 (SEO, 브라우저용)

SEO를 하거나 웹사이트가 검색결과에 잘 잡히도록 핵심 키워드 중심으로 기본 메타태그를 사용합니다. 

<meta charset="UTF-8"> 문자 인코딩 설정 (한글 깨짐 방지)
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 모바일 반응형 설정
<meta name="description" content="이 페이지는 …"> 검색엔진에 표시되는 설명 (SEO 중요)
<meta name="keywords" content="키워드1, 키워드2"> 검색 키워드 (요즘은 덜 중요함)
<meta name="robots" content="index, follow"> 검색엔진 크롤링 허용 여부

🔹 2. OG 메타태그 (SNS 공유용 – Open Graph)

페이스북, 카카오톡, Pinterest 등에서 공유할 때 사용합니다. 

<meta property="og:type" content="website"> 콘텐츠 유형 (article, website 등)
<meta property="og:title" content="제목"> 공유될 제목
<meta property="og:description" content="설명"> 공유될 설명
<meta property="og:image" content="https://..."> 공유될 썸네일 이미지 URL
<meta property="og:url" content="https://..."> 공유 링크 URL

 

✅ og:로 시작하는 건 전부 Open Graph 태그예요.

 

 

자 이제 간단히 PRD 핵심 요구사항 일부를 살펴볼게요.

백앤드가 관여할 게 없어서 생각보다 스펙이 크지 않은 기능이에요.

 

📌 2. 주요 기능 정의

핵심기능 요구사항 상세 논의 필요
링크 생성 콘텐츠 고유 식별값(ID)을 기반으로 공유 URL 생성  
OG 메타태그 삽입 공유 URL에 대해 SNS 플랫폼에서 미리보기 정보를 불러올 수 있도록
<meta property="og:*"> 태그 구성

: type, title, description, image, url		 이미지 비율 대응 스콥 결정 (1:1? 가로형?)

아래 설정을 통해 이미지 대응을 할 수 있음
og:image,
og:image:width,
og:image:height
SNS 플랫폼별 대응 Pinterest, Facebook, KakaoTalk 등 플랫폼별 이미지 비율 및 캐시 정책 대응 SDK 사용 여부 결정
공유 버튼 UI 공유 버튼 아이콘  
URL 복사 기능 링크 복사 기능 (클립보드 API) 웹앱인 경우, 웹에서 처리할지 브릿지로 앱에서 구현할지 결정
이미지 최적화 공유 썸네일 이미지의 사이즈 및 비율 대응 (2:3, 1.91:1 등)  

🎯 어려운 게 있다면?

이미지 별 사이즈 대응일 수 있는데요, 아래처럼 조건을 잘 정의하면 어렵지 않습니다. 

 

✅ SDK 없이 정사각형 이미지로 공유하는 법

1. HTML <head>에 Open Graph 메타태그 삽입

 
<meta property="og:title" content="공유될 제목" /> 
<meta property="og:description" content="공유될 설명" /> 
<meta property="og:image" content="https://yourdomain.com/images/share-square.jpg" /> 
<meta property="og:image:width" content="800" /> 
<meta property="og:image:height" content="800" /> 
<meta property="og:url" content="https://yourdomain.com/your-page" />

 

 

🔗 추천 아티클 목록

 

1. Open Graph Protocol 공식 문서 (ogp.me)

  • OG 태그의 구조, 필수 태그, 미리보기 구성 요소 등 기본기를 익힐 수 있는 공식 문서
  • 간결하지만 핵심만 담겨 있어 빠르게 이해 가능

2. Facebook Sharing Debugger 사용법 (Meta)

  • OG 태그를 테스트하고 캐시를 강제로 새로고침할 수 있는 도구
  • 공유 시 미리보기가 안 나올 때 디버깅에 필수

3. 카카오링크 OG 태그 적용 가이드 (Kakao Developers)

  • SDK 없이 OG 태그로 링크 공유할 때 어떻게 대응해야 하는지 자세히 설명되어 있음
  • 모바일 환경 대응, 썸네일 크기 조건 등도 확인 가능

4. Pinterest Link Sharing & Rich Pins 가이드

  • Pinterest에서 OG 태그를 인식하는 방식과 이미지 비율 최적화 전략 설명
  • 특히 2:3 비율, 이미지 사이즈 조건 등 명확하게 나와 있음

5. How to Create a Social Media Sharing Preview (CSS-Tricks)

  • 실제 HTML 예시와 함께 다양한 플랫폼용 OG/Twitter Card 태그 작성법을 알려줌
  • 실무에서 그대로 가져다 써도 좋을 만큼 유용

 

 

간단한 기능 기획 경험을 공유했습니다.

어렵지 않은 기능이니 여러 아티클을 참고하시면 좋겠습니다.