검색 결과 메인 이미지(Featured Image) 미노출 문제 - Schema.org Image 구조화 데이터 완벽 설정 가이드

검색 결과에 뜨는 당신의 웹페이지, 혹시 텍스트만 덩그러니 보이고 이미지는 안 보이나요? 많은 개발자들이 SEO를 위해 메타 태그와 구조화 데이터를 설정하지만, 정작 Open Graph나 Twitter Card는 신경 써도 Search Console에서 인식되는 이미지 구조화는 간과하는 경우가 많습니다. 더 문제는 Google이 공식적으로 권장하는 이미지 Schema 설정 방식이 여러 개인데, 어떤 걸 써야 최고의 효과를 낼 수 있는지 정확히 아는 개발자가 드물다는 거죠. 이번에는 검색 결과에 뜨는 Featured Image를 완벽하게 설정하는 방법, 왜 특정 방식은 인식되지 않는지, 그리고 실제 Search Console 반영까지 어떻게 검증하는지 완벽하게 정리해서 소개하겠습니다.

검색 결과 이미지 표시 구조 이해하기

Google 검색 결과에서 이미지가 나타나는 방식을 정확히 이해하지 못하면 제대로 설정할 수 없습니다. Google은 웹페이지의 이미지를 인식하는 방법이 3가지입니다.

첫째, HTML img 태그에서 직접 추출합니다. 페이지 내 가장 큰 이미지나 콘텐츠와 관련 있는 이미지를 자동으로 선택합니다. 둘째, Open Graph 메타 태그(og:image)에서 읽습니다. 다만 이건 SNS 공유 목적이므로 검색 결과 이미지로는 100% 보장되지 않습니다. 셋째, JSON-LD 기반 Schema.org 구조화 데이터에서 'image' 속성을 파싱합니다. 이것이 가장 명시적이고 신뢰도 높은 방식입니다.

많은 개발자가 놓치는 부분이 바로 이것입니다. Open Graph 메타 태그만 설정하고 구조화 데이터는 빠뜨리면, Google이 당신이 원하는 이미지를 선택할 가능성이 낮아집니다. Google은 자동으로 추출한 이미지와 명시적인 Schema 데이터 중에서 페이지 순위, 콘텐츠 관련성, 이미지 품질 등을 고려해 최종 이미지를 결정하기 때문입니다.

Schema.org Article/BlogPosting 구조화 데이터로 이미지 설정하기

검색 결과에서 메인 이미지가 나타나려면 ArticleSchema나 BlogPostingSchema에 'image' 속성을 포함시켜야 합니다. 이것이 가장 기본이고 권장되는 방법입니다.

잘못된 설정 예제

✗ 다음은 이미지 정보가 불완전한 설정입니다.

{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "검색 결과 메인 이미지 설정하기",
  "description": "검색 결과에 뜨는 이미지 완벽 가이드",
  "image": "https://example.com/image.jpg"
}

왜 문제인가요? Google의 Rich Results Test에서 이 정도면 기본은 충족하지만, image 속성이 단순 문자열이면 이미지 크기 정보가 없어서 Google이 이미지를 검증하기 어렵습니다. 특히 모바일 검색에서 인식 확률이 낮아집니다.

올바른 설정 예제 1: 단일 이미지(완전한 형식)

✓ 이미지 크기와 URL을 모두 명시합니다.

{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "검색 결과 메인 이미지 설정하기",
  "description": "검색 결과에 뜨는 이미지 완벽 가이드",
  "author": {
    "@type": "Person",
    "name": "개발자"
  },
  "datePublished": "2024-01-15",
  "image": {
    "@type": "ImageObject",
    "url": "https://example.com/featured-image.jpg",
    "width": 1200,
    "height": 630
  }
}

이렇게 설정하면 Google이 정확히 어떤 이미지를 Featured Image로 사용할지 명확하게 파악할 수 있습니다. 권장되는 이미지 크기는 최소 1200×630픽셀이고, 이상적으로는 1.91:1 비율입니다.

올바른 설정 예제 2: 여러 이미지(배열 형식)

✓ 여러 이미지를 우선순위와 함께 제공합니다.

{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "검색 결과 메인 이미지 설정하기",
  "description": "검색 결과에 뜨는 이미지 완벽 가이드",
  "author": {
    "@type": "Person",
    "name": "개발자"
  },
  "datePublished": "2024-01-15",
  "image": [
    {
      "@type": "ImageObject",
      "url": "https://example.com/featured-image-large.jpg",
      "width": 1200,
      "height": 630
    },
    {
      "@type": "ImageObject",
      "url": "https://example.com/featured-image-medium.jpg",
      "width": 800,
      "height": 420
    },
    {
      "@type": "ImageObject",
      "url": "https://example.com/featured-image-small.jpg",
      "width": 400,
      "height": 210
    }
  ]
}

