209 lines
12 KiB
Markdown
209 lines
12 KiB
Markdown
# 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.
|