구글 스니펫 채택되는 방법 (구조화된 데이터 마크업)

류지안

SEO

업데이트:

구글 스니펫이란? 

구글 스니펫 (Google Snippets, Featured Snippets으로 명칭 변경됨) 은 구글의 검색 결과에 대한 간략한 설명 또는 요약입니다. 구글이 검색 사용자들의 편의를 클릭 없이도 웹사이트 콘텐츠에 대한 간략한 미리보기를 제공하기 위해 만든 기능입니다. 검색 사용자는 웹사이트를 클릭해서 방문하기 전에 해당 페이지가 검색어와 관련이 있는지 여부를 빠르게 판단할 수 있습니다. 모든 구글 검색 결과에는 웹사이트 링크 뒤에 표시되는 스니펫 또는 콘텐츠의 일부 문구가 포함됩니다. 해당 페이지 및 해당 마크업의 콘텐츠를 기반으로 결과를 보강할 수도 있습니다.


구글 추천 스니펫이란




구글 스니펫를 사용해야 하는 이유

구글 스니펫은 검색어에 대한 답변을 제공하거나 콜투액션(Call-to-Action) 을 홍보하는 역할을 하게 됩니다. 구글 스니펫에 채택되면 수많은 타 웹사이트와의 경쟁에서 내 웹사이트가 검색 결과에서 더 돋보이도록 할 수 있습니다. 아무래도 단순한 텍스트 기반 링크보다 더 눈에 띄기 때문에 검색 사용자로부터 주목을 받을 가능성이 높아집니다. 이것은 검색 엔진 최적화(SEO)의 중요한 부분이 되어가고 있으며, 웹사이트 방문자 수를 늘리는 데 도움이 될 수 있습니다.

구글 스니펫의 또 다른 장점은 클릭률(CTR)이 향상된다는 점입니다. 한 연구결과에 따르면 구글 스니펫에 채택되면 최대 500% 이상의 클릭률 향상을 기대할 수 있습니다. 대부분의 검색 사용자들은 본인이 원하는 내용을 찾기 위해 무언가를 검색할 때 가능한 한 빨리 답변을 얻고 싶어합니다. 검색 결과에 스니펫이 표시되면 관심을 끌고 페이지를 클릭하도록 유도할 수 있습니다.





구글 스니펫에 채택되려면?

구글 스니펫은 구글이 수동으로 채택해서 검색 결과에 반영하는 것이 아니라 웹페이지 콘텐츠를 바탕으로 자동 생성됩니다. 구글은 검색 사용자가 검색한 검색어와 관련된 웹페이지 중 가장 관련성이 높은 웹사이트 콘텐츠를 돋보이도록 강조하고, 그 콘텐츠에 대한 미리보기를 제공합니다.

구글에서는 기본적으로 구조화된 데이터 마크업 작업이 되어있거나 메타 설명 태그 작업이 되어있는 웹페이지를 구글 스니펫에 채택합니다.




구조화된 데이터 마크업이란?

구조화된 데이터 마크업은 데이터 스키마 혹은 Schema.org으로 불리기도 합니다. 구조화된 데이터 마크업은 해당 페이지에 담긴 콘텐츠에 대한 추가 데이터를 제공하기 위해 웹페이지에 특정 정보를 추가하는 데 사용되는 방법입니다. 구조화된 데이터는 검색 엔진이 각 웹페이지에 포함된 콘텐츠를 이해하고 검색어에 대해 보다 정확한 결과를 제공할 수 있도록 도와줍니다. 웹페이지에 구조화된 데이터를 삽입하면 ‘리치 결과’라는 특별한 기능을 활용할 수 있으며, 이를 통해 구글 검색 결과에 웹사이트 콘텐츠를 더욱 효과적으로 표시할 수 있다는 장점을 얻게 됩니다.

