JSON-LD 구조화된 데이터 구현 가이드

게시 됨: 2021-07-19

웹사이트에서 스키마 마크업을 사용하여 리치 스니펫을 활성화하고 SERP에서의 존재감을 높이는 것은 새로운 전략이 아닙니다. 그러나 일반적으로 새로운 고객이 이전에 구현을 자제했거나 시간이나 리소스가 부족하여 어려움을 겪었을 수 있습니다.

그러나 인라인 마이크로데이터를 구현하는 데 따른 골칫거리는 과거의 일이 되었습니다. Google은 지원할 뿐만 아니라 JSON-LD(연결된 데이터에 대한 JavaScript 개체 표기법)를 사용할 것을 권장합니다. JSON-LD 구조화된 데이터 구현 구조화된 데이터를 위한 것입니다. 이는 큰 진전입니다. 즉, 인라인 마이크로데이터를 하드 코딩하는 대신 Google이 이제 JavaScript를 크롤링하여 구조화된 데이터에 액세스합니다.

JSON-LD가 작업하기 쉽기 때문에, 그렇게 하려는 경우 읽고 쓰기가 더 쉽기 때문에 이것은 훌륭합니다. 또한 구조화된 데이터를 구현할 수 있는 방법이 그 어느 때보다 많습니다.

"하지만 JavaScript를 작성할 줄 모른다면?"

좋은 소식은 여기서 그치지 않습니다. 이 게시물은 구조화된 데이터를 구현하는 가장 쉬운 방법을 안내하고 JSON-LD에 대해 배우는 데 매우 유용한 리소스를 나열합니다.

Google의 데이터 하이라이터 도구

우선 Google Search Console의 형광펜 도구를 사용할 수 있습니다. 이 도구를 사용하면 코드 한 줄을 보지 않고도 구조화된 데이터를 구현할 수 있습니다.

기사, 이벤트, 제품 및 지역 비즈니스 정보를 포함한 다양한 데이터에 대한 스키마를 추가할 수 있습니다. 그러면 도구에서 페이지 미리보기를 제공하여 특정 콘텐츠를 직접 강조 표시하고 다음과 같이 마크업을 추가할 수 있습니다.

Google 형광펜 도구 - 스키마 추가

이것은 웹사이트에 구조화된 데이터를 추가하는 가장 쉽고 빠른 방법입니다. 그럼 왜 힘들게 하는 걸까요?

글쎄, 문제는 Google의 데이터 하이라이터가 Google과만 대화한다는 것입니다. 따라서 시작하기에 좋은 곳이기는 하지만 거기서 멈추지 않아야 합니다.

Google에서 구조화된 데이터를 사용하는 방식이 계속해서 발전하고 있습니다. 가장 최근에 모바일 리치 카드에 대한 발표가 있었습니다.

Google, 모바일에 리치 카드 추가

이는 Google에만 국한되지 않습니다. 소셜 미디어의 거물들은 이 데이터를 활용하는 방법을 찾았습니다. 예를 들어 Pinterest를 사용하면 Rich Pin이 제품, 레시피, 장소 등에 대한 데이터를 가져올 수 있습니다.

Google의 형광펜 도구로는 할 수 없는 많은 멋진 작업을 스키마 마크업으로 수행할 수 있습니다. 예를 들어 ASOS가 아래와 같이 지식 패널에 소셜 미디어 프로필을 추가해 보십시오.

ASOS 소셜 프로필 스키마 마크업

아마도 사람들이 SERP 내에서 웹사이트 내에서 검색할 수 있도록 BuzzFeed와 같은 사이트링크 검색창을 아래에 추가하고 싶을 것입니다.

BuzzFeed 사이트링크 검색창 스키마 마크업

위의 모든 이유로 Google의 데이터 하이라이터 도구를 단기 솔루션으로 사용하는 동시에 웹 페이지의 스키마 마크업을 미래에 대비한 솔루션으로 코딩할 것을 강력히 권장합니다. 이렇게 하면 구조화된 데이터에 대한 완전한 소유권과 관리 권한이 부여됩니다. Bing 및 기타 소규모 검색 엔진에서도 도움이 될 수 있습니다.

스키마 마크업을 추가하는 쉬운 방법

웹사이트가 WordPress에 있는 경우 Raven의 Schema Creator와 같은 플러그인을 활용할 수 있습니다. 이 편리한 도구는 프로세스를 안내하고 생성한 각 스키마에 대한 단축 코드를 생성하여 나중에 편집할 수 있도록 합니다.

레이븐 스키마 생성자 양식

WordPress를 사용하지 않고 여전히 JSON-LD 구조화된 데이터를 직접 코딩하고 싶거나 주제에 대해 더 자세히 알고 싶다면 여기에서 Google 태그 관리자가 필요합니다!

Google 태그 관리자를 사용하여 구조화된 데이터 푸시

JSON-LD를 지원하는 검색 엔진에 대한 흥미로운 점은 Google 태그 관리자와 같은 태그 관리 시스템에 의해 동적으로 삽입되더라도 HTML의 모든 위치에서 선택된다는 것입니다.

JSON-LD로 파악하기

시작하기 전에 JSON-LD에 익숙해지는 데 시간을 할애해야 합니다. 운 좋게도 온라인에서 유용한 리소스를 많이 찾을 수 있지만 여전히 자신이 없다면 JSON-LD 작업 경험이 있는 개발자나 마케팅 전문가에게 문의해야 합니다.

