구조화 데이터는 페이지의 제품·글·조직 같은 정보를 정해진 어휘로 표시합니다. 검색 엔진이 내용을 이해하고 일부 검색 표시 형식의 자격을 판정하는 데 사용할 수 있습니다.
데모에서는 보이는 가격과 마크업 가격이 일치할 때만 검증 표시가 켜집니다. 마크업을 넣는다고 특별한 검색 결과가 보장되지는 않으며, 화면의 사실과 일치해야 합니다.
언제 쓰나
검색 지원 형식에 맞는 콘텐츠의 사실 필드를 표현하고 검증할 때 씁니다.
구조화 데이터
Structured data
페이지에 보이는 사실을 기계가 읽을 수 있는 필드로 표시합니다.
···
<div class="schema"><div class="product"><small>VISIBLE PAGE</small><b>Field notebook</b><strong>$24</strong></div><div class="equals" id="equals">≠</div><div class="code"><small>JSON-LD</small><code>name: Field notebook<br>price: <span id="price">29</span></code></div><button id="match">MATCH FACTS</button></div>.schema{display:flex;align-items:center;justify-content:center;gap:clamp(7px,2vmin,20px);position:relative;width:94%;padding-bottom:clamp(25px,5vmin,42px);font:800 clamp(10px,max(1.7vmin,1vw),15px) sans-serif;color:var(--fg)}.product,.code{display:grid;gap:clamp(7px,1.3vmin,12px);padding:clamp(10px,2vmin,19px);border:1px solid var(--line);background:var(--surface);min-width:29%}.product small,.code small{color:var(--accent);font-size:max(10px,1vw,.7em);letter-spacing:.1em}.product strong{font-size:clamp(16px,3vmin,27px)}.code code{font:700 clamp(10px,max(1.5vmin,1vw),13px)/1.6 monospace}.equals{font-size:clamp(25px,5vmin,46px);color:var(--accent)}.schema button{position:absolute;bottom:0;background:var(--fg);color:var(--bg);border:0;padding:6px 12px;font:inherit;cursor:pointer}@media(min-width:700px){body > :not(script){zoom:1.55}.map,.feed,.linkmap{height:48%}}const price=document.querySelector('#price'),equals=document.querySelector('#equals'),button=document.querySelector('#match');let match=false;function show(){price.textContent=match?'24':'29';equals.textContent=match?'=':'≠';equals.style.color=match?'var(--accent-2)':'var(--accent)'}button.addEventListener('click',()=>{clearInterval(timer);match=!match;show()});const timer=setInterval(()=>{match=!match;show()},2600);