웹 구성요소와 Polymer와 같은 지원 라이브러리가 늘어나면서 맞춤 요소가 매력적인 UI 기능을 빌드하는 방법이 되었습니다. 사용자설정 요소의 기본 캡슐화 덕분에 사용자설정 요소는 독립적인 위젯을 만드는 데 특히 유용합니다.
일부 위젯은 독립적이지만, 대부분은 외부 데이터에 의존하여 콘텐츠를 제공합니다(예: 날씨 위젯의 경우 현재 예보, 지도 위젯의 경우 회사 주소).
Polymer에서 맞춤 요소는 선언적입니다. 즉, 맞춤 요소를 프로젝트로 가져온 후에는 매우 쉽게 HTML에 포함하고 구성할 수 있습니다(예: 데이터를 전달하여 속성을 통해 위젯을 채우는 방식).
동일한 데이터 스니펫을 재사용하여 다른 위젯을 채우고 검색엔진과 다른 소비자에게 페이지 콘텐츠에 대해 알리면 반복을 피하고 데이터 일관성을 유지할 수 있다면 좋을 것입니다. 데이터에 schema.org 표준과 JSON-LD 형식을 사용하면 됩니다.
구성요소에 구조화된 데이터 채우기
일반적으로 JSON은 특정 위젯에 데이터를 삽입하는 편리한 방법입니다. JSON-LD에 대한 지원이 늘어남에 따라 동일한 데이터 구조를 재사용하여 UI는 물론 검색엔진과 기타 사용자에게 페이지 콘텐츠의 정확한 의미에 대해 구조화된 데이터를 제공할 수 있게 되었습니다.
웹 구성 요소를 JSON-LD와 결합하여 애플리케이션을 위한 잘 정의된 아키텍처를 만듭니다.
- schema.org와 JSON-LD는 데이터 영역을 나타내며 schema.org는 데이터에 대한 어휘를 제공하고 JSON-LD는 데이터의 형식과 전송을 구성합니다.
- 사용자설정 요소는 구성 가능하고 데이터 자체와 분리된 프리젠테이션 계층을 나타냅니다.
예
Google Office 위치가 나열된 페이지(https://github.com/googlearchive/structured-data-web-components/tree/master/demo)를 예로 살펴보겠습니다.
여기에는 모든 사무실에 대한 핀이 표시된 지도와 위치 목록이 포함된 드롭다운, 이렇게 두 개의 위젯이 있습니다. 두 위젯 모두 사용자에게 동일한 데이터를 표시하고 검색엔진에서 페이지를 읽을 수 있어야 합니다.
이 데모에서는 LocalBusiness 항목을 사용하여 일부 Google 사무소의 지리적 위치인 데이터의 의미를 표현합니다.
Google에서 이 페이지를 읽고 색인을 생성하는 방식을 확인하는 가장 좋은 방법은 새롭게 개선된 구조화된 데이터용 테스트 도구를 사용하는 것입니다. URL 가져오기 섹션에 데모의 URL을 제출하고 가져오기 및 유효성 검사를 클릭합니다. 오른쪽 섹션에는 페이지에서 가져온 파싱된 데이터 및 발생할 수 있는 오류가 표시됩니다. 이는 JSON-LD 마크업이 올바르고 Google에서 처리할 수 있는지 확인하는 데 매우 편리한 방법입니다.
도구 및 개선사항에 관한 자세한 내용은 웹마스터 센터 블로그 게시물을 참고하세요.
구조화된 데이터 소스에 구성요소 연결
데모 및 빌드에 사용된 웹 구성요소의 코드는 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 가져오기를 사용하여 Google 페이지로 가져옵니다.
<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 데이터와 요소를 함께 연결했습니다. 이 작업은 폴리머 지원 콜백에서 실행합니다 (구성요소를 사용할 준비가 되었을 때 트리거되는 이벤트임). 요소는 속성을 통해 구성할 수 있으므로, 구성요소의 적절한 속성에 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-LD, JSON의 강력한 형제
아시다시피 이는 데이터를 전달하기 위해 기존의 일반 JSON을 사용하는 것과 매우 유사합니다. 하지만 JSON-LD에는 schema.org 호환성에서 직접 파생된 몇 가지 장점이 있습니다.
- 데이터는 schema.org 표준을 사용하여 명확한 방식으로 구조화되어 있습니다. 이는 JSON-LD 지원 웹 구성요소에 의미 있고 일관된 입력을 제공할 수 있게 해주기 때문에 중요한 이점입니다.
- 데이터는 검색엔진에서 효율적으로 사용되어 페이지의 색인 생성을 개선하고 검색결과에 리치 스니펫이 표시될 수 있습니다.
- 이 방식으로 웹 구성 요소를 작성하는 경우 구성요소가 예상하는 데이터에 대한 새로운 구조 (및 문서)를 학습하거나 고안할 필요가 없습니다. schema.org가 모든 어려운 작업과 합의 구축을 이미 수행하고 있습니다. 또한 호환되는 구성요소의 전체 생태계를 더 쉽게 빌드할 수 있습니다.
요약하자면, JSON-LD와 schema.org는 웹 구성요소 기술과 결합되어 개발자와 검색엔진이 쉽게 사용할 수 있는 캡슐화된 재사용 가능한 UI를 빌드할 수 있게 해줍니다.
자체 구성요소 만들기
GitHub의 예시를 사용해 보거나 재사용 가능한 구성요소 만들기에 관한 Polymer 가이드를 참고하여 직접 작성할 수 있습니다. Developers.google.com의 구조화된 데이터 문서에서 JSON-LD로 마크업할 수 있는 다양한 항목에 관해 알아보세요.
@polymer를 사용해 직접 만든 맞춤 요소를 소개해 주세요.