SOYOYU
블로그로 돌아가기기술 SEO

OG 태그 실수 TOP 10: 소셜 미리보기가 안 나오는 이유와 해결법

Facebook, Twitter, LinkedIn에서 링크 미리보기가 제대로 안 나오는 10가지 원인과 각각의 해결 방법을 상세히 안내합니다.

SEOX2026년 4월 4일6 min read
OG 태그Open Graph소셜 미리보기메타 태그SNS 공유

TL;DR: 소셜 미리보기가 왜 안 나올까?

  • OG 태그 누락이 가장 흔한 원인 — og:title, og:image, og:url 필수
  • 이미지 크기/형식 오류 — 1200x630px, JPEG/PNG만 지원
  • 캐시 문제 — 플랫폼별 디버거로 캐시 갱신 필요
  • JavaScript 렌더링 — 소셜 크롤러는 JS를 실행하지 못함

콘텐츠를 SNS에 공유했는데 이미지가 안 나오거나, 엉뚱한 제목이 표시된 경험이 있으신가요? 대부분 OG 태그(Open Graph 메타 태그) 설정 문제입니다.

출처: Rank Math OG Image Guide ↗

OG 태그가 누락되거나 잘못 구성되면 소셜 미디어 링크 미리보기가 올바르게 표시되지 않음

이 글에서는 소셜 미리보기가 제대로 표시되지 않는 10가지 주요 원인과 각각의 해결 방법을 살펴봅니다.

OG 태그란?

Open Graph 프로토콜은 Facebook이 2010년에 만든 메타 태그 표준입니다. 웹페이지가 소셜 미디어에서 어떻게 표시될지 정의합니다.

출처: The Open Graph Protocol ↗

Open Graph 프로토콜은 웹페이지가 소셜 그래프에서 리치 오브젝트가 될 수 있게 해주는 표준

기본 OG 태그 구조:

<head>
  <meta property="og:title" content="페이지 제목">
  <meta property="og:description" content="페이지 설명">
  <meta property="og:image" content="https://example.com/image.jpg">
  <meta property="og:url" content="https://example.com/page">
  <meta property="og:type" content="article">
</head>

실수 1: 필수 OG 태그 누락

문제: og:title, og:image, og:url 중 하나라도 없음

출처: Blog2Social Troubleshooting ↗

OG 태그가 누락되거나 충돌하면 소셜 미디어 게시물에 이미지가 표시되지 않거나 누락됨

필수 OG 태그:

태그역할필수 여부
og:title공유 시 표시되는 제목필수
og:image미리보기 이미지필수
og:url정규 URL필수
og:description설명 텍스트권장
og:type콘텐츠 유형권장

해결 방법

모든 페이지에 최소 4개의 OG 태그를 포함하세요:

<meta property="og:title" content="SEO 가이드 2026">
<meta property="og:description" content="최신 SEO 전략을 배워보세요">
<meta property="og:image" content="https://example.com/seo-guide.jpg">
<meta property="og:url" content="https://example.com/seo-guide">

실수 2: 이미지 크기/형식 오류

문제: 이미지가 너무 작거나 지원하지 않는 형식

출처: Sangfroid Web Design ↗

Facebook은 공식적으로 JPEG, PNG, GIF 형식만 지원하며, 권장 크기는 1200px x 630px

플랫폼별 이미지 요구사항:

플랫폼권장 크기최소 크기비율
Facebook1200x630600x3151.91:1
Twitter1200x628300x1571.91:1
LinkedIn1200x6271200x6271.91:1
카카오톡800x400200x2002:1

해결 방법

  1. 이미지 크기: 1200x630px 이상 사용
  2. 파일 형식: JPEG 또는 PNG 권장
  3. 파일 용량: 8MB 이하(Facebook 기준)
  4. 절대 URL: 상대 경로가 아닌 전체 URL 사용

실수 3: 상대 URL 사용

문제: og:image에 상대 경로 사용

<!-- 잘못된 예시 -->
<meta property="og:image" content="/images/thumbnail.jpg">

<!-- 올바른 예시 -->
<meta property="og:image" content="https://example.com/images/thumbnail.jpg">

소셜 미디어 크롤러는 절대 URL만 인식합니다. 상대 경로를 사용하면 이미지를 찾지 못합니다.

해결 방법

모든 OG 태그에 전체 URL을 사용하세요:

<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/image.jpg">

실수 4: 중복 OG 태그

