Chrome extensie SeeRobots

Weet je wat vervelend is? Als je een website live gezet hebt en de resultaten in de zoekmachines beginnen naar beneden te zakken. Dan is het tijd voor actie.

Noindex vinkje WordPress lezen optie

De eerste stap die je dan kunt nemen is het bekijken van de checkbox onder Instellingen > Lezen van je WordPress installatie. Deze zet direct je hele website op noindex. Dit betekent eigenlijk niets meer of minder dan dat je aangeeft bij Google dat de website niet geïndexeerd moet worden. Google geeft hierop overigens geen garantie dat zij zich hier aan houden. Maar mijn ervaring is dat dit wel goed werkt.

Daarnaast kan er ook via je robots.txt bestand op de server aangegeven dat bepaalde pagina’s of de gehele website niet geïndexeerd moeten worden. Als laatste heeft ook de Yoast Plugin ook de mogelijkheid om pagina’s en berichten op noindex te zetten.

Maar hoe controleer je of een website op noindex staat, zonder dat je hoeft in te loggen? Ook hiervoor is uiteraard een heel handige Chrome Extensie, de Seerobots extensie. Niets meer of minder dan een gekleurd vlak bij de extensies rechts bovenin beeld. Volledig groen betekent dat alles goed ingesteld staat. Afhankelijk van het soort instellingen voor indexering kan de helft of het volledige vlak rood kleuren. Als je klikt op het vlak krijg je summiere extra informatie over de indexeringsinstellingen.

Meer informatie

Facebook Pixel Helper Chrome Extensie

Voor individuen of bedrijven die zich niet bezighouden met adverteren op Facebook, is de Facebook Pixel Helper Chrome extensie wellicht niet van belang. Echter, voor degenen die wel gebruik maken van Facebook-advertenties, is deze extensie zeer aan te bevelen.

Functionaliteit van de extensie

Het stelt gebruikers in staat om direct bij het laden van een webpagina te zien of er een script geladen wordt voor Facebook-advertenties. Het geeft ook aan of deze scripts correct zijn geladen. Dit kan bijzonder handig zijn voor marketeers en webontwikkelaars die willen controleren of de Facebook Pixel correct is geïmplementeerd en functioneert zoals bedoeld.

Hoe werkt het?

Op de webpagina’s worden de Facebook Events gemonitord en weergegeven door middel van de extensie. Zoals zichtbaar is op bijgevoegde afbeeldingen, worden er op bepaalde pagina’s 5 Facebook Events gemonitord. Mocht er een fout in de configuratie van deze events zijn, dan zullen ze in het oranje of rood worden weergegeven. Dit stelt gebruikers in staat om snel fouten op te sporen en te corrigeren, wat van essentieel belang is om het maximale uit Facebook-advertentiecampagnes te halen.

Naast het monitoren van de laadstatus en correcte implementatie van de Facebook Pixel, helpt de extensie gebruikers ook om inzicht te krijgen in de werking van hun advertenties. Het biedt real-time feedback en details over de activiteiten en conversies die door de pixel worden getrackt. Dit leidt tot beter inzicht in de effectiviteit van de advertentie en biedt mogelijkheden voor optimalisatie.

De Facebook Pixel Helper Chrome extensie is een essentiële tool voor iedereen die betrokken is bij Facebook-adverteren. Het biedt niet alleen inzicht in de implementatie en functionaliteit van de Facebook Pixel maar maakt ook een effectievere en geïnformeerde besluitvorming mogelijk rondom advertentiecampagnes op het platform. Voor marketeers die streven naar precisie en optimalisatie in hun werk, is deze extensie een onmisbare hulpbron.

Hoe installeer je de Facebook Pixel helper extensie in Chrome?

Het installeren van de Facebook Pixel Helper is eenvoudig en kan binnen enkele minuten worden voltooid. Gebruikers kunnen de extensie toevoegen aan hun Chrome-browser door naar de Chrome Web Store te gaan en daar te zoeken naar “Facebook Pixel Helper”. Volg daarna de instructies om de extensie te installeren en start direct met het optimaliseren van uw Facebook-advertentiecampagnes.

