각 페이지에 몇 줄의 코드를 추가하여 소셜 미디어를 통해 공유될 때 사이트가 표시되는 방식을 조정할 수 있습니다. 이렇게 하면 더 풍부한 정보가 포함된 미리보기를 제공하여 더 많은 사용자를 사이트로 유도할 수 있습니다.
각 페이지에 코드 몇 줄을 추가하여 소셜 미디어를 통해 공유될 때 사이트가 표시되는 방식을 변경할 수 있습니다. 이렇게 하면 더 풍부한 정보가 포함된 미리보기를 제공하여 더 많은 사용자를 사이트로 유도할 수 있습니다.
요약
- schema.org 마이크로데이터를 사용하여 Google+의 페이지 제목, 설명, 이미지를 제공합니다.
- 공개 그래프 프로토콜 (OGP)을 사용하여 Facebook의 페이지 제목, 설명, 이미지를 제공합니다.
- 트위터 카드를 사용하여 트위터에 페이지 제목, 설명, 이미지, 트위터 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 값은 웹페이지의 콘텐츠 유형에 따라 결정될 수 있습니다. 이 페이지에서 관련 항목을 찾을 수 있습니다.
schema.org 어휘를 사용하여 각 항목을 설명하는 itemprop 추가
itemprop은 범위에서 itemtype의 속성을 정의합니다. 소셜 사이트에 메타데이터를 제공하는 경우 일반적인 itemprop 값은 name, description, image입니다.
리치 스니펫 검증
Google+에서 리치 스니펫을 검증하려면 다음과 같은 도구를 사용하면 됩니다.
- 구조화된 데이터용 테스트 도구 - Search Console
공개 그래프 프로토콜 (OGP)을 사용하여 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 게시물에 첨부할 수 있는 항목에 대해 자세히 알아보려면 공식 Open Graph Protocol 사이트를 방문하세요.
리치 스니펫 검증
Facebook에서 마크업의 유효성을 검사하려면 다음과 같은 도구를 사용하세요.
트위터 카드를 사용하여 트위터에 리치 스니펫 제공
트위터 카드는 트위터에 적용되는 공개 그래프 프로토콜의 확장 프로그램입니다. 이를 통해 웹페이지 링크가 포함된 트윗에 이미지 및 동영상과 같은 미디어 첨부파일을 추가할 수 있습니다. 적절한 메타데이터를 추가하면 페이지 링크가 포함된 트윗에 추가한 리치 세부정보가 포함된 카드가 추가됩니다.
twitter: 네임스페이스 메타 태그를 사용하여 메타데이터 설명
Twitter 카드를 작동하려면 도메인이 승인되어야 하며 property 속성 대신 twitter:card를 name 속성으로 사용하는 메타 태그가 포함되어야 합니다.
간단한 예 보기:
<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태그를 사용하고 있습니다.
마지막으로, 게시하기 전에 각 소셜 사이트에서 웹페이지가 예상대로 표시되는지 확인하세요.