SEO Playbook · Element

Melding: Twee Kolommen — Regels en Voorbeelden

Gebruik een twee-koloms melding om twee gerelateerde mededelingen helder te presenteren, het contrast op mobiel te behouden en valse symmetrie in richtlijnen en voorwaarden te voorkomen.

14 min read

Een twee-koloms melding plaatst twee korte, gelabelde mededelingen onder één gedeeld onderwerp. De mededelingen kunnen handelingen contrasteren, twee voorwaarden uitleggen of gerelateerde toestanden onderscheiden, maar elk moet nauwkeurig en nuttig blijven wanneer het afzonderlijk wordt gelezen.

Kies de instructie voor uw publicatiestatus

Dit weergegeven element werkt omdat “Conceptpagina” en “Gepubliceerde pagina” echte condities zijn, geen decoratieve koppen. De gedeelde titel definieert de beslissing, elke mededeling geeft een volledige instructie, en geen van beide vraagt de lezer om betekenis af te leiden uit kleur of horizontale positie.

Waarom dit element belangrijk is

Lezers komen vaak richtlijnen tegen terwijl ze scannen op de conditie die op hen van toepassing is. Een lange alinea die zegt “concepten kunnen gelabelde voorbeelden bevatten, terwijl gepubliceerde pagina’s geverifieerde waarden vereisen” dwingt de lezer om één clausule in het geheugen te houden terwijl hij de andere toetst. Twee afgebakende mededelingen verminderen dat werk. De labels tonen eerst de vertakking, zodat een lezer de relevante conditie kan identificeren en vervolgens de bijbehorende instructie kan lezen.

Het psychologische voordeel is selectieve aandacht. Mensen hebben niet altijd beide boodschappen even hard nodig; ze hebben vertrouwen nodig dat ze de juiste hebben opgemerkt. Een gedeelde titel stelt de vraag vast, terwijl duidelijke labels de beschikbare toestanden zichtbaar maken. Zij-aan-zij-presentatie maakt ook een betekenisvol contrast duidelijk zonder het te overdrijven als winnaar en verliezer.

Dat voordeel verdwijnt wanneer de auteur valse symmetrie forceert. Valse symmetrie treedt op wanneer de lay-out suggereert dat twee ideeën gelijke reikwijdte, belangrijkheid of geldigheid hebben, ook al doet de inhoud dat niet. Een herinnering van één zin naast een veiligheidsprocedure van zes stappen is geen paar. Dat is ook een vereiste juridische beperking naast een optionele productiviteitstip niet. Kolommen van gelijke breedte kunnen ongelijke boodschappen uitwisselbaar laten lijken, wat precies het verkeerde signaal is.

Machine-extraheerbaarheid is het vermogen van software om inhoud te isoleren terwijl de relaties die het accuraat maken behouden blijven. Een getypeerde twee-koloms melding legt één bovenliggend onderwerp en twee gelabelde kindmededelingen bloot. Zoeksystemen en AI-agenten kunnen “Voor een gepubliceerde pagina, gebruik geverifieerde waarden met een bron en een gecontroleerde datum” herstellen zonder te raden welke kop bij welke zin hoort. Duidelijke labels, broneenvolgorde en zelfstandige teksten overleven responsieve stapeling en tekst-only extractie.

Volg de schrijfregels voor elementen voordat u dit component kiest. Doel heeft voorrang op uiterlijk. Een ernstig risico blijft een waarschuwingskader , een gedrag-voor-gedrag-correctie blijft een do’s-and-don’ts-blok , en twee feiten worden geen meldingen alleen omdat een ontwerp ze in kolommen kan plaatsen.

Wanneer gebruiken

Gebruik dit element wanneer één gedeeld onderwerp precies twee korte mededelingen heeft en het tegelijk zien van beide de lezer helpt classificeren, vergelijken of verwarring voorkomen. Geschikte relaties zijn onder meer:

  • Twee condities: ingelogd versus uitgelogd, concept versus gepubliceerd, vóór migratie versus na migratie.
  • Twee doelgroepen: accounteigenaar versus uitgenodigde gebruiker, zolang beide begeleiding krijgen over dezelfde gebeurtenis.
  • Aanbevolen en afgeraden gedrag: alleen als elke kant een korte mededeling is in plaats van een lijst met overeenkomende gedragingen.
  • Beschikbare en niet-beschikbare toestanden: wanneer de labels de condities noemen die elke toestand produceren.
  • Huidig en toekomstig gedrag: wanneer datums of versiegrenzen expliciet zijn.

