Back to projects
Web design Next.js Technical SEO Own concept

Moto
Faro.

A motorcycle-gear comparison engine built in Next.js with an SEO-first architecture: filterable catalog, side-by-side comparison and a quiz recommender — all driven from a single data source and optimized to capture purchase-intent traffic. Self-initiated project, from zero to production.

View live site

THE CHALLENGE

In a comparison engine, SEO isn't a layer — it's the architecture.

Someone searching "best motorcycle intercom in Colombia" is one click from buying. The challenge wasn't to design something pretty: it was to build a site where every product, category and comparison is an indexable, fast page with structured data — so Google understands the catalog and surfaces it exactly when someone is deciding what to buy.

Affiliate monetization is the business goal; technical SEO is what makes it possible. This project is the proof that I can build that foundation.

ClientMotoFaro (own concept)
My roleProduct + design + development + SEO
StackNext.js · React · Tailwind CSS
FocusTechnical SEO · purchase intent

THE OUTCOME

A real product, live — not a mockup.

MotoFaro is deployed and running: 12 scored products, category filters, six sort modes, a side-by-side comparison and a quiz that recommends based on your riding profile. This is the real site embedded — click to open it full.

motofaro.vercel.app
View live site

Live view — click anywhere to open MotoFaro in a new tab.

THE NUMBERS

Measured, not promised.

99 PageSpeed desktop
84 PageSpeed mobile
100 Technical SEO
12 Comparable products

* Performance metrics measured with Google PageSpeed Insights on the production site. Affiliate monetization is in an early stage — this case documents the product build and its technical foundation, not revenue.

THE HARD PART

Performance and SEO don't trade against each other.

A comparison engine with product images, dynamic filters and many pages is usually heavy and slow. The challenge was keeping PageSpeed high AND the full catalog indexable at once. These are the decisions that made it possible.

What I solved

01
A single data source feeds the whole site
The entire catalog lives in a single structured data file. Product pages, category pages and the comparison engine are all generated from it — no duplicate content, no database. Adding a product means editing one object, and the whole site updates consistently.
02
Optimized images without sacrificing speed
I use Next.js's image system to serve every photo in the exact format and size each device needs. Result: a visually rich catalog with PageSpeed 99 on desktop and 84 on mobile, without blocking rendering.
03
Technical SEO 100/100 with metadata and structured data
Every page has its own meta description, Open Graph with es_CO locale, Twitter cards and product-oriented markup. The affiliate disclosure is visible and compliant. Google doesn't just index the site: it understands what each page is and who it's for.

INSIDE

The comparison engine in action.

Comparador lado a lado de MotoFaro
Side-by-side comparison: specs, price and score matched up for a fast decision.
Ficha de producto de MotoFaro con puntuación y detalle técnico
Product page with score and technical detail, built for purchase intent.
Métricas de PageSpeed de MotoFaro: 99 escritorio, SEO 100
Real PageSpeed: 99 desktop, SEO and Best Practices 100/100.

Do you need a site Google understands and that loads fast?

If your business lives on showing up in search, that's exactly the kind of technical foundation I build. Tell me about your project — I reply within 24 hours.

Message me on WhatsApp View more projects