Generative engine optimization (GEO)

생성형 검색 최적화 (GEO)

Make a source clear and useful enough for an AI search answer to cite.

···
html
<div class="answer"><div class="question">Q · How long does delivery take?</div><div class="response"><small>AI ANSWER</small><p>Most orders arrive in <mark>2–4 business days</mark> after dispatch.<sup>1</sup></p><div class="sources"><div class="source"><b>1</b><span>POLICY<small>Updated</small></span></div><div class="source muted"><b>2</b><span>ORDER HELP<small>FAQs</small></span></div></div></div></div>
css
.answer{width:min(90%,610px);font:700 clamp(10px,max(1.7vmin,1vw),14px)/1.35 sans-serif}.question{border:1px solid var(--line);border-radius:30px;padding:clamp(8px,2vmin,15px);background:var(--surface);font-weight:900}.response{position:relative;margin-top:clamp(7px,2vmin,16px);border:1px solid var(--line);background:var(--surface);padding:clamp(9px,2.5vmin,23px)}.response>small{color:var(--accent);font-weight:900;letter-spacing:.13em}.response p{font-size:clamp(12px,2.6vmin,24px);font-weight:800;margin:.45em 0}.response mark{background:linear-gradient(transparent 52%,#ffd84d 52%);color:var(--fg);animation:highlight 4s ease-in-out infinite}.response sup{color:var(--accent);font-size:max(10px,1vw,.55em);animation:blink 4s ease-in-out infinite}.sources{display:flex;gap:clamp(5px,1.5vmin,14px)}.source{display:flex;align-items:center;gap:clamp(4px,1vmin,8px);flex:1;min-width:0;border:1px solid var(--accent);padding:clamp(5px,1.2vmin,10px);animation:source 4s ease-in-out infinite}.source b{display:grid;place-items:center;flex:none;width:clamp(17px,3.5vmin,28px);aspect-ratio:1;background:var(--accent);color:white}.source span{min-width:0;font-size:clamp(10px,max(1.4vmin,1vw),12px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.source small{display:block;color:var(--muted);font-size:clamp(10px,max(1.1vmin,1vw),12px)}.source.muted{border-color:var(--line);opacity:.55}.source.muted b{background:var(--muted)}@keyframes highlight{0%,15%{background-size:0 100%}40%,85%{background-size:100% 100%}100%{background-size:0 100%}}@keyframes source{0%,25%{box-shadow:none;transform:none}45%,85%{box-shadow:4px 4px 0 var(--accent);transform:translateY(-2px)}100%{box-shadow:none}}@keyframes blink{0%,35%{opacity:.3}50%,90%{opacity:1}100%{opacity:.3}}@media(min-width:600px){.answer{width:min(90%,840px);font-size:18px}.question{padding:16px}.response{padding:22px}.response p{font-size:24px}.sources{gap:12px}.source{padding:12px}.source b{width:28px}.source span{font-size:12px}.source small{font-size:max(10px,1vw,10px)}}small{font-size:max(.833em,10px,1vw)}

GEO aims to make content discoverable and useful as a source for generative search answers. It looks beyond ranking to how information is used inside an answer.

In the demo, a sentence in the answer connects to its source card. Clear headings, verifiable facts, authorship, update dates, and readable structure also help people judge the source.

No markup guarantees a citation. Source display and clicks vary by service and query, so observe actual results rather than assuming inclusion.

When to use

Use it when publishing answers to search questions or reviewing the credibility of existing source pages.

Open as page ↗