A restaurant website: menu, bookings and allergens

A restaurant site works when one screen says three things: what food you cook, whether you are open today, and how to book. Menu, photos and address come straight after. If booking takes more than three steps, another restaurant gets the table.

People look for a restaurant on a phone, often while walking with one hand busy. That changes the order: call button and today's hours first, then the menu with prices, then the room and the story. On a plate the photo is information, not decoration.

The pages a restaurant actually uses

The menu is the most searched page and the most neglected. A PDF uploaded in 2022 does not read well on a phone, does not get indexed and never gets updated. Write the menu in HTML: one line per dish, price alongside, one section per course, last-updated date at the bottom of the page.

Allergens: fourteen entries, not a generic note

Regulation EU 1169/2011 requires allergen information to be available before the order is placed. On a site the most useful form is a per-dish card with the fourteen entries of Annex II, or a table that crosses dishes with allergens. «Ask the staff» works in the dining room, not online: someone with a serious allergy picks another restaurant instead of calling.

Booking: three fields and one alternative

• Date, time and number of covers: the three values needed to assign a table.
• Name and phone number, nothing else. Email and special requests slow things down without changing availability.
• WhatsApp and phone as alternatives: someone booking for tonight wants an answer in a minute, not an email confirmation.
• Visible confirmation and a reply message with the requested time and the no-show policy.
• Fully booked: show the alternatives, meaning waiting list, another time or takeaway, instead of an error.

Structured data: Restaurant, Menu and MenuItem

The JSON-LD block with type Restaurant states name, address, coordinates, hours through openingHoursSpecification, cuisine through servesCuisine, price band through priceRange, and whether bookings are taken through acceptsReservations. The menu is marked up with Menu and MenuItem, each with its own price. Do not expect stars or a special box: Google uses this data to understand the venue and for the listing, not to decorate the result. The operational details are in how to add schema markup.

curl "https://ui.eneawork.it/api/blocks/category/menu?limit=200" | jq '.category.count, (.blocks | length)'

Photos: handsome yes, light first

A 4 MB photo per dish breaks the layout and burns the data plan of someone on 4G outside your door. Declare width and height, use AVIF or WebP, lazy-load below the first screen and crop consistently at 4:3 or 16:9. The test is the browser Network tab: if the menu page goes past 2 MB, the prices go unread. The mechanism is explained in images without dimensions and layout shift.

Blocks from the catalogue

Four records worth opening straight away. Gallery 01 from Shadcn Space is a photo grid for the dining room, with the publisher's declared licence to check on the block. Table 01 from ephraimduncan is the table to fill with dishes, prices and allergens. The menu category holds 9 blocks, but they are navigation menus rather than dish lists: they belong in the top bar. The list closes with Contact 01 from Shadcn UI Blocks, a short form for groups and events.

The limitation to state up front

The catalogue holds React and Tailwind components: there is no booking engine, no table management, no integration with Google Reserve or with booking platforms. The blocks cover the interface, real availability comes from an external service. On WordPress these blocks do not install as they are: they work as a structural reference. Previews are free, the full block code sits in the Pro part.

Cost and timing

A six or seven page site for a single venue sits in the low thousands of euro when copy, photos and menu arrive ready; with a photo shoot and copy written from scratch the bill rises. The line that gets missed is menu maintenance: if every menu change needs a quote, the site ages in three months. The full picture is in what a website costs.

For the technical base read WordPress, Wix or React components, for the template choice how to choose a template, for the menu blocks already counted the best menu blocks. If the venue does not show on Maps, the site alone brings no tables: you also need to get the site indexed by Google.