HTML 태그나 schema.org와 같은 마이크로데이터 형식을 비롯한 다양한 방법을 통해 구조화된 데이터 마크업을 추가할 수 있습니다. 이를 통해 제목, 이미지, 비디오, 설명 등과 같은 페이지 콘텐츠에 대한 관련 정보를 포함하는 웹사이트 내 사용자 지정 필드를 만들 수 있습니다.


왜 구조화된 데이터 마크업을 해야 하는가?

앞서 설명드린 것처럼 구글은 구조화된 데이터 마크업 작업이 되어있거나 메타 설명 태그 작업이 되어있는 웹페이지를 우선적으로 구글 스니펫에 채택합니다.


웹사이트의 각 페이지에 대한 추가 관련 정보를 제공함으로써 Google 및 Bing과 같은 검색 엔진이 콘텐츠를 더 잘 이해하고, 관련 검색어 대해 더 정확한 결과를 제공할 수 있도록 도와주게 됩니다. 결국 검색 사용자에게 더 정확하고 훌륭한 품질의 검색 결과를 제공할 수 있게 되는 것이죠. 그렇기 때문에 검색 엔진사 입장에서는 이런 구조화된 데이터 마크업 작업이 되어있는 웹사이트 콘텐츠를 선호할 수 밖에 없게 됩니다.

구글 스니펫에 채택이 되면 구글 검색 결과에서 클릭 없이도 검색 사용자에게 콘텐츠의 일부를 보여주고, 더 많은 주목을 받을 수 있습니다. SEO에 노력을 기울이는 회사라면 꼭 이해해야 하는 부분입니다. 이 구글 스니펫에 채택되기 위해서는 구조화된 데이터 마크업 작업이 선행되어야 합니다.

다음은 구조화된 데이터 마크업을 통해 구글에서 리치 결과를 보여주는 예입니다.

이렇게 콘텐츠를 보여주고 싶다면 구조화된 데이터 마크업 작업을 해줘야 합니다.



구글에서 지원하는 3가지 형식의 구조화된 데이터

구글에서는 다음과 같은 총 세 가지 형식의 구조화된 데이터를 지원합니다.

1. JSON-LD

JSON-LD은 구글에서 권장한다고 밝히는 형식입니다. HTML 페이지의 <head>, <body> 요소에 있는 <script> 태그 내에 삽입되는 자바스크립트 표기입니다. 마크업은 중첩된 데이터 항목(예: Event의 MusicVenue의 PostalAddress의 Country)을 더 쉽게 표현하며 사용자가 볼 수 있는 텍스트와 함께 표시되지 않습니다. 구글에서는 자바스크립트 코드나 콘텐츠 관리 시스템에 삽입된 위젯과 같이 JSON-LD 데이터가 페이지의 콘텐츠에 동적으로 삽입될 때 JSON-LD 데이터를 읽을 수 있습니다.



2. 마이크로데이터

HTML 콘텐츠 내에 구조화된 데이터를 중첩하는 데 사용되는 개방형 커뮤니티 HTML 사양입니다. RDFa와 같이 HTML 태그 속성을 사용해 구조화된 데이터로 표시하려는 속성의 이름을 지정합니다. 대게 <body> 요소에 사용되지만 <head> 요소에 사용될 수도 있습니다.






3. RDFa

사용자에게 표시되며 검색엔진에 제시하려는 콘텐츠에 해당하는 HTML 태그 속성을 도입하여 연결된 데이터를 지원하는 HTML5 확장입니다. RDFa는 일반적으로 HTML 페이지의 <head>, <body> 섹션 모두에 사용됩니다.


구조화된 데이터 마크업 방법을 설명하기 전에 여러 가지 구조화된 데이터 마크업 중 가장 많이 쓰이는 데이터 마크업 종류 몇 가지를 살펴보겠습니다.



구글 구조화된 데이터 마크업 종류 1: Article

