목차
Table of Contents
본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.
구조화 데이터란 무엇인가요?
구조화 데이터(Structured Data)는 검색 엔진이 웹페이지의 콘텐츠를 더 잘 이해할 수 있도록 도와, SEO를 향상시킬 수 있는 표준화된 데이터 형식입니다.
예를 들어 레시피 페이지라면 재료, 조리 시간, 칼로리 같은 정보를 구조화된 데이터를 사용하여 명확히 정의하게 해주는 거죠. Google Search Central에서도 구조화 데이터는 콘텐츠의 이해도와 분류 개선의 측면에서 중요하게 강조되는 부분이에요.
구조화 데이터를 웹 페이지에 통합하기
구조화된 데이터를 추가하기 전에 웹사이트에 가장 적합한 데이터 형식을 파악해야 해요. 구조화된 데이터의 작동 방식 이해 또는 검색 갤러리 등의 자료에서 필요한 정보를 얻으실 수 있습니다. Framer 사이트에서는 Custom Code 기능을 사용하여 JSON-LD와 같은 구조화된 데이터를 삽입할 수 있습니다. 다음은 레시피 페이지에 대한 구조화된 데이터의 예시입니다.
CMS 상세 페이지에 적용하기
{{}}구문에 CMS 변수를 사용하면 각 페이지에 대해 고유한 구조화된 데이터를 생성할 수 있는데요. 아래로 예를 들어, CMS 의 "Title" 필드를 {{Title}}로 불러오고, Breadcrumbs 마크업을 추가하여 {{Title | json}} JSON 형식에 맞게 구성해보세요.
CMS 페이지에 텍스트 필드로 Schema 작성하기
Schema를 최신 상태로 유지하기 위해서는 위의 방법을 권장합니다. 하지만 이를 보다 자유롭게 쓰고 싶다면 CMS의 Text 필드에 Schema 마크업을 JSON으로 작성할 수 있습니다. 아래의 <head> 구문을 사용하여 태그에 추가해보세요.
해당 {{variable_name | unsafeRaw}}구문은 CMS에 저장된 모든 내용이 수정 없이 출력되도록 합니다. 따라서 이는 JSON+LD 마크업 전체를 CMS에 저장하는 경우에 유용한 방법입니다.
Note: unsafeRaw는 콘텐츠를을 그대로 출력합니다. 따라서 입력란에 잘못된 HTML이 있으면 웹사이트가 손상되거나 보안 문제가 발생할 수 있으니, 꼭 신중히 사용하시길 바랍니다.
구조화 데이터 검증하기
구조화 데이터를 넣었다면 Google Rich Results Test를 사용하여 제대로 작동하는지 확인해야 합니다. 특히 Breadcrumbs 같은 데이터를 통해 바로 테스트해보면 문제 여부를 쉽게 확인할 수 있습니다.
만약 문제가 해결되지 않으셨다면 문의 페이지를 통해 추가적인 도움을 받으실 수 있습니다.
본 글은 Framer 공식 블로그의 ‘Structured data through JSON-LD’를 번역·각색한 콘텐츠입니다.
