First-party fact page

공식 사실 페이지

Keep authoritative prices, specifications, and policies current in one source.

···
html
<div class="scene factsync"><div class="panel master"><span class="label">OFFICIAL FACT</span><b>Price <em id="master">$48</em></b><small>Updated today</small></div><div class="links">↓  ↓  ↓</div><div class="copies"><div class="panel">PRODUCT<em>$48</em></div><div class="panel">FAQ<em>$48</em></div><div class="panel">GUIDE<em>$48</em></div></div><button id="update">Update source price</button></div>
css
.scene{width:min(92%,680px);max-height:94%;font:700 clamp(10px,max(1.7vmin,1vw),15px)/1.3 sans-serif;color:var(--fg)}.label{font:900 clamp(10px,max(1.3vmin,1vw),12px)/1 sans-serif;letter-spacing:.12em;color:var(--accent)}.panel{background:var(--surface);border:1px solid var(--line);padding:clamp(8px,2vmin,18px)}.muted{color:var(--muted)}.accent{color:var(--accent)}.row{display:flex;align-items:center;gap:clamp(5px,1.2vmin,10px)}.pill{display:inline-block;padding:.35em .6em;border:1px solid var(--line);border-radius:30px}button{cursor:pointer;font:inherit}@media(min-width:700px){.scene{transform:scale(1.5)}}.factsync{text-align:center;max-width:570px}.master{display:grid;gap:3px;border-color:var(--accent)}.master b{font-size:clamp(12px,2.6vmin,22px)}.master small{color:var(--muted);font-size:clamp(10px,max(1.2vmin,1vw),12px)}em{font-style:normal;color:var(--accent)}.links{color:var(--accent);font-size:clamp(13px,2.5vmin,22px)}.copies{display:flex;gap:6px}.copies .panel{flex:1;min-width:0;font-size:clamp(10px,max(1.3vmin,1vw),12px)}.copies em{display:block;margin-top:5px;font-size:clamp(12px,2.3vmin,20px);font-weight:900}.factsync button{margin-top:clamp(7px,1.7vmin,15px);padding:.5em 1em;background:var(--fg);color:var(--bg);border:0;font-size:clamp(10px,max(1.3vmin,1vw),12px)}
js
const m=document.querySelector('#master'),copies=[...document.querySelectorAll('.copies em')],btn=document.querySelector('#update');let fresh=false,timer;function show(){fresh=!fresh;m.textContent=fresh?'$45':'$48';copies.forEach((c,i)=>setTimeout(()=>{c.textContent=m.textContent},(i+1)*180))}btn.addEventListener('click',()=>{clearInterval(timer);show()});setTimeout(show,700);timer=setInterval(show,3000);

A first-party fact page is a verifiable source you control for product specs, prices, and policies. Conflicting values across your pages make freshness hard to judge for people and search systems.

In the demo, updating the central price propagates through linked content cards. This illustrates editorial consistency; it does not imply instant AI answer updates.

Keep change history and update dates, and retire stale pages. External answers may lag or remain wrong, so check them separately.

When to use

Use it to establish a canonical source when product facts recur across pages and channels.

Open as page ↗