소셜 검색

각 페이지에 코드를 몇 줄 추가하여 소셜 미디어를 통해 공유할 때의 사이트 모습에 변화를 줄 수 있습니다. 그러면 이런 방법을 사용할 수 없을 때에 비해 미리보기에 더욱 풍성한 정보를 포함시킬 수 있으므로 사이트로 더 많은 방문자를 끌어들이는 효과를 거둘 수 있습니다.

Eiji Kitamura

각 페이지에 코드를 몇 줄 추가하면 소셜 미디어를 통해 공유할 때 사이트가 표시되는 방식에 영향을 줄 수 있습니다. 그러면 이런 방법을 사용할 수 없을 때에 비해 미리보기에 더욱 풍성한 정보를 포함시킬 수 있으므로 사이트로 더 많은 방문자를 끌어들이는 효과를 거둘 수 있습니다.

요약

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

각 페이지에 코드를 몇 줄 추가하여 소셜 미디어를 통해 공유할 때의 사이트 모습에 변화를 줄 수 있습니다. 그러면 이런 방법을 사용할 수 없을 때에 비해 미리보기에 더욱 풍성한 정보를 포함시킬 수 있으므로 사용자 참여도를 높이는 효과를 거둘 수 있습니다. 이 기능을 사용하지 않으면 소셜 사이트에서 이미지나 다른 유용한 정보가 없는 기본적인 정보만 제공합니다.

둘 중 어떤 소셜 사이트를 클릭할 가능성이 더 높을까요? 사람들은 무미건조한 텍스트보다는 이미지에 끌리게 마련이고, 미리보기가 제공되어 찾으려 했던 정보와 연관된 이미지가 보이면 더욱 확신을 가지고 클릭하게 됩니다.

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

소셜 네트워크에서 친구와 웹사이트를 공유하고 싶은 사용자가 있다면 아마 이 웹사이트가 얼마나 멋진 사이트인지 설명하는 메모를 추가하여 공유할지 모릅니다. 하지만 웹사이트를 제대로 설명하기가 말처럼 쉬운 일은 아니며 페이지 소유자의 관점에서 중요한 사항을 놓칠 수도 있습니다. 일부 서비스에서는 사용자가 메모로 입력할 수 있는 글자 수가 제한되기도 합니다.

따라서 웹사이트를 개발할 때 웹페이지에 알맞은 메타데이터를 추가해두고 적절한 제목, 설명, 매력적인 이미지를 제공하면 사용자 입장에서 훨씬 더 쉽고 간편하게 다른 사람과 공유할 수 있을 것입니다. 즉, 사용자가 웹사이트로 연결되는 링크를 설명하느라 소중한 시간을 허비하거나 글자 수에 맞춰 작성하느라 애쓸 필요가 없습니다.

Google+에서 schema.org + 마이크로데이터를 사용하여 풍부한 스니펫 제공

크롤러는 다양한 방법을 사용하여 페이지를 파싱하고 콘텐츠를 이해합니다. 마이크로데이터 및 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를 추가하여 웹사이트 유형 정의

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

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

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 Card를 사용하여 트위터에 리치 스니펫 제공

트위터 카드는 트위터에 적용 가능한 Open Graph 프로토콜의 확장 프로그램입니다. 트윗에 이미지와 동영상 같은 미디어 첨부파일을 웹페이지 링크가 포함된 트윗에 추가할 수 있습니다. 알맞은 메타데이터를 추가하면 페이지로 연결되는 링크를 포함한 트윗에 자신이 추가한 다양한 풍부한 디테일을 포함하는 카드가 추가됩니다.

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 ID를 twitter:site 값에 할당하면 이 정보를 공유 게시물에 삽입하여 사용자가 페이지 소유자와 쉽게 소통할 수 있도록 합니다.

트위터 카드

자세히 알아보기

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 태그에 있습니다.
  • title 및 description는 마이크로데이터와 OGP 간에 공유됩니다.
  • itemprop="image"가 property="og:image"로 meta 태그를 재사용하는 대신 href 속성이 있는 link 태그를 사용합니다.

마지막으로, 웹페이지가 각각의 소셜 사이트에서 생각했던 대로 나타나는지 확인한 후에 게시해야 합니다.