Al deze tests moeten slagen:

  1. Eén kop kan beide mededelingen nauwkeurig introduceren.
  2. Er bestaan precies twee condities of boodschappen; de bron verbergt geen derde geval.
  3. Elke mededeling heeft een specifiek label en een volledige consequentie of handeling.
  4. Het paar kan in broneenvolgorde worden begrepen op een smal scherm.
  5. Geen van beide mededelingen vereist een geneste procedure, tabel, formulier of lange kwalificatie.

Bijna-raakgevallen onthullen misbruik. Gebruik gewoon proza wanneer de tweede uitspraak slechts de eerste voortzet. Gebruik een vergelijkingstabel wanneer lezers meerdere criteria moeten beoordelen. Gebruik een beslisboom wanneer meer dan twee condities vertakken of wanneer het ene antwoord tot een volgende vraag leidt. Gebruik een zelfstandige waarschuwing wanneer het missen van de boodschap schade, gegevensverlies, juridische blootstelling of een onomkeerbare handeling kan veroorzaken. Gebruik do’s-and-don’ts wanneer meerdere verkeerde gedragingen elk een bijbehorende correctie nodig hebben.

Verzin geen tegenwicht. Als de eerlijke instructie is “Maak een back-up van de database vóór migratie,” creëert het toevoegen van “Na migratie: blijf werken” symmetrie maar geen waarde. Splits evenmin één mededeling op in “Belangrijk” en “Ook belangrijk.” Labels moeten echte condities, toestanden, doelgroepen of posities benoemen.

Waar plaatsen

Plaats het element onmiddellijk na de alinea die de gedeelde situatie definieert. Lezers moeten weten welke beslissing of toestand de mededelingen kwalificeren voordat ze de vertakkingen tegenkomen. Wanneer het paar aan een handeling voorafgaat, plaats het dan vóór de eerste stap die gegevens wijzigt of de lezer aan een keuze bindt.

Exacte positie-regels zijn:

  • Plaats een twee-conditie-paar na vereisten en vóór conditie-specifieke instructies.
  • Plaats een voor-handeling-contrast vóór het besturingselement, commando, download of stap dat het kwalificeert.
  • Plaats een resultaat-toestand-paar nadat het resultaat is gedefinieerd en vóór probleemoplossingsdetails.
  • Houd bewijs of een bron binnen de relevante mededeling wanneer het alleen die mededeling ondersteunt; plaats gedeeld bewijs onmiddellijk na het complete paar.
  • Gebruik in herhaalde documentsecties dezelfde broneenvolgorde zodat terugkerende toestanden niet van positie wisselen.

Het element mag niet naast een andere twee-koloms component, vergelijkingstabel, tabbladbesturing, prijsrooster of gesplitste call-to-action staan. Aangrenzende roosters maken grenzen dubbelzinnig en kunnen een vierrichtingskeuze impliceren. Het mag een bewering niet scheiden van de bijbehorende bron, een stap niet van de vereiste waarschuwing, of een formulierbesturing niet van het label. Plaats het niet binnen een genummerde stap: de geneste vertakkingen kunnen volgorde en verantwoordelijkheid onduidelijk maken.

Plaats nooit een ernstige waarschuwing in de ene kolom naast routineus advies in de andere. De gelijke geometrie vermindert de dominantie van de waarschuwing en suggereert dat lezers tussen de twee kunnen kiezen. Promoot het risico naar een zelfstandige waarschuwing vóór de relevante handeling en gebruik dit element later alleen als twee veilige condities nog verduidelijking nodig hebben.

Anatomie

  1. Gedeelde kop: benoemt de ene situatie of beslissing die door beide meldingen wordt beheerst.
  2. Meldingscontainer: groepeert het paar als één redactioneel element zonder te impliceren dat het een enkelvoudige waarschuwing is.
  3. Meldingslabel: benoemt een conditie, toestand, doelgroep of gedrag in 2–6 woorden.
  4. Meldingstekst: vermeldt het relevante feit, de consequentie en de volgende handeling in die volgorde wanneer alle drie nodig zijn.
  5. Optioneel pictogram: versterkt een zichtbaar tekstlabel; het draagt nooit het onderscheid alleen.
  6. Optionele bronnotitie: ondersteunt een veranderende, gereguleerde of extern gedefinieerde bewering binnen de mededeling die het kwalificeert.
  7. Broneenvolgorde: bepaalt de volgorde voor schermlezer, kopie en mobiel; visuele opmaak mag deze niet omkeren.

