Veelgestelde vragen blok van Rank Math SEO opmaken met CSS

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

Uitgeklapt

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.