Aline Motel

Direct bookings, not commissions

A motel that takes a booking through its own site keeps the margin that would otherwise go to an online travel agency. So the booking path is the spine of the page rather than an afterthought: a persistent action in the header, a primary call in the first viewport, and another at the end of every section a guest might use to make up their mind.

Constraints

• A small regional business budget. One person designs, builds, ships and hands over; there is no second pass funded.
• The owner maintains it. Anything that needs a developer to change a price or a photograph has failed, however well it performs.
• Four locales, so every piece of content is four pieces of content, and every structural change is four structural changes.
• No analytics were kept, which is why this page describes engineering and makes no claim about bookings.

Four languages, indexed separately

Griffith has a large Punjabi, Hindi and Italian speaking population, and the motel serves both travellers and people visiting family. The site ships in English, Punjabi, Hindi and Italian, with hreflang annotations so search engines index each locale in its own right rather than treating them as duplicates of the English page.

Told to search engines properly

The motel is described in schema.org Motel structured data (address, rating, amenities, check-in and check-out) so search results can render it as a place rather than as a page of text. Canonical URLs, per-locale metadata and a real Open Graph image round it out.

Fast because of how it is built

Every image on the page is served through next/image, sized and formatted per device. Static rendering means the markup arrives complete. The result measures 0.6 seconds to largest contentful paint with zero cumulative layout shift, and perfect scores for accessibility, best practices and SEO. 110 end-to-end tests run in CI, so a change that would cost one of those scores fails before it ships.

Decisions and trade-offs

The booking path is the spine, not a button. Putting a persistent action in the header and a call at the end of every section costs vertical space on every page. It is the right cost: the whole reason a motel wants its own site is the commission it keeps on a direct booking.

hreflang through sitemap annotations rather than <head> tags. Google supports both and the annotation method keeps four locales out of the document head, which matters on a page already carrying structured data and Open Graph tags. The trade is that it is the less commonly implemented of the two, so it is the harder one to debug when a locale stops being indexed.

A Git-backed CMS, not a database. The content changes a few times a year, so a database and an admin server would be machinery serving nobody. Keystatic gives the owner an editor over files in the repository instead, and the owner now updates all of the content without a developer. Every edit is a commit and a deploy: fine for a motel, wrong for a business that posts weekly. Room rates are the one live thing, fetched from the booking engine through a cached proxy so the page stays fast.

What I would do differently. Aline's hreflang set does not declare an x-default; the Apra build does. Nothing is broken by its absence, since search engines fall back to their own guess for an unmatched locale. But leaving the two sites inconsistent was an oversight rather than a decision, and it is the first thing I would go back and fix.