🌱 I have long been a fan of @Foursquare.com and @Swarmapp.com, having created many venues, posted many tips, and (checks profile) over 45,000 checkins. I recently joined @happycow.net and before I start posting new vegan (friendly) venues or reviews there, I really need to figure out my own personal site venue pages (including URL design) and review posts design and authoring workflow. I’m pretty sure I can and should post h-review posts as a variant of articles (with usual h-entry markup) with an explicit article name, since most review destinations request a title (name) for the review (e.g. HappyCow, TripAdvisor), and for others with only review text (e.g. Google Maps), I can include the name at the start. Different review destinations have different text requirements (minimum and/or maximum lengths), and I’ll take time to document those first. The first destination I’ll likely try automatically syndicating to is a site created by #IndieWeb community member @jamesg.blog (@capjamesg@indieweb.social): @breakfastand.coffee It’s still quite new, but the thing that makes Breakfast & Coffee innovative and unique is that it encourages you to post your venue (e.g. cafe) description or review on your own site with a meaningful slug, link to https://breakfastand.coffee/ and then send a Webmention to indicate that you’d like to syndicate your venue or review into Breakfast & Coffee, like into an aggregator. Before I get to that point however, I feel there’s quite a few challenges in publishing a “decent” restaurant / cafe venue page, because there really is a dearth of good examples of doing so with simple semantic HTML + CSS. You really don’t need JS to post info about a restaurant. Setting aside the economic / intermediation challenges of "delivery apps" for now, people really want a few simple things from a restaurant site / page that could all be marked up with simple semantic HTML (thus resulting in good web search rankings) and styled in a quickly readable and mobile-friendly way. * hours open (perhaps kitchen hours if different) * location (address that links to a map UI or map embed w/o cookies/tracking) * nearest bus/tram/rail stop * payment restrictions (e.g. if only cash, or only credit) or options if you prefer * contact info (including a note about catering if that’s an option) * links to social media profiles * links to restaurant review sites/aggregator pages (e.g. venue permalink on Google Maps, TripAdvisor, Foursquare, Swarm, HappyCow) * menu with item name, description, price, optional-thumbnail, and dietary/allergy notations No you really don’t need the full mess of made-up things at schema-org. The community at OpenStreetMap has done A LOT (most? nearly all?) of the work figuring out the ways to express the above types of information, e.g.: https://wiki.openstreetmap.org/wiki/Key:opening_hours Yet has anyone actually seen a simple semantic HTML page that publishes this kind of information? I’ve web searched many search terms and phrases and found nothing good. Stylistically dated templates for sale. Examples with numerous unnecessary scripts (no your typical user does not care about your clever animated 3D-carousel of pretty photos, certainly not waiting for a megabyte of framework scripts for it). Something built on Bootstrap, unnecessary for today’s mobile-friendly HTML+CSS. I did find one (ONE) blog post from 2007 (those were the days) for semantic markup for a restaurant menu: https://jonchristopher.us/blog/a-semantic-breakdown-of-restaurant-menus/ Unless I find an existing solution soon, I’m going to create something from scratch with h-card (since a restaurant is an organization / venue) and add semantic HTML & class names for various fields, re-using from OpenStreetMap Keys whenever possible. That leaves the URL design, where to publish my restaurant pages on my own site, and rather than rethink it, I will likely go with what I decided in my Whistle short URL design^1 many years ago, which is /v/ at the top level of my site, followed by a slug of my short name for the venue. This way I can play with static HTML pages there, with a shared style sheet in that same directory, without impacting anything else on my site. I have some other thoughts around iconography for various diet preferences / allergen warnings for menu items that I’ve tried (or considered), though perhaps I’ll leave those for another post. Or maybe I’ll braindump them now, however incomplete, to see if they resonate or anyone has better suggestions (restaurants and menus really have no standard for these) Edit: already updated lists & descriptions based on feedback: Individual icons/emoji: 🌱 — plant-based (no animal meat or meat broth/oils whatsover) +🌾 — has gluten +🥜 — has nuts +🍫 — has chocolate +🌶 — is spicy +🍯 — has honey +🧈 — has butter +🥛 — has milk, cream, or yogurt +🧀 — has cheese +🥚 — has egg When present in a menu item (with no other food-related icons) 🌱 = vegan & gluten-free 🌱🌾 = vegan with gluten 🌱🥜 = vegan with nuts 🌱🍫 = vegan with chocolate 🌱🌶 = vegan and spicy 🌱🍯 = vegetarian with honey 🌱🧈 = vegetarian with butter 🌱🥛 = vegetarian with milk, cream, or yogurt 🌱🧀 = vegetarian with cheese 🌱🥚 = vegetarian with egg with additional combinations as necessary. For example: A breakfast sandwich at Devil’s Teeth Bakery^2: * Regular Breakfast Sandwich (no bacon!) $10.00 🌱🌾🧈🧀🥚 Or a chocolate croissant at Arsicault^3: * Chocolate Croissant $5.75 🌱🌾🧈🍫 Judahlicious^4 jungle açai bowl: * Jungle Style Açaí Bowl $12.75 🌱 Arizmendi^5 mint chocolate cookie: * Mint Chocolate Chip Cookie $2.75 🌱🌾 Non-vegetarian items would omit the plant 🌱 icon/emoji, but could still include allergen icons. If you are posting restaurants (or any other venues) to your personal site, please add a few of their permalinks to the IndieWeb Examples here: https://indieweb.org/venue#Indieweb_Examples This is day 40 of #100DaysOfIndieWeb. #100Days ← Day 39: https://tantek.com/2023/112/t2/account-migration-post-blog-archive-format → Day 41: https://tantek.com/2023/139/t1/wikipedia-supports-indieweb-rel-me Glossary article https://indieweb.org/article checkin https://indieweb.org/checkin h-card https://microformats.org/wiki/h-card h-entry https://microformats.org/wiki/h-entry h-review https://microformats.org/wiki/h-review POSSE https://indieweb.org/POSSE review https://indieweb.org/review URL design https://indieweb.org/URL_design venue https://indieweb.org/venue References ^1 https://tantek.com/w/Whistle#design ^2 https://www.devilsteethbakingcompany.com/menu ^3 https://arsicault-bakery.com/menus ^4 https://judahlicious.com/menu/ ^5 https://store.arizmendibakery.com/menu-today