Meer informatie

Helaas is deze tool vanaf 2024 niet meer in gebruik. 

Uitgebreide review van Tag Assistant (by Google) Chrome extensie

Tag Assistant is een uiterst bruikbare Chrome-extensie ontwikkeld door Google. Het is een onmisbaar hulpmiddel voor iedereen die regelmatig te maken heeft met het implementeren of controleren van Google tags, zoals de scripts voor Google Analytics, Google AdWords remarketingtags, en vele andere Google-gerelateerde services die gebruikmaken van scripts.

Functionaliteiten en voordelen

• Tag inspectie: Deze extensie is vooral handig voor het inspecteren van de correcte werking van verschillende Google tags die door jou of iemand anders zijn geïnstalleerd.
• Diverse tags: Met Tag Assistant kun je een divers scala aan tags controleren zoals die van Google Analytics en Google AdWords, waardoor het een veelzijdig hulpmiddel is voor marketeers en webontwikkelaars.
• Thema updates: Het is eveneens handig om na een thema-update van een website te controleren of de Analytics code nog correct geplaatst is. Een goed geconfigureerd child-thema is cruciaal om ervoor te zorgen dat je bezoekersdata correct wordt bijgehouden.
• Directe detectie: Zelfs zonder Tag Assistant te openen, kan men direct zien of er een script actief is, wat veel tijd bespaart. Voor meer details kan men op de tag assistant klikken om te zien welke codes er actief zijn.
• Dubbele codes: Een ander voordeel is dat het gemakkelijk dubbele Google Analytics codes detecteert, iets dat regelmatig gebeurt en dat tot onnauwkeurige data kan leiden.
• Gebruiksvriendelijkheid: De interface is gebruiksvriendelijk, zodat zelfs degenen die niet technisch onderlegd zijn, snel en efficiënt de gewenste informatie kunnen vinden.
• Geavanceerde foutopsporing: Tag Assistant biedt ook geavanceerde foutopsporingsfuncties aan, waardoor gebruikers potentiële problemen met hun tag-implementaties kunnen identificeren en oplossen.

Praktische toepassingen

Voor degenen die betrokken zijn bij digitale marketing, SEO of webontwikkeling, is het belangrijk om zeker te weten dat alle tags correct zijn geïmplementeerd en functioneren zoals bedoeld. Hier komt Tag Assistant van pas. Het stelt gebruikers in staat om de status van hun tags snel te verifiëren, wat helpt bij het optimaliseren van de online aanwezigheid en het verbeteren van de efficiëntie van advertentiecampagnes.

Integratie met andere Google producten

Naast het controleren van tags, integreert Tag Assistant ook vloeiend met andere Google-producten, waardoor gebruikers een holistische kijk op hun website en advertentieprestaties kunnen krijgen. Zo wordt het beheer van Google-services vereenvoudigd, en kunnen gebruikers zich meer concentreren op de kernaspecten van hun online strategieën.

Tag Assistant (by Google) is een onmisbare Chrome-extensie voor iedereen die te maken heeft met digitale marketing en webontwikkeling. Het biedt niet alleen de mogelijkheid om verschillende Google tags te inspecteren en te controleren, maar geeft ook inzicht in potentiële fouten en verbeterpunten. Door de integratie met andere Google-producten, het gebruiksgemak, en de geavanceerde functies, kunnen gebruikers hun online aanwezigheid effectief optimaliseren en het beste uit hun advertentiecampagnes halen.

Meer informatie

Als je naast het bezorgen vanuit je WooCommerce webshop ook de mogelijkheid wilt geven dat klanten hun bestelling op jouw locatie af kunnen halen heb je in principe geen extra plugin nodig. Maar als je wilt sturen wanneer ze dit doen wel. In dit artikel leggen we uit hoe je dit in kunt regelen.

Je kunt jouw klant de keuze te geven voor een datum en tijdstip tijdens het afrekenen van hun bestelling. Wij hebben twee verschillende plugins gevonden die het afhalen van een bestelling uit je WooCommerce webshop mogelijk maken.

