소셜 검색

각 페이지에 코드 몇 줄을 추가하면 소셜 미디어를 통해 공유될 때 사이트가 표시되는 방식이 달라질 수 있습니다. 이렇게 하면 이러한 방법을 사용할 수 없을 때에 비해 미리보기에 보다 풍성한 정보를 제공할 수 있으므로 사이트로 더 많은 방문자를 유도할 수 있습니다.

각 페이지에 코드를 몇 줄만 추가하면 소셜 미디어를 통해 사이트를 공유할 때 사이트가 표시되는 방식에 영향을 줄 수 있습니다. 이렇게 하면 이 방법을 사용할 수 없을 때에 비해 미리보기에 보다 풍부한 정보를 제공하여 사이트로 더 많은 방문자를 유도할 수 있습니다.

요약

  • schema.org 마이크로데이터를 사용하여 Google+에 대한 페이지 제목, 설명, 이미지를 제공합니다.
  • OGP (Open Graph Protocol)를 사용하여 Facebook에 사용할 페이지 제목, 설명, 이미지를 제공합니다.
  • Twitter 카드를 사용하여 페이지 제목, 설명, 이미지, Twitter용 Twitter ID를 제공하세요.

각 페이지에 코드를 몇 줄만 추가하면 소셜 미디어를 통해 사이트를 공유할 때 사이트가 표시되는 방식에 영향을 줄 수 있습니다. 이렇게 하면 다른 방법으로 사용할 수 있는 것보다 풍부한 정보가 미리보기에 제공되어 참여도를 높일 수 있습니다. 정보가 없으면 소셜 사이트에서 이미지나 기타 유용한 정보 없이 기본적인 정보만 제공합니다.

어느 것이 클릭할 가능성이 더 높을까요? 사용자는 이미지에 끌리며, 미리보기가 제공되어 찾은 이미지가 마음에 든다고 확신합니다.

적절한 마크업이 있으면 올바른 제목, 간단한 설명, 이미지가 포함됩니다. 이러한 항목을 추가하면 참여도를 높일 수 있습니다.
적절한 마크업을 사용하면 올바른 제목, 간단한 설명, 이미지가 포함됩니다. 이러한 항목을 추가하면 참여도를 높일 수 있습니다.
적절한 마크업이 없으면 페이지 제목만 포함됩니다.
적절한 마크업이 없으면 페이지 제목만 포함됩니다.

소셜 네트워크에서 친구와 웹사이트를 공유하고자 하는 사용자는 웹사이트가 얼마나 멋진지 설명하는 메모를 추가하고 공유할 것입니다. 하지만 웹사이트를 설명하는 것은 번거롭고 페이지 소유자의 관점에서 요점을 놓칠 수 있습니다. 일부 서비스는 사용자가 메모에 입력할 수 있는 문자 수를 제한합니다.

페이지에 적절한 메타데이터를 추가하면 제목, 설명, 매력적인 이미지를 제공하여 사용자의 공유 프로세스를 간소화할 수 있습니다. 즉, 링크를 설명하는 데 소중한 시간이나 문자 수를 소비할 필요가 없습니다.

schema.org와 마이크로데이터를 사용하여 Google+에서 리치 스니펫 제공

크롤러는 다양한 방법을 사용하여 페이지를 파싱하고 페이지의 콘텐츠를 파악합니다. 마이크로데이터schema.org 어휘를 사용하면 소셜 사이트와 검색엔진이 페이지의 콘텐츠를 더 잘 이해하는 데 도움이 됩니다.

예를 들면 다음과 같습니다.

<div itemscope itemtype="http://schema.org/Article">
  <h1 itemprop="name">Enjoy fireworks</h1>
  <p itemprop="description">Fireworks are beautiful.
   This article explains how beautiful fireworks are.</p>
  <img itemprop="image" src="//developers.google.com/web/imgs/fireworks.jpg" />
</div>

대부분의 메타데이터는 웹페이지의 헤드 섹션에 삽입되지만 마이크로데이터는 컨텍스트가 존재하는 위치에 있습니다.

itemscope를 추가하여 마이크로데이터 범위 정의

itemscope를 추가하여 태그를 특정 항목에 관한 콘텐츠 블록으로 지정할 수 있습니다.

itemtype을(를) 추가하여 웹사이트 유형 정의

itemscope와 함께 itemtype 속성을 사용하여 항목 유형을 지정할 수 있습니다. itemtype의 값은 웹페이지의 콘텐츠 유형에 따라 결정할 수 있습니다. 이 페이지에서 관련 있는 함수를 찾을 수 있습니다.

itemprop를 추가하여 schema.org 어휘를 사용해 각 항목을 설명합니다.

itemprop는 범위에서 itemtype의 속성을 정의합니다. 소셜 사이트에 메타데이터를 제공하는 경우 일반적인 itemprop 값은 name, description, image입니다.

리치 스니펫 유효성 검사

다음과 같은 도구를 사용하여 Google+에서 리치 스니펫의 유효성을 검사할 수 있습니다.

구조화된 데이터 테스트 도구

OGP (Open Graph Protocol)를 사용하여 Facebook에서 리치 스니펫 제공

