OG 태그 설정
💬 카카오톡
My Website
내 웹사이트 제목
웹사이트에 대한 설명입니다. SNS에서 공유될 때 이 텍스트가 표시됩니다.
📘 페이스북
example.com
내 웹사이트 제목
웹사이트에 대한 설명입니다. SNS에서 공유될 때 이 텍스트가 표시됩니다.
𝕏 트위터/X
내 웹사이트 제목
웹사이트에 대한 설명입니다. SNS에서 공유될 때 이 텍스트가 표시됩니다.
🔗 example.com
메타 태그 코드
<meta property="og:title" content="내 웹사이트 제목" /> <meta property="og:description" content="웹사이트에 대한 설명입니다. SNS에서 공유될 때 이 텍스트가 표시됩니다." /> <meta property="og:image" content="https://placehold.co/1200x630/3b82f6/ffffff?text=OG+Image" /> <meta property="og:url" content="https://example.com" /> <meta property="og:site_name" content="My Website" /> <meta property="og:type" content="website" /> <!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="내 웹사이트 제목" /> <meta name="twitter:description" content="웹사이트에 대한 설명입니다. SNS에서 공유될 때 이 텍스트가 표시됩니다." /> <meta name="twitter:image" content="https://placehold.co/1200x630/3b82f6/ffffff?text=OG+Image" />
📱 OG 미리보기란?
Open Graph(OG) 태그는 웹페이지가 소셜 미디어에서 공유될 때 표시되는 제목, 설명, 이미지를 정의합니다. 이 도구를 사용하면 카카오톡, 페이스북, 트위터 등 각 플랫폼에서 링크가 어떻게 미리보기 되는지 실시간으로 확인할 수 있습니다. 설정한 내용은 바로 복사 가능한 메타 태그 코드로 생성되어 웹사이트 <head> 섹션에 붙여넣기만 하면 됩니다.
📋 주요 OG 태그
| 태그 | 설명 | 권장 값 |
|---|---|---|
| og:title | 페이지 제목 | 60자 이내 |
| og:description | 페이지 설명 | 160자 이내 |
| og:image | 미리보기 이미지 | 1200×630px |
| og:url | 정식 URL | 절대 경로 |
| og:type | 콘텐츠 유형 | website, article 등 |
💡 OG 이미지 최적화 팁
- 권장 크기: 1200×630px (1.91:1 비율)로 대부분의 플랫폼에 최적화
- 파일 형식: JPG, PNG 사용 (PNG는 투명 배경 가능)
- 파일 크기: 5MB 이하, 1MB 미만 권장
- 중요 내용 중앙: 플랫폼마다 크롭 영역이 다를 수 있음
- 텍스트 포함 시: 20% 이하로 유지 (Facebook 정책)
자주 묻는 질문
OG 태그를 수정했는데 왜 미리보기가 안 바뀌나요?▼
플랫폼들은 OG 정보를 캐싱합니다. Facebook은 Sharing Debugger, Twitter는 Card Validator로 캐시를 갱신할 수 있습니다. 카카오톡은 초기화 도구를 제공합니다.
og:image는 반드시 절대 URL이어야 하나요?▼
네, 상대 경로는 인식되지 않습니다. https://로 시작하는 전체 URL을 사용해야 합니다.
Twitter Card와 OG 태그를 둘 다 넣어야 하나요?▼
트위터는 og 태그도 읽지만, twitter:card 등 전용 태그가 있으면 우선 적용됩니다. 최적의 결과를 위해 둘 다 넣는 것을 권장합니다.