문제: 여러 플러그인에서 OG 태그 중복 생성

출처: WP Experts OG Guide ↗

Yoast, Jetpack 등 여러 플러그인이 동시에 OG 태그를 설정하면 중복 오류 발생

중복 상황 예시:

<!-- Yoast에서 생성 -->
<meta property="og:title" content="제목 A">

<!-- 테마에서 생성 -->
<meta property="og:title" content="제목 B">

해결 방법

  1. 소스 코드 확인: 페이지 소스에서 OG 태그 개수 확인
  2. 단일 소스: 하나의 플러그인/테마에서만 OG 태그 생성
  3. 충돌 플러그인: 불필요한 플러그인의 OG 기능 비활성화

실수 5: JavaScript 렌더링 문제

문제: OG 태그가 JavaScript로 동적 생성

출처: Prerender Link Preview Fix ↗

LinkedIn, Facebook, Twitter, Discord, Slack의 크롤러는 JavaScript를 실행하지 않아 동적 생성된 OG 태그를 볼 수 없음

React, Vue, Angular 같은 SPA 프레임워크에서 OG 태그를 클라이언트 사이드에서 생성하면 소셜 크롤러가 읽지 못합니다.

해결 방법

  1. SSR 적용: Next.js, Nuxt.js 등으로 서버 사이드 렌더링
  2. Prerendering: 크롤러에게 정적 HTML 제공
  3. 정적 HTML: OG 태그는 초기 HTML에 포함

실수 6: 캐시 문제

문제: 이전 OG 정보가 캐시되어 업데이트 안 됨

출처: Digital Dynamo OG Guide ↗

Facebook은 링크 미리보기를 무기한 캐시하므로, 메타데이터 변경 후에도 이전 미리보기가 표시됨

OG 태그를 수정해도 이미 공유된 링크의 미리보기는 자동 갱신되지 않습니다.

해결 방법

플랫폼별 캐시 갱신 도구:

플랫폼디버거 도구URL
FacebookSharing Debuggerdevelopers.facebook.com/tools/debug
Twitter/XCard Validatorcards-dev.twitter.com/validator
LinkedInPost Inspectorlinkedin.com/post-inspector

Facebook 캐시 갱신 방법:

  1. Sharing Debugger 접속
  2. URL 입력
  3. "Scrape Again" 클릭

실수 7: og:url 누락

문제: og:url 태그가 없어 메타 정보 연결 실패

출처: DEV Community OG Guide ↗

og:url 메타 태그가 없으면 소셜 미디어 플랫폼이 메타 정보를 특정 페이지에 제대로 연결하지 못함

og:url은 정규 URL을 지정하여 중복 공유를 방지하고 정확한 페이지 연결을 보장합니다.

해결 방법

<meta property="og:url" content="https://example.com/page">
  • HTTPS 사용
  • 쿼리 파라미터 제외
  • 정규 URL과 일치

실수 8: 제목/설명 길이 초과

문제: og:title이 너무 길어 잘림

출처: ValidBot OG Guide ↗

og:title은 50자 이내로 유지해야 다양한 플랫폼에서 올바르게 표시됨

권장 길이:

태그권장 길이최대 길이
og:title50자60자
og:description100자200자

해결 방법

<!-- 너무 긴 제목 -->
<meta property="og:title" content="2026년 최신 SEO 전략 완벽 가이드: 초보자부터 전문가까지 모두를 위한 종합 안내서">

<!-- 적절한 길이 -->
<meta property="og:title" content="2026년 SEO 전략 완벽 가이드">

실수 9: 태그 위치 오류

문제: OG 태그가 head 섹션 밖에 있음

출처: CSS-Tricks Meta Tags Guide ↗

메타 태그의 잘못된 구문, 위치 또는 들여쓰기가 소셜 미디어 플랫폼의 태그 해석 오류를 유발

잘못된 위치:

<html>
<head>
  <title>페이지 제목</title>
</head>
<body>
  <!-- OG 태그가 body 안에 있음 - 잘못됨 -->
  <meta property="og:title" content="제목">
</body>
</html>

해결 방법

모든 OG 태그는 반드시 <head> 섹션 안에 배치:

<head>
  <meta charset="UTF-8">
  <title>페이지 제목</title>

  <!-- OG 태그는 head 안에 -->
  <meta property="og:title" content="제목">
  <meta property="og:image" content="https://example.com/image.jpg">
</head>