Webshop bestelling afhalen

De eerste is een plugin die ondersteund wordt door WooCommerce zelf, het is geen plugin van WooCommerce maar wordt wel actief door hen gepromoot. Je vindt deze plugin hier en deze heet WooCommerce Order Delivery. De kosten zijn jaarlijks 129,- dollar.

Wij hebben zelf nog geen ervaring met deze plugin maar weten dat WooCommerce plugins vaak diep in het systeem geïntegreerd zitten en jou hierdoor werk uit handen nemen. Daarom zouden wij je adviseren niet direct naar de prijs te kijken, maar te kijken naar wat deze investering jou als bedrijf oplevert.

Andere plugin voor afhalen bestelling

Een andere meer betaalbare en iets minder uitgebreide plugin is de plugin WooCommerce Delivery van WeLaunch. Van deze plugin is een online demo beschikbaar die je hier kunt bekijken.

Met deze twee plugins heb je dus de mogelijkheid om bezoekers de mogelijkheid te geven wanneer ze hun webshop order op willen komen halen. Voor beiden is het een vereiste dat je een WooCommerce webshop hebt.

Wij kunnen niet zeggen welke van de twee onze voorkeur heeft aangezien we met beiden nog weinig ervaring hebben.

Het creëren van een efficiënte en klantvriendelijke afhaalservice voor bijvoorbeeld restaurants in Waddinxveen kan een enorme impact hebben op de gebruikerservaring van jouw website. Een van de gemakkelijkste en meest effectieve methodes is het gebruik van Gravity Forms, een veelzijdige formulierplugin voor WordPress websites.

Hoe werkt het?

1. Creëer een nieuwe pagina op je website: Maak een speciale afhaalpagina waar klanten hun bestellingen kunnen plaatsen.
2. Plaats een Gravity Forms formulier met een shortcode: Op deze pagina plaats je een formulier gemaakt met Gravity Forms, waar klanten hun gegevens kunnen invullen en een tijdvak kunnen kiezen voor het afhalen van hun bestelling.
3. Voeg velden toe: Zorg ervoor dat het formulier velden heeft voor essentiële informatie zoals naam, telefoonnummer (voor eventuele wijzigingen in de planning) en het gewenste afhaaltijdvak.

Waarom Gravity Forms afhalen?

Gravity Forms is een uiterst aanbevolen aanvulling op je website, vanwege de veelzijdigheid en de gebruiksvriendelijkheid van de plugin. Als je meer overtuiging nodig hebt, zijn er diverse blogs en artikelen beschikbaar met tips en gebruiksaanwijzingen voor Gravity Forms. Hier kun je Gravity Forms direct bestellen voor je eigen website.

Gebruik van vaste tijdsvakken

Wil je klanten vaste tijdsvakken bieden voor het afhalen van hun bestelling? In Gravity Forms kun je eenvoudig een checklist toevoegen en het aantal aan te vinken opties beperken. Dit vereist wel enige kennis van de plugin, en het is raadzaam om de documentatie zorgvuldig door te nemen of aanvullende hulpbronnen te raadplegen voor specifieke instructies.

Directe betaling

Daarnaast biedt Gravity Forms de mogelijkheid om directe betalingen te integreren, door de plugin te koppelen met de Mollie add-on. Dit minimaliseert het contact tijdens het afhaalproces en verhoogt het gemak voor zowel de klant als de verkoper.

Tips voor optimalisatie

• Communicatie: Vraag altijd om een telefoonnummer voor snelle communicatie in geval van wijzigingen of updates.
• Duidelijkheid: Wees duidelijk over de beschikbare tijdslots en eventuele beperkingen in de beschikbaarheid.
• Flexibiliteit: Overweeg de mogelijkheid om flexibele tijdvakken aan te bieden voor klanten die speciale verzoeken hebben.
• Veiligheid: Zorg ervoor dat het afhaalproces veilig is, zowel wat betreft betaling als de fysieke afhaallocatie.

