728x90
Open Graph(OG) 프로토콜은 웹페이지가 소셜 미디어(예: Facebook, Twitter, LinkedIn, KakaoTalk 등)에서 공유될 때, 어떻게 표시될지를 제어하는 메타 태그(Meta Tags) 규칙입니다. OG 태그를 사용하면 웹사이트 링크를 공유할 때, 제목, 설명, 이미지, URL 등을 원하는 대로 지정할 수 있어 더 매력적인 미리보기를 제공할 수 있습니다.
📌 Open Graph 태그의 주요 속성
| 태그 | 설명 |
| og:title | 공유될 페이지의 제목 |
| og:type | 페이지의 유형 (예: website, article, video.movie 등) |
| og:image | 미리보기 이미지 URL |
| og:url | 공유될 페이지의 URL |
| og:description | 페이지의 설명 |
| og:site_name | 사이트의 이름 |
| og:locale | 언어 및 지역 (예: ko_KR for 한국어) |
📌 추가 속성
- og:image:width / og:image:height: 공유 이미지의 크기를 명시적으로 지정
- og:image:type: 이미지의 MIME 타입 (예: image/png, image/jpeg)
🛠 Open Graph 태그 적용 예제
HTML 문서의 <head> 태그 안에 다음과 같이 OG 태그를 추가하면 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Open Graph 예제</title>
<!-- Open Graph meta tags -->
<meta property="og:title" content="내 블로그의 멋진 글 제목">
<meta property="og:type" content="article">
<meta property="og:image" content="https://example.com/images/preview.jpg">
<meta property="og:url" content="https://example.com/my-awesome-post">
<meta property="og:description" content="이 글은 Open Graph를 활용하는 방법을 소개합니다.">
<meta property="og:site_name" content="내 블로그">
<meta property="og:locale" content="ko_KR">
<!-- 이미지 크기 지정 (선택) -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
</head>
<body>
<h1>Open Graph 태그 적용하기</h1>
</body>
</html>
🎯 Open Graph 적용 후 확인 방법
✅ 1. Facebook Debugger를 활용한 확인
Facebook 공유 디버거에서 URL을 입력하면 OG 태그가 올바르게 적용되었는지 확인할 수 있습니다.
- 위 링크에 접속
- OG 태그를 추가한 웹페이지의 URL 입력
- "디버그(Debug)" 버튼 클릭
- 데이터가 갱신되지 않으면 "다시 스크랩(Rescrape)" 버튼 클릭
✅ 2. Twitter Card Validator를 활용한 확인
트위터에서 공유될 미리보기를 확인하려면 Twitter Card Validator를 사용하면 됩니다.
🔥 Open Graph 적용 시 주의할 점
- 이미지는 1200x630 크기로 준비
- Facebook, Twitter에서 가장 잘 보이는 추천 크기입니다.
- 너무 작은 이미지는 표시되지 않을 수 있음.
- og:url은 정적인 URL을 유지
- 동적인 URL을 사용하면 미리보기가 올바르게 저장되지 않을 수 있음.
- og:type은 페이지 유형에 맞게 설정
- website: 일반 웹페이지
- article: 블로그 글이나 뉴스
- video.movie: 동영상 페이지
🚀 결론
Open Graph 태그를 활용하면 소셜 미디어에서 웹페이지가 어떻게 보일지를 제어할 수 있어 가독성과 클릭률을 높이는 효과가 있습니다.
특히, SNS 마케팅을 진행하거나 블로그 포스트를 공유할 때, OG 태그를 잘 설정하면 더 많은 방문자를 유도할 수 있습니다.
LIST
'Develop' 카테고리의 다른 글
| Spring Framework의 Scheduled 스케줄 동적으로 실행 방법 (4) | 2025.02.17 |
|---|---|
| 리눅스 서버 시간 확인하는 다양한 방법 (1) | 2025.02.14 |
| TinyMCE (타이니MCE) 에디터 fullscreen 사이즈 변경 (0) | 2025.02.13 |
| [PostgreSQL] 다중 컬럼 IN 쿼리 사용 방법 (0) | 2025.02.12 |
| [JavaScript] 변수 선언문 완벽 정리: var, let, const 차이점과 주의점 (0) | 2025.02.12 |