Open Graph 이미지: 게시 전 공유 링크 테스트

미리보기 역할

Open Graph 이미지를 페이지 자산으로 취급

Open Graph 이미지는 장식이 아니라, 크롤러가 소셜 피드, 채팅 앱, 업무 도구용 링크 카드 생성 시 페이지를 대표하는 이미지입니다. 제목, 설명, 페이지 주제, 구조화 데이터 이미지와 일치해야 합니다.

크기 계획

실제 미리보기에서 잘 보이는 크기 선택

플랫폼마다 미리보기 자르기와 캐시 방식이 다릅니다. 1200 x 630은 기본값이지만, 중앙 안전 영역을 고려해 디자인하고 주요 플랫폼에서 최종 URL을 테스트하는 것이 안전합니다.

주요 메시지는 이미지 중앙에 두세요. 가장자리는 피드 카드, 채팅 미리보기, 모바일 레이아웃에서 다르게 잘릴 수 있어 위험합니다.

HTML

페이지 공개 전 크롤러가 필요한 태그 설정

Open Graph 태그는 HTML 헤드에 위치해야 하며, 절대 이미지 URL 사용, 너비와 높이 명시, 유용한 대체 텍스트 추가, 실제 공유할 페이지와 정규 URL 일치를 유지하세요.

<meta property="og:type" content="article">
<meta property="og:title" content="Your clear page title">
<meta property="og:description" content="A short description that matches the page.">
<meta property="og:url" content="https://example.com/guide/">
<meta property="og:image" content="https://example.com/images/guide-og-1200x630.jpg">
<meta property="og:image:secure_url" content="https://example.com/images/guide-og-1200x630.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Short description of the preview image">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/images/guide-og-1200x630.jpg">
<meta name="twitter:image:alt" content="Short description of the preview image">

Blazor를 사용하면 Blazor SEO 메타데이터 컴포넌트이 Open Graph 태그, Twitter 카드 태그, 정규 URL, JSON-LD 메타데이터를 함께 관리합니다.

디자인 규칙

작은 피드 카드용 디자인 우선

대부분 사용자는 전체 이미지를 보지 않고 피드, 메시지, 미리보기 창에서 압축된 카드를 봅니다. 단순한 레이아웃이 효과적이며, 명확한 주제와 읽기 쉬운 대비, 작은 글자 없는 디자인이 좋습니다.

작업 흐름

중요 페이지별 간단한 작업 흐름

1. 1

   미리보기 약속 작성

   카드가 한눈에 전달할 내용 결정: 주제, 혜택, 제품, 기사 관점 등

2. 2

   계획한 비율로 이미지 생성

   기본 파일은 1200 x 630으로 하고 중요한 내용은 중앙에 배치하세요.

3. 3

   파일 최적화

   소셜 이미지에는 JPG 또는 PNG를 사용하고, 파일 크기를 적절히 유지하며 눈에 띄는 압축 손상을 피하세요.

4. 4

   메타데이터 및 스키마 설정

   Open Graph 태그, Twitter 카드 태그, 정규 URL, JSON-LD 이미지 참조를 함께 업데이트하세요.

5. 5

   안정적인 파일명으로 게시

   의미 있는 파일명을 사용하고, 플랫폼 캐시가 이전 버전을 유지할 가능성이 있으면 교체 시 파일명을 변경하세요.

6. 6

   최종 URL 테스트

   공개 페이지 URL을 디버거 도구로 실행해 실제 미리보기를 확인하세요. 소스 코드만 보지 마세요.

디버깅

미리보기를 신뢰하기 전에 플랫폼 캐시를 갱신하세요

소셜 플랫폼은 미리보기 데이터를 캐시합니다. 이미지를 교체해도 URL이 같으면 이전 미리보기가 계속 표시될 수 있습니다. 공식 도구를 사용하고 필요 시 파일명 변경이나 버전 URL을 추가하세요.

체크리스트

게시 전 Open Graph 이미지 체크리스트

기사, 제품 페이지, 도구 페이지, 랜딩 페이지 공개 전에 이 목록을 사용하세요. 링크 공유 후 발견하기 어려운 미리보기 문제를 잡아냅니다.