뉴스 사이트의 기사나 일반적인 블로그에 적합합니다. 구조화된 데이터는 구글이 웹페이지의 콘텐츠를 이해하는 데 도움이 되며 검색 엔진이 사이트의 제목, 이미지 및 기타 속성을 정확하게 나열할 수 있도록 합니다. 또한, 날짜 정보를 보다 명확하게 표시할 수 있습니다. 일반적으로 구글 뉴스에는 문서에 설명된 마크업 구조가 필요하지 않지만, 기사를 추가하여 최상위 페이지에서 작성하는 내용을 구글에 명확하게 알릴 수 있습니다.

구글추천스니펫 아티클 article



아래 JSON-LD 코드는 구조화된 Article 데이터가 포함된 페이지의 예입니다.

<html>
  <head>
    <title>Title of a News Article</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "NewsArticle",
      "headline": "Title of a News Article",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
       ],
      "datePublished": "2015-02-05T08:00:00+08:00",
      "dateModified": "2015-02-05T09:20:00+08:00",
      "author": [{
          "@type": "Person",
          "name": "Jane Doe",
          "url": "https://example.com/profile/janedoe123"
        },{
          "@type": "Person",
          "name": "John Doe",
          "url": "https://example.com/profile/johndoe123"
      }]
    }
    </script>
  </head>
  <body>
  </body>
</html>




Article 객체

Article 객체는 schema.org 유형인 Article, NewsArticle, BlogPosting 중 하나를 기반으로 해야 합니다.


권장 속성
authorPerson 또는 Organization기사의 작성자입니다. Google에서 다양한 기능을 갖춘 작성자를 이해할 수 있도록 작성자 마크업 권장사항을 따르는 것이 좋습니다.
author.nameText작성자의 이름입니다.
author.urlURL기사의 작성자를 고유하게 식별하는 웹페이지 링크입니다. 작성자의 소셜 미디어 페이지나 내 정보 페이지, 약력 페이지를 예로 들 수 있습니다.sameAs 속성을 대안으로 사용할 수 있습니다. Google은 작성자를 구분할 때 sameAs와 url을 모두 인식할 수 있습니다.
dateModifiedDateTime기사가 최근에 수정된 날짜와 시간입니다. ISO 8601 형식으로 나타냅니다.Google에 더 정확한 날짜 정보를 제공하려면 dateModified 속성을 추가합니다. 이 속성은 사이트에 해당한다고 판단될 때만 사용하는 것이 좋기 때문에 리치 결과 테스트에서는 이 속성에 관한 경고를 표시하지 않습니다.
datePublishedDateTime기사가 처음으로 게시된 날짜와 시간입니다. ISO 8601 형식으로 나타냅니다.Google에 더 정확한 날짜 정보를 제공하려면 datePublished 속성을 추가합니다. 이 속성은 사이트에 해당한다고 판단될 때만 사용하는 것이 좋기 때문에 리치 결과 테스트에서는 이 속성에 관한 경고를 표시하지 않습니다.
headlineText기사의 제목입니다. 이 값이 110자(영문 기준)를 초과하면 안 됩니다.
image반복되는 ImageObject 또는 URL기사를 잘 나타내는 이미지의 URL입니다. 로고나 캡션보다는 기사와 관련된 이미지를 사용합니다.추가 이미지 가이드라인모든 페이지에는 마크업 포함 여부와 관계없이 하나 이상의 이미지가 있어야 합니다. Google에서 가로세로 비율과 해상도를 기반으로 Google 검색결과에 표시할 최적의 이미지를 선택합니다.이미지 URL은 크롤링 및 색인 생성이 가능해야 합니다. Google에서 내 URL에 액세스할 수 있는지 확인하려면 URL 검사 도구를 사용하세요.이미지는 마크업된 콘텐츠를 나타내야 합니다.이미지는 Google 이미지에서 지원되는 파일 형식이어야 합니다.최상의 결과를 위해서는 가로세로 비율이 16×9, 4×3, 1×1인 여러 개의 고해상도 이미지(너비와 높이의 곱이 최소 50,000픽셀)를 제공하세요.


