FAQ’s mit Schema strukturierten Daten können eine gewaltige Bereicherung für die User-Experience deiner Webseite darstellen und gleichzeitig positive Auswirkungen auf die Sichtbarkeit in den Suchergebnissen haben. In unserer SEO Agentur empfehlen wir Einsteigern oft den Einsatz des Plugins Yoast SEO für WordPress Webseiten. Ein SEO Plugin mit denen sich auch FAQ’s auf der Webseite darstellen lassen.

Beispiel für eine FAQ Box
Beispiel für die Darstellung einer FAQ Box in den Suchergebnissen

Tipp: Falls Sie Yoast zum ersten Mal konfigurieren, dann werfen Sie einen Blick in das Tutorial der Basis Einstellungen von unserem Mitarbeiter Dominik.

Zumindest kann Yoast’s FAQ Feature viel Zeit im WordPress Editor ersparen. Einfach die frage & Antwort Felder im Gutenberg Block ausfüllen während das Plugin die erforderlichen strukturierten Daten im Hintergrund erstellt. Was erstmal toll klingt, funktioniert in der Praxis nicht immer optimal. Zumindest gibt es etwas Raum für Kreativität. Folgend einige Wege wie wir den FAQ Block alternativ in die Webseite einbinden konnten.

Was tun wenn wir keinen Gutenberg Editor nutzen können?

Bei älteren Projekten ist es oft der Fall das noch der alte TinyMCE Editor verwendet wird. In anderen WordPress Projekten wird wiederum auf Pagebuilder gesetzt (z.B. Divi’s Visual Editor) und andere Seiten bestehen aus einer Widget Struktur (z.B. Genesis Framework). Alle Projekte haben eine Sache gemeinsam, sie erschweren dir das Einbinden der Yoast FAQ’s enorm.

Als Lösung für dieses Problem nutzen wir eine altbekannte Lösung in WordPress, die auch Shortcode genannt wird. Die Idee ist, dass man den Gutenberg Editor in einem separaten Custom Post Type erstellt. Danach rendern wir diesen Post Type in eine beliebigen Bereich unserer Seite durch Einfügen des Shortcodes.

Mit anderen Worten; sie verwenden folgende Codes auf Ihrer Webseite um einen Custom Post Type und Shortcode zu erstellen. Jede FAQ kann daraufhin im WordPress Backend als separater Beitrag bearbeitet werden. Nun verwenden Sie den neu verfügbaren Shortcode um Ihn überall auf der Webseite einbinden zu können. Sei es ein Widget, eine Seite, ein Divi Code oder im Theme selbst.

Code für das Child Theme

Dieser Code erstellt einen Custom Post Type namens FAQ Sections im WordPress Backend.

add_action( 'init', function() {
    $labels = [
        'name'                => 'FAQ Sections',
        'singular_name'       => 'FAQ',
        'menu_name'           => 'FAQ Sections',
        'all_items'           => 'All FAQ',
        'view_item'           => 'View FAQ',
        'add_new_item'        => 'Add New FAQ',
        'add_new'             => 'Add New',
        'edit_item'           => 'Edit FAQ',
        'update_item'         => 'Update FAQ',
        'search_items'        => 'Search FAQ',
        'not_found'           => 'FAQ Not Found',
        'not_found_in_trash'  => 'FAQ Not found in Trash',
    ];
    $args = [
        'label'               => 'faq',
        'description'         => 'FAQ sections for further on-page implemention',
        'labels'              => $labels,
        'supports'            => [
                                    'title',
                                    'editor',
                                ],
        'hierarchical'        => false,
        'public'              => false,
        'show_in_rest'        => true,
        'show_ui'             => true,
        'show_in_menu'        => true,
        'show_in_nav_menus'   => false,
        'show_in_admin_bar'   => true,
        'menu_position'       => 5,
        'menu_icon'           => 'dashicons-portfolio',
        'can_export'          => true,
        'has_archive'         => false,
        'exclude_from_search' => true,
        'publicly_queryable'  => false,
        'capability_type'     => 'page',
    ];
    register_post_type( 'faq', $args );
}, 0);

Der folgende Code erstellt den benötigten Shortcode.

