Bei dieser Variante wird der Inhalt zusätzlich als vorgerendertes HTML direkt von der Wirtino-API geladen. Google sieht den Inhalt sofort — auch ohne
JavaScript. Der interaktive Widget übernimmt danach im Browser.
Ideal für SEO-kritische Seiten (Tageskarte, Wochenmenü), die in der
Google-Suche erscheinen sollen.
Webhooks nicht nötig: Der Inhalt wird bei jedem Seitenaufruf
live geladen (CDN-Cache max. 5 Min.).
2. SEO-Widgets platzieren
Wochenmenü
Zeigt das aktuelle Wochenmenü (Montag–Sonntag) mit Heute-Markierung.
<!-- SEO: vorgerendertes HTML (wird von Google indexiert).
Liegt im Slot des Custom-Elements: bleibt sichtbar bis das Widget-JS hydriert
hat, danach übernimmt das interaktive Widget. Fällt das Widget-JS aus
(no-JS / Crawler / Fehler), bleibt das SSR-HTML stehen. -->
<wirtino-wochenmenu tenant="" api="http://localhost:8000" style="display:block;max-width:800px;--wirtino-max-width:800px">
<div id="wirtino-wochenmenu-ssr"></div>
</wirtino-wochenmenu>
<script>
(function () {
var ctrl = new AbortController();
var t = setTimeout(function () { ctrl.abort(); }, 3000);
fetch('http://localhost:8000/api/v1//wochenmenu/current/rendered', { signal: ctrl.signal })
.then(function (r) { return r.ok ? r.text() : Promise.reject(); })
.then(function (html) {
clearTimeout(t);
var el = document.getElementById('wirtino-wochenmenu-ssr');
if (el) el.innerHTML = html;
})
.catch(function () { /* Silent: Slot bleibt ggf. leer, falls auch das Widget scheitert. */ });
})();
</script>
Tageskarte
Zeigt die à-la-carte-Tageskarte des heutigen Tages.
<!-- SEO: vorgerendertes HTML (wird von Google indexiert).
Liegt im Slot des Custom-Elements: bleibt sichtbar bis das Widget-JS hydriert
hat, danach übernimmt das interaktive Widget. Fällt das Widget-JS aus
(no-JS / Crawler / Fehler), bleibt das SSR-HTML stehen. -->
<wirtino-tageskarte tenant="" api="http://localhost:8000" style="display:block;max-width:800px;--wirtino-max-width:800px">
<div id="wirtino-tageskarte-ssr"></div>
</wirtino-tageskarte>
<script>
(function () {
var ctrl = new AbortController();
var t = setTimeout(function () { ctrl.abort(); }, 3000);
fetch('http://localhost:8000/api/v1//tageskarte/today/rendered', { signal: ctrl.signal })
.then(function (r) { return r.ok ? r.text() : Promise.reject(); })
.then(function (html) {
clearTimeout(t);
var el = document.getElementById('wirtino-tageskarte-ssr');
if (el) el.innerHTML = html;
})
.catch(function () { /* Silent: Slot bleibt ggf. leer, falls auch das Widget scheitert. */ });
})();
</script>
Speisekarte
Zeigt die als Default markierte Speisekarte. Für eine bestimmte Karte (z.B. Saisonkarte) den Embed-Code direkt im Modul „Speisekarten" generieren.
<!-- SEO: vorgerendertes HTML (wird von Google indexiert).
Liegt im Slot des Custom-Elements: bleibt sichtbar bis das Widget-JS hydriert
hat, danach übernimmt das interaktive Widget. Fällt das Widget-JS aus
(no-JS / Crawler / Fehler), bleibt das SSR-HTML stehen. -->
<wirtino-speisekarte tenant="" api="http://localhost:8000" style="display:block;max-width:800px;--wirtino-max-width:800px">
<div id="wirtino-speisekarte-ssr"></div>
</wirtino-speisekarte>
<script>
(function () {
var ctrl = new AbortController();
var t = setTimeout(function () { ctrl.abort(); }, 3000);
fetch('http://localhost:8000/api/v1//speisekarte/rendered', { signal: ctrl.signal })
.then(function (r) { return r.ok ? r.text() : Promise.reject(); })
.then(function (html) {
clearTimeout(t);
var el = document.getElementById('wirtino-speisekarte-ssr');
if (el) el.innerHTML = html;
})
.catch(function () { /* Silent: Slot bleibt ggf. leer, falls auch das Widget scheitert. */ });
})();
</script>
Spezialitätentag
Zeigt den nächsten oder heutigen Spezialitätentag.
<!-- SEO: vorgerendertes HTML (wird von Google indexiert).
Liegt im Slot des Custom-Elements: bleibt sichtbar bis das Widget-JS hydriert
hat, danach übernimmt das interaktive Widget. Fällt das Widget-JS aus
(no-JS / Crawler / Fehler), bleibt das SSR-HTML stehen. -->
<wirtino-spezialitaetentag tenant="" api="http://localhost:8000" style="display:block;max-width:800px;--wirtino-max-width:800px">
<div id="wirtino-spezialitaetentag-ssr"></div>
</wirtino-spezialitaetentag>
<script>
(function () {
var ctrl = new AbortController();
var t = setTimeout(function () { ctrl.abort(); }, 3000);
fetch('http://localhost:8000/api/v1//spezialitaetentag/rendered', { signal: ctrl.signal })
.then(function (r) { return r.ok ? r.text() : Promise.reject(); })
.then(function (html) {
clearTimeout(t);
var el = document.getElementById('wirtino-spezialitaetentag-ssr');
if (el) el.innerHTML = html;
})
.catch(function () { /* Silent: Slot bleibt ggf. leer, falls auch das Widget scheitert. */ });
})();
</script>
Betriebsurlaub
Hinweis auf aktuellen oder bevorstehenden Betriebsurlaub.
<!-- SEO: vorgerendertes HTML (wird von Google indexiert).
Liegt im Slot des Custom-Elements: bleibt sichtbar bis das Widget-JS hydriert
hat, danach übernimmt das interaktive Widget. Fällt das Widget-JS aus
(no-JS / Crawler / Fehler), bleibt das SSR-HTML stehen. -->
<wirtino-betriebsurlaub tenant="" api="http://localhost:8000" style="display:block;max-width:800px;--wirtino-max-width:800px">
<div id="wirtino-betriebsurlaub-ssr"></div>
</wirtino-betriebsurlaub>
<script>
(function () {
var ctrl = new AbortController();
var t = setTimeout(function () { ctrl.abort(); }, 3000);
fetch('http://localhost:8000/api/v1//betriebsurlaub/active/rendered', { signal: ctrl.signal })
.then(function (r) { return r.ok ? r.text() : Promise.reject(); })
.then(function (html) {
clearTimeout(t);
var el = document.getElementById('wirtino-betriebsurlaub-ssr');
if (el) el.innerHTML = html;
})
.catch(function () { /* Silent: Slot bleibt ggf. leer, falls auch das Widget scheitert. */ });
})();
</script>
Events
Zeigt die nächsten Veranstaltungen als Liste.
<!-- SEO: vorgerendertes HTML (wird von Google indexiert).
Liegt im Slot des Custom-Elements: bleibt sichtbar bis das Widget-JS hydriert
hat, danach übernimmt das interaktive Widget. Fällt das Widget-JS aus
(no-JS / Crawler / Fehler), bleibt das SSR-HTML stehen. -->
<wirtino-events tenant="" api="http://localhost:8000" style="display:block;max-width:800px;--wirtino-max-width:800px">
<div id="wirtino-events-ssr"></div>
</wirtino-events>
<script>
(function () {
var ctrl = new AbortController();
var t = setTimeout(function () { ctrl.abort(); }, 3000);
fetch('http://localhost:8000/api/v1//events/upcoming/rendered', { signal: ctrl.signal })
.then(function (r) { return r.ok ? r.text() : Promise.reject(); })
.then(function (html) {
clearTimeout(t);
var el = document.getElementById('wirtino-events-ssr');
if (el) el.innerHTML = html;
})
.catch(function () { /* Silent: Slot bleibt ggf. leer, falls auch das Widget scheitert. */ });
})();
</script>
Aktion
Aktions-Popup oder -Banner (z.B. Frühschoppen, Rabatt-Code). Steuerung in „Aktionen": Anzeige (Popup/Banner), Auslöser und Zeitfenster.
<!-- SEO: vorgerendertes HTML (wird von Google indexiert).
Liegt im Slot des Custom-Elements: bleibt sichtbar bis das Widget-JS hydriert
hat, danach übernimmt das interaktive Widget. Fällt das Widget-JS aus
(no-JS / Crawler / Fehler), bleibt das SSR-HTML stehen. -->
<wirtino-aktion tenant="" api="http://localhost:8000" style="display:block;max-width:800px;--wirtino-max-width:800px">
<div id="wirtino-aktion-ssr"></div>
</wirtino-aktion>
<script>
(function () {
var ctrl = new AbortController();
var t = setTimeout(function () { ctrl.abort(); }, 3000);
fetch('http://localhost:8000/api/v1//aktion/current/rendered', { signal: ctrl.signal })
.then(function (r) { return r.ok ? r.text() : Promise.reject(); })
.then(function (html) {
clearTimeout(t);
var el = document.getElementById('wirtino-aktion-ssr');
if (el) el.innerHTML = html;
})
.catch(function () { /* Silent: Slot bleibt ggf. leer, falls auch das Widget scheitert. */ });
})();
</script>