반응형
티스토리 블로그에 Open Graph 태그 적용하는 법
Open Graph트위터 카드OG 이미지미리보기애드센스 승인
OG가 중요한 이유: CTR·브랜딩·공유
OG는 SNS·메신저에 공유될 때 보이는 제목·설명·이미지를 정의합니다. 썸네일 가독성과 메시지 일관성만 맞춰도 링크 CTR과 재방문이 크게 달라집니다.
핵심: “한눈에 이해”되는 제목 12~16자, 대비 높은 이미지, 요약 120~150자를 유지하세요.
적용 위치: 티스토리 스킨/개별 글
- 스킨 전체: 관리자 → 꾸미기 → 스킨 편집에서
<head>공통 메타 삽입. - 개별 글: 포스트 전용 OG(제목/설명/이미지)를 템플릿 변수로 바인딩.
<!-- 스킨 head 공통 -->
<meta property="og:site_name" content="블로그 이름">
<meta name="twitter:card" content="summary_large_image">
<!-- 글 전용(가능 시 바인딩) -->
<meta property="og:title" content="{postTitle}">
<meta property="og:description" content="{postDescription}">
<meta property="og:image" content="{postOgImage}">
<meta property="og:url" content="{postUrl}">이미지 규격/텍스트 가이드
- 규격: 기본 1200×630, 정사각 1080×1080(인스타 재활용), 세로 1080×1350(카드).
- 포맷: WebP(기본), PNG는 투명/아이콘용.
- 텍스트: 10~16자, 고대비(짙은 배경+흰 글자), 한글 오탈자 주의.
- 워터마크: 우하단 60~70% 투명도로 URL/로고.
<img src="/og/og-sample-1200x630.webp" width="1200" height="630" alt="티스토리 OG 샘플" loading="lazy" />
검증·캐시 초기화 방법
- 검증: 페이스북 공유 디버거, X 카드 밸리데이터, 메신저 미리보기로 확인.
- 캐시: 이미지 교체 후 URL 버전업(
?v=20251013) 또는 파일명 교체. - 확인: 실제 공유 링크로 썸네일/제목이 즉시 반영되는지 테스트.
팁: 썸네일이 안 바뀌면 서버·CDN 캐시와 소셜 캐시를 모두 초기화하세요.
문제 해결(깨짐/한글·인코딩/리디렉트)
- 이미지 깨짐: 절대경로 사용, 200 OK 확인, 용량 300KB~1MB 권장.
- 한글 깨짐:
<meta charset="utf-8">확인, 제목/설명은 일반 텍스트로. - 리디렉트: og:url ↔ canonical ↔ 실제 랜딩이 일치하도록 조정.
- 중복 태그: 스킨/플러그인 중복 삽입 주의(하나만 남기기).
발행 전 체크리스트
- og:title/description이 30~35자·120~150자로 맞는가?
- og:image 1200×630(WebP)·고대비 타이틀·워터마크가 준비됐는가?
- og:url=canonical=실제 공유 URL이 일치하는가?
- twitter:card/title/description/image가 세트로 들어갔는가?
- 검증도구/메신저 미리보기에서 정상 노출되는가?
최종 정리
OG/트위터 카드는 검색 외 유입을 키우는 첫인상입니다. 오늘 템플릿을 스킨에 고정하고, 글마다 제목/설명/이미지를 채널에 맞춰 조정하면 SNS·메신저에서의 CTR과 체류가 함께 개선됩니다.
반응형
'블로그 운영 노하우' 카테고리의 다른 글
| AI 탐지 우회용 자연어 리라이팅 실험 결과(윤리·품질 중심) (0) | 2025.10.14 |
|---|---|
| 월간 검색 통계로 티스토리 글 주제 재구성하기 (0) | 2025.10.13 |
| 블로그 시리즈 구성으로 구독 유도하는 법 (0) | 2025.10.13 |
| 티스토리 SNS 연동 트래픽 유입 실험 (0) | 2025.10.12 |
| 댓글 유도형 글쓰기 방법 (0) | 2025.10.11 |