다음은 시작하기 위한 몇 가지 링크입니다.

  • 유형별로 나열된 Schema.org의 문서.
  • 위의 링크에서 찾은 정보와 시작하는 데 유용한 몇 가지 예를 가지고 놀기에 좋은 JSON Playground입니다.
  • 개발자 James Flynn의 JSON-LD Generator는 사용이 매우 간편하고 힘든 작업을 수행합니다.
  • Search Engine News에서 제공하는 실제 구조화된 데이터 가이드로, 풍부한 스니펫의 예가 포함되어 있습니다.

단계별 가이드

이제 시작하기 위해 태그 관리자를 사용하여 JSON-LS 구조화된 데이터를 푸시하는 따라하기 쉬운 예를 살펴보겠습니다. 참고: 아직 GTM을 사용하여 마케팅 및 분석 태그를 배포하고 관리하지 않는 경우 이 간단한 설정 및 설치 가이드를 읽으십시오.

1단계 – 태그 추가

먼저 새 태그를 추가합니다.
새 태그 추가 - Google 태그 관리자

2단계 – 태그 이름 지정

의미가 있는 태그 이름을 지정하세요. 이 예에서는 조직 스키마 마크업을 추가하는 데 집중할 것입니다.
JSON 조직 스키마 마크업

3단계 – 사용자 정의 HTML 태그 선택

자체 JSON-LD 마크업을 사용하고 있으므로 사용자 정의 HTML 태그 옵션을 선택하고 계속을 눌러야 합니다.

사용자 정의 HTML 태그 선택

4단계 – JSON-LD 마크업 입력

이제 HTML 상자에 마크업을 입력해야 합니다. 이 예에서는 여기에서 찾은 조직에 대해 JSON-LD 형식을 사용했습니다.

5단계 – 태그 실행 시기 선택

이 특정 설정의 경우 모든 페이지에서 실행을 선택하고 싶습니다. '조직' 마크업이고 사이트 전체이기 때문입니다. 이렇게 하려면 태그를 저장하기 전에 '모든 페이지'를 선택하기만 하면 됩니다. 그러면 구현이 완료됩니다.
모든 페이지에서 실행

특정 페이지 또는 페이지 그룹에 특정한 스키마를 추가하려면 '일부 페이지' 옵션을 사용하여 특정 페이지를 지정할 수 있습니다.

Google 태그 관리자 트리거 일부 페이지 선택
연락처 페이지에 지역 업체 정보를 추가하거나 마크업할 사업장 위치가 여러 개인 경우 이 작업을 수행할 수 있습니다.

팁: 페이지 그룹을 지정하려는 경우 페이지 URL '포함' 작업 또는 RegEx(정규 표현식) 작업을 사용할 수 있습니다.

또 다른 팁: 구조화된 데이터(코드)를 단일 사용자 정의 HTML 태그 또는 태그의 논리적 그룹으로 결합하여 컨테이너에 있는 태그 수를 줄일 수 있습니다.

6단계 – 테스트

Google 태그 관리자의 미리보기 및 디버그 모드를 사용하여 태그가 실행되고 있는지 테스트할 수 있지만 태그 관리자 플랫폼 외부에서 작동하는지 확인해야 합니다.

GTM에서 미리보기, 디버그 및 게시

Google과 Bing에는 구조화된 데이터를 테스트하고 모든 것이 제대로 작동하는지 확인하는 편리한 도구가 있습니다. 먼저 태그 관리자에 컨테이너 버전을 게시해야 합니다.

  • Google의 구조화된 데이터 테스트 도구
  • Bing의 마크업 유효성 검사기

구조화된 데이터 테스트

플러그인, 태그 관리자를 사용했거나 스키마를 하드 코딩했는지 여부에 관계없이 구현을 테스트할 때 이러한 무료 도구를 사용해야 합니다. Google은 최근 강조 표시, 검색 및 바꾸기, 자동 완성과 같은 기능을 개선하여 도구를 일부 개선했습니다.

이 방법을 사용하면 JSON-LD 스니펫을 문제 없이 페이지에 삽입할 수 있습니다. 그러나 더 많은 기술을 얻고 태그 관리자를 사용하여 스니펫을 동적으로 생성하려는 경우(예: {{page URL}} 사용) 작동하지 않습니다. Chris Goddard는 최근 Moz 블로그에 이에 대한 해결 방법을 포함하여 훌륭한 게시물을 작성했습니다.

결론

지난 몇 년 동안의 최근 개발로 인해 웹사이트에서 스키마 마크업을 훨씬 쉽게 구현할 수 있습니다. Google의 자체 데이터 하이라이터 도구는 Google의 이익을 위해 스키마를 빠르게 추가하는 쉬운 방법이지만 플러그인, Google 태그 관리자를 사용하거나 손으로 스키마를 코딩할 계획을 세우는 것이 좋습니다.

JSON-LD 구조화된 데이터를 구현하는 것은 이제 스키마 마크업의 형식을 지정하는 가장 널리 허용되고 권장되는 방법입니다. 검색 결과에 리치 스니펫이나 리치 카드가 표시된다는 보장은 없지만 올바르게 구현된다면 검색 엔진에 가능한 최고의 데이터를 제공하는 데 방해가 되지는 않습니다.

웹사이트에서 구조화된 데이터를 구현하는 데 도움이 필요하면 연락하세요.


도움이 필요하시면 주저하지 마시고 저희에게 연락해 주십시오.