Gravity Forms is een essentiële tool voor elke website-eigenaar die een efficiënt en gebruiksvriendelijk afhaalsysteem wil implementeren. Met uitgebreide customization-opties, directe betaalmogelijkheden, en de mogelijkheid om vaste of flexibele afhaaltijdvakken aan te bieden, kan deze plugin de algehele klanttevredenheid en de efficiëntie van het afhaalproces aanzienlijk verbeteren.

Extra tekst via CSS toevoegen met :after content

Er zijn talloze situaties waarin je extra tekst aan je website wilt toevoegen zonder de beschikbare ruimte te verstoren. Denk bijvoorbeeld aan het invoegen van een pakkende slogan onder je logo om je merkidentiteit te versterken, of aan het gebruik van een subtiele zwevende pijl om de aandacht van je bezoekers te richten op belangrijke elementen van je webpagina.

In dit artikel zullen we je in detail uitleggen hoe je dit kunt bereiken door gebruik te maken van de CSS :after pseudo-element en de content eigenschap.

Wat is de CSS :after Pseudo-element?

Voordat we dieper ingaan op het toevoegen van extra tekst aan je website, laten we eerst even stilstaan bij wat de :after pseudo-element precies is. Dit is een van de vele pseudo-elementen die CSS biedt, en het stelt ontwikkelaars in staat om inhoud toe te voegen aan een element, zonder dat deze inhoud daadwerkelijk in de HTML-code van de pagina aanwezig is. Met andere woorden, je kunt tekst, afbeeldingen of andere inhoud toevoegen aan een element en dit volledig stylen met behulp van CSS.

Toevoegen van tekst onder je logo

Laten we nu kijken hoe je extra tekst kunt toevoegen onder je logo als voorbeeld in je WordPress website.

Hier is een eenvoudig voorbeeld van hoe je dit kunt bereiken:

.logo::after{ 
content: "Je Slogan Hier"; 
display: block; /* Zorgt ervoor dat de tekst onder het logo wordt weergegeven */
font-size: 16px; /* Pas de lettergrootte aan zoals gewenst */
color: #333; /* Kies een geschikte tekstkleur */ 
}

In dit voorbeeld hebben we een fictieve .logo-klasse gebruikt, maar je kunt deze aanpassen aan de specifieke HTML-structuur van jouw website. Het ::after pseudo-element wordt hier gebruikt om de slogan “Je Slogan Hier” onder het logo weer te geven. Je kunt de tekst en de stijl naar wens aanpassen om naadloos bij je merk te passen.

Extra tips voor verbetering

Als je extra witruimte wilt toevoegen voor bijvoorbeeld een tekst die over twee regels moet worden weergegeven, kun je de white-space: pre; eigenschap gebruiken en \a aan je content toevoegen. Hier is een voorbeeld:

.logo::after{ 
content: "Eerste Regel \a Tweede Regel"; 
white-space: pre; /* Behoudt witruimte en regeleinden */
}

Dit zorgt ervoor dat de tekst op twee regels wordt weergegeven zoals beoogd.

Het gebruik van de :after pseudo-element in combinatie met de content eigenschap biedt een krachtige manier om extra tekst en inhoud toe te voegen aan je website zonder de HTML-structuur te wijzigen. Of je nu een tagline onder je logo wilt plaatsen of de aandacht van je bezoekers op bepaalde elementen wilt vestigen in je WordPress webshop, deze techniek geeft je de flexibiliteit om je webontwerp te verrijken en een betere gebruikerservaring te bieden. Vergeet niet om de stijlen aan te passen aan je specifieke ontwerpeisen en merkidentiteit voor het beste resultaat.

Lettertypen laden via CSS

Lettertypen beïnvloeden niet alleen de leesbaarheid van een website, maar dragen ook bij aan de algehele esthetiek en merkidentiteit van de site. Het kiezen van het juiste lettertype is van groot belang voor een aantrekkelijke en professionele uitstraling. In dit artikel zullen we uitleggen hoe je jouw eigen huisstijl lettertypen kunt inladen via CSS, zodat je jouw website een eigen uitstraling kunt geven.