🌱 I have long been a fan of @Foursquare.com and @Swarmapp.com, having created many venues, posted many tips, and (checks profile) over 45,000 checkins. I recently joined @happycow.net and before I start posting new vegan (friendly) venues or reviews there, I really need to figure out my own personal site venue pages (including URL design) and review posts design and authoring workflow.

I’m pretty sure I can and should post h-review posts as a variant of articles (with usual h-entry markup) with an explicit article name, since most review destinations request a title (name) for the review (e.g. HappyCow, TripAdvisor), and for others with only review text (e.g. Google Maps), I can include the name at the start.

Different review destinations have different text requirements (minimum and/or maximum lengths), and I’ll take time to document those first.

The first destination I’ll likely try automatically syndicating to is a site created by #IndieWeb community member @jamesg.blog (@capjamesg@indieweb.social): @breakfastand.coffee

It’s still quite new, but the thing that makes Breakfast & Coffee innovative and unique is that it encourages you to post your venue (e.g. cafe) description or review on your own site with a meaningful slug, link to https://breakfastand.coffee/ and then send a Webmention to indicate that you’d like to syndicate your venue or review into Breakfast & Coffee, like into an aggregator.

Before I get to that point however, I feel there’s quite a few challenges in publishing a “decent” restaurant / cafe venue page, because there really is a dearth of good examples of doing so with simple semantic HTML + CSS. You really don’t need JS to post info about a restaurant.

Setting aside the economic / intermediation challenges of "delivery apps" for now, people really want a few simple things from a restaurant site / page that could all be marked up with simple semantic HTML (thus resulting in good web search rankings) and styled in a quickly readable and mobile-friendly way.

* hours open (perhaps kitchen hours if different)
* location (address that links to a map UI or map embed w/o cookies/tracking)
* nearest bus/tram/rail stop
* payment restrictions (e.g. if only cash, or only credit) or options if you prefer
* contact info (including a note about catering if that’s an option)
* links to social media profiles
* links to restaurant review sites/aggregator pages (e.g. venue permalink on Google Maps, TripAdvisor, Foursquare, Swarm, HappyCow)
* menu with item name, description, price, optional-thumbnail, and dietary/allergy notations

No you really don’t need the full mess of made-up things at schema-org.

