Industry

Restaurant Website Design: The Menu, Booking and Ordering Choices That Decide Whether a Visitor Comes In

Most pages that rank for this search are galleries and template stores, full of beautiful food photography. Those help with the look. They rarely explain what happens to your menu after it goes online, including how Google can copy it into your listing, which links it refuses, and when a chain must show calories on the web. This guide covers the pages, the menu format and those rules, each one read at the source on 3 November 2026.

Restaurant Website Design: The Menu, Booking and Ordering Choices That Decide Whether a Visitor Comes In

Key takeaways

  • Answer four things on the first screen. What you serve, where you are, whether you are open, and how to book or order. A visitor on a phone has usually come for one of those.
  • Publish the menu as real text. A text menu works on a phone, can be read by a screen reader, and can be picked up by Google. Google's help says it may transcribe menu data from your website into your Business Profile.
  • Keep the menu current in one place. Prices on your site, your Google listing and your delivery apps drift apart quickly. Decide which one is the source.
  • Own the ordering path if you can. Google lets you mark a preferred ordering link and remove a third-party one.
  • Large chains have a calorie rule. The US FDA rule covers chains of 20 or more locations, and its guidance includes online menus when customers can order from them.

This is a planning guide, not legal advice. Food labelling and accessibility rules differ by country and state, so check with your local authority or a lawyer.

The short answer

A restaurant website needs a home page with your food, location, hours and a booking or order button, a text menu, a simple booking or ordering path, a location page with parking and access details, a short story about who you are, and contact details that match your Google listing word for word. Good photos of your own food and room do most of the persuading. Everything should work one-handed on a phone.

What the ranking pages cover

On 3 November 2026 we searched Google (United States, English) for "restaurant website design". The results were mostly galleries and templates: Figma, Dribbble, Awwwards, Pinterest and Webflow. Guides came from Framer, Chowly and an older Simplot Food post, and Google's AI summary drew on several of them.

Framer's post now reviews 12 live sites, and its point is sound: make the menu, location, hours and booking path easy to find, and keep practical details close to the action. A UK trade guide from NCASS says the same and warns against PDF menus on phones. Google's AI summary adds a similar list.

So the design advice has settled. None of the guides we read explains how the menu moves between your site and Google, what Google refuses as a menu link, or the US calorie rule for chains. That is what this guide adds.

The pages a restaurant site needs

PageIts jobWhat to include
HomeAnswer "should we go here tonight?"A real photo, cuisine in plain words, area, today's hours, Book and Menu buttons
MenuLet people choose before they arriveSections, dishes, short descriptions, prices, dietary marks, last updated date
Book or orderFinish the job in few tapsYour booking tool or ordering link, party size limits, how to reach you for large groups
Location and hoursRemove doubt about the visitMap link, parking, public transport, step-free access, kitchen closing time
AboutGive a reason to choose youWho cooks, where the idea came from, a photo of the people
Private dining or cateringCapture larger, more valuable bookingsRoom sizes, sample menus, a short enquiry form
Gift cards or eventsAdd sales outside normal serviceOnly if you actually run them

Multi-location groups should add one page per location, each with its own hours, menu differences, photos and booking link. Copying the same text with the suburb swapped creates weak pages, a point covered in our local SEO plan.

The first screen

The usual failure is a full-screen video and a slogan, with the hours hidden behind a menu icon. Our homepage study measured how quickly other sites get to the point, and for a restaurant the bar is higher, since many visitors just want one fact.

  • Use your own photographs. Stock photos of food tell a diner nothing about your plates.
  • State the cuisine and area in words. "Neapolitan pizza in Fitzroy" beats "A journey of flavour".
  • Show today's hours, and whether the kitchen closes before the bar does. Late diners check for this.
  • Put two buttons on the phone screen: Book or Order, and Menu. Add a tap-to-call number for those who prefer to ring.
  • Skip pop-ups on arrival. A newsletter box covering the menu loses the visit you paid for.

Our mobile design guide covers tap sizes, and our speed test guide shows how to check large photos are not slowing the page.

The menu is the most important decision

Here are the common formats, with our view of each. These are our judgement rather than a rule from Google.

FormatGoodBadUse it when
Text on the pageReads well on a phone, easy to update, readable by screen readers and search enginesNeeds someone to keep it currentAlmost always
PDFKeeps your printed designHard on phones, slow to update, often missed by screen readers unless built properlyAs a download beside a text menu, for example a wine list
Photo of the printed menuQuickHard to read, no text for a screen reader or search engineAvoid on your own site
Embedded ordering widgetLive prices and stockOften hides prices from people just browsing, and depends on the provider's designAlongside a plain menu page

Mark the things people ask about

Add clear labels for vegetarian, vegan, gluten-free and nuts where you can stand behind them, and explain your terms in a line at the top. Do not use colour alone to carry the meaning. The US Department of Justice lists that among its barriers, because people with colour blindness and screen readers miss it.

Be careful with allergy claims. A kitchen that handles nuts may not be able to promise a dish is free of them. Say what you can honestly say, and ask diners with allergies to speak to staff. Allergen law differs by country. We could not read a current official page on UK distance-selling rules today, so check with your local food authority rather than relying on this guide.

Date your menu

Add "Menu updated" with a real date. It tells diners the prices are likely to be right, and it gives your staff a reason to look at it every month.

How your menu reaches Google

This is where the website and the listing meet. All of this comes from Google's help pages for restaurants, the menu editor and the listing guidelines, read on 3 November 2026.