예:
“image”: [
  “https://example.com/photos/1×1/photo.jpg”,
  “https://example.com/photos/4×3/photo.jpg”,
  “https://example.com/photos/16×9/photo.jpg”
]



예:
{
  “@context”: “https://schema.org”,
  “@type”: “NewsArticle”,
  “image”: [
    “https://example.com/photos/1×1/photo.jpg”,
    “https://example.com/photos/4×3/photo.jpg”,
    “https://example.com/photos/16×9/photo.jpg”
  ]
}
출처: 구글





작성자 마크업 권장사항

다음은 구글에서 권하는 마크업 권장사항입니다.




작성자 마크업 권장사항
마크업에 모든 작성자 포함웹페이지에 작성자로 표시되는 모든 작성자가 마크업에 포함되어야 합니다.
여러 명의 작성자 지정여러 명의 작성자를 지정할 경우 각 작성자를 다음과 같이 해당하는 author 필드에 나열합니다.
“author”: [
  {“name”: “Willow Lane”},
  {“name”: “Regula Felix”}
]하나의 author 필드에 여러 명의 작성자를 병합하지 마세요.
“author”: {
  “name”: “Willow Lane, Regula Felix”
}
추가 필드 사용또한 Google에서 저자를 더 잘 이해할 수 있도록 type 및 url(또는 sameAs) 속성을 사용하는 것이 좋습니다. url 또는 sameAs 속성에 유효한 URL을 사용합니다.예를 들어 저자가 사람이라면 작성자에 관한 자세한 정보를 제공하는 작성자 페이지 링크를 제공할 수 있습니다.
“author”: [
  {
    “@type”: “Person”,
    “name”: “Willow Lane”,
    “url”: “https://www.example.com/staff/willow_lane”
  }
]작성자가 조직이라면 조직 홈페이지로 연결할 수 있습니다.
“author”:
  [
    {
      “@type”:”Organization”,
      “name”: “Some News Agency”,
      “url”: “https://www.example.com/”
  }
]
작성자 이름은 author.name 속성에서만 지정하세요.author.name 속성에서 작성자의 이름만을 지정합니다. 다른 정보는 추가하지 마세요. 특히 다음 정보는 추가하지 마세요.게시자 이름입니다. 대신 publisher 속성을 사용하세요.작성자의 직책은 추가하지 않습니다. 이 정보를 지정할 때는 적절한 속성(jobTitle)을 사용하세요.존칭을 나타내는 프리픽스 또는 서픽스는 추가하지 않습니다. 이 정보를 지정할 때는 적절한 속성(honorificPrefix 또는 honorificSuffix)을 사용하세요.’게시자’와 같이 작성자를 소개하는 표현은 포함하지 마세요.
“author”:
  [
    {
      “name”: “Echidna Jones”,
      “honorificPrefix”: “Dr”,
      “jobTitle”: “Editor in Chief”
    }
  ],
“publisher”:
  [
    {
      “name”: “Bugs Daily”
    }
  ]
}
적절한 Type을(를) 사용합니다.사람인 경우 Person 유형을 사용하고 조직에는 Organization 유형을 사용합니다. Thing 유형을 사용해서는 안됩니다. 또한 항목에 적합하지 않은 유형(예: 사람에게 Organization 유형 사용)을 사용하지 마세요.
출처: 구글




다음은 마크업 권장사항을 적용한 예입니다.

"author":
  [
    {
      "@type": "Person",
      "name": "Willow Lane",
      "jobTitle": "Journalist",
      "url":"https://www.example.com/staff/willow-lane"
    },
    {
      "@type":"Person",
      "name": "Echidna Jones",
      "jobTitle": "Editor in Chief",
      "url":"https://www.example.com/staff/echidna-jones"
    }
  ],
