스키마 마크업 - Google 검색에서 리치 스니펫을 확보하세요 — Claude Skill

스키마 마크업 예시

흔한 스키마 유형에 대한 전체 JSON-LD 예시입니다.

목차

• Organization
• WebSite(SearchAction 포함)
• Article / BlogPosting
• Product
• SoftwareApplication
• FAQPage
• HowTo
• BreadcrumbList
• LocalBusiness
• Event
• 여러 스키마 유형
• 구현 예시(Next.js)

Organization

회사/브랜드 홈페이지 또는 소개 페이지용입니다.

{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "예시 회사",
  "url": "https://example.com",
  "logo": "https://example.com/logo.png",
  "sameAs": [
    "https://twitter.com/example",
    "https://linkedin.com/company/example",
    "https://facebook.com/example"
  ],
  "contactPoint": {
    "@type": "ContactPoint",
    "telephone": "+1-555-555-5555",
    "contactType": "customer service"
  }
}

WebSite(SearchAction 포함)

홈페이지용이며 sitelinks 검색창을 활성화합니다.

{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "예시",
  "url": "https://example.com",
  "potentialAction": {
    "@type": "SearchAction",
    "target": {
      "@type": "EntryPoint",
      "urlTemplate": "https://example.com/search?q={search_term_string}"
    },
    "query-input": "required name=search_term_string"
  }
}

Article / BlogPosting

블로그 글과 뉴스 기사용입니다.

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "스키마 마크업 구현 방법",
  "image": "https://example.com/image.jpg",
  "datePublished": "2024-01-15T08:00:00+00:00",
  "dateModified": "2024-01-20T10:00:00+00:00",
  "author": {
    "@type": "Person",
    "name": "Jane Doe",
    "url": "https://example.com/authors/jane"
  },
  "publisher": {
    "@type": "Organization",
    "name": "예시 회사",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  },
  "description": "스키마 마크업 구현을 위한 전체 가이드...",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://example.com/schema-guide"
  }
}

Product

제품 페이지용입니다(이커머스 또는 SaaS).

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "프리미엄 위젯",
  "image": "https://example.com/widget.jpg",
  "description": "전문가를 위한 베스트셀러 위젯",
  "sku": "WIDGET-001",
  "brand": {
    "@type": "Brand",
    "name": "Example Co"
  },
  "offers": {
    "@type": "Offer",
    "url": "https://example.com/products/widget",
    "priceCurrency": "USD",
    "price": "99.99",
    "availability": "https://schema.org/InStock",
    "priceValidUntil": "2024-12-31"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8",
    "reviewCount": "127"
  }
}

SoftwareApplication

SaaS 제품 페이지와 앱 랜딩 페이지용입니다.

{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "예시 앱",
  "applicationCategory": "BusinessApplication",
  "operatingSystem": "Web, iOS, Android",
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "USD"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.6",
    "ratingCount": "1250"
  }
}

FAQPage

자주 묻는 질문이 있는 페이지용입니다.

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "스키마 마크업이란 무엇인가요?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "스키마 마크업은 검색 엔진이 콘텐츠를 이해하도록 돕는 구조화 데이터 어휘입니다..."
      }
    },
    {
      "@type": "Question",
      "name": "스키마는 어떻게 구현하나요?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "권장 방식은 JSON-LD 형식을 사용하고 스크립트를 페이지 head에 배치하는 것입니다..."
      }
    }
  ]
}

HowTo

가이드형 콘텐츠와 튜토리얼용입니다.

{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "웹사이트에 스키마 마크업을 추가하는 방법",
  "description": "JSON-LD 스키마 구현을 위한 단계별 가이드",
  "totalTime": "PT15M",
  "step": [
    {
      "@type": "HowToStep",
      "name": "스키마 유형 선택",
      "text": "페이지 콘텐츠에 적합한 스키마 유형을 식별합니다...",
      "url": "https://example.com/guide#step1"
    },
    {
      "@type": "HowToStep",
      "name": "JSON-LD 작성",
      "text": "schema.org 사양을 따라 JSON-LD 마크업을 만듭니다...",
      "url": "https://example.com/guide#step2"
    },
    {
      "@type": "HowToStep",
      "name": "페이지에 추가",
      "text": "페이지 head 섹션에 script 태그를 삽입합니다...",
      "url": "https://example.com/guide#step3"
    }
  ]
}

BreadcrumbList

breadcrumb navigation이 있는 모든 페이지용입니다.

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "홈",
      "item": "https://example.com"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "블로그",
      "item": "https://example.com/blog"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "SEO 가이드",
      "item": "https://example.com/blog/seo-guide"
    }
  ]
}

LocalBusiness

지역 비즈니스 위치 페이지용입니다.

{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "예시 커피숍",
  "image": "https://example.com/shop.jpg",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "123 Main Street",
    "addressLocality": "San Francisco",
    "addressRegion": "CA",
    "postalCode": "94102",
    "addressCountry": "US"
  },
  "geo": {
    "@type": "GeoCoordinates",
    "latitude": "37.7749",
    "longitude": "-122.4194"
  },
  "telephone": "+1-555-555-5555",
  "openingHoursSpecification": [
    {
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
      "opens": "08:00",
      "closes": "18:00"
    }
  ],
  "priceRange": "$$"
}

Event

이벤트, 웨비나, 컨퍼런스 페이지용입니다.

{
  "@context": "https://schema.org",
  "@type": "Event",
  "name": "연례 마케팅 컨퍼런스",
  "startDate": "2024-06-15T09:00:00-07:00",
  "endDate": "2024-06-15T17:00:00-07:00",
  "eventAttendanceMode": "https://schema.org/OnlineEventAttendanceMode",
  "eventStatus": "https://schema.org/EventScheduled",
  "location": {
    "@type": "VirtualLocation",
    "url": "https://example.com/conference"
  },
  "image": "https://example.com/conference.jpg",
  "description": "연례 마케팅 컨퍼런스에 참여하세요...",
  "offers": {
    "@type": "Offer",
    "url": "https://example.com/conference/tickets",
    "price": "199",
    "priceCurrency": "USD",
    "availability": "https://schema.org/InStock",
    "validFrom": "2024-01-01"
  },
  "performer": {
    "@type": "Organization",
    "name": "예시 회사"
  },
  "organizer": {
    "@type": "Organization",
    "name": "예시 회사",
    "url": "https://example.com"
  }
}

여러 스키마 유형

@graph를 사용해 여러 스키마 유형을 결합합니다.

{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "Organization",
      "@id": "https://example.com/#organization",
      "name": "예시 회사",
      "url": "https://example.com"
    },
    {
      "@type": "WebSite",
      "@id": "https://example.com/#website",
      "url": "https://example.com",
      "name": "예시",
      "publisher": {
        "@id": "https://example.com/#organization"
      }
    },
    {
      "@type": "BreadcrumbList",
      "itemListElement": [...]
    }
  ]
}

구현 예시(Next.js)

export default function ProductPage({ product }) {
  const schema = {
    "@context": "https://schema.org",
    "@type": "Product",
    name: product.name,
    // ... 다른 속성
  };

  return (
    <>
      <Head>
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
        />
      </Head>
      {/* 페이지 콘텐츠 */}
    </>
  );
}