공개 그래프 프로토콜 (OGP)은 웹페이지가 다른 Facebook 객체와 동일한 기능을 사용할 수 있도록 하는 데 필요한 메타데이터를 Facebook에 제공합니다.

<html prefix="og: http://ogp.me/ns#">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
    <meta property="og:title" content="Enjoy Fireworks">
    <meta property="og:description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <meta property="og:image"
          content="https://developers.google.com/web/imgs/fireworks.jpg">
    <meta property="og:url"
          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
    <meta property="og:type" content="website">

이 메타데이터는 페이지의 헤드 섹션에 포함되면 페이지가 공유될 때 리치 스니펫 정보를 제공합니다.

og: 네임스페이스화된 meta 태그를 사용하여 메타데이터 설명

meta 태그는 property 속성과 content 속성으로 구성됩니다. 속성 및 콘텐츠는 다음 값을 사용할 수 있습니다.

속성 콘텐츠
og:title 웹페이지의 제목입니다.
og:description 웹페이지의 설명입니다.
og:url 웹페이지의 표준 URL입니다.
og:image 공유 게시물에 첨부된 이미지의 URL입니다.
og:type 웹페이지의 유형을 나타내는 문자열입니다. 여기에서 웹페이지에 적합한 방법을 찾을 수 있습니다.

이 메타 태그는 Facebook과 같은 소셜 사이트에서 크롤러에 시맨틱 정보를 제공합니다.

자세히 알아보기

Facebook의 게시물에 첨부할 수 있는 항목에 대해 자세히 알아보려면 공식 공개 그래프 프로토콜 사이트를 방문하세요.

리치 스니펫 유효성 검사

다음과 같은 도구를 사용하여 Facebook에서 마크업의 유효성을 검사할 수 있습니다.

Twitter 카드를 사용하여 Twitter에서 리치 스니펫 제공

Twitter 카드Twitter에 적용 가능한 오픈 그래프 프로토콜의 확장 프로그램입니다. 이 파일을 사용하면 내 웹페이지 링크가 포함된 트윗에 이미지 및 동영상과 같은 미디어 첨부파일을 추가할 수 있습니다. 적절한 메타데이터를 추가하면 페이지로 연결되는 링크가 포함된 트윗에 내가 추가한 풍부한 세부정보가 포함된 카드가 추가됩니다.

twitter: 네임스페이스화된 메타 태그를 사용하여 메타데이터 설명

Twitter 카드가 작동하도록 하려면 도메인이 승인되어야 하고 property 속성 대신 name 속성으로 twitter:card가 있는 메타 태그를 포함해야 합니다.

간단한 예 보기:

<html prefix="og: http://ogp.me/ns#">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
    <meta property="og:title" content="Enjoy Fireworks">
    <meta property="og:description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <meta property="og:image"
          content="https://developers.google.com/web/imgs/fireworks.jpg">
    <meta property="og:url"
          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
    <meta property="og:type" content="website">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="agektmr">

twitter:site 값에 Twitter ID를 할당하여 사용자가 페이지 소유자와 쉽게 상호작용할 수 있도록 이 정보를 공유 게시물에 삽입합니다.

Twitter 카드

자세히 알아보기

Twitter 카드에 대해 자세히 알아보려면 다음 페이지를 방문하세요.

리치 스니펫 유효성 검사

마크업의 유효성을 검사하기 위해 Twitter는 다음을 제공합니다.

권장사항

세 가지 옵션이 모두 있을 때, 가장 좋은 방법은 모두 웹페이지에 포함하는 것입니다. 예를 들면 다음과 같습니다.

<!-- namespace declaration -->
<html prefix="og: http://ogp.me/ns#">
  <!-- define microdata scope and type -->
  <head itemscope itemtype="http://schema.org/Article">
    <title>Social Site Example</title>
    <!-- define ogp and itemprop of microdata in one line -->
    <meta property="og:title" itemprop="name" content="Enjoy Fireworks">
    <!-- define ogp image -->
    <meta property="og:image"
          content="https://developers.google.com/web/imgs/fireworks.jpg">
    <!-- use link[href] to define image url for microdata -->
    <link itemprop="image" href="//developers.google.com/web/imgs/fireworks.jpg">
    <!-- define ogp and itemprop of microdata in one line -->
    <meta property="og:url"
          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites2.html">
    <!-- define ogp type -->
    <meta property="og:type" content="website">
    <!-- define twitter cards type -->
    <meta name="twitter:card" content="summary_large_image">
    <!-- define site's owner twitter id -->
    <meta name="twitter:site" content="agektmr">
    <!-- define description for ogp and itemprop of microdata in one line -->
    <meta property="og:description" itemprop="description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <!-- general description (separate with ogp and microdata) -->
    <meta name="description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
  </head>

마이크로데이터와 OGP는 일부 마크업을 공유합니다.

  • itemscope이(가) head 태그에 있습니다.
  • titledescription는 마이크로데이터와 OGP 간에 공유됩니다.
  • itemprop="image"property="og:image"와 함께 meta 태그를 재사용하는 대신 href 속성이 있는 link 태그를 사용합니다.

마지막으로, 각 소셜 사이트에서 웹페이지가 예상대로 표시되는지 확인한 후에 게시해야 합니다.