배열 형식으로 제공하면 Google이 사용자의 기기와 콘텍스트에 따라 가장 적합한 크기의 이미지를 선택할 수 있습니다. 모바일과 데스크톱 모두에서 최적의 사용자 경험을 제공합니다.

PHP에서 JSON-LD 구조화 데이터 동적 생성하기

대부분의 실무 프로젝트에서는 PHP나 다른 백엔드 언어로 JSON-LD를 동적으로 생성해야 합니다. 특히 WordPress, Laravel 같은 프레임워크를 사용할 때 더욱 그렇습니다.

PHP 예제: 블로그 포스트 JSON-LD 생성

<?php
// 데이터베이스 또는 변수에서 가져오는 포스트 정보
$post = [
    'title' => '검색 결과 메인 이미지 설정하기',
    'description' => '검색 결과에 뜨는 이미지 완벽 가이드',
    'author' => '개발자',
    'published_date' => '2024-01-15T10:30:00Z',
    'featured_image' => 'https://example.com/featured-image.jpg',
    'featured_image_width' => 1200,
    'featured_image_height' => 630,
];

// JSON-LD 구조화 데이터 배열
$schema = [
    '@context' => 'https://schema.org',
    '@type' => 'BlogPosting',
    'headline' => $post['title'],
    'description' => $post['description'],
    'author' => [
        '@type' => 'Person',
        'name' => $post['author'],
    ],
    'datePublished' => $post['published_date'],
    'image' => [
        '@type' => 'ImageObject',
        'url' => $post['featured_image'],
        'width' => $post['featured_image_width'],
        'height' => $post['featured_image_height'],
    ],
];

// HTML head 태그 내에 출력
echo '<script type="application/ld+json">';
echo json_encode($schema, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE);
echo '</script>';
?>

이 코드의 핵심은 json_encode()에 JSON_UNESCAPED_SLASHES 플래그를 사용해 URL의 슬래시가 이스케이프되지 않도록 하고, JSON_UNESCAPED_UNICODE로 한글도 정상 표시되게 하는 것입니다.

PHP 예제: 여러 이미지 지원(반응형 이미지)

<?php
$post = [
    'title' => '검색 결과 메인 이미지 설정하기',
    'description' => '검색 결과에 뜨는 이미지 완벽 가이드',
    'author' => '개발자',
    'published_date' => '2024-01-15T10:30:00Z',
    'images' => [
        ['url' => 'https://example.com/featured-image-large.jpg', 'width' => 1200, 'height' => 630],
        ['url' => 'https://example.com/featured-image-medium.jpg', 'width' => 800, 'height' => 420],
        ['url' => 'https://example.com/featured-image-small.jpg', 'width' => 400, 'height' => 210],
    ],
];

// 이미지 배열을 ImageObject 배열로 변환
$images = array_map(function($img) {
    return [
        '@type' => 'ImageObject',
        'url' => $img['url'],
        'width' => $img['width'],
        'height' => $img['height'],
    ];
}, $post['images']);

$schema = [
    '@context' => 'https://schema.org',
    '@type' => 'BlogPosting',
    'headline' => $post['title'],
    'description' => $post['description'],
    'author' => [
        '@type' => 'Person',
        'name' => $post['author'],
    ],
    'datePublished' => $post['published_date'],
    'image' => $images,
];

echo '<script type="application/ld+json">';
echo json_encode($schema, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE);
echo '</script>';
?>

이 방식으로 반응형 이미지를 여러 개 제공하면, Google이 검색 콘텍스트와 사용자 기기에 따라 최적의 이미지를 선택할 수 있습니다.

흔한 실수와 체크리스트

검색 결과 이미지가 안 뜨는 경우 90% 이상이 다음 중 하나입니다.

실수	원인	해결책
이미지 URL이 HTTPS가 아님	Google은 HTTP 이미지는 인식하지만 Featured Image로는 선택하지 않음	모든 이미지 URL을 https://로 시작하도록 변경
이미지 크기가 너무 작음(<200×200)	Google이 이미지를 의미 있는 것으로 간주하지 않음	최소 1200×630 이상으로 업로드
이미지가 robots.txt로 차단됨	크롤러가 이미지를 다운로드할 수 없음	robots.txt에서 이미지 경로 차단 제거
JSON-LD 문법 오류	구조화 데이터가 파싱되지 않음	Google Rich Results Test로 검증
image 속성만 문자열로 제공	이미지 크기 정보 부족으로 신뢰도 낮음	ImageObject 형식으로 width, height 추가
Open Graph만 설정하고 Schema 누락	검색 결과 이미지 신호 약함	JSON-LD 구조화 데이터 추가

