3 Methoden zur Integration von strukturierten TYPO3-Schema daten

Sind Sie auf der Suche nach dem besten Weg, das strukturierte Datenschema von Google in Ihre TYPO3-Websites zu integrieren? Basierend auf Ihren TYPO3-Kenntnissen und Erfahrungen lernen Sie in diesem Artikel drei verschiedene Möglichkeiten kennen, wie Sie TYPO3 Schema mit Hilfe des eigenen TYPO3-Kerns und TYPO3-Erweiterungen von Drittanbietern integrieren können.

Heutzutage sind strukturierte Daten (schema.org) der Trend, um eine bessere Suchmaschinenoptimierung zu erreichen. Suchmaschinen (wie Google) wird dringend empfohlen und gefördert, Schema.org-Snippets auf Websites zu implementieren. Schema Markup (schema.org) ist ein strukturiertes Datenvokabular, das Suchmaschinen hilft, die Informationen auf Ihrer Website besser zu verstehen, um reichhaltige Ergebnisse zu liefern. Diese Markups ermöglichen es Suchmaschinen, die Bedeutung und Beziehungen hinter den auf Ihrer Website erwähnten Entitäten zu erkennen.

Wie auch immer, Sie können eine Menge besserer Artikel finden, um zu lernen und zu erforschen, was Schema strukturierte Daten sind. In diesem Blog möchte ich Ihnen zeigen, wie Sie Schema in Ihre TYPO3-Website integrieren können. Los geht's!

Bevor wir beginnen, wie Sie wissen, mein Ritual. Ich möchte diesen Blog den Entwicklern und Betreuern der TYPO3 Schea-Erweiterung und den TYPO3-Mitarbeitern widmen, die ein so flexibles CMS geschaffen haben, in dem man alle Funktionen wie das Schema für strukturierte Daten einfach erweitern kann. #T3Kudos an alle!

Das schema.org-Vokabular umfasst Formate für die Strukturierung von Daten zu Personen, Orten und Dingen im Web. Die vollständige Liste der Elemente, die durch Schema-Markups definiert werden können, finden Sie hier auf der Schema-Website.

• Artikel
• Veranstaltungen
• Produkte
• Personen
• Organisationen
• Lokale Unternehmen
• Bewertungen
• Rezepte
• Medizinische Bedingungen

Wir haben zum Beispiel das TYPO3-Schema des Produkts mit den Sternebewertungen und dem Startpreis des Produkts integriert.

• Strukturierte Daten bringen Geschäftsergebnisse
• Verbesserung der "Auffindbarkeit" Ihrer Marke in der Suche
• Kontrollieren Sie, wie Ihre Marke in den Suchergebnissen erscheint
• Auffindbarkeit auf allen Oberflächen - Mobil, Desktop, Sprache und mehr!
• Verbessern Sie Ihre Content-Strategie
• Zukunftssicher: Aufbau eines Wissensgraphen und Wiederverwendung in Ihrer Organisation

Werfen wir einen Blick auf einige Beispiele für strukturierte Datenschemata.

IMHO ist es keine gute Idee, statische TYPO3 Structured Schema-Daten zu Ihrer TYPO3-Website hinzuzufügen. Aber manchmal lieben es Nicht-Techniker, um zu viel Hilfe von TYPO3-Integratoren oder Entwicklern zu vermeiden. Natürlich geht durch das manuelle Hinzufügen von HTML-Weg die Schönheit der dynamischen Generierung von TYPO3-Schemadaten, z.B. Breadcrumb, verloren.

Schritt 1. Erstellen Sie Structured Data Markup (mit Tools wie Google).

Schritt 2. Anmeldung im TYPO3 Backend.

Schritt 3. Gehen Sie zu Seite > wählen Sie eine Seite aus der Baumstruktur.

Schritt 4. Fügen Sie "Inhaltselement" hinzu und wählen Sie HTML-Element.

Schritt 5. Fügen Sie Ihre erstellten strukturierten Schemadaten ein und speichern Sie.

Schritt 6. Testen Sie Ihre Seite mit dem Rich Results Test von Google https://search.google.com/test/rich-results

Möglichkeit 1. TYPO3 Schema mit TypoScript Inhaltsobjekt (cObject)

page = PAGE
page.10 = SCHEMA
page.10 {
    type = WebSite
    properties {
        name.field = seo_title // title
        description.field = description
    }
}