De auteur levert de gedeelde kop, twee labels, twee teksten, toon en eventuele bronnen. De renderer levert het responsieve raster, de witruimte, visuele nadruk, semantische container en decoratieve pictogrambehandeling.

Ontwerpvoorbeelden

Dit zijn de volledig ondersteunde varianten. Varianten veranderen labels en nadruk, niet het twee-mededelingen-datamodel.

Contrasterende handelingen

Gebruik voor één aanbevolen en één afgeraden handeling wanneer er aan elke kant slechts één boodschap is. Vermeld de handeling en de reden; breid deze variant niet uit tot overeenkomende lijsten.

Conditionele toestanden

Gebruik wanneer de juiste instructie afhangt van een elkaar uitsluitende conditie zoals “Bestaand account” en “Nieuw account.” Benoem de conditie in elk label en zet de meest voorkomende of vereiste toestand eerst.

Gepaarde verduidelijkingen

Gebruik wanneer twee gerelateerde feiten verschillende misverstanden voorkomen maar geen tegenstellingen zijn. Pas neutrale opmaak toe op beide, zodat het ontwerp geen goedkeuring, ernst of voorkeur suggereert.

Compact statuspaar

Gebruik voor korte statusgevolgen nadat de toestanden al zijn uitgelegd. Elke tekst is één zin. Verwijder geen labels of reduceer de teksten niet tot onverklaarde waarden.

Gestapeld mobiel paar

Alle varianten stapelen bij smalle breedtes. Houd de eerste mededeling onmiddellijk vóór de tweede en behoud de gedeelde kop. Creëer geen veeginteractie of tabbladen, omdat het verbergen van een mededeling het doel van het element tenietdoet.

Parameters

“Bron” identificeert waar een adapter elke waarde verkrijgt. De body-mapping slaat doelbewust twee volledige meldingsrecords op in plaats van twee visueel gepositioneerde kolommen.

Interfaceparameters voor twee-koloms melding
NaamTypeVereistMin/maxStandaardBron
titlePlatte stringJa3–12 woorden; 100 tekensGeenEerste kop in body
variantEnumNeecontrast, conditional, clarification of compactclarificationAttribuut
noticeHerhaald recordJaPrecies 2GeenGenest body-item
labelPlatte stringJa per melding2–6 woorden; 50 tekensGeenEerste kop in meldingstekst
contentBeperkte rijke tekstJa per melding1–2 alinea's; 25–80 woorden aanbevolen, 120 maximumGeenMeldingstekst na eerste kop
toneEnumNeeneutral, positive, caution of negativeneutralMeldingsattribuut
iconGeregistreerde iconsleutelNeeEén decoratief pictogram per meldingGeenMeldingsattribuut
sourcePlatte tekst met optionele linkConditioneelEén beknopte bronnotitie per meldingGeenEinde van meldingstekst

De eerste kop van de bovenliggende body wordt toegewezen aan title. Elk genest item wijst de eerste kop toe aan label en alles daarna aan content; meldingsattributen bevatten tone en icon. De renderer moet één, drie of lege meldingsitems afwijzen in plaats van stilzwijgend een kolom in te vullen of weg te laten.

Syntax en codevoorbeelden

Alle indelingen behouden dezelfde titel, meldingsvolgorde, labels, teksten, tonen en bronnen. “Kolom één” en “kolom twee” zijn presentatietermen, geen veldnamen.

Draagbare Markdown-richtlijn

:::notification-two-column{variant=conditional}
## Kies de instructie voor uw publicatiestatus

::notice{tone=neutral icon="draft"}
### Conceptpagina

Gebruik voorbeeldwaarden alleen wanneer ze zichtbaar als voorbeelden zijn gelabeld. Verwijder of vervang elk voorbeeld vóór publicatie.
::