Google Search Console에서 검증하기

설정을 완료한 후 실제 Google이 인식했는지 검증하려면 Google Search Console URL Inspection 도구를 사용해야 합니다. 이는 실제 데이터를 기반으로 하므로 가장 신뢰도 높습니다.

Search Console에 로그인하고 속성을 선택한 후, 상단 검사 창에 당신의 페이지 URL을 붙여 넣습니다. Google이 페이지를 크롤링하고 분석한 결과를 표시하는데, 여기서 '구조화된 데이터' 섹션을 찾으면 됩니다. BlogPosting 타입이 정상 인식되었는지 확인하고, image 속성이 올바르게 파싱되었는지 보면 됩니다.

만약 '이 페이지에서 항목을 찾을 수 없음' 같은 오류가 뜬다면, JSON 문법 오류나 배포 전에 로컬에서만 테스트한 상태일 수 있습니다. 정말 배포되었는지 페이지 소스(Ctrl+U)에서 직접 script type='application/ld+json' 태그를 찾아 검증하세요.

Google Rich Results Test로 미리 확인하기

Search Console보다 빠르게 확인하려면 Google Rich Results Test(구 Structured Data Testing Tool)를 사용할 수 있습니다. 이 도구는 실시간으로 JSON-LD를 파싱하고 어떤 rich result 타입이 인식되는지 보여줍니다.

URL을 직접 입력하거나 HTML 코드를 붙여 넣으면, JSON-LD 구조가 정상인지, 어떤 속성이 파싱되었는지 즉시 확인할 수 있습니다. image 속성이 제대로 인식되었는고, width와 height가 유효한지도 확인 가능합니다. 만약 오류가 표시되면 그 즉시 JSON 문법을 수정할 수 있으므로, 배포 전에 이 도구로 테스트하는 것이 강력히 권장됩니다.

WordPress에서의 자동 설정

WordPress를 사용한다면 Yoast SEO, Rank Math, All in One SEO 같은 플러그인이 JSON-LD를 자동으로 생성합니다. 다만 기본 설정만으로는 이미지 크기 정보가 누락될 수 있으므로, 플러그인 설정에서 Featured Image 크기를 명시적으로 1200×630 이상으로 설정해야 합니다.

특히 Yoast SEO의 경우 'SEO' 메뉴에서 'XML Sitemaps' 설정에서 이미지 사이트맵도 활성화하면, 더욱 강력한 이미지 검색 신호를 제공할 수 있습니다.

이미지 최적화 팁

구조화 데이터를 완벽하게 설정했어도 이미지 자체가 좋지 않으면 Google이 Featured Image로 선택하지 않습니다. 다음 점들을 항상 확인하세요.

첫째, 이미지는 당신의 콘텐츠와 관련이 있어야 합니다. 아무리 멋진 사진이라도 페이지 주제와 무관하면 무시됩니다. 둘째, 이미지는 선명해야 합니다. 저화질 또는 과도하게 압축된 이미지는 검색 결과에서 뜨기 어렵습니다. 셋째, 이미지에는 텍스트가 많지 않아야 합니다. 로고나 워터마크 정도는 괜찮지만, 이미지의 대부분이 텍스트라면 Google은 이를 낮게 평가합니다. 넷째, 1.91:1(또는 1200×630) 비율을 목표하세요. Google은 이 비율을 Featured Image로 가장 선호합니다.

마무리

검색 결과 Featured Image는 단순한 시각 요소가 아니라 클릭률(CTR)을 직접 좌우하는 중요한 요소입니다. 같은 순위의 페이지라도 이미지가 있으면 클릭 확률이 25% 이상 높아진다는 조사 결과가 있습니다. JSON-LD 구조화 데이터를 정확하게 설정하고, 이미지 크기와 품질을 최적화하면 검색 노출은 물론 사용자 경험까지 개선할 수 있습니다. 이 글의 PHP 예제를 참고해 지금 당신의 사이트에 BlogPosting JSON-LD를 추가하고, Google Rich Results Test로 검증한 후, Search Console URL Inspection으로 최종 확인하면, 몇 주 안에 검색 결과에 당신의 Featured Image가 뜨는 것을 볼 수 있을 것입니다.