"publisher":
  {
    "name": "The Daily Bug",
    "url": "https://www.example.com"
  },
  // + Other fields related to the article...
}






구글 구조화된 데이터 마크업 종류 2: 도서 (Book)

구조화된 데이터 마크업으로 도서에 관련된 정보를 추가해주면, 구글 검색 사용자는 Google 검색 결과 페이지에서 직접 책을 구입하거나 대여할 수 있습니다.


예를 들어 구글 검색 사용자가 무라카미 하루키의 ‘바람의 노래를 들어라’라는 책을 검색하면 결과가 표시되고, 검색 사용자는 책을 구입하거나 빌릴 수 있습니다.

구글스니펫 도서 예 구글 검색무라카미 하루키


이런 구조를 만들기 위해서는 도서 제공업체가 구글에 구조화된 데이터 마크업을 통해 데이터 피드를 제공해야 합니다. 구글에서는 사용자가 책을 구매하기 위한 ReadAction, 그리고 책을 빌리기 위한 BorrowAction 이라는 데이터 속성 정의를 제공합니다.




DataFeed 항목

Google에 전송되는 모든 schema.org 데이터 피드 파일에는 루트 수준에서 DataFeed의 단일 항목이 포함되어야 합니다. 모든 Book 및 Library 항목은 DataFeed 항목의 dataFeedElement 필드 아래에 나열되어야 합니다.

필수 속성
@contextTexthttps://schema.org로 설정합니다.
@typeTextDataFeed로 설정합니다.
dataFeedElementBook 또는 LibrarySystem단일 Book 항목 또는 LibrarySystem 항목으로 설정합니다. 그 외의 경우 Book 항목 또는 LibrarySystem 항목의 배열로 설정합니다. Book 항목과 LibrarySystem 항목이 모두 포함된 배열로 설정하면 안 됩니다.Book 피드에서 사용 예:
{
  “@context”: “https://schema.org”,
  “@type”: “DataFeed”,
  “dataFeedElement”: [
    {
      “@context”: “https://schema.org”,
      “@type”: “Book”,
      “@id”: “https://example.com/work/the_catcher_in_the_rye”,
      “url”: “https://example.com/work/the_catcher_in_the_rye”,
      “name”: “The Catcher in the Rye”,
      “author”: {
        “@type”: “Person”,
        “name”: “J.D. Salinger”
      },
      “sameAs”: “https://en.wikipedia.org/wiki/The_Catcher_in_the_Rye”,
      “workExample”: [
        {
          “@type”: “Book”,
          “@id”: “https://example.com/edition/the_catcher_in_the_rye_paperback”,
          “isbn”: “9787543321724”,
          “bookEdition”: “Mass Market Paperback”,
          “bookFormat”: “https://schema.org/Paperback”,
          “inLanguage”: “en”,
          …
        },
        …
      ]
   }
  ],
  “dateModified”: “2018-09-10T13:58:26.892Z”
}LibrarySystem 피드에서 사용 예:
{
  “@context”: “https://schema.org”,
  “@type”: “DataFeed”,
  “dataFeedElement”: [
    {
      “@context”: “https://schema.org”,
      “@type”: “LibrarySystem”,
      “@id”: “https://example.com/library-systems/100”,
      “name”: “Santa Clara County Library District”,
      “additionalProperty”: [
        {
          “@type”: “PropertyValue”,
          “name”: “librarytype”,
          “value”: “public”
        }
      ],
      …
    },
    …
  ],
  “dateModified”: “2018-09-10T13:58:26.892Z”
}경고: 피드 만들기에 설명된 대로 Book 피드와 Library 피드가 모두 있다면 두 개의 별도 피드 파일이어야 합니다. 따라서 특정 DataFeed 항목의 경우 다음 조건 중 하나에 따라서만 dataFeedElement 속성을 설정할 수 있습니다.dataFeedElement를 단일 Book 항목 또는 Book 항목의 배열로 설정합니다.dataFeedElement를 단일 LibrarySystem 항목 또는 LibrarySystem 항목의 배열로 설정합니다.
dateModifiedDateTimeISO 8601 형식의 피드 최종 업데이트 날짜 및 시간입니다.
출처: 구글