::notice{tone=caution icon="publish"}
### Gepubliceerde pagina

Gebruik geverifieerde waarden met een bron en een gecontroleerde datum. Als verificatie onvolledig is, onthoud dan de bewering.
::
:::

Dit element overschrijft de generieke geneste itemnaam met notice omdat de records meldingsspecifiek toongedrag hebben. De eerste bovenliggende kop levert de gedeelde titel; de eerste kop van elke melding levert het label.

Hugo shortcode

Geen huidige productie-shortcode implementeert dit exacte gepaarde-meldingen-contract. Totdat een adapter bestaat, gebruik semantische HTML zoals het weergegeven voorbeeld. De beoogde Hugo-notatie is gedocumenteerd als:

{{< notification-two-column variant="conditional" >}}
## Kies de instructie voor uw publicatiestatus

{{< notification tone="neutral" icon="draft" >}}
### Conceptpagina
Gebruik alleen gelabelde voorbeeldwaarden en verwijder ze vóór publicatie.
{{< /notification >}}

{{< notification tone="caution" icon="publish" >}}
### Gepubliceerde pagina
Gebruik geverifieerde waarden met een bron en een gecontroleerde datum.
{{< /notification >}}
{{< /notification-two-column >}}

De schuine-streep-commentvorm voorkomt dat dit specificatievoorbeeld een shortcode aanroept die niet bestaat. Een toekomstige adapter moet precies twee kindmeldingen valideren en deze in broneenvolgorde weergeven.

WordPress-blok

<!-- wp:amicited/notification-two-column {"variant":"conditional"} -->
<h2>Kies de instructie voor uw publicatiestatus</h2>
<!-- wp:amicited/notification {"tone":"neutral","icon":"draft"} -->
<h3>Conceptpagina</h3>
<p>Gebruik alleen gelabelde voorbeeldwaarden en verwijder ze vóór publicatie.</p>
<!-- /wp:amicited/notification -->
<!-- wp:amicited/notification {"tone":"caution","icon":"publish"} -->
<h3>Gepubliceerde pagina</h3>
<p>Gebruik geverifieerde waarden met een bron en een gecontroleerde datum.</p>
<!-- /wp:amicited/notification -->
<!-- /wp:amicited/notification-two-column -->

Een WordPress-editor moet twee vaste meldingssleuven tonen, herschikking toestaan en publicatie voorkomen wanneer het label of de tekst leeg is. Het mag auteurs niet toestaan een derde melding toe te voegen alleen omdat het rasterblok meer kolommen ondersteunt.

Voorbeelden

Goed: twee echte condities met volledige handelingen

Vóór het importeren
Download de huidige gegevens en noteer de exporttijd. De kopie geeft u een herstelpunt als veldtoewijzing een onverwacht resultaat oplevert.

Na het importeren
Vergelijk het geïmporteerde aantal gegevens met het bronaantal en inspecteer vervolgens ten minste één record dat elk toegewezen veld bevat. Aantallen detecteren weglatingen; de volledige record detecteert verschoven waarden.

Dit paar heeft één onderwerp—veilige importverificatie—en een echte tijdsgrens. Elke melding benoemt een handeling en legt uit welk falen het opvangt. De tweede is langer omdat deze twee gerelateerde controles bevat, maar beide zijden dragen vergelijkbare verantwoordelijkheid en blijven begrijpelijk wanneer gestapeld.

Slecht: valse symmetrie die een risico degradeert

Handige tip
Hernoem de export zodat deze later makkelijker te vinden is.

Belangrijk
Importeren met “Alles vervangen” verwijdert permanent bestaande gegevens en kan niet ongedaan worden gemaakt. Maak een back-up van de database, bevestig het doel, verkrijg goedkeuring en plan downtime in voordat u doorgaat.

De eerste melding is optioneel huishoudelijk werk; de tweede beschrijft onomkeerbaar gegevensverlies en meerdere vereisten. Door ze in gelijke kolommen te plaatsen, wordt een gelijk gewicht gesuggereerd en lijkt de kritieke boodschap een van twee alternatieven. Verplaats de gegevensverliesmelding naar een zelfstandige waarschuwing vóór het besturingselement. Houd de bestandsnaamsuggestie als gewoon ondersteunend proza.

Schema-opmaak en toegankelijkheid

