Veelgestelde vragen blok van Rank Math SEO opmaken met CSS

FAQ opmaken Rank Math SEO CSS en Php

Dit artikel is onderdeel van deze gratis cursus affiliate marketing, waar je stap voor stap leert hoe je een affiliatewebsite maakt.

Een veelgestelde vragen blok wordt ook wel een FAQ block genoemd. Dit is de afkorting van Frequently Asked Questions. Ik gebruikte vroeger een aparte plugin om veelgestelde vragen toe te voegen aan artikelen. Tegenwoordig gebruik ik hier Rank Math SEO voor. Nu hoef ik naast mijn SEO plugin geen extra plugin te installeren. Fijn, want plugins kunnen de boel soms flink vertragen! Het standaard block van Rank Math SEO vind ik echter niet heel erg mooi of interactief. Hier gaan we aan de hand van het toevoegen van een CSS-code aan Extra-CSS in WordPress verandering in aanbrengen!

Wat is een Veelgestelde vragen blok in WordPress?

Met een FAQ-widget kun je gerelateerde vragen en antwoorden weergeven die relevant zijn voor de inhoud van het bericht of de pagina waarop het wordt geplaatst. Het kan nuttig zijn voor bezoekers die aanvullende informatie willen over het specifieke onderwerp dat in het bericht of op de pagina wordt behandeld. Door een FAQ-widget toe te voegen, kunnen bezoekers snel antwoorden op veelvoorkomende vragen vinden zonder naar een aparte FAQ-pagina te hoeven navigeren. De vragen worden tevens soms ook opgenomen in de zoekmachine onder een zoekresultaat.

FAQ toevoegen is énorm goed voor de zoekmachine en ctr

Je krijgt soms extra ruimte in de zoekmachine in de vorm van veelgestelde vragen. Dit ziet er zo uit:

Ingeklapt

Voorbeeld FAQ in SERP

Uitgeklapt

Voorbeeld FAQ uitgeklapt in SERP

Kortom: Je krijgt dus écht heel veel extra ruimte in het zoekresultaat (SERP). Mensen zijn eerder geneigd om op jouw link te klikken in de zoekmachine. Dit is positief voor de Click-Through Rate (doorklikratio). Dit is het  percentage dat aangeeft hoe vaak mensen op een bepaalde link klikken in de zoekresultaten, in verhouding tot het totale aantal keren dat die link is weergegeven.

Rank Math SEO blok voor opmaak

Het standaard blok van Rank Math SEO ziet er als volgt uit:

Ik vind dit persoonlijk niet erg mooi. Het lijkt nu teveel op de overige tekst. Ook vind ik het totaal niet uitnodigen voor de bezoeker om het te lezen of er iets mee te doen. Dit moet natuurlijk anders!

Rank Math SEO blok stylen met CSS en een beetje in php

Door een klein beetje opmaak toe te voegen, kun je het block echt een stuk mooier maken. Ik ben zelf fan van een accordeon blok, dat de bezoeker zelf met een klik uit- en inklapt. Dit is meteen een stuk interactiever en het zorgt voor een extra klik op de website. Dat is weer positief voor SEO, al valt het wel heel erg mee hoe erg positief dit is. Om de stijl aan te passen gebruiken we CSS-code, die we invoeren in Extra-CSS van de WordPress Customizer. Om te zorgen dat het FAQ block ook goed uitgeklapt en ingeklapt kan worden, gaan we een code toevoegen aan php. Dit klinkt moeilijker dan het is.

PHP toevoegen

Voor deze stap is het belangrijk dat je een child theme gebruikt op je website. Je wilt niet dat elke aanpassing die je nu verloren gaat als je een update doet aan de website.  Ga naar je WordPress Dashboard>Weergave>Thema bestand editor. Klik de eventuele melding weg die je krijgt. Klik rechts op functions.php en voer de volgende code in en druk op Update Bestand.

// Accordion maken van Rank Math SEO FAQ blok
function turn_rm_faq_to_accordion() {
	?>
	<script>
		jQuery(document).ready(function() {
			var faqBlock = jQuery("div#rank-math-faq");
			var faqItems = faqBlock.find("div.rank-math-list-item");
			faqItems.bind("click", function(event) {
				var answer = jQuery(this).find("div.rank-math-answer");
				if (answer.css("overflow") == "hidden") {
					answer.css("overflow", "visible");
					answer.css("max-height", "100vh");
				} else {
					answer.css("overflow", "hidden");
					answer.css("max-height", "0");
				}
			});
		});
	</script>
	<?php
}
add_action( 'wp_footer', 'turn_rm_faq_to_accordion' );