구글 구조화된 데이터 마크업 종류 3: FAQ (자주 묻는 질문)

웹사이트내에 특정 주제와 관련된 질문과 답변 목록이 있는 페이지에서 활용 가능할 수 있습니다. 데이터 마크업이 제대로 된 FAQ 페이지는 구글 검색의 리치 결과를 통해 보여줄 수 있습니다. 다음은 겟파운드 웹사이트 콘텐츠 중 FAQ 데이터 마크업 작업이 된 페이지의 예입니다.

구글스니펫 예 검색엔진최적화란
구글스니펫 예 검색엔진최적화란


FAQ 리치 결과는 구글이 검색 기능을 제공하는 모든 국가에서 해당 언어로 사용할 수 있습니다. 데크스톱뿐만 아니라 휴대기기에서도 지원됩니다.




다음은 JSON-LD 형식의 FAQPage 예입니다.

<html>
  <head>
    <title>Example Site - Frequently Asked Questions(FAQ)</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "FAQPage",
      "mainEntity": [{
        "@type": "Question",
        "name": "What is the return policy?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "<p>Most unopened items in new condition and returned within <b>90 days</b> will receive a refund or exchange. Some items have a modified return policy noted on the receipt or packing slip. Items that are opened or damaged or do not have a receipt may be denied a refund or exchange. Items purchased online or in-store may be returned to any store.</p><p>Online purchases may be returned via a major parcel carrier. <a href=https://example.com/returns> Click here </a> to initiate a return.</p>"
        }
      }, {
        "@type": "Question",
        "name": "How long does it take to process a refund?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "We will reimburse you for returned items in the same way you paid for them. For example, any amounts deducted from a gift card will be credited back to a gift card. For returns by mail, once we receive your return, we will process it within 4–5 business days. It may take up to 7 days after we process the return to reflect in your account, depending on your financial institution's processing time."
        }
      }, {
        "@type": "Question",
        "name": "What is the policy for late/non-delivery of items ordered online?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "<p>Our local teams work diligently to make sure that your order arrives on time, within our normaldelivery hours of 9AM to 8PM in the recipient's time zone. During  busy holiday periods like Christmas, Valentine's and Mother's Day, we may extend our delivery hours before 9AM and after 8PM to ensure that all gifts are delivered on time. If for any reason your gift does not arrive on time, our dedicated Customer Service agents will do everything they can to help successfully resolve your issue.</p><p><a href=https://example.com/orders/>Click here</a> to complete the form with your order-related question(s).</p>"
        }
      }, {
        "@type": "Question",
        "name": "When will my credit card be charged?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "We'll attempt to securely charge your credit card at the point of purchase online. If there's a problem, you'll be notified on the spot and prompted to use another card. Once we receive verification of sufficient funds, your payment will be completed and transferred securely to us. Your account will be charged in 24 to 48 hours."
        }
      }, {
        "@type": "Question",
        "name": "Will I be charged sales tax for online orders?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text":"Local and State sales tax will be collected if your recipient's mailing address is in: <ul><li>Arizona</li><li>California</li><li>Colorado</li></ul>"}
        }]
    }
    </script>
  </head>
  <body>
  </body>
</html>



구글 스니펫 – 구조화된 데이터 만드는 방법

모던 스쿨 회원이시거나 SEO 마스터 클래스 강의를 수강 중이신 경우 여기를 클릭해서 템플릿과 동영상 가이드를 확인해보세요.





관련 자료 링크:

– 구글에서 제공하는 구조화된 데이터 마크업 헬퍼:

https://www.google.com/webmasters/markup-helper

– 스키마 마크업:

https://schema.org