Een twee-koloms melding heeft geen toegewezen Schema.org-type. De inhoud blijft binnen de omvattende Article, TechArticle of WebPage. Stuur geen ItemList, HowToStep, Question of Answer alleen omdat er twee afgebakende records bestaan. Als een melding inhoud bevat die onafhankelijk in aanmerking komt voor gestructureerde gegevens, bepalen de schemaregels van het omvattende berichttype de toewijzing; dit element voegt zelf niets toe.

Gebruik één gelabelde section wanneer het paar bij de hoofdtekst hoort, of een gelabelde aside wanneer beide meldingen complementair zijn. Elk kind mag een aside of section zijn met een echte kop op het juiste documentniveau. Gebruik geen ARIA alert of alertdialog: die rollen kondigen dynamische, tijdsgevoelige wijzigingen aan en zijn ongeschikt voor statische redactionele richtlijnen.

De toegankelijke naam komt van de zichtbare gedeelde kop via native koppenstructuur of aria-labelledby. Elk meldingslabel moet tekst zijn. Kleur, randstijl, positie en pictogrammen kunnen de toon versterken maar kunnen deze niet definiëren. Als een pictogram decoratief is, verberg het dan voor ondersteunende technologie; als het informatie communiceert die niet in het label staat, herschrijf dan het label in plaats van te vertrouwen op alternatieve tekst om het ontwerp te repareren.

DOM-volgorde bepaalt de betekenis. Schermlezers en mobiele lay-outs moeten eerst de ene melding en dan de andere tegenkomen. Keer de visuele volgorde niet om met CSS. Bij 200% tekstzoom en smalle breedtes moeten meldingen stapelen zonder afknippen of horizontaal paginascrollen. Links hebben beschrijvende labels nodig en meerdere links mogen niet worden samengeperst tot een ongelabelde rij pictogrammen.

Schrijfregels

Schrijf de relatie voordat u de meldingen schrijft: “De lezer heeft twee boodschappen nodig omdat de juiste richtlijn verandert door __.” Als het gat niet kan worden gevuld met een concrete conditie, toestand, doelgroep, tijd of gedragscontrast, gebruik dan proza.

  • Gebruik precies twee meldingen onder één gedeelde titel.
  • Houd de titel op 3–12 woorden en elk label op 2–6 woorden.
  • Streef naar 25–80 woorden per tekst; 120 woorden is een absoluut maximum.
  • Gebruik één of twee korte alinea’s per melding en niet meer dan één korte inline-link.
  • Zet het feit of de conditie eerst, de consequentie als tweede en de handeling als laatste wanneer alle aanwezig zijn.
  • Gebruik parallelle labelgrammatica: “Vóór lancering / Na lancering,” niet “Vóór lancering / Wat beheerders later moeten doen.”
  • Benoem condities direct. Schrijf nooit “links,” “rechts,” “de andere optie” of “het kader hierboven.”
  • Stem de toon af op het bewijs. Neutrale gepaarde feiten mogen geen groene en rode behandeling krijgen.
  • Laat veranderende beweringen vergezeld gaan van een datum, versie, plan, rechtsgebied of bron, al naargelang van toepassing.

Vergelijkbaar gewicht betekent dat beide boodschappen hetzelfde moment in de stroom van de lezer verdienen. Het vereist geen identieke zins- of tekentellingen. Vul een korte waarheid niet aan om bij een langere te passen. Als de ene tekst de andere met meer dan ongeveer twee tegen één overtreft, test dan of de grotere melding een aparte sectie nodig heeft of dat de kleinere melding een valse tegenhanger is.

Plaats nooit een meerstappenprocedure, tabel, formulier, prijskaart, getuigenis, promotionele call-to-action, lang citaat, codevoorbeeld, video of genest component in een melding. Gebruik het paar nooit om juridische, medische, financiële, privacy-, beveiligings- of destructieve-handelingsrichtlijnen te verzachten. Impliceer niet dat twee condities uitputtend zijn, tenzij de inhoudseigenaar heeft geverifieerd dat er geen derde toestand bestaat.

Berichttypen die het gebruiken

De postTypes frontmatter-array is de bron voor deze tabel. Opname betekent dat het element beschikbaar is voor een echt twee-meldingengeval, niet verplicht op elke pagina van dat type.

