7 tips voor het inrichten van Umbraco waar redacteurs blij van worden

Naar aanleiding van mijn presentatie voor de Nederlandse Umbraco vereniging DUUG op 22 februari 2018, hieronder een overzicht van een aantal van de besproken tips om Umbraco redacteur-vriendelijk in te richten. Dit zijn ‘quick-wins’ die vrij eenvoudig toe te passen zijn en het leven van de Umbraco redacteur net iets beter maakt dan het al is met zo’n prettig CMS 😊

Tip 1 - Beperk publicatie-rechten op belangrijke pagina’s zoals homepage en nieuwsoverzicht

In de praktijk kan het voorkomen dat redacteuren met minder ervaring per ongeluk op de knop ‘depubliceren’ klikken. Dit is bij een normale pagina ergens diep in de sitestructuur niet zo’n probleem. Maar als het de homepage betreft, heeft dit vaak tot gevolg dat de website volledig uit de lucht is. Dit is eenvoudig te voorkomen door in Umbraco te werken met verschillende beheersrollen, waarbij er een rol is met beperkte rechten. Deze rol heeft dan niet het recht om belangrijke pagina’s zoals de homepage te (de)publiceren, zodat je kunt voorkomen dat een stagair in een onbewaakt ogenblik de website uit te lucht haalt. Permissies zijn eenvoudig met schuifjes in te stellen, zie onderstaand.

Umbraco permissions

Tip 2 - Implementeer OpenGraph voor afbeeldingen

Als een nieuwsbericht (of een andere pagina) wordt gedeeld via een social media kanaal zoals LinkedIn, Facebook of Twitter, wordt daar vaak automatisch een afbeelding bij getoond. De afbeelding wordt geautomatiseerd van de pagina gehaald door het desbetreffende platform. Vaak is dat een beeld dat wordt gebruikt in het bericht of een header-afbeelding. Omdat de afmeting/verhouding van het originele beeld soms anders is dan op het social-media platform, is er een kans dat de afbeelding wat ongelukkig wordt afgesneden zoals onderstaand voorbeeld.

ongelukkig afgesneden afbeelding voorbeeld

Dit is vrij eenvoudig te voorkomen door voor de Umbraco redacteur een extra invoerveld toe te voegen waarin de afbeelding opgegeven kan worden of hiervoor een aparte crop aan te bieden in de media sectie.

meta image

Deze afbeelding kan dan worden opgenomen in de OpenGraph tags in de <head> sectie van de HTML.

Let op:

Je moet de hoogte en breedte van de afbeelding meegeven in de tags
De URL naar de afbeelding moet absoluut zijn en dus ook de domeinnaam bevatten
1024x512 is een aanbevolen resolutie waarop de afbeelding op verschillende platform en apparaten zo gunstig mogelijk worden getoond. Meer daarover lees hier.

Wil je testen of je alles juist hebt ingesteld en hoe je pagina wordt getoond op Facebook dan kun je hiervoor de Facebook Debugger tool gebruiken.

Tip 3 - Installeer Image PostProcessor

Je kunt op een vrij simpele manier de laadsnelheid van de pagina verbeteren door afbeeldingen die geupload worden in de media sectie van Umbraco, automatisch te laten comprimeren. Dit is niet alleen zinvol voor de (mobiele) gebruiker die daarmee de pagina sneller op het scherm heeft, maar ook voor je de Google PageSpeed beoordeling. Installeren gaat eenvoudig via NuGet:

Install-Package ImageProcessor.Web.PostProcessor

Voor meer tips over het verbeteren van je Google Page Speed voor een Umbraco site lees je deze drie blogs:

Tip 4 - Gebruik bij Nested Content zo min mogelijk verschillende type blokken

Als je “page-builder”-achtige functionaliteit aanbiedt door middel van Nested Content, kies dan voor zo min mogelijk verschillende type blokken, maak de blokken configurabel.

