웹 구성요소 및 JSON-LD를 사용하여 시맨틱 사이트 만들기

Ewa Gasperowicz
X

웹 구성요소와 Polymer와 같은 지원 라이브러리의 인기가 높아짐에 따라 맞춤 요소가 UI 기능을 빌드하는 매력적인 방법이 되었습니다. 사용자 지정 요소의 기본 캡슐화는 독립형 위젯을 만드는 데 특히 유용합니다.

일부 위젯은 독립형이지만 대부분의 위젯은 외부 데이터를 사용하여 사용자에게 콘텐츠를 표시합니다(예: 날씨 위젯의 현재 예보 또는 지도 위젯의 회사 주소).

Polymer에서 맞춤 요소는 선언적입니다. 즉, 프로젝트에 가져온 후에는 HTML에 맞춤 요소를 포함하고 구성하는 것이 매우 쉽습니다(예: 속성을 통해 위젯을 채우는 데이터를 전달).

동일한 데이터 스니펫을 재사용하여 여러 위젯을 채우고 검색엔진 및 기타 소비자에게 페이지 콘텐츠를 알리는 동시에 중복을 피하고 데이터 일관성을 보장할 수 있다면 좋을 것입니다. 데이터에 schema.org 표준과 JSON-LD 형식을 사용하면 됩니다.

구조화된 데이터로 구성요소 채우기

일반적으로 JSON은 특정 위젯에 데이터를 삽입하는 편리한 방법입니다. JSON-LD 지원이 확대됨에 따라 동일한 데이터 구조를 재사용하여 UI뿐만 아니라 검색엔진 및 기타 구조화된 데이터 소비자에게 페이지 콘텐츠의 정확한 의미를 알릴 수 있습니다.

웹 구성요소와 JSON-LD를 결합하면 애플리케이션에 적합한 잘 정의된 아키텍처를 만들 수 있습니다.

  • schema.org와 JSON-LD는 데이터 레이어를 나타내며 schema.org는 데이터에 관한 어휘를 제공하고 JSON-LD는 데이터의 형식과 전송을 구성합니다.
  • 사용자설정 요소는 프레젠테이션 계층을 나타내며 구성 가능하고 데이터 자체와는 분리되어 있습니다.

예

다음 예를 살펴보겠습니다. Google 사무실 위치가 몇 군데 나열된 페이지입니다. https://github.com/googlearchive/structured-data-web-components/tree/master/demo

이 페이지에는 모든 지점의 핀이 있는 지도와 위치 목록이 있는 드롭다운이라는 두 가지 위젯이 포함되어 있습니다. 두 위젯 모두 사용자에게 동일한 데이터를 표시하고 검색엔진이 페이지를 읽을 수 있어야 합니다.

웹 구성요소 및 JSON-LD 데모 페이지

이 데모에서는 LocalBusiness 항목을 사용하여 일부 Google 사무실의 지리적 위치인 데이터의 의미를 표현합니다.

Google에서 이 페이지를 읽고 색인을 생성하는 방식을 확인하는 가장 좋은 방법은 새롭게 개선된 구조화된 데이터용 테스트 도구를 사용하는 것입니다. URL 가져오기 섹션에 데모의 URL을 제출하고 가져오기 및 유효성 검사를 클릭합니다. 오른쪽 섹션에는 페이지에서 가져온 파싱된 데이터와 발생할 수 있는 오류가 표시됩니다. JSON-LD 마크업이 올바르고 Google에서 처리할 수 있는지 확인하는 매우 편리한 방법입니다.

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

웹마스터 센터 블로그 게시물에서 이 도구와 이 도구에 도입된 개선사항에 관해 자세히 알아볼 수 있습니다.

구성요소를 정형 데이터 소스에 연결

데모 코드와 빌드하는 데 사용된 웹 구성요소 코드는 GitHub에 있습니다. combined-demo.html 페이지 소스 코드를 살펴보겠습니다.

