Structured Data implementatie => FAQPage

A presentation at Joomla Gebruikersgroep Eindhoven in August 2021 in by Hans Kuijpers

Slide 1

Slide 1

FAQ STRUCTURED DATA Presentatie van Hans Kuijpers

Slide 2

Slide 2

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

Slide 3

Slide 3

Resultaten van zoekopdracht met FAQ structured data

Slide 4

Slide 4

Slide 5

Slide 5

FAQ item is aanklikbaar en toont informatie vanuit de website

Slide 6

Slide 6

Hetzelfde item, maar dan op de website

Slide 7

Slide 7

STAPPENPLAN VOOR INMPLEMENTATIE 1. Zorg voor content (vraag & antwoord) 2. Maak override op mod_articles_category 3. Testen

Slide 8

Slide 8

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

Slide 9

Slide 9

ZORG VOOR CONTENT (VRAAG & ANTWOORD) Robots = noindex, follow Voorkom dat categorie en individuele artikelen indexeerbaar zijn.

Slide 10

Slide 10

Voorbeeld data vanuit joomla.org

Slide 11

Slide 11

Joomla com_content categorie

Slide 12

Slide 12

Joomla com_content artikelen

Slide 13

Slide 13

Joomla mod_articles_category

Slide 14

Slide 14

Default weergave

Slide 15

Slide 15

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>

Slide 16

Slide 16

Aangepaste weergave <details> & <summary>

Slide 17

Slide 17

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”: {

Slide 18

Slide 18

Alle informatie zit in een script tag van type JSON-LD <script type=”application/ld+json”> { } </script>

Slide 19

Slide 19

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

Slide 20

Slide 20

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.

Slide 21

Slide 21

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”: {

Slide 22

Slide 22

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) {

Slide 23

Slide 23

Oproepen vanuit je mod_articles_category override

Slide 24

Slide 24

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>

Slide 25

Slide 25

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>

Slide 26

Slide 26

Aan de buitenkant zie je geen verschil Onder de motorkap wel

Slide 27

Slide 27

Slide 28

Slide 28