구조화된 데이터 마크업 도우미를 사용하여 웹페이지 요소를 마크업하면 Google에서 페이지의 데이터를 파악할 수 있습니다. Google에서 사이트에 어떤 데이터가 있는지 더 명확하게 파악하면 데이터를 Google 검색에 새롭고 보기 좋게 표시할 수 있습니다. 또한 고객에게 HTML 형식의 이메일을 보낼 때 마크업 도우미가 Gmail에서 데이터를 새롭고 유용한 방식으로 사용자에게 표시할 수 있도록 이메일 템플릿을 변경하는 방법을 알려 줍니다.
예:
- 이벤트: 사이트에서 이벤트를 마크업하면 Google에서 다음에 사이트를 크롤링할 때 검색결과 페이지에서 이벤트 데이터를 리치 스니펫으로 표시할 수 있습니다.
- 이메일: 항공편과 관련된 이메일에 항공편 예약에 관한 마크업이 포함되어 있으면 Gmail에서 이 정보를 데스크톱 클라이언트나 사용자의 개인 피드에 표시할 수 있습니다.
웹사이트에 코드를 추가하고 싶지 않다면 데이터 하이라이터를 사용해 보세요.
기술적인 측면에 관심이 있다면 구조화된 데이터에 관해 알아보고 사이트에 직접 마크업을 추가해 보세요.
웹페이지 또는 이메일 마크업
HTML 웹페이지나 HTML 이메일의 요소를 마크업할 수 있습니다.
웹페이지 마크업
다음은 웹페이지의 요소를 마크업하는 방법입니다.
- 구조화된 데이터 마크업 도우미를 엽니다.
- 웹사이트 탭을 선택합니다.
- 마크업할 페이지의 유형을 선택합니다. 예를 들어 영화 페이지나 이벤트 페이지를 선택할 수 있습니다. 한 페이지에 여러 항목을 포함할 수 있지만 모든 항목이 동일한 유형인 편이 좋습니다(모두 영화 혹은 모두 이벤트).
- 기존 페이지의 URL 또는 원시 페이지 HTML을 입력합니다. URL을 입력하기 전에 누구든지 로그인하지 않고도 사용할 수 있는지 확인하세요. (Chrome에서 시크릿 창을 열고 페이지에 방문하면 페이지에 액세스할 수 있는지 테스트할 수 있습니다. 페이지가 열리면 액세스할 수 있는 것입니다.)
- 태그 시작하기를 선택합니다.
- 이벤트 페이지의 시작 시간과 같이 페이지에서 중요한 정보가 있는 부분을 하이라이트합니다. 그런 다음 표시되는 드롭다운에서 정보 유형('시작 시간')을 선택합니다.
- 날짜 문자열이 복잡하거나 날짜에 태그를 지정하는 데 문제가 있으면 고급 날짜 태그 지정을 참조하세요.
- 페이지에 표시되지 않는 정보를 추가해야 하면 누락된 데이터 추가를 참조하세요.
- 구조화된 데이터 마크업 도우미를 통해 생성된 태그를 삭제해야 하면 태그 삭제를 참조하세요.
- 선택한 특정 데이터 유형에 필요한 모든 정보를 제공합니다. 내 데이터 항목 창에 항목별로 사용할 수 있는 모든 값이 목록으로 표시되며 반드시 지정해야 하는 값은 '필수'로 표시됩니다. 예를 들어 이벤트에는 이벤트 이름, 장소, 시작 날짜를 입력해야 합니다.
- 페이지에서 태그가 필요한 데이터에 전부 태그를 지정한 다음 HTML 만들기를 선택하여 페이지 코드를 만들고 출력 형식을 선택합니다. 출력 형식의 기본값은 JSON-LD(Google에서 선호)이지만 Microdata도 선택할 수 있습니다. 출력 창에서 코드를 복사하여 붙여넣거나 다운로드를 선택합니다. 출력 형식에 따라 코드 사용 방식이 달라집니다.
- JSON-LD: 생성된 코드를 복사하여 기존 페이지 본문에 붙여넣습니다.
- Microdata: 생성된 HTML로 페이지를 교체합니다.
- 코드를 테스트하려면 생성된 코드를 복사하여 리치 결과 테스트에 붙여넣습니다. Google에서 페이지를 파악할 수 있도록 반드시 제공해야 하는 입력란 중 누락된 항목이 있으면 이 테스트 도구에 표시됩니다. 또한 데이터 유형에 따라 Google 검색결과에 페이지가 어떻게 표시될지 보여 주는 미리보기도 제공됩니다.
- Google에서 새로운 페이지 코드를 발견하는 데 몇 주 정도가 걸릴 수 있습니다. 데이터 크롤링이 완료되었으며 데이터가 완전하고 정확하면 리치 결과로 표시될 수 있습니다. 사이트의 리치 결과가 표시되지 않는 경우 가능한 원인을 알아보세요.
이메일 마크업
다음은 HTML 형식의 이메일을 마크업하는 방법입니다.
- 구조화된 데이터 마크업 도우미를 엽니다.
- 이메일 탭을 선택합니다.
- 버스 예약 또는 제품 주문과 같이 마크업할 정보 유형을 선택합니다.
- 이메일의 HTML을 입력합니다.
- 태그 시작하기를 선택합니다.
- 페이지에서 버스 예약 번호처럼 중요한 정보가 있는 부분을 강조표시합니다. 그런 다음 표시되는 드롭다운에서 정보 유형('예약 번호')을 선택하세요.
- 날짜 문자열이 복잡하거나 날짜에 태그를 지정하는 데 문제가 있으면 고급 날짜 태그 지정을 참조하세요.
- 이메일에 표시되지 않는 정보를 추가해야 하면 누락된 데이터 추가를 참조하세요.
- 구조화된 데이터 마크업 도우미를 통해 생성된 태그를 삭제해야 하면 태그 삭제를 참조하세요.
- 선택한 특정 데이터 유형에 필요한 모든 정보를 제공합니다. 내 데이터 항목 창에 사용할 수 있는 모든 값이 목록으로 표시되며, 반드시 지정해야 하는 값은 '필수'로 표시됩니다. 필요한 값을 모두 입력하지 않으면 Google에서 이메일을 처리할 수 없습니다.
- 태그가 지정된 요소 옆에 알림 아이콘(
)이 표시되면 아이콘 옆의 데이터를 선택하고, 태그를 검토한 뒤 다음 조치 중 하나를 취합니다.
- 태그가 올바르지 않으면 데이터 옆의 X를 선택한 다음 데이터를 다시 태그합니다.
- 태그가 올바르면 알림 아이콘(
- 태그 지정이 완료되면 HTML 만들기를 선택하여 이메일에 사용할 HTML을 만듭니다. 기본값은 JSON-LD(Google에서 선호)이지만 Microdata도 선택할 수 있습니다. 다운로드를 선택하거나 생성된 HTML을 선택하여 붙여넣으세요.
- JSON-LD: 생성된 코드를 복사하여 이메일 본문에 붙여넣습니다.
- Microdata: 이메일을 생성된 HTML로 교체합니다.
- 코드를 테스트하려면 Gmail 계정에 이메일을 보내거나 이메일 마크업 테스터를 사용하세요.
)이 표시되면 아이콘 옆의 데이터를 선택하고, 태그를 검토한 뒤 다음 조치 중 하나를 취합니다.
페이지 또는 이메일 수정 사항 저장 및 계속 수정
마크업을 현재 상태로 저장하려면 브라우저에서 페이지를 북마크하세요. 모든 마크업 값을 포함한 현재 상태가 구조화된 데이터 마크업 도우미에 한 달 동안 저장됩니다.
구조화된 데이터 마크업 도우미에서 생성한 태그 중 일부 또는 모든 태그를 실행취소할 수 있습니다.
특정 태그 삭제
- 예제 페이지나 이메일에서 태그를 선택합니다.
- 태그를 선택하면 표시되는 팝업 메뉴에서 태그 삭제를 선택합니다.
모든 태그 삭제하기:
- 주의: 모든 태그를 삭제하도록 요청하면 실행취소할 수 없으며 태그를 처음부터 다시 지정해야 합니다. 콘텐츠에 이미 마크업이 있으면 마크업 도우미에서 기존의 마크업을 삭제하지 않습니다. 모든 태그를 삭제하면 마크업 도우미를 통해 추가된 태그만 삭제됩니다.
- 톱니바퀴 아이콘
을 선택합니다.
- 이 페이지에서 모든 태그 삭제를 선택합니다.
을 선택합니다.날짜에 연, 월, 일이 포함되어 있으면 구조화된 데이터 마크업 도우미에서 다양한 형식의 날짜를 인식합니다. 누락된 데이터를 페이지 집합에 추가하면 연도와 같이 누락된 데이터를 입력할 수 있습니다.
샘플 콘텐츠에 날짜가 하나의 부분(예: 2012년 6월 4일)으로 표시되면 날짜도 한 부분으로 지정하는 것이 좋습니다. 태그를 적게 만들수록 태그 지정 속도가 빨라지며 마크업 도우미에서 더 정확하게 인식합니다.
한 부분으로 된 날짜에 태그 지정하기
- 페이지 태그 지정 또는 이메일 태그 지정에 설명된 것처럼 데이터에 태그를 지정합니다.
- 태그 지정자 페이지에서 마우스로 날짜를 선택합니다. 예를 들어 2012년 6월 4일을 선택합니다.
- 표시되는 컨텍스트 메뉴에서 날짜 > 날짜/시간 또는 기간을 선택합니다.
마크업 도우미를 통해 날짜가 내 데이터 항목 열에 추가됩니다.
- 페이지 태그 지정 또는 이메일 태그 지정에 설명된 것처럼 페이지 태그 지정을 마무리합니다.
여러 부분으로 된 날짜에 태그 지정하기
일부 콘텐츠에서는 날짜 정보를 여러 형식으로 표시하거나 라벨을 통해 여러 개의 날짜 구성요소를 식별할 수 있습니다. 예를 들어, 여러 이벤트가 나열된 페이지에서는 상단에 연도와 월을 한 번만 표시하고, 각 이벤트 옆에 특정 날짜를 표시할 수 있습니다. 콘텐츠에서 날짜를 여러 부분으로 나누어 표시하면 날짜의 각 부분에 태그를 지정해야 합니다.
여러 부분에 태그가 지정된 날짜나 기간을 나타내는 날짜(예: 6월 4일~5일 및 2012년)는 마크업 도우미에서 인식할 수 없습니다.
여러 부분으로 된 날짜에 태그 지정하기
- 페이지 태그 지정 또는 이메일 태그 지정에 설명된 것처럼 데이터에 태그를 지정합니다.
- 태그 지정자 페이지에서 마우스로 날짜 일부를 선택합니다. 예를 들어 6월을 선택합니다.
- 표시되는 컨텍스트 메뉴에서 날짜 > 고급 > 날짜 단위를 선택합니다. 예를 들어 날짜 > 고급 > 월을 선택합니다.
마크업 도우미를 통해 날짜가 내 데이터 항목 열에 추가됩니다.
- 관련 날짜에 사용할 수 있는 모든 데이터에 태그를 지정합니다.
- 페이지 태그 지정 또는 이메일 태그 지정에서 설명된 것처럼 태그 지정을 마무리합니다.
날짜 태그 예시
태그할 수 있는 날짜의 예는 다음과 같습니다.
- 하나의 날짜인 경우, 예를 들어 다음 형식은 모두 태그할 수 있습니다.
- June 4, 2012
- 4 June 2012
- 6/4/12 - 태그에 다른 구분자나 네 자리 연도(예: 6-4-2012)를 포함할 수 있습니다. 숫자로 된 날짜가 모호한 경우 Google은 첫 번째 숫자를 월로 간주합니다. 예를 들어 6/4/12는 2012년 6월 4일로 인식하며, 13/4/12는 2012년 4월 13일로 인식합니다.
- 기간인 경우, 예를 들어 June 4-7 2012와 같이
시작일과 종료일 사이의 구분자는 대시(-)여야 합니다.
- 날짜와 시간의 경우, 예를 들어 다음 형식은 모두 태그할 수 있습니다.
- June 4, 2012 3pm - 오전 또는 오후가 뒤에 붙는 시간. Google에서는 일반 업무 시간의 경우 오전 또는 오후가 뒤에 붙지 않은 시간도 사용합니다. 예를 들어 11은 오전 11시, 2는 오후 2시로 해석합니다.
- 2012년 6월 4일 15:00 - 군용 시간
- 2012년 6월 4일 오후 3시 EST 또는 2012년 6월 4일 오후 3시-5:00 - 시간대 또는 UTC/GMT 오프셋이 있는 시간.
- 2012년 6월 4일 오후 2시-3시 또는 2012년 6월 4일-5일 오후 2시-3시 - 시간 범위(날짜 범위 존재 여부 무관).
- 여러 부분으로 된 날짜의 경우, 선행 태그 옵션을 사용하여 다음과 같은 여러 텍스트 부분을 하나의 날짜로 태그합니다.
- 날짜: 6월 4일 화요일 연도: 2013년
- June 4 | 시간: 7:30p-9:30pm 및 2012
- 6월 4일-5일 및 2012년
수동으로 날짜 형식 지정하기
마크업 도우미는 콘텐츠의 날짜가 콘텐츠의 언어에 따른 형식 지정 규칙을 따른다고 가정하도록 설계되었습니다. 예를 들어 페이지의 언어가 en-US이면 마크업 도우미에서는 12-06-12를 2012년 12월 6일이라고 인식합니다. 페이지의 언어가 en-GB이면 12-06-12를 2012년 6월 12일로 인식합니다. 마크업 도우미에서는 페이지의 언어를 자동으로 판단하며, 이에 따라 날짜의 형식 지정 규칙도 자동으로 판단합니다.
마크업 도우미를 무시하고 다른 날짜 형식을 지정하려면 다음 단계를 따르세요.
- 톱니바퀴 아이콘을 선택하고 설정을 선택합니다.
- 설정 팝업의 날짜 형식 목록에서 형식을 선택합니다.
- 저장을 선택합니다.
예제 콘텐츠에 누락된 데이터(예: 이벤트 개최 연도)가 있으면 이에 관한 값을 지정할 수 있습니다. 구조화된 데이터 마크업 도우미를 통해 관련 값에 마크업이 추가됩니다.
언제든지 누락된 데이터를 추가할 수 있으며 필요에 따라 변경하거나 삭제할 수도 있습니다.
누락된 데이터 추가, 변경 또는 삭제
- 내 데이터 항목 열 하단의 누락된 태그 추가를 선택합니다.
- 다음 중 한 가지 방법을 사용합니다.
- 태그 선택 목록에서 태그를 선택하여 값을 추가한 다음 입력란에 값을 입력합니다. 예를 들어 카테고리를 선택하고 '아일랜드 전통음악'을 입력합니다.
- 입력란에서 X를 선택하여 기존 데이터를 삭제합니다.
- 입력란의 값을 변경하여 기존 데이터를 수정합니다.
- 저장을 선택합니다.
마크업 도우미에서 지정된 값을 내 데이터 항목에 표시합니다.
페이지 언어 변경하기
구조화된 데이터 마크업 도우미에서는 예제 콘텐츠의 언어를 자동으로 감지하여 페이지의 데이터를 더욱 잘 인식할 수 있습니다. 마크업 도우미를 통해 만들어진 마크업이 잘못되었다면 내가 마크업 도우미에서 사용하려는 언어를 정확하게 선택할 수 있습니다.
수동으로 언어를 지정하려면 다음 단계를 따르세요.
-
톱니바퀴 아이콘을 선택하고 설정을 선택합니다.
- 설정 팝업의 사이트 언어 목록에서 언어를 선택합니다.
- 저장을 선택합니다.
schema.org는 Google, Microsoft, Yahoo!가 웹의 데이터를 설명하는 공통 용어를 만들어 웹을 개선하기 위해 시작한 공동 프로젝트입니다. HTML 페이지에 schema.org 마크업을 추가하면 Google 검색을 비롯한 여러 기업 및 제품에서 사이트의 데이터를 이해할 수 있게 됩니다. 마찬가지로 HTML 형식의 이메일에 schema.org 마크업을 추가하면 Gmail을 비롯한 기타 이메일 제품에서 데이터를 이해할 수 있습니다.
데이터를 설명할 때 schema.org 용어를 통해 다양한 마크업 형식을 사용할 수 있습니다. 마크업 도우미가 마이크로데이터 및 JSON-LD 사용 방법을 알려드립니다.
schema.org에 대해 더 자세히 알아보려면 schema.org FAQ를 참조하세요.
JSON-LD와 마이크로데이터는 schema.org 용어를 사용하여 데이터를 마크업하는 두 가지 방법입니다. Google에서는 웹 콘텐츠용으로 JSON-LD를 권장합니다.
JSON-LD
JSON-LD는 HTML 페이지의 자바스크립트 개체를 사용하여 데이터를 정의합니다. 다음은 이벤트를 설명하는 JSON-LD의 예입니다.
<script type="application/ld+json">
{
"@context" : "http://schema.org",
"@type" : "Event",
"name" : "슬림 휘트먼 기념 행사",
"startDate" : "2013-07-06",
"location" : {
"@type" : "Place",
"name" : "홀리우드 보울"
}
}
</script>
JSON-LD를 추가할 때 마크업 도우미는 기존 HTML 요소에 마크업을 추가하려고 시도합니다. 예를 들어 <h4>내 이벤트</h4>라고 코딩된 이벤트를 강조표시하면 마크업 도우미는 다음과 같은 JSON-LD를 예시에 추가합니다.
<script type="application/ld+json">
{
"@context" : "http://schema.org",
"@type" : "Event",
"name" : "내 이벤트"
}
</script>
JSON-LD에서 자세히 알아보세요.
마이크로데이터
마이크로데이터는 HTML 태그와 속성을 사용하여 데이터를 정의합니다. 다음은 이벤트를 설명하는 HTML의 예입니다.
<div> 타이니 팀 트리뷰트 밴드의 라이브 콘서트에 오세요. 2013년 7월 6일 아름다운 리전시 극장에서 열립니다. </div>
다음은 동일한 HTML을 마이크로데이터를 사용하여 마크업한 것입니다.
<div itemscope itemtype="http://schema.org/Event">
Come hear the
<span itemprop="name">타이니 팀 트리뷰트 밴드의</span>
라이브 콘서트에 오세요.
<span itemprop="startDate"
content="2013-07-06>2013년 7월 6일</span>
아름다운
<span itemprop="location" itemscope
itemtype="http://schema.org/Place">
<span itemprop="name">리전시 극장에서 열립니다</span>.
</span>
</div>
자세한 내용은 마이크로데이터 정보를 참조하세요.
마크업 도우미는 태그를 지정한 이메일이나 예시 페이지에 포함된 기존 마크업을 무시합니다. 따라서 이미 마크업으로 식별된 텍스트에 태그를 지정하면 마크업 도우미가 태그와 관련된 마크업을 추가합니다.