Simpel voorbeeld. Kies niet voor 2 blokken “Tekst met plaatje rechts” en “Tekst met plaatje links” maar kies voor “Tekst met plaatje” en laat de redacteur (bijvoorbeeld) via een vinkje instellen waar de afbeelding getoond moet worden ten opzichte van de tekst. Zie onderstaand.

beste afbeeldingsgrootte

Dit biedt de redacteur meer flexibiliteit, zonder dat hij opnieuw blokken hoeft aan te maken en de oude te verwijderen.

Tip 5 - Gebruik SEO checker voor het afvangen van dode links

Er zijn verschillende toepassingsmogelijkheden voor SEO Checker. Wij gebruiken met name de ‘Inboud link error” functionaliteit als we websites verhuizen van een ander CMS (zoals SharePoint of Typo3) naar Umbraco. Omdat een ander CMS nu eenmaal een andere URL structuur heeft, kan het bij live-gang van de nieuwe Umbraco website voorkomen dat bepaalde oude URLs (die bijvoorbeeld nog in Google staan) niet meer werken. De gebruiker krijgt dan de bekende 404-pagina niet gevonden melding. SEO checker registreert dit, en biedt de redacteur via een eenvoudige interface aan een doorverwijzing te maken naar de juiste pagina in het Umbraco CMS.

SEO checker is een commerciële package die eenvoudig geïnstalleerd kan worden in Umbraco.

Tip 6 - Bied verschillende invoervelden aan voor de naam van de pagina

De naam van een pagina in Umbraco kan op verschillende plekken terugkomen. Zo wordt de paginanaam vaak gebruikt als paginatitel die bovenaan de webpagina wordt getoond. Ook wordt de paginanaam getoond in de TITLE tag van de HTML structuur. Tot slot wordt de paginanaam gebruikt in verschillende navigatiemenu’s. In veel installaties die wij doen voor klanten, richten wij 3 aparte velden aan:

Navigation title: De tekst die wordt getoond als een pagina wordt gebruikt in een (top of footer) menu
Page title: De tekst die wordt getoond bovenaan een pagina
Meta title: De titel die wordt getoond in de <TITLE> tag in de HTML structuur.

Om te voorkomen dat de redacteur dubbele invoer moet doen, maken we gebruik van een fall-back scenario, waarbij terug wordt gevallen op (een van de) andere velden mocht de redacteur besluiten een veld leeg te laten.

Tip 7 - Bied styling aan voor tabellen en tabelrijen

Tabellen opzetten in Rich Text editors wordt soms als lastig ervaren door redacteurs. Dit geldt niet alleen voor Umbraco, maar ook voor andere CMSen aangezien die vaak hetzelfde onderliggende Rich Tekst Editor (RTE) component gebruiken. En eerlijk gezegd: heel gebruiksvriendelijk is dit inderdaad ook niet, zeker als je de gebruikerservaring op dit punt vergelijkt met bijvoorbeeld Word.

Je kunt een Umbraco redacteur in ieder geval op weg helpen door verschillende CSS klassen aan te bieden waarmee de tabel van stijl kan worden voorzien. De redacteur kan kiezen uit deze stijlen door te klikken op een tabel en dan voor ‘table properties’ te klikken. Zie onderstaand.

Umbraco Table properties

Standaard worden deze "class" keuzelijst niet getoond in Umbraco. Je zult hiervoor een aanpassing moeten doen in het configuratie bestand config\tinymce.config. Zie onderstaand.

<config key="table_class_list">
[
{"title": "None", "value": ""},
{"title": "Table with border", "value": "border"},
{"title": "Table no border", "value": "noborder"}
]
</config>

Dit geldt ook voor eigenschappen van een rij:

Umbraco row properties

<config key="table_row_class_list">
[
{"title": "None", "value": ""},
{"title": "Red", "value": "red"},
{"title": "Blue", "value": "blue"}
]
</config>

Meer weten?
Neem contact op met Gerben.

Gerben van Diggelen
Operationeel directeur
[email protected]