Möglichkeit 2. TYPO3-Schema mit Fluid ViewHelper

<schema:type.person
   -id="https://example.org/#person-42"
   givenName="John"
   familyName="Smith"
   gender="https://schema.org/Male"
>
   <schema:type.event
      -as="performerIn"
      name="Fancy Event"
      image="https://example.org/event.png"
      url="https://example.org/"
      isAccessibleForFree="true"
   >
      <schema:property -as="sameAs" value="https://twitter.com/fancy-event"/>
      <schema:property -as="sameAs" value="https://facebook.com/fancy-event"/>
   </schema:type.event>
</schema:type.person>

{
    "@context": "https://schema.org/",
    "@type": "Event",
    "@id": "https://example.org/#event-1",
    "name": "Fancy Event",
    "image": "https://example.org/event.png",
    "url": "https://example.org",
    "isAccessibleForFree": "https://schema.org/True",
    "sameAs": ["https://twitter.com/fancy-event", "https://facebook.com/fancy-event"]
}

Möglichkeit 3. TYPO3-Schema mit Extbase/Fluid (für Entwickler)

// Model
$thing = \Brotkrueml\Schema\Type\TypeFactory::createType('Thing');
$thing->setProperty('name', 'A thing');

// Controller
$schemaManager = TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(
    \Brotkrueml\Schema\Manager\SchemaManager::class
 );
$schemaManager->addType($thing);

<!-- Fluid –>
<schema:type.thing name="A thing"/>

Um mehr über die TYPO3 Schema Extension zu erfahren, werfen Sie einen Blick in die offizielle Dokumentation unter https://docs.typo3.org/p/brotkrueml/schema/main/en-us/Index.html

Nun, TYPO3 ist so flexibel, dass Sie in vielen Fällen nicht auf Lösungen von Drittanbietern angewiesen sind. Sie können ganz einfach Funktionen entsprechend Ihren Anforderungen erstellen oder erweitern.

Vor kurzem haben wir TYPO3 Schema in unsere Portal- und Blog-Seiten mit sehr wenig Aufwand integriert. Warum der eigene Weg? Nun, wir können JSON direkt mit TypoScript's page.headerData oder Fluid's <f:asset.script /> überall in TYPO3 Templates oder TYPO3 Extensions Geschäftslogik einfügen.

Hier möchte ich einige TYPO3-Schema-Beispiele mit einfachem TYPO3 Fluid Schema und TypoScript-Code vorstellen.

Beispiel #1 Organisation TYPO3 Schema

Typoskript

page.headerData {
    901 = TEXT
    901.value (
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Organisation",
        "name": "T3 Planet",
        "alternateName": "T3 Planet",
        "url": "https://t3planet.com/",
        "logo": "https://t3planet.com/typo3conf/ext/ns_theme_t3planet/Resources/Public/dist/assets/images/logo.svg",
        "contactPoint": [{
        "@type": "ContactPoint",
        "telephone": "+1 917 7939192",
        "contactType": "customer service",
        "contactOption": "HearingImpairedSupported",
        "areaServed": "US",
        "availableLanguage": "en"
        },{
        "@type": "ContactPoint",
        "telephone": "+49 212 73879993",
        "contactType": "technical support",
        "contactOption": "HearingImpairedSupported",
        "areaServed": "DE",
        "availableLanguage": "German"
        }],
        "sameAs": [
        "https://www.facebook.com/T3Planet/",
        "https://twitter.com/T3Planet",
        "https://www.instagram.com/T3Planet",
        "https://www.youtube.com/channel/UCn3C_xBMuWhA3cOojumxIPA"
        ]
    }
    </script>
    )
}

Beispiel #2 Suche Suche TYPO3 Schema

page.headerData {
    910 = TEXT
    910.value (
        <script type="application/ld+json">
        {
            "@context": "https://schema.org/",
            "@type": "WebSite",
            "name": "T3 Planet",
            "url": "https://t3planet.com/",
            "potentialAction": {
                "@type": "SearchAction",
                "target": "https://t3planet.com/blog/search-result/?tx_kesearch_pi1%5Bsword%5D={search_term_string}",
                "query-input": "required name=search_term_string"
            }
        }
        </script>   
    )
}

Beispiel #3 Breadcrumb TYPO3 Schema

Typoskript