실수 10: 이미지 URL 접근 불가

문제: og:image URL이 차단되거나 존재하지 않음

소셜 미디어 크롤러가 이미지에 접근할 수 없으면 미리보기가 표시되지 않습니다.

일반적인 원인:

원인증상해결
404 에러이미지 없음유효한 URL 확인
robots.txt 차단크롤러 접근 불가이미지 경로 허용
CDN 문제간헐적 접근 실패CDN 설정 점검
인증 필요로그인 없이 접근 불가공개 접근 허용

해결 방법

  1. URL 직접 접속: 브라우저에서 이미지 URL 확인
  2. robots.txt 확인: 이미지 경로가 차단되지 않았는지 점검
  3. HTTPS 사용: HTTP 이미지는 일부 플랫폼에서 차단

OG 태그 점검 도구

도구용도URL
OpenGraph.xyzOG 태그 미리보기 및 검증opengraph.xyz
Open Graph ValidatorOG 태그 문법 검사orcascan.com
줍줍분석기OG 태그 포함 종합 SEO 진단zup.ideachefs.com

자주 묻는 질문

Q1: OG 태그와 Twitter Card 태그를 둘 다 써야 하나요?

권장합니다. Twitter는 Twitter Card 태그를 우선 사용하지만, 없으면 OG 태그를 대체로 사용합니다. 최적의 결과를 위해 둘 다 설정하세요.

Q2: OG 태그 수정 후 바로 반영되나요?

아니요. 각 플랫폼의 디버거 도구로 캐시를 갱신해야 합니다. Facebook은 Sharing Debugger, Twitter는 Card Validator를 사용하세요.

Q3: 카카오톡 미리보기는 어떻게 설정하나요?

카카오톡도 OG 태그를 사용합니다. 이미지 크기는 800x400px 이상을 권장하며, 카카오 디버거로 캐시를 갱신할 수 있습니다.

Q4: 워드프레스에서 OG 태그 설정은 어떻게 하나요?

Yoast SEO, Rank Math 같은 SEO 플러그인을 사용하면 자동으로 OG 태그가 설정됩니다. 단, 플러그인 간 충돌에 주의하세요.

Q5: OG 태그가 SEO에도 영향을 주나요?

OG 태그는 검색 순위에 직접적인 영향을 주지 않습니다. 그러나 소셜 공유 시 클릭률을 높여 간접적으로 트래픽 증가에 기여합니다.

마무리

소셜 미리보기 문제의 원인을 정리하면:

  1. 태그 문제: 필수 태그 누락, 중복, 위치 오류
  2. 이미지 문제: 크기, 형식, URL 접근성
  3. 기술 문제: JavaScript 렌더링, 캐시
  4. 형식 문제: 상대 URL, 길이 초과

OG 태그 최적화는 소셜 트래픽 확보의 기본입니다. 잘 설정된 OG 태그는 공유 시 클릭률을 높이고, 브랜드 인지도 향상에 기여합니다.

더 자세한 상담이 필요하시면 XEO 무료 진단을 신청하세요. 사이트의 OG 태그와 소셜 미리보기를 점검하고 개선 방안을 제안해드립니다.

Sources

다른 글 읽기

기술 SEO

구조화 데이터 오류 TOP 10과 해결법: 리치 결과를 살리는 스키마 마크업 수정 가이드

JSON-LD 구문 오류부터 필수 속성 누락까지, Google Search Console에서 자주 발견되는 구조화 데이터 오류 10가지와 각각의 해결 방법을 상세히 안내합니다.

7 min read
GEO

ChatGPT가 읽을 수 없는 웹사이트의 특징: AI 크롤러 접근성 점검 가이드

GPTBot, ClaudeBot 등 AI 크롤러가 웹사이트 콘텐츠를 읽지 못하는 7가지 기술적 원인과 해결 방법을 상세히 분석합니다.

6 min read
Case Study

[해외 사례 분석] 테크니컬 SEO 최적화로 AI 인용률 3배 증가시킨 방법

구조화 데이터와 테크니컬 SEO 최적화를 통해 AI 검색 인용률을 2.8배 높인 실제 해외 사례를 분석합니다. 적용 가능한 구체적인 전략과 타임라인을 공유합니다.

8 min read

검색 최적화가 필요하신가요?

무료 상담을 통해 비즈니스에 맞는 최적화 전략을 확인하세요.

무료 상담 신청서비스 보기