add_shortcode( 'yoast-faq', function($atts) {
    if ( !$atts['id'] || !is_numeric( $atts['id'] ) ) {
        return;
    }
    $query = new WP_Query( [
        'post_type' => 'faq',
        'p' => $atts['id']
    ]);

    $result = '';
    if ( $query->have_posts() ) {
        while ( $query->have_posts() ) {
            $query->the_post();
            if ( function_exists( 'yoast_faq_block_to_schema_984628683' ) ) {
                $result = yoast_faq_block_to_schema_984628683(
                    get_the_content()
                );
            } else {
                $result = get_the_content();
            }
        }
    }
    
    wp_reset_postdata();
    return $result;
});

Nachdem du deine FAQ im Backend gefüllt hast, fügst du nur noch den folgenden Shortcode dort ein, wo du die FAQ darstellen lassen möchtest.

In der WordPress URL der FAQ findest du die FAQ ID du im Shortcode einfügen musst

Möchtest du eine FAQ beispielsweise im Divi Editor einsetzen, würde das Ganze so aussehen:

Die oben aufgeführten Codes sollten ausreichen um die FAQ’s auf deiner Webseite anzeigen zu lassen. Der Prozess wie Strukturierte Daten generiert werden funktioniert in Yoast separat zur from get_the_content() function. Der folgende Code nimmt die JSON Daten aus dem FAQ Block und konvertiert Sie zu strukturierten Daten für FAQ’s.

function yoast_faq_block_to_schema_984628683($result) {
    if ( !preg_match( '/\<\!--\s+wp\:yoast\/faq-block\s+(.*?)\s+--\>/i', $result, $matches ) ) {
        return;
    }

    $data = json_decode( $matches[1] );
    $structured = [];
    foreach ( $data->questions as $k => $v ) {
        $structured[] = [
            '@type' => 'Question',
            'name' => strip_tags( $v->jsonQuestion ),
            'acceptedAnswer' => [
                '@type' => 'Answer',
                'text' => $v->jsonAnswer
            ]
        ];
    }
    $structured = [
        '@context' => 'https://schema.org',
        '@type' => 'FAQPage',
        'mainEntity' => $structured
    ];
    $result = preg_replace( '/\<\!--\s*(.*?)\s*--\>/i', '', $result );
    $result .= '<script type="application/ld+json">'.json_encode( $structured, JSON_PRETTY_PRINT ).'</script>';
    
    return $result;
}

Normalerweise werden diese Codes im WordPress Child Theme unter der functions.php gespeichert.

2. Installiere unser Plugin

Das Plugin beinhaltet den oben aufgeführten Code, in einer php Klasse zusammengefasst. Ein paar Verbesserungen und die Funktion den Shortcode direkt in der Liste der FAQ Beiträge anzeigen zu lassen.

Diese Variante ist für Einsteiger gedacht, die keine Eingriffe an Ihrem WordPress System durchführen möchten oder kein Child Theme verwenden.

Plugin downloaden
GitHub öffnen

Abschließende Hinweise

Unsere Lösung ist kompatibel mit Googles Hinweisen zu strukturierten Daten, allerdings nicht in Yoasts Prozesse eingebunden, wie es nativ der Fall wäre. Yoast Hooks erlauben zwar eine Integration aber da Schema einzelne Structured Data Sets nicht verbietet, haben wir uns entschieden die Lösung simpel zu halten.

Nutzen Sie keine anderen Gutenberg Blocks im Custom Post Type für FAQ’s, da es zu Fehlern kommen könnte. Wenn nicht vermeidbar, beschränken Sie sich auf simple Blocks.

Es gibt eine Lösung für komplexe Gutenberg Blocks die aber noch nicht ausführlich durch uns getestet wurde. Dabei wird der Shortcode bereits vor the_content() gerendert. Nutzung auf eigenes Risiko.

add_filter( 'the_content', function($content) {
    $regexp = '/\[yoast-faq[^\]]*\]/i';
    if ( preg_match( $regexp, $content, $matches ) ) {
        $rendered = do_shortcode( $matches[0] );
        $content = str_replace( $matches[0], $rendered, $content );
    }
    return $content;
}, 0 );

Hinweis: Diese Codes beeinflussen das Styling der FAQ Blocks in feinster Weise. Möchten Sie die FAQ Blocks stylen oder mittels Akkordeon aufklappbar machen, dann nutzen Sie unser folgendes Tutorial.

Gespeichert unter: Tutorial