Eerste commit voor Helvoirt Gevelreiniging

CMS-SEO-handleiding.md

@@ -0,0 +1,208 @@
+# CMS-handleiding voor de SEO-partij — Helvoirt Gevelreiniging
+
+Korte, praktische uitleg over het beheren en SEO-optimaliseren van pagina's in het CMS
+(Emdash). Het CMS is bewust eenvoudig ingericht: je werkt met **Instellingen**, **Pagina's**
+en **Locatiepagina's**.
+
+> Admin-URL: `https://<domein>/_emdash/admin` (op de preview: `https://helvoirt-gevelreiniging.mike-197.workers.dev/_emdash/admin`).
+
+---
+
+## 1. Inloggen
+
+Het CMS werkt **zonder wachtwoord** met een inloglink per e-mail (magic-link):
+
+1. Ga naar `/_emdash/admin/login`.
+2. Klik **"Sign in with email link"**, vul je e-mailadres in.
+3. Je krijgt een (Engelstalige) mail "Sign in to …" → klik de knop → je bent ingelogd.
+
+> Je e-mailadres moet eerst als gebruiker zijn aangemaakt (dat doet De Websmid eenmalig).
+> Open registratie bestaat niet. Geef je gewenste e-mailadres(sen) door.
+
+---
+
+## 2. De opbouw van het CMS
+
+| Onderdeel | Waarvoor |
+|---|---|
+| **Instellingen** | Site-brede gegevens: telefoon, e-mail, adres, **standaard SEO-titel/omschrijving**, **Google Tag Manager**, social links, Google-score. |
+| **Pagina's** | Gewone, vrij in te delen pagina's (bv. een informatie- of landingspagina). URL = de slug, bv. `/onderhoudstips`. |
+| **Locatiepagina's** | Lokale SEO-pagina's per plaats. URL = `/<plaats>`, bv. `/maastricht`. |
+
+Bij **Pagina's** en **Locatiepagina's** staat in elk item een blok **SEO-velden** onderaan
+(titel, omschrijving, canonical, deelafbeelding, noindex).
+
+---
+
+## 3. Een gewone pagina aanmaken
+
+1. Ga naar **Pagina's → Nieuw** (of dupliceer de meegeleverde *"Voorbeeldpagina (sjabloon)"*).
+2. Vul in:
+   - **Paginatitel** — de grote kop (H1) op de pagina.
+   - **Slug** — het stukje achter de domeinnaam. `onderhoudstips` → `/onderhoudstips`.
+   - **Intro** (optioneel) — korte inleiding onder de kop.
+   - **Inhoud** — de hoofdtekst. Gebruik koppen (H2/H3), alinea's en lijsten.
+   - **SEO-velden** (zie §5).
+3. Zet de status op **Gepubliceerd** en sla op. De pagina is direct live (geen rebuild nodig).
+
+> Laat je een pagina op **Concept** staan, dan is hij wel zichtbaar in het CMS maar **niet** op
+> de site (de bezoeker krijgt een nette 404).
+
+---
+
+## 3b. Een script of embed op een pagina plaatsen (bv. cookieverklaring)
+
+Wil je een **extern script** of stukje **HTML/JavaScript** op een pagina draaien, bijvoorbeeld een
+**cookieverklaring** (Cookiebot, CookieFirst, Complianz, Termly, …), een formulier-embed of een
+widget? Plak dat **niet** in het **Inhoud**-veld. Dat veld is voor tekst en zet code om in *zichtbare
+letters* (je ziet dan letterlijk `<script>…` op de pagina staan, of de code verdwijnt). Ook een
+"Code"-blok is bedoeld om code te *tónen*, niet om hem uit te voeren.
+
+Gebruik in plaats daarvan het veld **"Embedcode / scripts (geavanceerd)"** onderaan een pagina
+(onder de SEO-velden):
+
+1. Open de pagina (bv. **Pagina's → Cookieverklaring**).
+2. Plak de volledige embed-/scriptcode die je leverancier geeft (inclusief de `<script …></script>`)
+   in **Embedcode / scripts**.
+3. Sla op. De code wordt **1-op-1 in de pagina-body geladen en uitgevoerd**, onder de gewone inhoud.
+   (Je mag het Inhoud-veld leeg laten of er een korte intro-tekst boven zetten.)
+
+> **Let op:** dit veld voert code uit zonder controle. Plak hier **alleen code van een vertrouwde
+> bron** (je cookie-/consent-leverancier). Een typefout of een verkeerd script kan de pagina breken.
+> Twijfel je? Stem het even af met De Websmid.
+>
+> De **site-brede** cookiebanner (die op álle pagina's moet verschijnen) hoort niet hier, maar in
+> **Google Tag Manager** (zie §5, GTM-ID in Instellingen). Dit veld is voor pagina-specifieke embeds
+> zoals juist de cookie**verklaring**.
+
+---
+
+## 4. Een locatiepagina aanmaken (lokale SEO)
+
+1. Ga naar **Locatiepagina's → Nieuw** (of dupliceer de meegeleverde *"Maastricht"*-pagina).
+2. Vul in:
+   - **Plaats** — bv. `Echt`. Deze naam gebruiken we in de kop, teksten en de diensten-strip.
+   - **Slug** — bv. `echt` → de pagina komt op `/echt`.
+   - **Paginakop / H1** — laat leeg voor automatisch *"Gevelreiniging in Echt"*, of typ een
+     eigen kop (bv. *"Gevelreiniging en voegwerk in Echt"*).
+   - **Intro** — korte lokale inleiding (staat in de donkere balk bovenaan, naast de CTA).
+   - **Hero-foto bovenaan** (optioneel) — zet je er een foto in, dan komt die rechts in de
+     donkere balk. Leeg = nette donkere balk zonder foto.
+   - **Blok 1 t/m 4** (kop + tekst + optionele foto) — dit is de **opmaak met 4 koppen en
+     alinea's**. Elk blok dat je invult verschijnt als een nette sectie; met een foto erbij
+     komt tekst en beeld **om-en-om** te staan (links/rechts), zonder foto loopt de tekst over
+     de volle breedte. Laat blokken die je niet nodig hebt gewoon leeg — die worden niet getoond.
+     Het tekstveld van een blok is een **rich-text editor**: gebruik de werkbalk voor
+     **opsommingen (bullets), genummerde lijsten, links (interne links naar je dienstpagina's),
+     vet en cursief**. Je hoeft dus geen HTML te typen. Links openen standaard in **hetzelfde
+     tabblad**; wil je een link in een nieuw tabblad openen, vink dan **"Openen in nieuw tabblad"**
+     aan in het link-venster (handig voor links naar andere websites). (Bestaande blokteksten zijn automatisch
+     omgezet: opsommingen, stappen en links zijn behouden — controleer ze even en verfijn naar
+     wens, bv. de titel van een stap vet maken.)
+   - **SEO-velden** (zie §5).
+
+   > De lokale inhoud (je SEO-tekst) zet je in de **4 blokken** hierboven (kop + alinea + foto).
+   > Het oude losse veld "Lokale inhoud / Extra tekst" is op locatiepagina's verwijderd.
+3. Zet op **Gepubliceerd** en sla op.
+
+> **Vaste onderdelen die je niet hoeft in te vullen:** de donkere hero met "Gratis offerte" +
+> 4,9-Google-regel, een "Onze diensten in {plaats}"-strip met links naar de 5 dienstpagina's,
+> en het offerteformulier onderaan staan er **automatisch** op elke locatiepagina.
+
+> **Belangrijk voor SEO:** maak elke locatiepagina **uniek**. Tien keer dezelfde tekst met
+> alleen een andere plaatsnaam telt als dunne/duplicate content en kan averechts werken. Vul
+> de 4 blokken met echte, lokale tekst (waarom klanten in die plaats voor jullie kiezen, een
+> lokaal project, een wijk/straat, reistijd, etc.).
+
+---
+
+## 5. SEO optimaliseren
+
+### Per pagina (in Pagina's en Locatiepagina's)
+- **SEO · titel** — de titel in Google + de browsertab. Houd ~50–60 tekens aan. Leeg laten =
+  de paginatitel/kop wordt gebruikt.
+- **SEO · omschrijving** — de tekst onder de titel in Google (snippet). ~150–155 tekens.
+- **SEO · canonical-URL** — laat **leeg** (dan is de pagina zijn eigen canonical). Alleen
+  invullen bij een bewuste verwijzing naar een andere URL.
+- **SEO · deelafbeelding (OG-image)** — de afbeelding bij delen op social media. Optioneel
+  (anders wordt de standaard uit Instellingen gebruikt).
+- **SEO · noindex** — **alleen aanzetten** als de pagina *niet* in Google mag verschijnen.
+  Standaard uit.
+
+### Site-breed (in Instellingen)
+- **SEO · standaard paginatitel / omschrijving** — de fallback voor de homepage en pagina's
+  zonder eigen SEO-titel.
+- **Google Tag Manager ID** — vul hier alleen het container-ID in (`GTM-XXXXXX`). De code
+  wordt automatisch geplaatst. Leeg = geen tracking.
+- **Standaard deelafbeelding (OG-image)** — voor pagina's zonder eigen OG-image.
+
+---
+
+## 5b. Handige bewerk-functies (zoals in WordPress)
+
+- **Pagina dupliceren:** in een lijst (Pagina's / Locatiepagina's) staat per rij een **kopieer-icoon**
+  (naast het potlood en de prullenbak). Daarmee maak je een **kopie als concept**, met alle velden
+  en SEO. Ideaal om een nieuwe stadspagina te starten vanaf een bestaande.
+- **Rijen toevoegen/verwijderen/verslepen:** sommige velden zijn **repeaters** (bv. "Waarden" op
+  Over ons). Daar voeg je met **"Add item"** een rij toe, verwijder je een rij met het prullenbak-
+  icoon, en **versleep** je rijen om de volgorde te wijzigen. Net een mini page-builder.
+- **Losse lijst-items:** waar iets een eigen onderdeel in de zijbalk is (bv. een collectie),
+  gebruik je **"Add New"** voor een nieuw item en de prullenbak om te verwijderen.
+- **"(optional)" bij velden:** velden die niet verplicht zijn tonen "optional". Dat is standaard in
+  het CMS en niet uit te zetten; het zegt simpelweg dat je het veld leeg mag laten.
+
+## 6. Do's & don'ts
+
+- **Locatiepagina's én gewone Pagina's staan beide op de root** (`/maastricht`,
+  `/onderhoudstips`). Geef ze daarom een **unieke slug**: dezelfde slug bij een Locatie- én
+  een Pagina kan niet (de Locatiepagina wint dan). Gebruik voor plaatsen altijd een
+  **Locatiepagina** (die heeft het juiste lokale sjabloon).
+- **Hergebruik geen bestaande URL's als slug.** Deze vaste paden gaan vóór een CMS-pagina:
+  `/`, `/diensten` (+ dienstpagina's), `/over-ons`, `/contact`, `/werkgebied`. Een pagina met
+  slug `contact` wordt dus nooit getoond.
+- **Afbeeldingen** upload je via de mediabibliotheek in het CMS; kies het bestand in het
+  betreffende beeldveld.
+- **Concept vs Gepubliceerd:** alleen gepubliceerde items staan live.
+
+---
+
+## 6b. De vaste pagina's beheren (Homepage, Over ons, Contact, Diensten)
+
+Naast **Pagina's** en **Locatiepagina's** staan ook de bestaande vaste pagina's in het CMS,
+elk als een eigen onderdeel in de zijbalk:
+
+| Onderdeel | Wat je er beheert |
+|---|---|
+| **Homepage** | Alle teksten van de homepage: hero, intro, koppen, werkwijze-stappen, reviews, FAQ (repeater-rijen). |
+| **Homepage · hero-foto's** | De 3 staande werkfoto's in de hero (foto + titel + ondertitel + alt). Volgorde via *Volgorde*. |
+| **Homepage · bewijs-galerij** | De 6 foto's in "Echt werk, echte resultaten" (foto + bijschrift; vink *Uitgelicht* voor de grote tegel). |
+| **Over ons (pagina)** | Hero, verhaal, waarden (repeater) + de twee foto's + SEO. |
+| **Contactpagina** | Kicker, titel, intro + SEO. (Telefoon/e-mail/adres staan in **Instellingen**.) |
+| **Diensten** | De 5 dienstpagina's. Elk item stuurt **tegelijk** de detailpagina (`/diensten/<slug>`), de kaart in het overzicht (`/diensten`), het paneel op de homepage én het menu aan. Velden: menu-titel/tekst/foto, hero, intro + "wat we doen", resultaat-galerij (3 foto's), aanpak-stappen, FAQ en SEO. Daarnaast **Blok 1 en Blok 2** (kop + rich-text + optionele foto, om-en-om getoond) onder de eerste alinea — zelfde rich-text-editor als de locatiepagina-blokken (lijsten, links, vet), leeg = niet getoond; handig voor extra content (bv. landingspagina's). **Volgorde** bepaal je met het veld *Volgorde in het menu (1-5)*. |
+| **Algemene voorwaarden** | De pagina `/voorwaarden`. Titel + intro + de artikelen als repeater-rijen (artikelkop + tekst; toevoegen/verwijderen/verslepen) + SEO. |
+
+> **Beeldvelden met "leeg = standaardfoto":** laat je een fotoveld leeg, dan toont de site de
+> meegeleverde standaardfoto. Upload je een eigen foto, dan vervangt die de standaard.
+
+## 7. Wat (nu nog) niet via het CMS gaat — eerlijk overzicht
+
+**Volledig via het CMS te beheren:** Instellingen (NAW + site-brede SEO + GTM), Pagina's,
+Locatiepagina's, en alle vaste pagina's: **Homepage, Over ons, Contactpagina, Diensten en
+Algemene voorwaarden** (incl. het menu, dat de Diensten-volgorde/titels volgt).
+
+Nog **in code** (bewust, want het is geen redactionele inhoud): de algemene **opmaak/lay-out**
+en losse technische teksten. Wil je daar iets aan wijzigen, geef het door aan De Websmid.
+
+---
+
+## 8. Operationeel — vóór livegang (door De Websmid)
+
+Deze stappen activeren het bovenstaande; ze staan los van het dagelijkse pagina-beheer en
+worden door De Websmid uitgevoerd (zie `newsite.md`):
+
+1. **Seed draaien** — het content-model (`seed/seed.json`) inladen via de setup-wizard op
+   `/_emdash/admin/setup` (eenmalig). Daarna verschijnen Instellingen/Pagina's/Locatiepagina's.
+2. **CMS-gebruiker(s) aanmaken** voor de SEO-partij (magic-link, §1).
+3. **Sitemap** uitbreiden met gepubliceerde Pagina's + Locatiepagina's (§9 in `todo.md`).
+4. **Interne links** naar de locatiepagina's leggen (bv. vanuit de werkgebied-sectie/menu)
+   zodat ze goed vindbaar zijn.