In diesem Tutorial binden wir strukturierte Daten, mittels JSON-LD-Code, in unsere vorhandene SSI-HTML-Webseite (siehe Tutorial Webseite mit HTML-SSI erstellen) ein. Speziell verwenden wir den Typ TechArticle, inkl. author und publisher. Natürlich könnt Ihr auch andere Schema-Typen verwenden.

Wichtig: Der JSON-LD-Code für den Typ TechArticle darf nur in die einzelnen News-Seiten eingefügt werden, jedoch nicht in Kategorie-, Schlagwortseiten und die Startseite. Dafür gibt es andere strukturierte Daten.

1. Erweiterung vars.shtml

Wir beginnen mit der Erweiterung unserer bereits vorhandenen Datei vars.shtml. Diese erweitern wir um folgenden Codezeilen:


<!--#set var="domain_url" value="https://domains.de" -->
<!--#config timefmt="%d.%m.%Y" -->
<!--#set var="schema_publisher_name" value="Plublisher Name" -->
<!--#set var="schema_publisher_logo" value="https://domain.de/assets/img/logo.pnp" -->

Das Timeformat ist besonders wichtig, da dies "$LAST_MODIFIED"-Datum von "Tuesday, 25-Aug-2026 15:13:29 Mitteleuropäische Sommerzeit" auf ein von Maschinen lesbares Format "28.08.2026" ändert.
Falls noch nicht vorhanden, ergänzt die Datei um die "domain_url", sowie die beiden Schema-Daten schema_publisher_name und schema_publisher_logo.

2. Erstellung einer json_techarticle.shtml-Datei

Wir erstellen eine neue SHTML-Datei in dem Ordner /inc/ und nennen diese "json_techarticle.shtml". In diese Datei kopieren wir den Schema.org-Typ Code für einen TechArticle. Anschließend passn wir diesen dann mit den SSI-Variablen an.

Hier der mit den Variablen angepasste Code für die json_techarticle.shtml als JSON-LD-Code:


    <script type="application/ld+json">
    {
    "@context": "https://schema.org",
	"@type": "TechArticle",
		"headline": "<!--#echo var='page_title' -->",
		"description": "<!--#echo var='meta_desc' -->",
		"articleBody": "<!--#echo var='page_title_desc' -->",
		"inLanguage": "de-DE",
		"mainEntityOfPage": "<!--#echo var='domain_url' --><!--#echo var='REQUEST_URI' -->",
		"datePublished": "<!--#echo var='date_create' -->",
		"dateModified": "<!--#echo var='date_change' -->",
		"keywords": "<!--#echo var='meta_keywords' -->",
	  "author": {
		"@type": "Person",
		"name": "<!--#echo var='author_name' -->",
		"url": "<!--#echo var='domain_url' --><!--#echo var='DOCUMENT_URI' -->"
	  },
	  "publisher": {
		"@type": "Organization",
		"name": "<!--#echo var='schema_publisher_name' -->",
		"logo": {
		  "@type": "ImageObject",
		  "url": "<!--#echo var='schema_publisher_logo' -->"
		}
	  }
    }
    </script>

3. Anpassung der News-Seiten

In den Newsseiten (Detailsseiten) werden im oberen Bereich (über den Inhalten) folgende Codezeilen hinzugefügt:


<!-- Schema.org Daten -->
<!--#set var="page_title" value="Überschrift" -->
<!--#set var="meta_desc" value="Beschreibung der aktuellen Seite." -->
<!--#set var="page_title_desc" value="Eine ausführlichere Beschreibung der aktuellen Seite." -->
<!--#set var="date_create" value="28.08.2026" -->
<!--#set var="date_change" value="$LAST_MODIFIED" -->
<!--#set var="meta_keywords" value="SSI, HTML, Tutorial, Code, Webseite, Aufbau" -->
<!--#set var="author_name" value="Author Name" -->

Bis auf die Variable "date_change" können alle Variablen bei der Erstellung der einzelnen Seite neu definiert werden.

Anschließend fügt Ihr noch über den include virtuel-Befehl für layout_bottom.shtml die folgende Codezeile ein:


<!--#include virtual="./inc/json_techarticle.shtml" -->

Damit wird die Datei json_techarticle.shtml in jeder News-Seite aufgerufen und mit den definierten SSI-Variablen befüllt.
Sollte es später zu Änderungen an dem JSON-LD-Code kommen, dann braucht Ihr diese nur einmal, zentral in der json_techarticle.shtml-Datei ändern.

Download Beispiel

Das komplette Beispiel der DEMO-Webseite mit SSI-Variablen und JSON-LD-Code könnt Ihr auf github unter SSI-DEMO-Webseite ansehen unter herunterladen.

Viel Erfolg bei der Verwendung Webseite mit HTML-SSI!