Strukturierte Daten (schema.org) - Probleme mit dynamisch hinzugefügten Attributen

[Codehan]

Hallo zusammen,

leider musste ich feststellen, dass die Arbeit mit Strukturierten Daten (schema.org) innerhalb Contao nicht wirklich bequem ist, da es nicht wirklich eine Möglichkeit gibt, individuelle Attribute in einzelnen HTML-Tags einzufügen. Nachdem ich inzwischen einige Templates dafür angepasst habe, stehe ich vor folgendem Problem und komme nicht weiter:

Ich müsste die properties itemprop="url" und itemprop="logo" innerhalb bestimmter Tags auf meiner Seite einfügen. Da innerhalb Contao die Templates bzw. bestimmte Inhalte dynamisch erzeugt werden, habe ich teilweise keinen Zugriff auf die Tags oder einen Zugriff, der dann die genannten Attribute leider an mehreren Stellen einfügt. Ich habe getrickst und die Attribute mit JavaScript gezielt eingefügt, habe aber erfahren, dass Google keine Inhalte ausliest, die mit JavaScript hinzugefügt werden. Müsste die Attribute also irgendwie statisch reinkriegen.

Ich habe folgendes Template:

<div class="logo">
	<?php echo $this->field('logo_brand')->html() ?>
</div>
<div class="awards">
	<meta itemprop="award" content="Auszeichnung xy">
	<?php echo $this->field('award')->html() ?>
</div>

Hierbei handelt es sich um ein eigenes Inhaltselement, dass dann inhalb des Artikels befüllt wird, in dem es zum Einsatz kommt (in meinem Fall im Header). Hier kann ich zwar einen Bildlink, ein alt-Text und Titel eingegeben werden, allerdings keine weiteren (eigenen) Attribute.

Das obige Template erzeugt dann folgenden HTML-Code:

<div class="logo">
    <div class="ce_image attribute image brand">
        <div class="ce_image first last block">
            <figure class="image_container">
                 <a href="de/" title="zur Startseite"> <!-- Hier müsste das Attribut itemprop='url' rein -->
                     <img src="pfad/zum/bild/bild.svg" width="172" height="75" alt="xy" title="zur Startseite"> <!-- Hier müsste das Attribut itemprop='logo' rein -->
                 </a>     
            </figure>
        </div>
    </div>
</div>
<div class="awards">
    <meta itemprop="award" content="Auszeichnung xy">
    <div class="ce_image attribute image award">
        <div class="ce_image first last block">
            <figure class="image_container">
                <img src="pfad/zum/bild/bild.jpg" width="89" height="79" alt="xy" title="Auszeichnung xy">
            </figure>
        </div>
    </div>
</div>

Die Stellen, an denen die genannten Attribute sein sollen, habe ich kommentiert.

Welche Möglichkeiten habe ich nun die Attribute gezielt einzufügen bzw. muss ich dafür ein eigenes Template erstellen. Wenn ja wie und wie ersetze ich damit das Core-Template, das hier bspw. für Bildelemente verwendet wird.

Ich hoffe ich konnte mich verständlich ausdrücken, wenn ich verbessere ich den Post gerne.

Vielen Dank schonmal für eure Antworten.

LG
Codehan

[Ling]

Hoi,
das hier könnte dir weiter helfen: https://docs.contao.org/books/manual...nzufuegen.html
Dann kannste dir ein Dropdown o.ä. dafür bauen.

[Andreas]

Hierbei handelt es sich um ein eigenes Inhaltselement, ...

Verstehe ich nicht. Wenn du eigene Inhaltselemente erstellst, dann kannst du doch machen, was immer du möchtest? Da gehört doch dann auch ein eigenes Template dazu, so wie z.B. für Typ Text das ce_text dann ein ce_meinelement.

[Codehan]

Verstehe ich nicht. Wenn du eigene Inhaltselemente erstellst, dann kannst du doch machen, was immer du möchtest? Da gehört doch dann auch ein eigenes Template dazu, so wie z.B. für Typ Text das ce_text dann ein ce_meinelement.

Das ist richtig, eigentlich sollte ich alles damit machen können. Geht in meinem Fall aber leider nicht, da vordefinierte Contao-Elemente innerhalb des Templates genutzt werden. Diese vordefinierten Elemente erlauben aber nicht die Nutzung von zusätzlichen Attributen. CSS-Klasse, ID usw. sind möglich, allerdings keine HTML5 oder eben individiuelle Attribute.

Beispielsweise generiert <?php echo $this->field('logo_brand')->html() ?>:

<div class="logo">
    <div class="ce_image attribute image brand">
        <div class="ce_image first last block">
            <figure class="image_container">
                 <a href="de/" title="zur Startseite"> <!-- Hier müsste das Attribut itemprop='url' rein -->
                     <img src="pfad/zum/bild/bild.svg" width="172" height="75" alt="xy" title="zur Startseite"> <!-- Hier müsste das Attribut itemprop='logo' rein -->
                 </a>     
            </figure>
        </div>
    </div>
</div>

Wenn ich die Attribute per JavaScript hinzufüge, nachdem die Seite geladen ist, werden diese von Google nicht ausgelesen, da Google rein mit statischen Attributen usw. arbeitet.

Irgendwie fällt mir hierzu keine Lösung ein oder ich stelle mich einfach zu doof an..

[Spooky]

Ich denke hier handelt es sich um Custom Elements von PCT, oder?

[Andreas]

Weißt du wie das mit den Ausgabetemplates in Contao geht? Finde heraus, welches Template für die Ausgabe zuständig ist, das geht relativ einfach mit rocksolid-frontend-helper. Dann erstellst du im BE ein neues Template und wählst als Vorlage (Originaltemplate) das Template, welches du herausgefunden hast. Ab sofort wird diese erstellte Kopie des Originaltemplates von Contao anstelle des Coretemplates benutzt.