saglitzdesign-mcp 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +29 -0
- package/README.md +191 -0
- package/dist/examples.js +67 -0
- package/dist/index.js +374 -0
- package/dist/knowledge.js +123 -0
- package/knowledge/books/design-of-everyday-things.md +155 -0
- package/knowledge/books/dont-make-me-think.md +154 -0
- package/knowledge/books/grid-typography-classics.md +152 -0
- package/knowledge/books/hooked-retention.md +196 -0
- package/knowledge/books/influence-persuasion.md +232 -0
- package/knowledge/books/positioning-messaging.md +178 -0
- package/knowledge/books/psychology-of-design.md +152 -0
- package/knowledge/books/refactoring-ui.md +157 -0
- package/knowledge/books/storybrand-copywriting.md +194 -0
- package/knowledge/components/buttons.md +90 -0
- package/knowledge/components/cards-lists-modals.md +63 -0
- package/knowledge/components/forms-inputs.md +61 -0
- package/knowledge/components/navigation.md +54 -0
- package/knowledge/craft/design-critique-scoring.md +237 -0
- package/knowledge/craft/typography-craft.md +177 -0
- package/knowledge/craft/ux-writing.md +185 -0
- package/knowledge/craft/visual-craft-standards.md +161 -0
- package/knowledge/design-languages/android-app-design.md +197 -0
- package/knowledge/design-languages/apple-hig-liquid-glass.md +94 -0
- package/knowledge/design-languages/design-tokens-theming.md +108 -0
- package/knowledge/design-languages/fluent-2.md +82 -0
- package/knowledge/design-languages/ios-app-design.md +205 -0
- package/knowledge/design-languages/macos-app-design.md +202 -0
- package/knowledge/design-languages/material-3.md +113 -0
- package/knowledge/design-languages/web-trends-2026.md +87 -0
- package/knowledge/examples/ios.json +299 -0
- package/knowledge/examples/web.json +321 -0
- package/knowledge/geo/geo-fundamentals.md +120 -0
- package/knowledge/geo/geo-tactics-checklist.md +148 -0
- package/knowledge/marketing/ad-creative.md +155 -0
- package/knowledge/marketing/branding-identity.md +153 -0
- package/knowledge/marketing/email-marketing.md +155 -0
- package/knowledge/patterns/mobile/android-patterns.md +181 -0
- package/knowledge/patterns/mobile/auth-patterns.md +69 -0
- package/knowledge/patterns/mobile/checkout-payments.md +77 -0
- package/knowledge/patterns/mobile/empty-states-buttons.md +80 -0
- package/knowledge/patterns/mobile/navigation-home.md +78 -0
- package/knowledge/patterns/mobile/onboarding-paywall.md +85 -0
- package/knowledge/patterns/mobile/settings-lists.md +71 -0
- package/knowledge/patterns/web/dashboards.md +141 -0
- package/knowledge/patterns/web/feature-sections.md +122 -0
- package/knowledge/patterns/web/hero-sections.md +121 -0
- package/knowledge/patterns/web/landing-signup.md +168 -0
- package/knowledge/patterns/web/pricing-sections.md +122 -0
- package/knowledge/patterns/web/social-proof-footer.md +156 -0
- package/knowledge/process/marketing-website-roadmap.md +72 -0
- package/knowledge/process/product-design-roadmap.md +117 -0
- package/knowledge/seo/on-page-seo.md +124 -0
- package/knowledge/seo/seo-for-designers.md +159 -0
- package/knowledge/seo/technical-seo.md +194 -0
- package/knowledge/ux/accessibility.md +68 -0
- package/knowledge/ux/color-systems.md +58 -0
- package/knowledge/ux/conversion-ux.md +78 -0
- package/knowledge/ux/mobile-ux.md +69 -0
- package/knowledge/ux/motion-microinteractions.md +67 -0
- package/knowledge/ux/principles-heuristics.md +57 -0
- package/knowledge/ux/spacing-layout.md +68 -0
- package/knowledge/ux/typography.md +63 -0
- package/package.json +63 -0
- package/scripts/regenerate-examples.md +61 -0
|
@@ -0,0 +1,321 @@
|
|
|
1
|
+
[
|
|
2
|
+
{
|
|
3
|
+
"id": "web-hero-clickup",
|
|
4
|
+
"title": "ClickUp — hero with inline email capture and product preview",
|
|
5
|
+
"platform": "web",
|
|
6
|
+
"app": "ClickUp",
|
|
7
|
+
"pattern": "hero",
|
|
8
|
+
"description": "Bold black headline ('Manage operations like a boss') paired with an inline work-email field and a purple Get Started button, with 'Free forever, no credit card' friction-reducers right beside the CTA. A floating product screenshot with a play button sits on a sweeping purple gradient blob, and a logo strip ('Join 800,000+ teams' with Samsung, IBM, Booking.com) anchors the fold with social proof.",
|
|
9
|
+
"tags": ["hero", "landing", "cta", "email-capture", "signup", "screenshot", "social-proof", "gradient"],
|
|
10
|
+
"mobbin_url": "https://mobbin.com/sites/sections/8327bdfc-5c9d-4240-b4af-9431eebd0f9e",
|
|
11
|
+
"image": "images/web-hero-clickup.jpg"
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
"id": "web-hero-framer",
|
|
15
|
+
"title": "Framer — dark hero framed inside the product editor",
|
|
16
|
+
"platform": "web",
|
|
17
|
+
"app": "Framer",
|
|
18
|
+
"pattern": "hero",
|
|
19
|
+
"description": "Shows the marketing site rendered inside Framer's own editor chrome, so the hero doubles as a product demo. Deep purple-on-black gradient scene, centered white headline with an emotional hook, and a single high-contrast purple 'Sign up - it's free' pill button. Great example of a dark, immersive hero where the product is the visual.",
|
|
20
|
+
"tags": ["hero", "dark", "cta", "signup", "gradient", "screenshot", "landing"],
|
|
21
|
+
"mobbin_url": "https://mobbin.com/sites/sections/6b15ed49-32d7-4761-b7f8-fefed2414fde",
|
|
22
|
+
"image": "images/web-hero-framer.jpg"
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"id": "web-hero-passionfroot",
|
|
26
|
+
"title": "Passionfroot — warm minimal hero with floating UI fragments",
|
|
27
|
+
"platform": "web",
|
|
28
|
+
"app": "Passionfroot",
|
|
29
|
+
"pattern": "hero",
|
|
30
|
+
"description": "Large serif headline ('Where creators do brand deals') centered on a warm cream background, one short subline, and a single black 'Start for Free' pill. Product-UI fragments (payment card, calendar, charts) float in from the edges at low contrast, hinting at the product without competing with the copy. Excellent restraint and hierarchy.",
|
|
31
|
+
"tags": ["hero", "minimal", "cta", "serif", "landing", "light", "screenshot"],
|
|
32
|
+
"mobbin_url": "https://mobbin.com/sites/sections/d008689a-c73f-4513-a760-25a93ef6f043",
|
|
33
|
+
"image": "images/web-hero-passionfroot.jpg"
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"id": "web-hero-mural",
|
|
37
|
+
"title": "Mural — playful oversized CTA hero",
|
|
38
|
+
"platform": "web",
|
|
39
|
+
"app": "Mural",
|
|
40
|
+
"pattern": "hero",
|
|
41
|
+
"description": "A vivid pink section where the CTA itself is the hero: a giant yellow sticky-note-shaped button reading 'Get started' in a large serif, echoing the product's whiteboard sticky notes. Tiny supporting line above and a persistent 'Sign up, free forever' button in the nav. Memorable, brand-forward take on a conversion section.",
|
|
42
|
+
"tags": ["hero", "cta", "playful", "colorful", "signup", "brand", "landing"],
|
|
43
|
+
"mobbin_url": "https://mobbin.com/sites/sections/edb14076-5e1f-48d8-ba26-5e5e43f9a9b0",
|
|
44
|
+
"image": "images/web-hero-mural.jpg"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"id": "web-pricing-webflow",
|
|
48
|
+
"title": "Webflow — two-plan pricing with benefit checklist",
|
|
49
|
+
"platform": "web",
|
|
50
|
+
"app": "Webflow",
|
|
51
|
+
"pattern": "pricing",
|
|
52
|
+
"description": "Split layout: left column carries the headline and three checkmarked benefits, right side shows two compact plan cards (Freelancer $16, Agency $35) with per-seat pricing and short feature lists. The recommended plan gets a solid purple fill while the other stays light, making the preferred choice obvious at a glance.",
|
|
53
|
+
"tags": ["pricing", "plans", "cards", "comparison", "saas", "checklist", "cta"],
|
|
54
|
+
"mobbin_url": "https://mobbin.com/sites/sections/5f39c974-75c8-4ea0-abdb-b9bdaa05596d",
|
|
55
|
+
"image": "images/web-pricing-webflow.jpg"
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"id": "web-pricing-elevenlabs",
|
|
59
|
+
"title": "ElevenLabs — six-tier plan comparison table",
|
|
60
|
+
"platform": "web",
|
|
61
|
+
"app": "ElevenLabs",
|
|
62
|
+
"pattern": "pricing",
|
|
63
|
+
"description": "A dense 'Compare our plans' matrix across six tiers (Free to Business), grouped by capability sections like Credits and Text to Speech. Each column gets its own 'Get started' button with the popular tier inverted in black; green checks and gray crosses keep row scanning fast. Strong reference for detailed feature-comparison pricing.",
|
|
64
|
+
"tags": ["pricing", "comparison", "table", "tiers", "saas", "matrix", "cta"],
|
|
65
|
+
"mobbin_url": "https://mobbin.com/sites/sections/ed1a4962-9ba3-4765-9ec1-134cac2a9d2e",
|
|
66
|
+
"image": "images/web-pricing-elevenlabs.jpg"
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"id": "web-pricing-apollo",
|
|
70
|
+
"title": "Apollo — compare-plans table with 'most popular' highlight",
|
|
71
|
+
"platform": "web",
|
|
72
|
+
"app": "Apollo",
|
|
73
|
+
"pattern": "pricing",
|
|
74
|
+
"description": "Four-column comparison ($0 to $119/user) with credit allotments under each price and yellow CTA buttons, the Professional tier flagged with a 'Most Popular' badge and a black button. Features are grouped into collapsible category rows (Outbound, Inbound) with icons, keeping a long matrix scannable.",
|
|
75
|
+
"tags": ["pricing", "comparison", "table", "plans", "badge", "saas", "collapsible"],
|
|
76
|
+
"mobbin_url": "https://mobbin.com/sites/sections/04450619-1e0b-41af-bb83-dc67a4fca119",
|
|
77
|
+
"image": "images/web-pricing-apollo.jpg"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"id": "web-pricing-maze",
|
|
81
|
+
"title": "Maze — editorial pricing cards on warm neutral background",
|
|
82
|
+
"platform": "web",
|
|
83
|
+
"app": "Maze",
|
|
84
|
+
"pattern": "pricing",
|
|
85
|
+
"description": "Pricing as an asymmetric card grid: Free and Starter stacked on the left with price badges ('$99 per month') in the card corner, Enterprise given a larger card with a lime graphic accent and a long 'Enterprise includes' list. Serif-flavored headings and generous whitespace make a normally dry section feel designed.",
|
|
86
|
+
"tags": ["pricing", "cards", "plans", "enterprise", "minimal", "editorial", "saas"],
|
|
87
|
+
"mobbin_url": "https://mobbin.com/sites/sections/3227e1e7-10d9-4ac3-bf5d-b7ba286afa33",
|
|
88
|
+
"image": "images/web-pricing-maze.jpg"
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
"id": "web-features-square",
|
|
92
|
+
"title": "Square — alternating feature rows with photography",
|
|
93
|
+
"platform": "web",
|
|
94
|
+
"app": "Square",
|
|
95
|
+
"pattern": "features",
|
|
96
|
+
"description": "Four stacked feature rows, each pairing a small real-world photo of the product in use with a bold benefit heading, two lines of copy, and a 'Learn more' link, separated by hairline rules. Extremely scannable rhythm that grounds software features in physical retail contexts.",
|
|
97
|
+
"tags": ["features", "list", "photography", "benefits", "rows", "minimal", "learn-more"],
|
|
98
|
+
"mobbin_url": "https://mobbin.com/sites/sections/54ba196c-c979-4564-a54a-c02a23e8e8f7",
|
|
99
|
+
"image": "images/web-features-square.jpg"
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
"id": "web-features-fibery",
|
|
103
|
+
"title": "Fibery — icon grid of secondary features",
|
|
104
|
+
"platform": "web",
|
|
105
|
+
"app": "Fibery",
|
|
106
|
+
"pattern": "features",
|
|
107
|
+
"description": "A 4-column grid of 16 lightweight feature entries, each just a small colorful icon and a short label (Map view, Forms, Whiteboards, Automation Rules). Shows how to compress a long capability list into a dense, skimmable grid without screenshots, with a 'new' badge for fresh items.",
|
|
108
|
+
"tags": ["features", "grid", "icons", "bento", "capabilities", "compact", "saas"],
|
|
109
|
+
"mobbin_url": "https://mobbin.com/sites/sections/3f148051-6eff-401c-bc33-113cc1d2e964",
|
|
110
|
+
"image": "images/web-features-fibery.jpg"
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
"id": "web-features-mural",
|
|
114
|
+
"title": "Mural — product screenshot gallery grid",
|
|
115
|
+
"platform": "web",
|
|
116
|
+
"app": "Mural",
|
|
117
|
+
"pattern": "features",
|
|
118
|
+
"description": "A 2-up grid of framed product screenshots on saturated pink/purple panels, each captioned (blank board, sticky-note session) with a download link. Demonstrates presenting product UI states as a bold, color-blocked gallery rather than isolated floating screenshots.",
|
|
119
|
+
"tags": ["features", "screenshots", "grid", "gallery", "colorful", "product", "bento"],
|
|
120
|
+
"mobbin_url": "https://mobbin.com/sites/sections/2f012efb-ee2c-4087-8a5a-04b88d103f20",
|
|
121
|
+
"image": "images/web-features-mural.jpg"
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
"id": "web-social-proof-tines",
|
|
125
|
+
"title": "Tines — objection-handling proof wall with customer stats",
|
|
126
|
+
"platform": "web",
|
|
127
|
+
"app": "Tines",
|
|
128
|
+
"pattern": "social-proof",
|
|
129
|
+
"description": "Leads with the skeptic's voice ('Sounds... hard to believe?') on a card that cites 200+ G2 reviews at 4.8 stars, then backs it with a mosaic of stat and quote cards from named enterprise logos (Elastic, Snowflake, Mars, Intercom) — '50% reduction in time per ticket', '10 hours saved every day'. Quantified proof beats generic praise.",
|
|
130
|
+
"tags": ["social-proof", "testimonials", "stats", "logos", "g2", "reviews", "bento", "enterprise"],
|
|
131
|
+
"mobbin_url": "https://mobbin.com/sites/sections/58a55724-34ad-4dc5-accb-743f3b00cd68",
|
|
132
|
+
"image": "images/web-social-proof-tines.jpg"
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
"id": "web-social-proof-mixpanel",
|
|
136
|
+
"title": "Mixpanel — testimonial marquee mixing tweets and NPS quotes",
|
|
137
|
+
"platform": "web",
|
|
138
|
+
"app": "Mixpanel",
|
|
139
|
+
"pattern": "social-proof",
|
|
140
|
+
"description": "Dark purple gradient section with a large headline over two horizontal rows of testimonial cards: named Twitter posts with avatars on top, anonymous NPS-survey quotes below. The overflowing carded rows imply volume of praise, and mixing attributed tweets with NPS verbatims adds credibility range.",
|
|
141
|
+
"tags": ["social-proof", "testimonials", "tweets", "nps", "dark", "carousel", "cards"],
|
|
142
|
+
"mobbin_url": "https://mobbin.com/sites/sections/02e3c65c-ed1d-42b0-9439-4c285f360e44",
|
|
143
|
+
"image": "images/web-social-proof-mixpanel.jpg"
|
|
144
|
+
},
|
|
145
|
+
{
|
|
146
|
+
"id": "web-social-proof-klarna",
|
|
147
|
+
"title": "Klarna — Trustpilot rating with rotating review cards",
|
|
148
|
+
"platform": "web",
|
|
149
|
+
"app": "Klarna",
|
|
150
|
+
"pattern": "social-proof",
|
|
151
|
+
"description": "Left column stacks a Trustpilot widget (4.0, 370,674 reviews), a 'Shoppers love Klarna' headline, and a 100M+ users claim; right side shows two large star-rated quote cards in brand purple/dark tones with arrow controls to page through more. Third-party rating plus first-person quotes in one tight band, with a small honesty disclaimer.",
|
|
152
|
+
"tags": ["social-proof", "testimonials", "trustpilot", "reviews", "ratings", "carousel", "fintech"],
|
|
153
|
+
"mobbin_url": "https://mobbin.com/sites/sections/1a0904da-e870-48b5-bd03-18e75cbb8de3",
|
|
154
|
+
"image": "images/web-social-proof-klarna.jpg"
|
|
155
|
+
},
|
|
156
|
+
{
|
|
157
|
+
"id": "web-social-proof-sproutsocial",
|
|
158
|
+
"title": "Sprout Social — G2 review cards with star ratings and titles",
|
|
159
|
+
"platform": "web",
|
|
160
|
+
"app": "Sprout Social",
|
|
161
|
+
"pattern": "social-proof",
|
|
162
|
+
"description": "Three equal review cards under a plain 'What our customers say about us' heading, each with a quoted review title, star rating, excerpt, 'Read more' link, and an avatar with the reviewer's name and job title; a G2 logo sits in the corner to source the reviews. The canonical, safe testimonial-card pattern executed cleanly.",
|
|
163
|
+
"tags": ["social-proof", "testimonials", "reviews", "g2", "cards", "stars", "avatars"],
|
|
164
|
+
"mobbin_url": "https://mobbin.com/sites/sections/15b459ef-ab1a-4648-8f36-940ab45d4731",
|
|
165
|
+
"image": "images/web-social-proof-sproutsocial.jpg"
|
|
166
|
+
},
|
|
167
|
+
{
|
|
168
|
+
"id": "web-landing-june",
|
|
169
|
+
"title": "June — centered SaaS landing with two-tone headline",
|
|
170
|
+
"platform": "web",
|
|
171
|
+
"app": "June",
|
|
172
|
+
"pattern": "landing",
|
|
173
|
+
"description": "Classic centered SaaS hero: announcement banner up top, simple nav, huge two-tone headline ('A new way to do product analytics' with the key phrase in purple), one-sentence subcopy, a single 'Get started for free' button, and the dashboard screenshot rising from the fold. A hand-drawn annotation ('Auto-generated reports') points into the screenshot for personality.",
|
|
174
|
+
"tags": ["landing", "hero", "saas", "cta", "screenshot", "centered", "analytics", "banner"],
|
|
175
|
+
"mobbin_url": "https://mobbin.com/screens/b0590443-627a-4533-934a-5ebcf03534a5",
|
|
176
|
+
"image": "images/web-landing-june.jpg"
|
|
177
|
+
},
|
|
178
|
+
{
|
|
179
|
+
"id": "web-landing-productboard",
|
|
180
|
+
"title": "Productboard — landing hero with UI-fragment collage",
|
|
181
|
+
"platform": "web",
|
|
182
|
+
"app": "Productboard",
|
|
183
|
+
"pattern": "landing",
|
|
184
|
+
"description": "Centered headline with the value phrase highlighted in blue, dual CTAs ('Get started' primary, 'Request demo' secondary), and an announcement pill above the nav. Below the fold, the product appears as a collage of cropped UI cards — roadmap, charts, a customer quote — rather than one monolithic screenshot, conveying breadth of features.",
|
|
185
|
+
"tags": ["landing", "hero", "saas", "cta", "screenshot", "collage", "demo", "roadmap"],
|
|
186
|
+
"mobbin_url": "https://mobbin.com/screens/9dae958f-c1a5-4b8f-9409-875008fd9b71",
|
|
187
|
+
"image": "images/web-landing-productboard.jpg"
|
|
188
|
+
},
|
|
189
|
+
{
|
|
190
|
+
"id": "web-landing-stackai",
|
|
191
|
+
"title": "StackAI — monochrome enterprise AI landing",
|
|
192
|
+
"platform": "web",
|
|
193
|
+
"app": "StackAI",
|
|
194
|
+
"pattern": "landing",
|
|
195
|
+
"description": "Near-monochrome landing: oversized serif-ish headline ('From process to AI agent, in minutes'), two muted lines of enterprise positioning, then paired CTAs with the sales-led action ('Get a Demo') in solid black and 'Try It Now' in gray. A large workflow-canvas screenshot in a device frame fills the lower half. Quiet, credible enterprise tone.",
|
|
196
|
+
"tags": ["landing", "hero", "enterprise", "ai", "minimal", "cta", "screenshot", "monochrome"],
|
|
197
|
+
"mobbin_url": "https://mobbin.com/screens/00877e31-4b84-477f-844f-000bb4b4405e",
|
|
198
|
+
"image": "images/web-landing-stackai.jpg"
|
|
199
|
+
},
|
|
200
|
+
{
|
|
201
|
+
"id": "web-signup-ghost",
|
|
202
|
+
"title": "Ghost — single-column create-account form",
|
|
203
|
+
"platform": "web",
|
|
204
|
+
"app": "Ghost",
|
|
205
|
+
"pattern": "signup",
|
|
206
|
+
"description": "Chromeless signup: just a centered logo, a bold 'Create your account.' heading, three labeled fields (full name, email, password), and one full-width muted-rose 'Create Account' button on a soft gradient background. Zero navigation or distractions — the minimal signup archetype.",
|
|
207
|
+
"tags": ["signup", "form", "minimal", "onboarding", "account", "single-column", "cta"],
|
|
208
|
+
"mobbin_url": "https://mobbin.com/screens/da622210-897c-40c7-a1fd-ffc5314b9e8f",
|
|
209
|
+
"image": "images/web-signup-ghost.jpg"
|
|
210
|
+
},
|
|
211
|
+
{
|
|
212
|
+
"id": "web-signup-hodinkee",
|
|
213
|
+
"title": "HODINKEE — editorial-brand signup with stacked fields",
|
|
214
|
+
"platform": "web",
|
|
215
|
+
"app": "HODINKEE",
|
|
216
|
+
"pattern": "signup",
|
|
217
|
+
"description": "Serif 'Sign up' heading over five stacked placeholder-labeled fields and a full-width black uppercase button, keeping the brand's editorial typography even in a utility flow. Inline password requirement hint below the field and legal/reCAPTCHA fine print under the button show how to handle compliance copy without clutter.",
|
|
218
|
+
"tags": ["signup", "form", "editorial", "serif", "account", "validation", "legal"],
|
|
219
|
+
"mobbin_url": "https://mobbin.com/screens/51be05c9-eae8-4e46-9bb1-1de560a6fad1",
|
|
220
|
+
"image": "images/web-signup-hodinkee.jpg"
|
|
221
|
+
},
|
|
222
|
+
{
|
|
223
|
+
"id": "web-signup-wayyy",
|
|
224
|
+
"title": "Wayyy — compact signup with side-by-side name fields",
|
|
225
|
+
"platform": "web",
|
|
226
|
+
"app": "Wayyy",
|
|
227
|
+
"pattern": "signup",
|
|
228
|
+
"description": "Tight centered form: logo mark, small 'Sign up' label, first/last name paired on one row, email and password stacked, a terms checkbox with linked policy, a full-width blue 'Create Account' button, and a 'Already have an account? Login' escape hatch. Textbook field grouping and visual order for a minimal-friction signup.",
|
|
229
|
+
"tags": ["signup", "form", "minimal", "checkbox", "terms", "account", "onboarding"],
|
|
230
|
+
"mobbin_url": "https://mobbin.com/screens/d9403e16-63af-4faf-ad50-c64f5324b0d6",
|
|
231
|
+
"image": "images/web-signup-wayyy.jpg"
|
|
232
|
+
},
|
|
233
|
+
{
|
|
234
|
+
"id": "web-dashboard-felt",
|
|
235
|
+
"title": "Felt — map workspace dashboard with thumbnail grid",
|
|
236
|
+
"platform": "web",
|
|
237
|
+
"app": "Felt",
|
|
238
|
+
"pattern": "dashboard",
|
|
239
|
+
"description": "Left sidebar with nav (Recents, Drafts, Settings) and a projects list, main area showing a dismissible onboarding row of video tutorials above a grid of colorful map-thumbnail cards with title, owner, and last-viewed metadata. A trial-countdown card with 'Talk to Sales' CTA sits pinned at the sidebar bottom — good upgrade-nudge placement.",
|
|
240
|
+
"tags": ["dashboard", "sidebar", "cards", "grid", "thumbnails", "onboarding", "trial", "saas"],
|
|
241
|
+
"mobbin_url": "https://mobbin.com/screens/79f37f27-f1f0-4d31-96ec-899917cb9aa4",
|
|
242
|
+
"image": "images/web-dashboard-felt.jpg"
|
|
243
|
+
},
|
|
244
|
+
{
|
|
245
|
+
"id": "web-dashboard-sana-ai",
|
|
246
|
+
"title": "Sana AI — dark AI-assistant home with suggestion cards",
|
|
247
|
+
"platform": "web",
|
|
248
|
+
"app": "Sana AI",
|
|
249
|
+
"pattern": "dashboard",
|
|
250
|
+
"description": "Dark workspace with a slim sidebar (Home, Templates, Meetings, Files plus color-coded collections), a personal greeting in two-tone type ('Hello, Jane / How can I help you today?'), a row of suggested-content cards, and a persistent chat/ask input across the bottom. A credits meter at the sidebar foot handles usage limits gracefully.",
|
|
251
|
+
"tags": ["dashboard", "dark", "sidebar", "ai", "cards", "chat", "greeting", "assistant"],
|
|
252
|
+
"mobbin_url": "https://mobbin.com/screens/4560f04c-5d7c-4a1c-9316-088ec410a8fb",
|
|
253
|
+
"image": "images/web-dashboard-sana-ai.jpg"
|
|
254
|
+
},
|
|
255
|
+
{
|
|
256
|
+
"id": "web-dashboard-clickup",
|
|
257
|
+
"title": "ClickUp — customizable widget dashboard with edit mode",
|
|
258
|
+
"platform": "web",
|
|
259
|
+
"app": "ClickUp",
|
|
260
|
+
"pattern": "dashboard",
|
|
261
|
+
"description": "Icon-labeled left sidebar (Home, Notifications, Pulse, Goals, Dashboards) beside a widget canvas holding draggable cards — welcome note, chat, docs/links, task list — on a visible layout grid with an 'Edit mode' toggle and '+ Add card' button in the toolbar. A clear reference for user-composable dashboards.",
|
|
262
|
+
"tags": ["dashboard", "sidebar", "widgets", "cards", "customizable", "grid", "saas"],
|
|
263
|
+
"mobbin_url": "https://mobbin.com/screens/21aa1ed3-3c0d-4779-a8bc-1fd991aaf0f5",
|
|
264
|
+
"image": "images/web-dashboard-clickup.jpg"
|
|
265
|
+
},
|
|
266
|
+
{
|
|
267
|
+
"id": "web-dashboard-dovetail",
|
|
268
|
+
"title": "Dovetail — project board with card grid and context menu",
|
|
269
|
+
"platform": "web",
|
|
270
|
+
"app": "Dovetail",
|
|
271
|
+
"pattern": "dashboard",
|
|
272
|
+
"description": "Project workspace showing a grid of content cards (video with thumbnail, transcript notes, empty-state cards like '+ New note' and 'Import data') under a top bar with global search and New note CTA. An open sidebar panel demonstrates show/hide toggles for sections (Notes, Tags, Highlights, Insights) — a nice pattern for user-configurable navigation.",
|
|
273
|
+
"tags": ["dashboard", "sidebar", "cards", "grid", "workspace", "research", "empty-state"],
|
|
274
|
+
"mobbin_url": "https://mobbin.com/screens/bcbc434d-f7e8-44f4-a17a-a00655f0ca4b",
|
|
275
|
+
"image": "images/web-dashboard-dovetail.jpg"
|
|
276
|
+
},
|
|
277
|
+
{
|
|
278
|
+
"id": "web-footer-zendesk",
|
|
279
|
+
"title": "Zendesk — five-column mega footer with newsletter bar",
|
|
280
|
+
"platform": "web",
|
|
281
|
+
"app": "Zendesk",
|
|
282
|
+
"pattern": "footer",
|
|
283
|
+
"description": "Comprehensive sitemap footer: a brand statement ('Champions of customer service') beside five link columns (Products, Features, Resources, Company, Favorite Things), then a distinct newsletter row — 'Enter the fold' with an email field and solid Subscribe button — plus social icons, legal links, and compliance fine print at the bottom.",
|
|
284
|
+
"tags": ["footer", "newsletter", "links", "sitemap", "columns", "social", "legal"],
|
|
285
|
+
"mobbin_url": "https://mobbin.com/sites/sections/2e8bfe6a-f94b-4f8a-84f5-7fd518da9598",
|
|
286
|
+
"image": "images/web-footer-zendesk.jpg"
|
|
287
|
+
},
|
|
288
|
+
{
|
|
289
|
+
"id": "web-footer-shopify",
|
|
290
|
+
"title": "Shopify Supply — black footer with signup band and marquee",
|
|
291
|
+
"platform": "web",
|
|
292
|
+
"app": "Shopify",
|
|
293
|
+
"pattern": "footer",
|
|
294
|
+
"description": "High-contrast black footer opening with a conversion band ('Want more Supply? save 10%') containing a rounded email field with an inline Sign up button, followed by a scrolling 'By merchants, for merchants' marquee ribbon in blue, boxed social icon cells, and a utility row of FAQ/legal links. Footer as brand moment, not just a link dump.",
|
|
295
|
+
"tags": ["footer", "newsletter", "dark", "email-capture", "marquee", "social", "ecommerce"],
|
|
296
|
+
"mobbin_url": "https://mobbin.com/sites/sections/091c7a61-be44-4c2d-bafa-fa3afe0da71c",
|
|
297
|
+
"image": "images/web-footer-shopify.jpg"
|
|
298
|
+
},
|
|
299
|
+
{
|
|
300
|
+
"id": "web-footer-employmenthero",
|
|
301
|
+
"title": "Employment Hero — footer with consent-checkbox newsletter",
|
|
302
|
+
"platform": "web",
|
|
303
|
+
"app": "Employment Hero",
|
|
304
|
+
"pattern": "footer",
|
|
305
|
+
"description": "Six link columns (Company, Support, Region picker, Product, Connect with social icons) above a split lower band pairing a mission statement with a newsletter form that includes explicit GDPR-style consent checkboxes before the purple Subscribe button. Also shows region selection and a full legal link row — a compliance-complete footer.",
|
|
306
|
+
"tags": ["footer", "newsletter", "links", "columns", "consent", "legal", "social"],
|
|
307
|
+
"mobbin_url": "https://mobbin.com/sites/sections/6efab40e-de5e-4dff-bf1c-b28c818a934d",
|
|
308
|
+
"image": "images/web-footer-employmenthero.jpg"
|
|
309
|
+
},
|
|
310
|
+
{
|
|
311
|
+
"id": "web-footer-incommonwith",
|
|
312
|
+
"title": "In Common With — hairline-divided editorial footer",
|
|
313
|
+
"platform": "web",
|
|
314
|
+
"app": "In Common With",
|
|
315
|
+
"pattern": "footer",
|
|
316
|
+
"description": "Refined studio footer organized by thin vertical hairlines: contact and showroom addresses with hours across the top, link columns (Shop, Info, Account) below, and a quiet newsletter block — 'Our Newsletter' label, underlined email input with an outlined Sign Up button, and a privacy note. Typographic, grid-driven, and calm; ideal for premium or editorial brands.",
|
|
317
|
+
"tags": ["footer", "newsletter", "editorial", "minimal", "grid", "links", "typography"],
|
|
318
|
+
"mobbin_url": "https://mobbin.com/sites/sections/f1844604-7696-4970-b30e-43a7669e9ee1",
|
|
319
|
+
"image": "images/web-footer-incommonwith.jpg"
|
|
320
|
+
}
|
|
321
|
+
]
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
---
|
|
2
|
+
id: geo-fundamentals
|
|
3
|
+
title: "GEO Fundamentals — Generative Engine Optimization"
|
|
4
|
+
category: geo
|
|
5
|
+
platform: web
|
|
6
|
+
tags: [ai-search, llm, citations, llms-txt, ai-overviews, entity-seo]
|
|
7
|
+
sources: ["https://llmrefs.com/generative-engine-optimization", "https://developers.google.com/search/docs/appearance/ai-features", "https://searchengineland.com/guide/optimize-for-ai-crawlers", "https://llmstxt.org/", "https://www.semrush.com/blog/ai-seo-statistics/", "https://www.lumar.io/blog/best-practice/4-pillar-geo-strategy-framework-for-ai-search-visibility/", "https://www.surmado.com/blog/best-ai-visibility-tools-2026", "https://otterly.ai/blog/best-ai-search-monitoring-and-llm-monitoring-solutions/", "https://www.omnibound.ai/blog/ai-seo-statistics", "https://thestacc.com/blog/google-ai-overview-statistics/"]
|
|
8
|
+
updated: 2026-07-08
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
# GEO Fundamentals — Generative Engine Optimization (state of 2026)
|
|
12
|
+
|
|
13
|
+
## 1. What GEO is
|
|
14
|
+
|
|
15
|
+
**Generative Engine Optimization (GEO)** is the practice of structuring content, sites, and brand presence so that AI answer engines — ChatGPT (with search), Perplexity, Google AI Overviews / AI Mode, Gemini, Claude, and Copilot — **retrieve your content, use it in synthesized answers, and cite or mention your brand**.
|
|
16
|
+
|
|
17
|
+
The core mental shift:
|
|
18
|
+
|
|
19
|
+
> **SEO gets you ranked. GEO gets you cited.**
|
|
20
|
+
|
|
21
|
+
AI engines don't return a ranked list of ten links. They run a retrieval pipeline, synthesize one answer from multiple sources, and attach a handful of citations. If you are not one of those sources — or your brand isn't named in the answer — you are invisible, regardless of your Google rank.
|
|
22
|
+
|
|
23
|
+
### Why it matters (2026 numbers)
|
|
24
|
+
|
|
25
|
+
- ~48% of Google queries now trigger AI Overviews (up 58% YoY); coverage is highest in healthcare (~88%), education (~83%), and B2B tech (~82%).
|
|
26
|
+
- 93% of Google AI Mode sessions and ~83% of AI Overview searches end **without a click** (Semrush).
|
|
27
|
+
- AI Overviews cut organic CTR for position 1 by up to 58% (Ahrefs); Seer Interactive measured organic CTR falling from 1.76% to 0.61% on AIO queries.
|
|
28
|
+
- BUT: AI-referred visitors convert at **~4.4x** the rate of traditional organic visitors (Semrush), and AI referral traffic grew ~527% YoY. ChatGPT drives ~56% of AI referral traffic, Gemini ~18%, Perplexity ~8% (Otterly).
|
|
29
|
+
- Brands cited inside AI Overviews see ~35% organic CTR uplift on the same SERP versus non-cited brands.
|
|
30
|
+
|
|
31
|
+
Net effect: fewer clicks overall, but the clicks and mentions you do earn are far more valuable. GEO is about winning **share of answer**, not share of SERP.
|
|
32
|
+
|
|
33
|
+
## 2. How AI engines select and cite sources
|
|
34
|
+
|
|
35
|
+
All major engines follow roughly the same four-stage pipeline (RAG — retrieval-augmented generation):
|
|
36
|
+
|
|
37
|
+
1. **Query fan-out.** The engine decomposes the user's prompt (avg ~23 words, vs ~4 for classic Google) into multiple sub-queries and runs them against a search index (Google's index for AIO/Gemini; Bing for ChatGPT/Copilot; Perplexity's own crawl + partners).
|
|
38
|
+
2. **Retrieval.** Top results are fetched and split into **chunks/passages**. The engine scores passages — not whole pages — for relevance to each sub-query.
|
|
39
|
+
3. **Synthesis.** The LLM composes one answer from the selected passages, blending several sources.
|
|
40
|
+
4. **Citation.** Sources whose passages materially contributed get linked/named.
|
|
41
|
+
|
|
42
|
+
Key consequences you must design for:
|
|
43
|
+
|
|
44
|
+
- **Passage-level competition.** A single self-contained, extractable paragraph can win a citation even from a low-authority site. Pages are chunked; each section competes independently.
|
|
45
|
+
- **Non-determinism.** The same question asked five times yields five different answers. GEO success is a **frequency/mention rate** across many prompts, not a fixed position. Measure share of voice, not rank.
|
|
46
|
+
- **Divergence from Google rankings.** Overlap between Google's top-10 and AI-cited sources has fallen from ~70% to under 20% for many query classes. Rank alone no longer predicts AI visibility.
|
|
47
|
+
- **Two paths to visibility:** (a) your *pages* get cited; (b) your *brand* gets mentioned because third-party sources the AI trusts (review sites, Reddit, Wikipedia, industry listicles, news) mention you. Both must be worked.
|
|
48
|
+
|
|
49
|
+
### Platform behavior differences (2026)
|
|
50
|
+
|
|
51
|
+
| Engine | Index | Notable behavior |
|
|
52
|
+
|---|---|---|
|
|
53
|
+
| ChatGPT search | Bing + OpenAI crawl (GPTBot / OAI-SearchBot) | ~70% AI-chat market share; favors comprehensive, well-sourced content; largest referral source |
|
|
54
|
+
| Google AI Overviews / AI Mode | Google index | Traditional ranking + snippet eligibility feed selection; Google's official position: "optimizing for AI search is still SEO" — indexed + snippet-eligible is the only requirement |
|
|
55
|
+
| Perplexity | Own crawler (PerplexityBot) + partners | Most citation-forward UI; strong recency bias; high-intent B2B/SaaS traffic |
|
|
56
|
+
| Gemini | Google index | Fastest-growing; inherits Google E-E-A-T signals |
|
|
57
|
+
| Claude | Brave-backed search + ClaudeBot | Favors well-structured, logically organized content |
|
|
58
|
+
|
|
59
|
+
## 3. GEO vs SEO — what changes, what doesn't
|
|
60
|
+
|
|
61
|
+
| Factor | SEO | GEO |
|
|
62
|
+
|---|---|---|
|
|
63
|
+
| Output | Ranked links | One synthesized answer |
|
|
64
|
+
| Unit of competition | Page | Passage/chunk + entity (brand) |
|
|
65
|
+
| Query | ~4 words, keyword | ~23 words, conversational, multi-intent |
|
|
66
|
+
| Success metric | Rank, CTR, clicks | Citation rate, share of voice, mention accuracy, AI referrals |
|
|
67
|
+
| Levers | Backlinks, keywords, CWV | Factual density, extractable structure, entity clarity, off-site mentions, freshness |
|
|
68
|
+
| Determinism | Stable rankings | Probabilistic; sample many prompts |
|
|
69
|
+
|
|
70
|
+
**What carries over unchanged:** crawlability, indexation, E-E-A-T, quality content, internal linking, clean information architecture, backlinks (they still shape what retrieval surfaces). GEO is a superset of technical SEO, not a replacement. Google explicitly states no new files or markup are required for AI features — but the *competitive* levers above decide who actually gets cited.
|
|
71
|
+
|
|
72
|
+
**The foundational research:** the Princeton/Georgia Tech/IIT "GEO" paper (Aggarwal et al., KDD 2024) that coined the term found that adding **citations, quotations from credible sources, and statistics** boosted content visibility in generative responses by **30–40%** — while classic keyword stuffing did nothing or hurt. Factual density is the single strongest content lever; every subsequent industry study has confirmed it.
|
|
73
|
+
|
|
74
|
+
## 4. What AI engines reward (ranked by leverage)
|
|
75
|
+
|
|
76
|
+
1. **Answer-first, self-contained passages.** A 2–4 sentence direct answer at the top of the page/section that includes a concrete fact, number, or named entity. This is the #1 highest-leverage fix.
|
|
77
|
+
2. **Factual density.** Statistics with named sources, expert quotes with name/title/company, dates, original data. Pages with structured lists, quotes, and stats show 30–40% higher AI visibility.
|
|
78
|
+
3. **Entity clarity.** The engine must unambiguously know *who you are*: consistent brand name, clear "what we do" phrasing, Organization schema, Wikipedia/Wikidata/Crunchbase presence, consistent NAP.
|
|
79
|
+
4. **Off-site corroboration.** Mentions on Reddit, review platforms (G2, Trustpilot), industry listicles, news, and Wikipedia — the sources AI engines already trust and re-cite. The fastest GEO win is getting mentioned in a page that's *already* being cited for your target prompts.
|
|
80
|
+
5. **Freshness.** ~65% of AI bot hits target content published/updated within the past year; citations to pages older than ~3 months drop off sharply on fast-moving topics. Visible dates + `dateModified` schema + real content updates.
|
|
81
|
+
6. **Extractable structure.** Semantic HTML, strict H1→H2→H3 hierarchy, short paragraphs, lists, tables, Q&A blocks — see `geo-tactics-checklist.md` §Design/Architecture.
|
|
82
|
+
7. **Machine accessibility.** Server-rendered HTML (most AI crawlers do NOT execute JavaScript), AI bots allowed in robots.txt, no paywalls/CDN bot-blocking on citable content, fast responses.
|
|
83
|
+
|
|
84
|
+
## 5. How website design & architecture affect GEO
|
|
85
|
+
|
|
86
|
+
This is where a design/dev assistant has direct influence:
|
|
87
|
+
|
|
88
|
+
- **Rendering:** AI crawlers (GPTBot, ClaudeBot, PerplexityBot) generally don't run JS. Client-side-rendered content is invisible to them. Use SSR/SSG for all citable content; check `curl` output equals visible content.
|
|
89
|
+
- **Chunk-friendly layout:** engines split pages into passages. Every H2/H3 section should stand alone: heading phrased as the question/claim, first sentence answers it, supporting detail follows. Avoid meaning that only emerges from surrounding context ("as mentioned above...").
|
|
90
|
+
- **Semantic HTML:** `<main>`, `<article>`, `<section>`, `<table>`, `<ul>`, real heading tags — not styled `<div>`s. Heading hierarchy alone carries meaningful citation weight because it defines chunk boundaries.
|
|
91
|
+
- **Content-to-chrome ratio:** heavy nav/footers/popups dilute extraction. Keep the answer content dominant in the DOM.
|
|
92
|
+
- **Topic-cluster IA:** one topic per page, clear hub-and-spoke internal linking, logical URL taxonomy. This is how engines infer topical authority and entity relationships.
|
|
93
|
+
- **Speed:** faster responses = deeper crawl per session by AI bots (they have small crawl budgets). Cloudflare reports GPTBot request volume up 300%+ YoY — make those fetches count.
|
|
94
|
+
|
|
95
|
+
## 6. Measuring GEO
|
|
96
|
+
|
|
97
|
+
Because answers are non-deterministic, measurement = **sampling prompts repeatedly** and tracking rates.
|
|
98
|
+
|
|
99
|
+
**Core metrics:**
|
|
100
|
+
- **AI share of voice** — % of sampled prompts where your brand appears vs competitors.
|
|
101
|
+
- **Citation rate** — % of prompts where your *URL* is cited; which pages get cited.
|
|
102
|
+
- **Mention accuracy/sentiment** — does the AI describe you correctly and favorably?
|
|
103
|
+
- **AI referral traffic** — sessions from `chat.openai.com` / `chatgpt.com`, `perplexity.ai`, `gemini.google.com`, `copilot.microsoft.com` referrers (GA4 channel group or regex segment). Track conversion rate separately — expect it to beat organic ~4x.
|
|
104
|
+
- **AI crawler activity** — server-log hits from GPTBot, OAI-SearchBot, ClaudeBot, Claude-User, PerplexityBot, Google-Extended, Bytespider. Crawling precedes citing.
|
|
105
|
+
- **Google surface** — AI Overview traffic is inside Search Console's Performance report ("Web" type); no separate breakout exists, so watch impressions-vs-clicks divergence.
|
|
106
|
+
|
|
107
|
+
**Tool landscape (2026):**
|
|
108
|
+
- **Profound** — enterprise standard (Ramp, MongoDB, IBM); monitors 10+ engines via real consumer frontends; G2 Leader in AEO, Winter 2026.
|
|
109
|
+
- **Peec AI** — agency favorite; Citation Gap Analysis (maps which sources AI trusts in your category).
|
|
110
|
+
- **Otterly.ai** — most accessible entry point; 20k+ users; Gartner Cool Vendor 2025.
|
|
111
|
+
- Others: Rankscale, Omnia, LLMrefs, Scrunch, plus AI-visibility modules inside Semrush (AI Toolkit) and Ahrefs (Brand Radar).
|
|
112
|
+
- **Free baseline:** manually run a fixed panel of 20–50 buyer prompts monthly across ChatGPT/Perplexity/AIO and log brand mentions + citations in a sheet.
|
|
113
|
+
|
|
114
|
+
## 7. Strategic rules of thumb
|
|
115
|
+
|
|
116
|
+
1. Optimize for the **question**, not the keyword. Every important page should map to real conversational prompts.
|
|
117
|
+
2. Win **passages**, then pages, then the entity. Fix your top-10 revenue pages first with answer-first blocks.
|
|
118
|
+
3. Spend ~40% of GEO effort **off-site** (Reddit, reviews, listicles, PR, Wikipedia-tier references) — AI engines cite the web's consensus about you, not just your site.
|
|
119
|
+
4. Treat freshness as a feature: quarterly refresh cadence on money pages, with real changes, updated stats, and honest `dateModified`.
|
|
120
|
+
5. Never sacrifice human UX for bots — Google's guidance is explicit that AI features run on ordinary search signals; content made unreadable for humans loses both channels.
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
---
|
|
2
|
+
id: geo-tactics-checklist
|
|
3
|
+
title: "GEO Tactics Checklist — Get Cited by AI Engines"
|
|
4
|
+
category: geo
|
|
5
|
+
platform: web
|
|
6
|
+
tags: [ai-search, llm, citations, llms-txt, schema, checklist]
|
|
7
|
+
sources: ["https://llmrefs.com/generative-engine-optimization", "https://searchengineland.com/guide/optimize-for-ai-crawlers", "https://llmstxt.org/", "https://developers.google.com/search/docs/appearance/ai-features", "https://nextgrowth.ai/geo-best-practices-ai-citations/", "https://totheweb.com/blog/beyond-seo-your-geo-checklist-mastering-content-creation-for-ai-search-engines/", "https://www.lumar.io/blog/best-practice/4-pillar-geo-strategy-framework-for-ai-search-visibility/", "https://authoritytech.io/curated/answer-engine-optimization-checklist-chatgpt-perplexity-claude-2026", "https://www.averi.ai/learn/the-definitive-guide-to-geo-get-cited-by-ai-in-2026"]
|
|
8
|
+
updated: 2026-07-08
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
# GEO Tactics Checklist — Get Cited by AI Engines (2026)
|
|
12
|
+
|
|
13
|
+
Prescriptive, in priority order. Apply to money pages first, then roll out sitewide.
|
|
14
|
+
|
|
15
|
+
## 1. Content structure — answer-first (highest leverage)
|
|
16
|
+
|
|
17
|
+
- [ ] **Open every page with a self-contained answer block**: 2–4 sentences, directly under the H1, that fully answers the page's core question and includes at least one specific statistic, date, or named entity. AI engines extract these as canonical passages.
|
|
18
|
+
- [ ] **One question per H2/H3 section.** Phrase headings as the actual questions users ask ("How much does a website redesign cost in 2026?"), answer in the section's first sentence, elaborate after.
|
|
19
|
+
- [ ] **Make every section standalone.** No "as mentioned above" — chunks are retrieved out of context. Repeat the subject noun instead of pronouns at section starts.
|
|
20
|
+
- [ ] Paragraphs ≤ 3 sentences. Use bullets, numbered steps, and comparison tables — pages with structured lists, quotes, and statistics show **30–40% higher AI visibility** (Princeton GEO study, confirmed by later industry studies).
|
|
21
|
+
- [ ] **Add a Q&A/FAQ block** (3–6 real questions from sales calls, Reddit, "People Also Ask") near the end of key pages.
|
|
22
|
+
- [ ] Include a **TL;DR or "Key takeaways"** bulleted summary near the top of long pages.
|
|
23
|
+
|
|
24
|
+
**Answer-first example (put this pattern under the H1):**
|
|
25
|
+
|
|
26
|
+
> **Bad:** "In today's fast-moving digital landscape, businesses of all sizes are asking how they can improve their online presence..."
|
|
27
|
+
>
|
|
28
|
+
> **Good:** "A small-business website redesign in 2026 typically costs £3,000–£12,000 and takes 4–8 weeks. The price is driven by three factors: page count, custom design vs. template, and CMS complexity. Below is a line-item breakdown based on 40 studio projects delivered in 2025."
|
|
29
|
+
|
|
30
|
+
## 2. Factual density — citations, statistics, quotes
|
|
31
|
+
|
|
32
|
+
- [ ] Every important claim carries a **number + named source + year**: "According to Semrush (2025), AI-referred visitors convert 4.4x higher than organic."
|
|
33
|
+
- [ ] Add **expert quotes with full attribution** (name, title, company). Unattributed quotes carry near-zero weight.
|
|
34
|
+
- [ ] Publish **original data** (surveys, benchmarks, case-study metrics). Original statistics are the most re-citable asset a brand can own — other sites cite you, and AI engines cite them citing you.
|
|
35
|
+
- [ ] Link out to authoritative primary sources; engines treat well-sourced pages as trustworthy synthesis candidates.
|
|
36
|
+
- [ ] Show **author bio with credentials** on every article (name, role, experience, LinkedIn). E-E-A-T still gates retrieval.
|
|
37
|
+
|
|
38
|
+
## 3. Entity clarity — make the brand machine-legible
|
|
39
|
+
|
|
40
|
+
- [ ] Use **one exact brand name spelling** everywhere (site, socials, directories, schema). Inconsistency splits the entity.
|
|
41
|
+
- [ ] Write a canonical one-sentence definition and reuse it verbatim on the homepage, About page, and schema `description`: "Example Studio is a web design studio that builds conversion-focused websites for small businesses."
|
|
42
|
+
- [ ] Create/claim entity homes: **Wikidata, Crunchbase, LinkedIn company page, Google Business Profile**, key industry directories — consistent name, description, URL, logo.
|
|
43
|
+
- [ ] Add `Organization` schema sitewide with `sameAs` links to every profile (see §5 snippet).
|
|
44
|
+
- [ ] Define niche jargon in plain words on first use; engines can't cite what they can't parse.
|
|
45
|
+
|
|
46
|
+
## 4. Off-site brand mentions (≈40% of GEO effort)
|
|
47
|
+
|
|
48
|
+
- [ ] **Find the pages AI already cites** for your target prompts (ask ChatGPT/Perplexity your 20 core buyer questions; log every cited URL). Get your brand into those exact pages: comment, contribute, request inclusion, or pitch listicle authors.
|
|
49
|
+
- [ ] Maintain honest, active presence on **Reddit and niche forums** — heavily weighted in ChatGPT and Perplexity training/retrieval. Genuine answers only; spam gets pruned and nukes trust.
|
|
50
|
+
- [ ] Collect reviews on **G2 / Trustpilot / Clutch / Google** — AI engines lean on review aggregators for "best X" prompts.
|
|
51
|
+
- [ ] Pitch **digital PR and data stories** to industry publications; a mention in one trusted article propagates into many AI answers.
|
|
52
|
+
- [ ] Target inclusion in "**best [category] 2026**" roundups — these dominate commercial-intent AI answers.
|
|
53
|
+
|
|
54
|
+
## 5. Schema markup for LLMs
|
|
55
|
+
|
|
56
|
+
Schema is the metadata layer engines use to verify who/what/when. Align it exactly with visible content (Google requirement). Priority types: `Organization`, `WebSite`, `Article`/`BlogPosting` (with dates + author), `FAQPage`, `HowTo`, `Product`/`Service` + `Review`, `BreadcrumbList`, `Person` for authors.
|
|
57
|
+
|
|
58
|
+
```html
|
|
59
|
+
<script type="application/ld+json">
|
|
60
|
+
{
|
|
61
|
+
"@context": "https://schema.org",
|
|
62
|
+
"@type": "Article",
|
|
63
|
+
"headline": "Website Redesign Costs in 2026: Full Breakdown",
|
|
64
|
+
"description": "Line-item pricing for small-business website redesigns in 2026.",
|
|
65
|
+
"author": { "@type": "Person", "name": "Jane Doe",
|
|
66
|
+
"jobTitle": "Founder, Example Studio",
|
|
67
|
+
"url": "https://example.com/about" },
|
|
68
|
+
"publisher": { "@type": "Organization", "name": "Example Studio",
|
|
69
|
+
"url": "https://example.com",
|
|
70
|
+
"logo": { "@type": "ImageObject", "url": "https://example.com/logo.png" },
|
|
71
|
+
"sameAs": ["https://www.linkedin.com/company/example",
|
|
72
|
+
"https://www.crunchbase.com/organization/example"] },
|
|
73
|
+
"datePublished": "2026-01-14",
|
|
74
|
+
"dateModified": "2026-07-01"
|
|
75
|
+
}
|
|
76
|
+
</script>
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
- [ ] `datePublished` **and** `dateModified` on every article — ~65% of AI bot hits target content updated within the past year.
|
|
80
|
+
- [ ] `FAQPage` schema on pages with Q&A blocks; questions must match visible text verbatim.
|
|
81
|
+
- [ ] Validate with Google's Rich Results Test / schema.org validator after every template change.
|
|
82
|
+
|
|
83
|
+
## 6. llms.txt and machine-readable content
|
|
84
|
+
|
|
85
|
+
Status 2026: an emerging convention (llmstxt.org), adopted by many dev-tool and SaaS sites; large-scale tests show **no measurable citation lift yet** and Google says no AI text files are required — implement it as a cheap, low-risk hedge, never instead of items 1–5.
|
|
86
|
+
|
|
87
|
+
- [ ] Serve `/llms.txt` at the site root: markdown, H1 title, blockquote summary, H2 link sections.
|
|
88
|
+
- [ ] Optionally serve `/llms-full.txt` (full flattened content) and `.md` twins of key pages (`/pricing.md`).
|
|
89
|
+
|
|
90
|
+
```markdown
|
|
91
|
+
# Example Studio
|
|
92
|
+
|
|
93
|
+
> UK web design studio building conversion-focused websites for small
|
|
94
|
+
> businesses. Founded 2024. Services: web design, redesigns, GEO/SEO.
|
|
95
|
+
|
|
96
|
+
## Services
|
|
97
|
+
- [Web Design](https://example.com/services/web-design): Custom sites, 4–8 week delivery
|
|
98
|
+
- [Website Redesign](https://example.com/services/redesign): Pricing and process
|
|
99
|
+
- [GEO & SEO](https://example.com/services/geo): AI-search visibility services
|
|
100
|
+
|
|
101
|
+
## Resources
|
|
102
|
+
- [Pricing Guide 2026](https://example.com/pricing): Line-item costs
|
|
103
|
+
- [Case Studies](https://example.com/work): Results with metrics
|
|
104
|
+
|
|
105
|
+
## Optional
|
|
106
|
+
- [About](https://example.com/about)
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
## 7. Technical access — let AI bots in and feed them HTML
|
|
110
|
+
|
|
111
|
+
- [ ] **robots.txt allows**: `GPTBot`, `OAI-SearchBot`, `ChatGPT-User`, `ClaudeBot`, `Claude-User`, `PerplexityBot`, `Perplexity-User`, `Google-Extended`, `Bingbot`. Blocking OAI-SearchBot/PerplexityBot removes you from those engines' citations entirely.
|
|
112
|
+
- [ ] **Check CDN/WAF settings** — Cloudflare blocks AI crawlers by default on new zones; explicitly allow the bots you want.
|
|
113
|
+
- [ ] **Server-render all citable content.** Most AI crawlers do not execute JavaScript; JS-injected content is invisible. Verify: `curl -A "GPTBot" https://yoursite.com/page` must contain the answer text.
|
|
114
|
+
- [ ] No paywalls/login walls/interstitials in front of content you want cited.
|
|
115
|
+
- [ ] XML sitemap with accurate `<lastmod>`, referenced from robots.txt.
|
|
116
|
+
- [ ] Fast TTFB and clean canonical URLs — AI crawlers have shallow budgets; speed = more pages fetched per session.
|
|
117
|
+
- [ ] Do NOT use `nosnippet` / restrictive `max-snippet` on pages you want in Google AI Overviews — snippet controls are Google's official opt-out mechanism for AI features.
|
|
118
|
+
|
|
119
|
+
## 8. Design & architecture rules (for the build itself)
|
|
120
|
+
|
|
121
|
+
- [ ] Semantic HTML5: `<main>`, `<article>`, `<section>`, `<nav>`, real `<h1>`–`<h3>` (single H1), `<table>` for tabular data, `<ul>/<ol>` for lists — never styled `<div>` soup. Heading hierarchy defines the chunk boundaries retrieval uses.
|
|
122
|
+
- [ ] High content-to-chrome ratio: answer content dominant in the DOM; minimal boilerplate above the first H1; no content trapped in carousels, tabs, or accordions that require JS to render into the DOM (accordions are fine if content is in the initial HTML).
|
|
123
|
+
- [ ] Text over images for facts: never put statistics, pricing, or key claims only inside images/infographics — provide the same data as HTML text or tables, with descriptive `alt`.
|
|
124
|
+
- [ ] Topic-cluster IA: one intent per URL, hub pages linking to spoke pages with descriptive anchor text, breadcrumbs + `BreadcrumbList` schema.
|
|
125
|
+
- [ ] Visible "Last updated: {date}" near the top of articles, backed by matching `dateModified` schema.
|
|
126
|
+
|
|
127
|
+
## 9. Freshness cadence
|
|
128
|
+
|
|
129
|
+
- [ ] Refresh top money pages **quarterly**: update stats to current-year sources, add a new section, revise the answer block. Citations to stale pages (>3 months on fast topics) drop sharply.
|
|
130
|
+
- [ ] Update the year in titles/H1s only when content genuinely reflects it — fake freshness is detectable and hurts trust.
|
|
131
|
+
- [ ] Keep publishing new pages targeting emerging conversational queries; Perplexity especially rewards recency.
|
|
132
|
+
|
|
133
|
+
## 10. Measurement loop (monthly)
|
|
134
|
+
|
|
135
|
+
- [ ] Maintain a fixed panel of 20–50 real buyer prompts; run across ChatGPT, Perplexity, Google AI Mode/AIO, Gemini. Log: brand mentioned? URL cited? which competitor won? description accurate?
|
|
136
|
+
- [ ] Track AI referrals in GA4: regex channel for `chatgpt.com|chat.openai.com|perplexity.ai|gemini.google.com|copilot.microsoft.com`; report sessions **and** conversion rate.
|
|
137
|
+
- [ ] Grep server logs for AI crawler hits (GPTBot, ClaudeBot, PerplexityBot, OAI-SearchBot) — rising crawl of a page usually precedes citations.
|
|
138
|
+
- [ ] Consider a tracking tool once manual sampling proves value: Otterly (entry-level), Peec AI (agencies, citation-gap analysis), Profound (enterprise), or Semrush AI Toolkit / Ahrefs Brand Radar add-ons.
|
|
139
|
+
- [ ] KPI set: AI share of voice, citation rate per page, mention accuracy, AI referral sessions + CVR, AIO impression/click divergence in Search Console.
|
|
140
|
+
|
|
141
|
+
## Anti-patterns — never do
|
|
142
|
+
|
|
143
|
+
- Keyword stuffing or "AI-optimized" gibberish appended for bots (the original GEO study found it does nothing or backfires).
|
|
144
|
+
- Blocking AI crawlers on marketing content "to protect IP" while expecting AI visibility.
|
|
145
|
+
- Schema that contradicts visible content (Google penalizes; engines distrust).
|
|
146
|
+
- Astroturfing Reddit/reviews — moderation removal plus brand-sentiment damage inside AI answers.
|
|
147
|
+
- Shipping citable content behind client-side rendering, infinite scroll, or JS-gated tabs.
|
|
148
|
+
- Chasing llms.txt or exotic markup before the answer-first content and entity basics are done.
|