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.

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!

Wie viele Arten von Schema-Markups gibt es?

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.

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

Sie können sich alle Beispiele in der Google-Suchgalerie ansehen https://developers.google.com/search/docs/appearance/structured-data/search-gallery

Ich empfehle Ihnen, dieses coole Google-Tool auszuprobieren, mit dem Sie schnell strukturierte Schemadaten erstellen können https://www.google.com/webmasters/markup-helper/u/0/

Was sind die Vorteile von TYPO3 Schema?

  • 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

Beispiele für TYPO3-Schemata

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

Brotkrümel

FAQ

Anleitungen

Methode 1: Manuell Statisch (mit HTML-Element)

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

 

Methode 2: Automatisch dynamisch (mit TYPO3 Schema Extensions)

Dies ist die liebevollste Art, TYPO3 Schema mit der berühmten TYPO3 Schema Extension zu integrieren.Warum sollten Sie diese TYPO3-Erweiterung verwenden? Hier sind einige kurze Fakten.

  • Es handelt sich um eine verifizierte TYPO3-Erweiterung, die Ihnen die Sicherheit für zukünftigen Support, Updates und Wartung gibt.
  • Rund 75K Downloads
  • Bereitgestellte erweiterte TYPO3-Erweiterungen
  • Möglichkeit zur Anpassung an Ihre Bedürfnisse (mit API- und View-Hilfen für schema.org-Markup).
  • Sehr schöne offizielle Dokumentation zur Installation, Konfiguration und Anpassung von TYPO3 Schema.

Tipps

Die TYPO3-Community ist großartig, und die Leute lieben diesen Beitrag. Sie können viele TYPO3 Schema-Erweiterungen finden, die diese Erweiterung ergänzen, z.B. schema_auto, schema_bib, schema_health und schema_pending. Werfen Sie einen Blick auf https://extensions.typo3.org/?L=0&id=1&tx_solr%5Bq%5D=schema_

Nach der Installation und Konfiguration finden Sie hier einige Beispiele, die Sie mit EXT:schema einrichten können.

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

Methode 3: Kundenspezifische Entwicklung (mit TYPO3-Kern)

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

Ergebnis

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

Ergebnis

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}" />

Ergebnis

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}" />

Ergebnis

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}" />

Ergebnis

Schließung!

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!

Post a Comment

×
Captcha Code Kann das Bild nicht gelesen werden? Klicken Sie hier, um zu aktualisieren