BerichttypeTypisch gebruikAanbevolen positieVeelvoorkomend misbruik
How-to-gidsTwee condities die de volgende handeling veranderenNa vereisten en vóór de getroffen stapOpeenvolgende stappen verbergen in parallelle meldingen
ProbleemoplossingsgidsTwee waargenomen toestanden met verschillende volgende controlesNadat het symptoom is bevestigdHet paar gebruiken wanneer drie of meer oorzaken nog mogelijk zijn
DocumentatieartikelBestaande-gebruiker- en nieuwe-gebruiker-instructies voor één functieOnmiddellijk vóór configuratiedetailsRoutinehulp paren met een waarschuwing voor destructieve handelingen
BeleidspaginaBinnen-reikwijdte- en buiten-reikwijdte-condities met gelijkwaardige uitlegNadat reikwijdte is gedefinieerdEen bindende vereiste laten lijken op een optionele zijde
Standaard- of regelgevingspaginaTwee toepasbaarheidstoestanden of twee verantwoordelijke partijenNadat de beherende term en het rechtsgebied zijn genoemdUitzonderingen of juridische kwalificaties samendrukken in een klein kader
A vs B-vergelijkingEén korte contextuele melding voor elke optieNa de vergelijkingsreikwijdte, vóór bewijstabellenEen eerlijke criterium-voor-criterium-vergelijking vervangen door marketingsamenvattingen

QA-checklist

  • Gedeeld onderwerp: Eén accurate titel beheerst beide meldingen zonder de reikwijdte te overspannen.
  • Precies twee meldingen: De bron bevat twee volledige records en geen geïmpliceerde derde toestand.
  • Echte relatie: Labels benoemen een betekenisvol contrast, conditie, doelgroep, status of tijdsgrens.
  • Onafhankelijke betekenis: Elke melding blijft duidelijk wanneer geëxtraheerd met de gedeelde titel.
  • Geen valse symmetrie: Beide boodschappen verdienen vergelijkbare nadruk; geen van beide is opvulling of een gedegradeerde kritieke waarschuwing.
  • Correcte plaatsing: Het paar volgt op de context en gaat vooraf aan de handeling of het detail dat het kwalificeert.
  • Veilige buren: Het staat niet naast een andere gesplitste lay-out, tabel, tabbladbesturing of twee-koloms CTA.
  • Nuttige labels: Labels gebruiken parallelle grammatica en zijn nooit afhankelijk van links/rechts-positie of kleur.
  • Lengtebeheersing: Teksten blijven binnen één of twee alinea’s en niet meer dan 120 woorden elk.
  • Inhoudsbeperking: Geen geneste procedure, tabel, formulier, media, promotie of complex component verschijnt erin.
  • Responsieve volgorde: Mobiele-, toetsenbord-, schermlezer- en gekopieerde-tekstvolgorde komen overeen met de auteursvolgorde.
  • Toegankelijke semantiek: Een zichtbare kop labelt de ouder; kindlabels zijn koppen; statische inhoud gebruikt geen alert-rollen.
  • Toonintegriteit: Opmaak weerspiegelt de werkelijke betekenis en verandert neutrale feiten niet in goed/slecht-oordelen.
  • Notatiegelijkheid: Markdown, Hugo en WordPress behouden dezelfde titel, labels, teksten, attributen en volgorde.
  • Schemabeperking: Het element creëert geen niet-ondersteunde gestructureerde gegevens.

Wijs het element af als de controles voor gedeeld onderwerp, echte relatie of valse symmetrie falen. Dat zijn redactionele gebreken die een renderer niet kan oplossen. Herschrijf de inhoud als proza, aparte secties, een zelfstandige waarschuwing of een ander doelgericht element voordat u de presentatie aanpast.

FAQ

De gestructureerde FAQ in frontmatter behandelt de implementatiebeslissingen die het meest waarschijnlijk verkeerd worden begrepen: de meldingen hoeven geen tegenstellingen of identieke lengtes te zijn, mobiele volgorde volgt broneenvolgorde, ernstige risico’s blijven zelfstandige waarschuwingen en het element creëert geen eigen schema-opmaak.

← All SEO Playbook guides

Klaar om het in de praktijk te brengen?

Gratis check · 7 dagen proefperiode · geen creditcard nodig