page {

    10 = FLUIDTEMPLATE

    10 {

        // Scheme Breadcrumb Menu

        110 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor

        110 {

            special = rootline

            as = SchemaBreadcrumbMenu

        }

    }

}

Fluid - Breadcrumb Schema JSON vorbereiten

<!-- Schema Bread Crumb -->
<f:section name="SchemaBreadcrumbMenu">
    <f:if condition="{SchemaBreadcrumbMenu}">

        <f:asset.script identifier="breadCrumbMenuSchema" additionalAttributes="{type:'application/ld+json'}">
        {
            "@context": "https://schema.org",
            "@type": "BreadcrumbList",
            "itemListElement": [
                <f:for each="{SchemaBreadcrumbMenu}" as="item" iteration="iterator">
                    <f:variable name="finalLink">https://t3planet.com{item.link}</f:variable>
                    {
                        "@type": "ListItem",
                        "position": <f:format.json>{iterator.cycle}</f:format.json>,
                        "name": <f:format.json>{item.title}</f:format.json>,
                        "item": "{finalLink}"
                    }
                    <f:if condition="{iterator.isLast}"><f:then></f:then><f:else>,</f:else></f:if>
                </f:for>
            ]
        }
        </f:asset.script>
    </f:if>
</f:section>

Fluid - Rendering Brotkrümel TYPO3 Schema

<f:render section="SchemaBreadcrumbMenu" arguments="{_all}" />

Beispiel #4 FAQ TYPO3 Schema

Fluid - FAQ-Schema JSON vorbereiten

<f:section name="SchemaFAQ">
    <f:if condition="{data}">
        <f:asset.script identifier="faqSchema" additionalAttributes="{type:'application/ld+json'}">
        {
            "@context": "https://schema.org",
            "@type": "FAQPage",
            "mainEntity": [
                <f:for each="{data}" as="item" iteration="i">
                <f:variable name="content"><f:format.stripTags><f:cObject typoscriptObjectPath="lib.tx_mask.content">{item.uid}</f:cObject></f:format.stripTags></f:variable>
                {
                    "@type": "Question",
                    "name": <f:format.json>{item.header}</f:format.json>,
                    "acceptedAnswer": {
                        "@type": "Answer",
                        "text": <f:format.json>{content}</f:format.json>
                    }
                }
                <f:if condition="{i.isLast}"><f:then></f:then><f:else>,</f:else></f:if>
                </f:for>
            ]
        }
         </f:asset.script>
    </f:if>
</f:section>

Fluid - Render FAQ TYPO3 Schema

<f:render section="SchemaFAQ" arguments="{_all}" />

Beispiel #5 Produkt TYPO3 Schema

Fluid - FAQ-Schema JSON vorbereiten

<f:section name="SchemaProductReview">
    <f:if condition="{data}">
        <f:asset.script identifier="productReviewSchema" additionalAttributes="{type:'application/ld+json'}">
        {
            "@context": "https://schema.org/",
            "@type": "Product",
            "name": <f:format.json>{data.nav_title}</f:format.json>,
            "image": "",
            "description": <f:format.json>{data.description}</f:format.json>,
            "brand": {
                "@type": "Brand",
                "name": "T3Planet"
            },
            "sku": <f:format.json>{data.uid}</f:format.json>,
            "aggregateRating": {
                "@type": "AggregateRating",
                "ratingValue": <f:format.json>{data.tx_mask_rating}</f:format.json>,
                "bestRating": "5",
                "worstRating": "0",
                "ratingCount": "15"
            }
        }
         </f:asset.script>
    </f:if>
</f:section>

Fluid - Render FAQ TYPO3 Schema

<f:render section="SchemaProductReview" arguments="{_all}" />

Vielen Dank für das Lesen meines Artikels. Ich hoffe, Sie lernen die Grundlagen des TYPO3 Strukturierten Datenschemas kennen.

Je nach Ihren Anforderungen können Sie entweder eine TYPO3 Schema-Erweiterung oder eine eigene Art der Integration von TYPO3 Strukturdaten wählen.

IMHO sollte das TYPO3-Schema auf Ihrer Basis-Checkliste für die Entwicklung stehen und Ihre Kunden motivieren, in eine solche fortgeschrittene Integration in TYPO3 zu investieren. Es wird ihrem Unternehmen helfen, zu wachsen.

Viel Spaß mit TYPO3 Schema!