A presentation at Joomla Gebruikersgroep Eindhoven by Hans Kuijpers
FAQ STRUCTURED DATA Presentatie van Hans Kuijpers
FAQ STRUCTURED DATA FAQ = Frequently Asked Questions => veelgestelde vragen Structured Data = extra code die Google zal helpen om de content van een webpagina beter te begrijpen
Resultaten van zoekopdracht met FAQ structured data
FAQ item is aanklikbaar en toont informatie vanuit de website
Hetzelfde item, maar dan op de website
STAPPENPLAN VOOR INMPLEMENTATIE 1. Zorg voor content (vraag & antwoord) 2. Maak override op mod_articles_category 3. Testen
ZORG VOOR CONTENT (VRAAG & ANTWOORD) Joomla Administrator > Inhoud > Categorieën Nieuwe categorie ‘veelgestelde-vragen’ Joomla Administrator > Inhoud > Artikelen Per vraag een nieuw artikel Titel = vraag Body = antwoord
ZORG VOOR CONTENT (VRAAG & ANTWOORD) Robots = noindex, follow Voorkom dat categorie en individuele artikelen indexeerbaar zijn.
Voorbeeld data vanuit joomla.org
Joomla com_content categorie
Joomla com_content artikelen
Joomla mod_articles_category
Default weergave
Alternate layout mod_articles_category/faq.php <?php defined(‘_JEXEC’) or die; ?> <div class=”category-module-faq<?php echo $moduleclass_sfx; ?> <?php foreach ($list as $item) : ?> <details> <summary> <?php echo $item->title; ?> </summary> <div class=”details__content”> <p class=”mod-articles-category-introtext”> <?php echo $item->introtext; ?> </p> </div> </details> <?php endforeach; ?> </div>
Aangepaste weergave <details> & <summary>
Voorbeeld code structured data FAQPage developer.google.com <script type=”application/ld+json”> { “@context”: “https://schema.org”, “@type”: “FAQPage”, “mainEntity”: [{ “@type”: “Question”, “name”: “Wat is vraag 1?”, “acceptedAnswer”: { “@type”: “Answer”, “text”: “<p>Het antwoord </p>” } }, { “@type”: “Question”, “name”: “Wat is vraag 2?”, “acceptedAnswer”: {
Alle informatie zit in een script tag van type JSON-LD <script type=”application/ld+json”> { } </script>
Dan duidelijk maken wat we zijn en hoe we praten “@context”: “https://schema.org”, “@type”: “FAQPage”, “mainEntity”: [] Meer info op https://schema.org/FAQPage en https://developers.google.com/search/docs/datatypes/faqpag
Items toevoegen met vraag & antwoord { “@type”: “Question”, “name”: “Staat hier een toffe vraag?”, “acceptedAnswer”: { “@type”: “Answer”, “text”: “<p>Maar natuurlijk… dit is het antwoord op de t } }, Na de komma volgt weer een nieuwe vraag.
Alle informatie samen vormt dus… <script type=”application/ld+json”> { “@context”: “https://schema.org”, “@type”: “FAQPage”, “mainEntity”: [{ “@type”: “Question”, “name”: “Wat is vraag 1?”, “acceptedAnswer”: { “@type”: “Answer”, “text”: “<p>Het antwoord </p>” } }, { “@type”: “Question”, “name”: “Wat is vraag 2?”, “acceptedAnswer”: {
En dat in een JLayout in je template html/data-type/faqpage.php <?php defined(‘JPATH_BASE’) or die; /** @var array $displayData */ extract($displayData); if (!empty($displayData)) { $data = [ ‘@context’ => ‘https://schema.org’, ‘@type’ => ‘FAQPage’, ‘mainEntity’ => [], ]; foreach ($displayData as $faq) {
Oproepen vanuit je mod_articles_category override
OUDE SITUATIE <?php defined(‘_JEXEC’) or die; ?> <div class=”category-module-faq<?php echo $moduleclass_sfx; ?> <?php foreach ($list as $item) : ?> <details> <summary> <?php echo $item->title; ?> </summary> <div class=”details__content”> <p class=”mod-articles-category-introtext”> <?php echo $item->introtext; ?> </p> </div> </details> <?php endforeach; ?> </div>
NIEUWE SITUATIE <?php defined(‘_JEXEC’) or die; ?> use Joomla\CMS\Layout\LayoutHelper; echo LayoutHelper::render(‘data-type.faqpage’, $list); <div class=”category-module-faq<?php echo $moduleclass_sfx; ?> <?php foreach ($list as $item) : ?> <details> <summary> <?php echo $item->title; ?> </summary> <div class=”details__content”> <p class=”mod-articles-category-introtext”> <?php echo $item->introtext; ?> </p> </div>
Aan de buitenkant zie je geen verschil Onder de motorkap wel
Demo voor de Joomla Gebruikersgroep Eindhoven waarin getoond wordt hoe je via je template structured data kunt toevoegen voor paginatype = FAQPage.
for free. You
can too.