← Blog

Open Graph 태그의 일반적인 실수

숙련된 개발자라도 이러한 OG 태그 실수를 저지릅니다. 가장 일반적인 문제와 각 문제를 해결하는 방법은 다음과 같습니다.

OG 태그에 실수가 있는지 확인하세요

Proovd 사용 — URL을 붙여넣고 X, LinkedIn, Slack, Discord, WhatsApp 및 Reddit에서 URL이 어떻게 보이는지 즉시 확인하세요.

빠른 답변

  • og:image에 대한 상대 URL 사용 — 플랫폼에서 이를 가져올 수 없음
  • twitter:card 태그 누락 — X가 카드를 렌더링하지 않습니다.
  • 플랫폼에 비해 이미지가 너무 작습니다. — LinkedIn에는 최소 1200×627이 필요합니다.
  • 업데이트 후 캐시를 지우지 않음 — 플랫폼은 며칠 동안 OG 태그를 캐시합니다.

실수 1: og:image에 상대 URL 사용

이것은 가장 흔한 실수입니다. 개발자는 다음과 같이 씁니다.

✗ 틀렸어

<meta property="og:image" content="/images/preview.jpg" />

플랫폼의 크롤러는 상대 URL을 확인할 수 없습니다. 절대 URL이 필요합니다.

✓ 맞다

<meta property="og:image" content="https://yoursite.com/images/preview.jpg" />

og:image URL에는 항상 https://를 사용하세요. 이는 X, LinkedIn, Discord, Slack, WhatsApp 및 Reddit 등 모든 플랫폼에 영향을 미칩니다.

실수 2: twitter:card 태그 누락

많은 개발자가 Open Graph 태그만 설정하고 Twitter Card 태그를 건너뜁니다. X/Twitter는 twitter:card를 선호하며 이것이 없으면 카드를 올바르게 렌더링하지 못할 수도 있습니다.

✗ 미완성

<meta property="og:image" content="https://yoursite.com/image.jpg" />

✓ 완료

<meta property="og:image" content="https://yoursite.com/image.jpg" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:image" content="https://yoursite.com/image.jpg" />

전체 적용 범위를 설정하려면 og:imagetwitter:image를 모두 설정하세요. 자세한 내용은 Open Graph 대 Twitter Card 가이드를 참조하세요.

실수 3: 플랫폼에 비해 이미지가 너무 작음

플랫폼마다 최소 이미지 크기가 다릅니다. Discord(최소 300×300)에서 작동하는 이미지가 LinkedIn(최소 1200×627)에서는 작동하지 않을 수 있습니다.

Platform Minimum Recommended
X / Twitter800 × 4181200 × 628
LinkedIn1200 × 6271200 × 627
Discord300 × 3001200 × 630
WhatsApp300 × 1571200 × 630
Reddit120 × 1201200 × 628

1200 × 630를 표준 크기로 사용하면 모든 플랫폼에 적용됩니다. 전체 분석 내용은 Open Graph 이미지 크기 가이드를 참조하세요.

실수 4: 업데이트 후 캐시를 지우지 않음

OG 태그를 업데이트합니다. 플랫폼에는 여전히 이전 미리보기가 표시됩니다. 문제: 플랫폼은 OG 태그를 캐시하고 자동으로 다시 가져오지 않습니다.

태그를 업데이트한 후에는 각 플랫폼의 캐시를 지워야 합니다.

전체 플랫폼별 연습을 보려면 삭제 방법 Open Graph 캐시 가이드를 참조하세요.

실수 5: og:description 누락 또는 잘린 텍스트

일부 개발자는 og:title 및 og:image를 설정하고 og:description를 건너뜁니다. 다른 사람들은 설명을 너무 길어서 잘립니다.

모범 사례:

실수 6: 설정하지 않음 og:url

og:url가 없으면 플랫폼이 미리보기에서 잘못된 URL(예: 추적 매개변수가 있는 URL)을 사용할 수 있습니다. 항상 표준 URL을 설정하세요.

✓ 맞다

<meta property="og:url" content="https://yoursite.com/your-page" />

실수 7: 잘못된 이미지 MIME 유형 사용

서버가 이미지에 대해 잘못된 Content-Type 헤더를 반환하는 경우(예: image/jpeg를 사용하여 PNG 제공) 일부 플랫폼에서는 이를 거부합니다. 이미지 서버가 올바른 MIME 유형을 반환하는지 확인하세요.

LinkedIn는 MIME 유형 확인에 특히 엄격합니다.

실수 8: 고유한 OG 태그가 없는 동적 페이지

모든 페이지가 동일한 OG 태그(일반적으로 홈페이지 태그)를 공유하는 SPA 또는 동적 사이트가 있는 경우 플랫폼은 모든 페이지에 대해 동일한 미리보기를 표시합니다. 각 페이지에는 고유한 제목, 설명, 이미지가 필요합니다.

Next.js에서는 generateMetadata()를 사용합니다. WordPress에서는 Yoast/RankMath 페이지별 설정을 사용합니다. 일반 HTML에서는 각 페이지에 개별적으로 태그를 설정합니다.

빠른 수정 체크리스트

  1. 절대 URL을 사용하세요(모든 og:image 경로에 https://...)
  2. og:twitter: 태그를 모두 설정하세요.
  3. 범용 호환성을 위해 1200×630 픽셀 이미지 사용
  4. 태그 업데이트 후 플랫폼 캐시 지우기
  5. 모든 페이지에 고유한 OG 태그 설정
  6. og:description 포함(150~160자)
  7. og:url를 표준 URL로 설정
  8. MIME 유형이 실제 이미지 형식과 일치하는지 확인
  9. 모든 실수를 한 번에 잡아내려면 Proovd로 테스트하세요.

자주 묻는 질문

가장 흔한 Open Graph 실수는 무엇입니까?

https://.로 시작하는 절대 URL 대신 og:image에 상대 URL 사용 플랫폼에서는 상대 URL을 가져올 수 없으므로 이미지가 미리보기에 표시되지 않습니다.

내 OG 이미지가 한 플랫폼에서는 작동하지만 다른 플랫폼에서는 작동하지 않는 이유는 무엇입니까?

플랫폼마다 이미지 크기 요구 사항이 다릅니다. LinkedIn에는 최소 1200x627이 필요하고, X에는 800x418이 필요하며, Discord에는 최소 300x300이 필요합니다. 한 플랫폼에서 작동하는 이미지는 다른 플랫폼에서는 너무 작을 수 있습니다.

내 OG 태그에 실수가 있는지 어떻게 확인하나요?

Proovd를 사용하여 URL을 붙여넣고 6개 플랫폼 모두에서 한 번에 정확히 어떻게 렌더링되는지 확인할 수 있습니다.

OG 태그에 실수가 있는지 확인하세요

Proovd 사용 — URL을 붙여넣고 X, LinkedIn, Slack, Discord, WhatsApp 및 Reddit에서 미리보기를 확인하세요.