Waarom lettertypen aanpassen?

Wanneer je een website bouwt, wil je dat deze er niet alleen goed uitziet, maar ook effectief communiceert. Het juiste lettertype kan de toon zetten voor je inhoud en de boodschap van je merk versterken. Uiteraard is je website een verlengstuk van je huisstijl dus wil je ook het bijpassende lettertype tonen. Het aanpassen van lettertypen stelt je in staat om:

• Een merkidentiteit te creëren: Consistent gebruik van specifieke lettertypen kan de herkenbaarheid van je merk vergroten.
• Leesbaarheid verbeteren: Het kiezen van goed leesbare lettertypen is essentieel om ervoor te zorgen dat je inhoud gemakkelijk te begrijpen is.
• De visuele aantrekkingskracht vergroten: Een uniek en aantrekkelijk lettertype kan de algehele esthetiek van je website verbeteren.

Lettertypen inladen met CSS

Er zijn verschillende methoden om aangepaste lettertypes aan je website toe te voegen, maar een veelgebruikte aanpak is via CSS. Hier zijn de stappen die je kunt volgen:

1. Kies een lettertype

Het begint allemaal met het kiezen van het juiste lettertype voor je website. Er zijn talloze gratis en premium lettertypen beschikbaar op het web. Populaire platforms zoals Google Fonts, Adobe Fonts en Font Awesome bieden een breed scala aan opties om uit te kiezen.

2. Lettertypen toevoegen aan je website

Zodra je het gewenste lettertype hebt gekozen, moet je het aan je website toevoegen. Je kunt dit doen door de lettertypenbestanden te downloaden of door de lettertypen van externe bronnen te gebruiken. In bijvoorbeeld het GeneratePress thema heb je in het thema de mogelijkheid om een lettertype handmatig toe te voegen.

3. CSS regel definiëren

Om het lettertype in te laden en toe te passen op specifieke elementen, definieer je een CSS-regel. Hier is een voorbeeld van hoe je dit kunt doen:

/* Geef een paragraaf het gekozen lettertype */
p {
    font-family: "Naam van het Lettertype", sans-serif;
}

Zorg ervoor dat je de naam van het gekozen lettertype correct invult. Uiteraard kun je de p van de alinea vervangen voor ieder willekeurige andere css selector zoals bijvoorbeeld een H2 of een H4.

4. Lettertype uploaden naar je server (optioneel)

Als je lettertypebestanden hebt gedownload en niet van externe bronnen gebruikt, moet je ze uploaden naar je server en ervoor zorgen dat de verwijzingen in je CSS overeenkomen met de locatie van de lettertypen op je server.

5. Testen en fine-tunen

Het is belangrijk om je website te testen nadat je het lettertype hebt toegevoegd. Controleer de leesbaarheid en zorg ervoor dat het lettertype consistent wordt toegepast op alle gewenste elementen.

Het inladen van lettertypen via CSS is een essentiële stap bij het creëren van een unieke en aantrekkelijke website. Door zorgvuldig lettertypen te selecteren en ze op de juiste manier te implementeren, kun je de visuele uitstraling van je site verbeteren en je merkidentiteit versterken. Neem de tijd om de perfecte lettertypen voor je website te vinden en experimenteer met verschillende stijlen om de beste resultaten te bereiken. Een goed gekozen lettertype zal zeker bijdragen aan de algehele uitstraling en effectiviteit van je online aanwezigheid.

Een border rondom een afbeelding? Of een border rondom een tekstblok? Aan de hand van een voorbeeld leggen we je uit hoe je een border kunt aanpassen naar jouw eigen stijl in je WordPress websites.

Standaard CSS border

Standaard heeft de border-optie in CSS verschillende opties; solid, dotted en dashed. En uiteraard kun je dan ook nog variëren in kleur, dikte en wel of geen afgeronde hoeken. Wil je meer, maak dan je eigen border met een eigen gemaakte SVG border.

Eigenschappen en opties die je kunt gebruiken voor borders in CSS