RuleWhat it means for you
Google may transcribe menu data from your website into your profileA clear text menu can feed your listing. Wrong prices on your site can spread. You can edit the result or opt out
The menu URL must show the complete set of items, not only "popular items"Link your full menu page, not a highlights page
A menu URL cannot point straight at a third-party ordering or delivery serviceLink your own menu, then offer ordering from there
The menu editor takes sections, items, descriptions and pricesChanges can take 24 to 48 hours to appear
If a third party manages your profile, it needs your consent to submit a menu URLKnow who has access, and check what they submit
Your main hours should be when diners can sit down and eatUse "more hours" for takeout, delivery and pickup

For the rest of the listing, see our Google Business Profile guide, which sorts each tip by whether Google actually confirms it.

Markup that describes the restaurant

Google's local business documentation uses a Restaurant type in its example, with servesCuisine, priceRange, opening hours and a menu link. Add it if your platform makes it simple. Keep the facts identical to the page, and treat it as accuracy work, as Google does not promise any display or ranking result from it.

Booking and ordering: whose checkout is it?

Most restaurants use a third-party tool, and that is sensible. The decision is where the customer starts.

  • Booking. Google offers Reserve with Google through supported scheduling providers, and lets you select a preferred provider if you have a business link. Put the same provider behind the Book button on your site, so customers do not end up in two systems.
  • Ordering. Google's ordering page lets you add custom links, mark a preferred link for pickup and for delivery, and remove a provider. Providers must remove their link within 5 business days of a request. If you run your own ordering, make it the preferred link. Turning off orders on the profile hides the options you added, so check it after any change.
  • Compare the true cost. Each delivery app sets its own commission and terms, and we do not quote them here because they vary by contract. Check your own agreement before you decide how hard to push direct orders.

Whatever you choose, test it on a phone once a month, from the button to the confirmation. A broken widget often goes unnoticed for weeks, because the people it fails simply leave.

Two rules worth knowing

Calories, if you are a large chain (US)

The FDA's menu labeling page (content current as of 13 December 2023) applies its rule to chains with 20 or more locations that trade under the same name and sell substantially the same menu items. Those businesses must show calories for standard items, plus statements about daily intake and about written nutrition information being available on request.

FDA's supplemental guidance (May 2018, nonbinding) says calorie declarations are needed on online menus if consumers can order online. Smaller restaurants are outside the rule unless they choose to register. State or city rules may add more, so check locally.

Accessibility

The US Department of Justice's web guidance (18 March 2022) names food and drink establishments among businesses open to the public, and says the ADA applies to what they offer online. It does not set one detailed technical standard, and points to WCAG and Section 508 as helpful guidance. It lists poor contrast, images without text alternatives, unlabelled forms and mouse-only navigation as barriers. The guidance itself is informal and not legally binding, and businesses still have duties under the Act.

In practice, for a restaurant this means a real text menu, good contrast over photos, labelled booking fields, and a site that works with a keyboard. Our accessibility statement guide has more detail.

What to skip

  • Autoplay video with sound, and any music at all.
  • Script fonts for dish names. Keep decorative type for headings.
  • Instagram as your only gallery. Embeds can break and slow the page. Pick your ten best photos and host them.
  • Fake urgency, such as "only 2 tables left", unless your booking system really shows it.

How we help at Amariq

We plan and build restaurant websites around the menu, the booking path and a listing that matches. That can be on Webflow, Framer, WordPress, Shopify, Wix, Squarespace or a custom build, whichever you can keep up to date yourself. We quote from the scope and never by the hour, with 40% to start, 30% at design approval and 30% before launch. After final payment, the design, copy and code are yours, and the domain and hosting accounts sit in your name. See our web design service and our guide to what a landing page costs if you only need one page to start.

Frequently asked questions

What should a restaurant website include?

A home page with food, location, hours and a booking or order button, a text menu, a location page, a short story, and contact details that match your Google listing. Add private dining or catering pages if those bring in revenue.

Should my restaurant menu be a PDF?

Not on its own. A text menu is easier on a phone, simpler to update and easier for screen readers and search engines. Keep a PDF as an extra download if you like the printed design.

Can Google use the menu on my website?

Yes. Google's help says it may transcribe menu data from your site into your Business Profile. You can edit what appears and opt out. That makes it important to keep your prices correct on your own page.

Not as the menu link. Google's guidelines say menu URLs cannot be direct links to third-party ordering or delivery services. Add those through the food ordering options, and link your own menu page as the menu.

Do restaurants have to show calories online?

In the US, chains of 20 or more locations covered by the FDA rule must show calories on standard menus, and FDA's guidance includes online menus where consumers can order. Other restaurants are outside it unless they register, but state and city rules can differ.

Does a restaurant website have to be accessible?

The US Department of Justice says the ADA applies to the goods and services businesses open to the public offer online, and it names food and drink establishments. It leaves the method flexible. This is not legal advice, so speak to a lawyer about your own site.

Do I need my own website if I am on delivery apps?

We think so. An app lists you beside your competitors and sets the rules. Your own site gives you a place for your full menu, booking, catering and your story, and it is what your Google listing should point to.

How often should I update my restaurant website?

Check it whenever prices or hours change, and at least monthly. Look at the menu, special hours for holidays, the booking button and the phone number, then compare them with your Google listing.

Rahat Khondokar, founder of Amariq

Rahat Khondokar

Founder & CEO, Amariq

Rahat designs and builds websites for marketing teams and ecommerce brands, and writes here about the structure, copy and conversion work behind them. More about Amariq. Find him on YouTube, Dribbble and LinkedIn.

Keep reading

Related articles.

All articles