Strukturierte Daten in Webseiten

Veröffentlichungsdatum: 15. März 2021
Änderungsdatum: 29. November 2023

weblication cms strukturierte daten schema schema.org json suche

Strukturierte Daten über schema.org dienen dazu, spezielle Inhalte auf Webseiten zu kennzeichnen. Dies ermöglicht diversen Suchmaschinen (z.B. Google, Bing, Yahoo, Yandex, etc.), diese Inhalte leichter zu erkennen.

Strukturierte Daten bieten sich z.B. bei FAQ-Bereichen, Stellenausschreibungen / Jobangeboten, etc. an, was individuell im Projekt umgesetzt und so auf die eigenen Bedürfnisse angepasst werden kann.

Mittlerweile gibt es folgende Weblics^® mit bereits im Standard umgesetzter Auszeichnung strukturierter Daten über JSON-LD:

FAQs
Häufig gestellte Fragen werden über einen Accordeon-Container aufgelistet und können einzeln aufgeklappt werden.
Stellenangebote
Auflistung von Stellenangebote, welche sich nach Art und Bereich filtern lassen
Mini-Shop
Produkte mit Shop-Funktionalität
Video lokal

Alternativ hatten wir bisher eine globale Umsetzung aufgezeigt, welche nachfolgend noch verfügbar, aber nicht weiter von Belang ist.

Alternative globale Umsetzung

Eine mögliche Umsetzung wird nachfolgend grob skizziert. Allgemeine Informationen hierzu finden Sie in den weiterführenden Links am Artikelende.

Schritt 1: Funktion global in der wMyProject.php definieren

Beispiel: Auszug aus der wMyProject.php - JSON-LD-Markup generiert von Google Strukturierte Daten: Markup-Hilfe

...
class wMyProject {
....
public static function getJsonLdMarkup() {
  
   return '<script type="application/ld+json">
{
  "@context" : "https://schema.org",
  "@type" : "JobPosting",
  "title" : "'.wDocumentData::getDataAsHTML($_SERVER['PHP_SELF'],   'title').'",
  "description" : "'.wDocumentData::getDataAsHTML($_SERVER['PHP_SELF'],'description').'",
  // ...
  // ...
  "hiringOrganization" : {
    "@type" : "Organization",
    "name" : "Mustermann AG",
    "sameAs" : "https://www.IhreDomain.tld",
    "logo" : "https://www.IhreDomain.tld/images/logo.png"
  },
  "jobLocation" : {
    "@type" : "Place",
    "address" : "'.wDocumentData::getDataAsHTML($_SERVER['PHP_SELF'],  'address').'"
  }
}
</script>';

}
...

Schritt 2: Ausgabe der strukturierten Daten im Head

Um die strukturierten Daten im HTML-Head der Seite auszugeben, rufen Sie die o.g. wMyPoject-Funktion über wsl:php innerhalb des head-Bereiches (htmlHead.wGlobal.php) auf.

Beispiel: wMyProject-Funktion im htmlHead.wGlobal.php Template aufrufen (Auszug)

...
<!-- Bedingung prüft ob es sich bei der aktuellen Seite um ein Job-Objekt handelt -->
<xsl:if test="/wd:document/wd:extension/wd:object/@type = 'jobOffer'">
  <!-- wsl:php wird in PHP umgewandelt -->
  <wsl:php>
    //Gibt JSON Markup aus.
    print wMyProject::getJsonLdMarkup();
  </wsl:php>
</xsl:if>
...

Ausgabe der Daten über Callback

Für Weblics die strukturierte Daten ausgeben (z.B. das lokale Video-Element) haben Sie die Möglichkeit eigene JSON-LD Deklarationen anzugeben.

Schritt 1: Aktivieren via SCSS

Sie können den Callback über die Einstellung: -w-option-addJsonLdCallback aktivieren.

Beispiel: Auszug aus der elementVideo.scss

..
/*@wCssFragment{class:elementVideo;caption:Allgemein;selectable:no}*/
.elementVideo {
  @extend .elementContent;
   ....  
  -w-option-addJsonLdCallback:'wMyProject::callbackJSONLD'; /*Über Callback als JSON-LD auszeichnen*/
  ....
}
..

Schritt 2: Funktion callbackJSONLD in der wMyProject.php definieren

Beispiel: wMyProject::callbackJSONLD

//*********************************************************************************/
/**
 * @method String callbackJSONLD($type, $data, $options = array())
 *
 * @description Callback Funktion, um für ein Item oder ein Objekt die Sturkturierten Daten anzupassen bzw. auszugeben
 *
 * @param $jsonLd vollständiger Javscript Json-Ld String
 *
 * @return String
 *
 */
//*********************************************************************************/

public static function callbackJSONLD($type, $data, $options = array()){
    $jsonLd = '';
    
    switch ($type) {
        case "video.intern" :
            $src          = $data['src'];
            $srcPoster    = $data['srcPoster'] ?? '';
            $srcPosterL    = $data['srcPosterL'] ?? '';
            $srcPosterFull    = $data['srcPosterFull'] ?? '';
            $creationTime = (wDocumentData::getData($src, 'creationTime') != '' ? date('Y-m-d', wDocumentData::getData($src, 'creationTime')) : '');
            $thumbnailUrl = wEnv::getUrlHost().wDocumentData::getData($src, 'thumbnail');
            $jsonLd = '<script type="application/ld+json">
                    {
                      "@context": "https://schema.org",
                      "@type": "VideoObject",
                      "name": "'.str_replace('&quot;', '', wDocumentData::getData($src, 'title')).'",
                      "description": "'.str_replace('&quot;', '', wDocumentData::getData($src, 'description')).'",'
                      .($thumbnailUrl != '' ? '"thumbnailUrl":"'.$thumbnailUrl.'",' : '')
                      .($srcPoster != '' ? '"image": ["'.wEnv::getUrlHost().$srcPoster.'"'.($srcPosterL != '' ? ',"'.wEnv::getUrlHost().$srcPosterL.'"' : '').($srcPosterFull != '' ? ',"'.wEnv::getUrlHost().$srcPosterFull.'"' : '').'],' : '').'
              "dateCreated": "'.$creationTime.'",
              "uploadDate": "'.$creationTime.'",
              "dateModified": "'.(wDocumentData::getData($srcAttr, 'modificationTime') != '' ? date('Y-m-d', wDocumentData::getData($src, 'modificationTime')) : '').'",
                      "contentUrl": "'.wEnv::getUrlHost().$srcAttr.'"
                    }
                    </script>';
            break;
    }
    
    return $jsonLd;
    
}

Allgemeine Hinweise

Bitte überprüfen Sie die Funktionalität der wMyProject -Funktion zunächst separat, z.B. durch ein eigenständiges Test-PHP-Skript. Dadurch stellen Sie sicher, dass sie korrekt funktioniert. Sobald Sie bestätigt haben, dass alles wie erwartet läuft, können Sie diese in das Hauptprojekt integrieren und die Funktionalität überprüfen. Bitte berücksichtigen Sie auch mögliche datenschutzrechtliche Aspekte während dieses Prozesses.

Weiterführende Links

PHP Framework-Klasse: wDocumentData

developers.google.com: So funktionieren strukturierte Daten

developers.google.com: Stellenausschreibungen strukturierte Daten hinzufügen