In de onderstaande afbeelding zie je hoe dat er op mijn nieuwe GPS tracker website uitziet.

CSS toevoegen

Nu gaan we er voor zorgen dat de opmaak ook past bij de website. Dit doe je met de volgende code:

/* Rank Math FAQ accordion */
#rank-math-faq .rank-math-list-item{
	position:relative;
}
#rank-math-faq .rank-math-list-item input{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 41px;
    opacity: 0;
    cursor: pointer;
    z-index:999;
}
#rank-math-faq .rank-math-list-item h3 {
	  background: #F8F8F8;
    padding: 10px 12px 10px 18px;
    cursor: pointer;
    font-size: 17px !important;
    position:relative;
    margin-bottom: 0;
}
#rank-math-faq .rank-math-list-item h3:before {
	display:inline-block;
	content: "";
    width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 12px;
	border-color: transparent transparent transparent #49A392;
	margin-right: 8px;
}
#rank-math-faq .rank-math-list-item input:checked+h3:before {
	-webkit-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	transform:rotate(90deg);
}
#rank-math-faq .rank-math-answer{
	padding: 10px 10px 0px 10px;
	max-height: 0;
	overflow:hidden;
}
#rank-math-faq .rank-math-list-item input:checked+h3~.rank-math-answer {
	max-height: 100vh;
	overflow:visible;
}

Je kan zelf de background en kleur van het symbool veranderen. Ik doe voor de GPS-tracker website de kleur blauw (#47536b) die ik in mijn huisstijl heb bedacht.  Dit doe je door de hex-code aan te passen naar jouw kleur achter border-color: transparent transparent transparent

Veelgestelde vragen blok na: accordeon blok!

Hieronder zie je het FAQ blok in de nieuwe opmaak

Bezoekers kunnen de vraag waarvan ze het antwoord willen weten nu ook uitklappen.

Veelgestelde vragen over veelgestelde vragen

Hieronder zie je een goed voorbeeld van dit blok. In beantwoord enkele veelgestelde vragen over dit onderwerp onderaan het artikel.

Kan ik meer dan 1 FAQ block maken op een pagina?

Nee, elke pagina (bijvoorbeeld een blogartikel) kan maximaal 1 FAQ blok bevatten. Je kan er wel meer doen, maar dit heeft geen enkel nut. De zoekmachine zal er maar 1 mooi kunnen weergeven.

Zijn er alternatieven voor een FAQ blok in WordPress

Ik ben zelf erg fan van Rank Math SEO, omdat je dan geen losse plugin alleen voor wat extra opmaak hoeft te gebruiken. Als alternatief kan je ook het blok van Yoast SEO of Structured Content (JSON-LD)

Hoeveel vragen moet ik in een FAQ block zetten?

Bij een groot onderwerp kun je natuurlijk enorm veel vragen verzinnen. Hoeveel je er doet moet je eigenlijk zelf weten. Het minimale is echter twee. Zoveel geeft Google mooi weer in het zoekresultaat. Ik doe er vaak twee of drie.

Huiswerkopdracht

Gebruik je Rank Math SEO? Voeg dan de CSS code en php toe aan de website. Test de werking van het FAQ-block grondig op je website, zowel op mobiel als desktop. Heb je nog geen FAQ-block? Maak dan een test-pagina aan die je later eventueel weer verwijdert met daarop een veelgestelde vragen block. Je kan dit blok toevoegen door in de editor op + te drukken en daar een FAQ by Rank Math blok aan te klikken

Check het zoekvolume van je zoekwoord hieronder:

Foto van auteur

Edwin

Edwin is sinds 2012 volop bezig met websites ontwikkelen en affiliate marketing. Op MijnOnlineInkomen.nl deelt hij al zijn ervaring.

Wij schrijven onze teksten en reviews als onafhankelijke partij. Daarbij maken we soms gebruik van affiliate links. Meer hierover lees je in ons advertentiebeleid.