The community at OpenStreetMap has done A LOT (most? nearly all?) of the work figuring out the ways to express the above types of information, e.g.:

https://wiki.openstreetmap.org/wiki/Key:opening_hours

Yet has anyone actually seen a simple semantic HTML page that publishes this kind of information?

I’ve web searched many search terms and phrases and found nothing good.

Stylistically dated templates for sale. Examples with numerous unnecessary scripts (no your typical user does not care about your clever animated 3D-carousel of pretty photos, certainly not waiting for a megabyte of framework scripts for it). Something built on Bootstrap, unnecessary for today’s mobile-friendly HTML+CSS.

I did find one (ONE) blog post from 2007 (those were the days) for semantic markup for a restaurant menu: https://jonchristopher.us/blog/a-semantic-breakdown-of-restaurant-menus/

Unless I find an existing solution soon, I’m going to create something from scratch with h-card (since a restaurant is an organization / venue) and add semantic HTML & class names for various fields, re-using from OpenStreetMap Keys whenever possible.

That leaves the URL design, where to publish my restaurant pages on my own site, and rather than rethink it, I will likely go with what I decided in my Whistle short URL design¹ many years ago, which is /v/ at the top level of my site, followed by a slug of my short name for the venue. This way I can play with static HTML pages there, with a shared style sheet in that same directory, without impacting anything else on my site.

I have some other thoughts around iconography for various diet preferences / allergen warnings for menu items that I’ve tried (or considered), though perhaps I’ll leave those for another post.

Or maybe I’ll braindump them now, however incomplete, to see if they resonate or anyone has better suggestions (restaurants and menus really have no standard for these)

Edit: already updated lists & descriptions based on feedback:

Individual icons/emoji:
🌱 — plant-based (no animal meat or meat broth/oils whatsover)
+🌾 — has gluten
+🥜 — has nuts
+🍫 — has chocolate
+🌶 — is spicy
+🍯 — has honey
+🧈 — has butter
+🥛 — has milk, cream, or yogurt
+🧀 — has cheese
+🥚 — has egg

When present in a menu item (with no other food-related icons)
🌱 = vegan & gluten-free
🌱🌾 = vegan with gluten
🌱🥜 = vegan with nuts
🌱🍫 = vegan with chocolate
🌱🌶 = vegan and spicy
🌱🍯 = vegetarian with honey
🌱🧈 = vegetarian with butter
🌱🥛 = vegetarian with milk, cream, or yogurt
🌱🧀 = vegetarian with cheese
🌱🥚 = vegetarian with egg

with additional combinations as necessary.

For example:

A breakfast sandwich at Devil’s Teeth Bakery²:
* Regular Breakfast Sandwich (no bacon!) $10.00 🌱🌾🧈🧀🥚

Or a chocolate croissant at Arsicault³:
* Chocolate Croissant $5.75 🌱🌾🧈🍫

Judahlicious⁴ jungle açai bowl:
* Jungle Style Açaí Bowl $12.75 🌱

Arizmendi⁵ mint chocolate cookie:
* Mint Chocolate Chip Cookie $2.75 🌱🌾

Non-vegetarian items would omit the plant 🌱 icon/emoji, but could still include allergen icons.

If you are posting restaurants (or any other venues) to your personal site, please add a few of their permalinks to the IndieWeb Examples here: https://indieweb.org/venue#Indieweb_Examples

This is day 40 of #100DaysOfIndieWeb. #100Days

← Day 39: https://tantek.com/2023/112/t2/account-migration-post-blog-archive-format
→ Day 41: https://tantek.com/2023/139/t1/wikipedia-supports-indieweb-rel-me

Glossary

article
https://indieweb.org/article
checkin
https://indieweb.org/checkin
h-card
https://microformats.org/wiki/h-card
h-entry
https://microformats.org/wiki/h-entry
h-review
https://microformats.org/wiki/h-review
POSSE
https://indieweb.org/POSSE
review
https://indieweb.org/review
URL design
https://indieweb.org/URL_design
venue
https://indieweb.org/venue

References

¹ https://tantek.com/w/Whistle#design
² https://www.devilsteethbakingcompany.com/menu
³ https://arsicault-bakery.com/menus
⁴ https://judahlicious.com/menu/
⁵ https://store.arizmendibakery.com/menu-today