1. border-style
   • Bepaalt de stijl van de border. Veelvoorkomende waarden zijn:
     • solid: Een enkele, doorlopende lijn.
     • dotted: Een reeks stippen.
     • dashed: Een reeks korte streepjes.
     • double: Twee parallelle lijnen.
     • groove: Geeft een 3D-groefeffect.
     • ridge: Geeft een 3D-ribbeleffect.
     • inset: Geeft een 3D-ingedeukt effect.
     • outset: Geeft een 3D-uitstekend effect.
     • none: Geen border.
     • hidden: Een verborgen border.
2. border-width
   • Bepaalt de breedte van de border. Je kunt pixels (px), ems (em), of andere geldige CSS-eenheden gebruiken. Bijvoorbeeld: 2px, 0.5em.
3. border-color
   • Definieert de kleur van de border. Kan kleurnamen, hexadecimale kleurcodes, RGB-waarden, RGBA-waarden, etc. gebruiken. Bijvoorbeeld: red, #ff0000, rgb(255, 0, 0), rgba(255, 0, 0, 0.5).
4. border-radius
   • Gebruikt voor het afronden van de hoeken van de border. Bijvoorbeeld: 5px, 50%.
5. Shorthand border property
   • Een shorthand-eigenschap om border-style, border-width, en border-color in één keer in te stellen. Bijvoorbeeld: border: 2px solid red;.
6. Individuele border eigenschappen
   • Je kunt borders apart instellen voor elke zijde van een element: border-top, border-right, border-bottom, border-left.
7. border-image
   • Maakt het mogelijk om een afbeelding als border te gebruiken. Vereist verschillende andere eigenschappen om correct te werken, zoals border-image-source, border-image-slice, border-image-width, enz.
8. border-collapse en border-spacing
   • Gebruikt in tabellen. border-collapse bepaalt of cellen gedeelde of afzonderlijke borders hebben. border-spacing regelt de ruimte tussen borders van aangrenzende cellen.

Deze eigenschappen kunnen gecombineerd worden om gedetailleerde en unieke borderstijlen te creëren voor webpagina-elementen. Het is ook mogelijk om verschillende stijlen toe te passen op verschillende kanten van een element, wat een hoge mate van aanpassing mogelijk maakt.

Custom border met SVG via CSS

Wij hebben dit toegepast op diverse websites in ons portfolio. De blokken op de homepage hebben de class border-box meegekregen en binnen deze class passen we het volgende toe wat zorgt voor de aangepaste border rondom de blokken:

Hier kun je uiteraard heel veel varianten op bedenken.

Ook een interessante optie met CSS border is dat je een border niet altijd aan alle kanten hoeft weer te geven. Bijvoorbeeld met border-top-width style je alleen de border bovenaan. Met border-bottom-color style je alleen de kleur van de border aan de onderzijde. En zo heb je nog diverse variaties. Als je hier alles over wilt weten verwijzen we graag naar W3 Schools. Of je leest onze artikelen over CSS.

Op bepaalde WordPress websites kan het qua design passen om een achtergrond te laden. Regelmatig gebruiken wij dit met een sterk vervaagde achtergrond zodat de achtergrond puur voor het design is en niet de aandacht wegtrekt.

Als voorbeeld nemen we de website van Tim’s Verhuurbedrijf uit Gouda die wij mochten bouwen. Op de homepage vind je een afbeelding terug achter een tekstvlak. Dit losten wij op met CSS.

CSS achtergrond laden

Het tekstblok waar de achtergrond achter geplaatst is heeft de class tekst-achtergrond meegekregen. Door een ::after te gebruiken met een background url valt de afbeelding netjes achter de tekst.

Met de opacity optie zorgden wij voor transparantie en daarnaast positioneerden wij met verschillende opties de afbeelding.

De z-index zorgt ervoor dat de afbeelding altijd helemaal onderaan ligt, zodat het niet bovenop de tekst komt te liggen.

.tekst-achtergrond::after {
content: "";
background: url(https://jouwwebsite.nl/wp-content/uploads/de-afbeelding.png);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}

Op deze manier kun je onafhankelijk van je WordPress thema een achtergrond laden.