Answer the four questions on the first screen
Design for someone standing on the sidewalk with a phone, deciding where to get coffee. Before they scroll, they should see:
| Question | What to show | Tip |
|---|---|---|
| Where are you? | Address, neighborhood and a Get directions button that opens maps | Use exactly the same address as your Google profile |
| Are you open now? | Today's hours, with the full week one tap away | Update before holidays, at the same time as Google |
| What do you serve? | Your menu as real text, with prices | Skip the PDF: it's slow and hard to read on a phone |
| How do I get it? | Order ahead, Call or delivery buttons | One tap from the first screen |
For the address and hours side, see how to add your coffee shop to Google Maps. For ordering, see how a coffee shop can sell coffee online.
Design for phones first
Google uses the mobile version of a site's content for indexing and ranking, so the phone version is the one that counts for search too.
- Make buttons big enough to tap with a thumb, with space between them.
- Make your phone number a tap-to-call link.
- Keep a small bar at the bottom of the screen with Directions, Order and Call.
- Don't cover the menu with pop-ups that are hard to close.
Make it fast
Google's web.dev team recommends three targets for a good experience: the main content loads within 2.5 seconds (Largest Contentful Paint), the page reacts to taps within 200 milliseconds (Interaction to Next Paint), and the layout stays stable, with a Cumulative Layout Shift of 0.1 or less.
- Resize photos before uploading. A drink photo doesn't need to be wider than the screen it's shown on.
- Skip autoplaying background videos and heavy image sliders on the homepage.
- Use one or two fonts, not five.
- Test your homepage on PageSpeed Insights after every big change.
Make it easy to read, even in the sun
- Contrast. The W3C accessibility guidelines ask for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Light gray text on a beige background usually fails.
- Size. Keep body text around 16 pixels or larger on phones.
- Words on buttons. Say what happens: Get directions, Order pickup, Call us.
- Alt text. Describe each photo for screen readers, for example "Oat latte with latte art on our walnut counter".
Show the real place
People want to know what the visit will feel like. Real photos do that; stock photos don't. A simple shot list:
- Your storefront from the sidewalk, so people recognize it
- The counter, with your team at work
- Your three best-selling drinks, shot in daylight
- Where people sit: the window seat, the big table, the patio
Help search engines read your hours
Add LocalBusiness structured data to your homepage so search engines can read your address, phone number and opening hours. Google documents the format, and schema.org has a specific CafeOrCoffeeShop type. A minimal example:
{ "@context": "https://schema.org", "@type": "CafeOrCoffeeShop", "name": "Corner Cup", "address": { "@type": "PostalAddress", "streetAddress": "12 Main St", "addressLocality": "Springfield", "addressRegion": "IL" }, "telephone": "+1-555-0100", "openingHours": "Mo-Fr 07:00-18:00" }
Coffee shop website checklist
- Address, today's hours and a Get directions button on the first screen
- Menu as text, with prices
- Order, call and directions buttons one tap away
- Loads fast on mobile data (check PageSpeed Insights)
- Text contrast of at least 4.5:1
- Real photos of your drinks, space and team
- Same name, address and hours as your Google profile
- LocalBusiness or CafeOrCoffeeShop structured data
- Links to your Instagram and your Google reviews
How Nookavi helps
Our free social media audit includes a phone check of your website against this checklist, with the three fixes that matter most. We also shoot the real photos and short videos your site and Instagram can share.
Frequently asked questions
Should my coffee shop menu be a PDF?
Better not. A PDF is slow to open and hard to read on a phone. Put the menu on the page as text with prices, and keep a PDF only as an optional download.
Do I need a website if I have Instagram?
Yes, even a simple one. You control your website, it can show your hours and menu clearly, and your Google Business Profile can link to it. A one-page site that answers the four questions is enough to start.
Which website builder should a coffee shop use?
Any mainstream builder works if it shows the four answers, loads fast and is easy for you to update. If your point-of-sale system offers online ordering, pick a setup that connects to it so your menu and prices stay in sync.
How do I know if my café's website is fast enough?
Test it on PageSpeed Insights. Google's web.dev recommends a Largest Contentful Paint within 2.5 seconds, an Interaction to Next Paint of 200 milliseconds or less, and a Cumulative Layout Shift of 0.1 or less.
What should be on a coffee shop homepage?
Your name and neighborhood, today's hours, a Get directions button, your menu or a link to it, an Order button if you take orders, and a few real photos. Your story, events and gift cards can come further down.
Sources
- Mobile-first indexing best practices, Google Search Central. Google indexes and ranks the mobile version of a site. Accessed October 27, 2026.
- Web Vitals, web.dev (Google). LCP 2.5 s, INP 200 ms and CLS 0.1 targets. Accessed October 27, 2026.
- Understanding Success Criterion 1.4.3: Contrast (Minimum), W3C Web Accessibility Initiative. Contrast of 4.5:1 for normal text and 3:1 for large text. Accessed October 27, 2026.
- PageSpeed Insights, Google. Free speed test. Accessed October 27, 2026.
- Local Business (LocalBusiness) structured data, Google Search Central. Structured data for address and opening hours. Accessed October 27, 2026.
- CafeOrCoffeeShop, Schema.org. The coffee shop type in schema.org. Accessed October 27, 2026.
- Manage online ordering options, Google Business Profile Help. Linking online ordering from your Google profile. Accessed October 27, 2026.
Own a coffee shop?
Get your free social media audit.
We look at your Instagram, Facebook and Google profile and send you 3 fixes you can do this week, even if you never hire us.
Request my free audit