첫 번째 단계로 JSON-LD 스크립트를 사용하여 페이지에 데이터를 삽입합니다.

<script type="application/ld+json">
{...}
</script>

이렇게 하면 schema.org 표준 및 JSON-LD 형식을 지원하는 다른 소비자(예: 검색엔진)가 데이터에 쉽게 액세스할 수 있습니다.

두 번째 단계로 두 개의 웹 구성요소를 사용하여 데이터를 표시합니다.

  • address-dropdown-jsonld - 이 요소는 'jsonld' 속성으로 전달된 모든 위치가 포함된 드롭다운을 만듭니다.
  • google-map-jsonld: 이 요소는 'jsonld' 속성에 전달된 모든 위치의 핀이 있는 Google 지도를 만듭니다.

이를 위해 HTML 가져오기를 사용하여 페이지로 가져옵니다.

<link rel="import" href="bower_components/google-map-jsonld/google-map-jsonld.html">
<link rel="import" href="bower_components/address-dropdown-jsonld/address-dropdown-jsonld.html">

가져온 후에는 다음 페이지에서 사용할 수 있습니다.

<address-dropdown-jsonld jsonld=""></address-dropdown-jsonld>
<google-map-jsonld jsonld=""></google-map-jsonld>

마지막으로 JSON-LD 데이터와 요소를 연결합니다. polymer 준비 콜백에서 이를 실행합니다. 이 콜백은 구성요소를 사용할 준비가 되면 트리거되는 이벤트입니다. 요소는 속성을 통해 구성할 수 있으므로 JSON-LD 데이터를 구성요소의 적절한 속성에 할당하기만 하면 됩니다.

document.addEventListener('polymer-ready', function() {
    var jsonld = JSON.parse(
        document.querySelector(
            'script[type="application/ld+json"]').innerText);
    document.querySelector('google-map-jsonld').jsonld = jsonld['@graph'];
    document.querySelector('address-dropdown-jsonld').jsonld = jsonld['@graph'];
    });

JSON의 강력한 형제인 JSON-LD

눈치채셨겠지만, 이는 기존의 일반 JSON을 사용하여 데이터를 전달하는 것과 매우 유사하게 작동합니다. 하지만 JSON-LD에는 schema.org 호환성에서 직접 파생된 몇 가지 이점이 있습니다.

  • 데이터는 schema.org 표준을 사용하여 명확한 방식으로 구조화되어 있습니다. JSON-LD 지원 웹 구성요소에 의미 있고 일관된 입력을 제공할 수 있으므로 큰 장점이 있습니다.
  • 검색엔진에서 이 데이터를 효율적으로 사용할 수 있으므로 페이지의 색인 생성이 개선되고 검색 결과에 리치 스니펫이 표시될 수 있습니다.
  • 이러한 방식으로 웹 구성요소를 작성하는 경우 구성요소가 예상하는 데이터에 관한 새로운 구조 (및 문서)를 학습하거나 고안할 필요가 없습니다. schema.org에서 이미 모든 작업과 합의를 도출하고 있습니다. 또한 호환되는 구성요소의 전체 생태계를 더 쉽게 빌드할 수 있습니다.

요약하면 JSON-LD 및 schema.org를 웹 구성요소 기술과 결합하면 개발자 및 검색엔진이 쉽게 접근할 수 있는 캡슐화된 재사용 가능한 UI를 빌드할 수 있습니다.

자체 구성요소 만들기

GitHub의 예시를 사용해 보거나 재사용 가능한 구성요소 만들기에 관한 Polymer 가이드를 읽고 직접 작성해 보세요. JSON-LD로 마크업할 수 있는 다양한 항목에 대한 아이디어를 얻으려면 developers.google.com의 구조화된 데이터 문서를 확인하세요.

빌드한 커스텀 요소를 자랑하려면 @polymer를 통해 이름을 언급해 주세요.