Zum Inhalt

Microdata-Integration

Mit Hilfe von Microdata (auch Mikrodaten bzw. strukturierte Daten genannt) lassen sich die Produkte deines Onlineshops per Klick in eine E-Mail übertragen. Dazu muss dein Template erweitert werden.

Tipp

Die Verwendung von strukturierten Daten ist auch für Suchmaschinen vorteilhaft, da die Datenstrukturen so ausgewertet werden können. Deine Website kann damit ein höheres Ranking erzielen.

Verwendung

E-Mail-Templates

Anforderungen

Die Mikrodaten müssen im Vokabular Schema.org oder data-vocabulary.org vorliegen. Du kannst die strukturierten Daten deines Webshops hier prüfen, insofern dieser das Mikrodaten-Vokabular Schema.org verwendet:

Schema Markup Validator aufrufen

Beispiel

Beispiel: Template mit Microdata-Shop-Artikel
<!DOCTYPE html>
<html>
<head>
    <title>Microdata Template</title>
    <meta charset="UTF-8">
    <style transform="true">/* siehe (1)! */
      .font { font-family: Arial, sans-serif; }
    </style>
    <!-- cssToAttribute(2) -->
</head>
<body>
[CONTAINER name='contents' label='Inhalte' type='div' editor-only='true' microdata_able='true'<!-- (3)! -->]

[BETWEEN]<!-- (4)! -->
<table border="0" cellspacing="0" cellpadding="0" width="640" align="center">
  <tr>
    <td style="height: 20px;"></td>
  </tr>
</table>
[BETWEEN]

[ELEMENT  name='shop-article-2-col'
          label='Shop-Artikel (2 Spalten)'
          type='div'
          editor-only='true'
          microdata_able='true'
          microdata_type='schema.org'<!-- (5)! -->]
<table border="0" cellspacing="0" cellpadding="0" width="640" align="center">
    <tr>
        [BLOCK name='product-data' label='Produktangaben' independent='true']
        <td style="width:200px;" valign="top">
            [INPUT  type='a_img'
                    name='bild'
                    label='Bild'
                    microdata='src:product-image,alt:product-name,href:url,comment:product-name'<!-- (6)! -->
                    replace_path='//shop|https://shop'
                    attributes='style="width:200px; height: auto; display: block;"'
                    required='true' /]
        </td>
        <td style="width:20px;"></td>
        [/BLOCK]
        <td valign="top" class="font">
            [BLOCK name='product-data' label='Produktangaben' independent='true']
            [INPUT  type='h1'
                    name='name'
                    label='Produktname'
                    rows='2'
                    microdata='product-name'
                    required='true' /]
            [/BLOCK]

            [BLOCK name='product-data' label='Produktangaben' independent='true']
            <br /><br />
            [INPUT  type='span'
                    name='description'
                    label='Beschreibung'
                    rows='5'
                    microdata='product-description'
                    required='true' /]
            [/BLOCK]

            [BLOCK name='product-data' label='Produktangaben' independent='true']
            <br /><br />
            [INPUT  type='span'
                    name='price'
                    label='Preis'
                    rows='1'
                    microdata='product-offers-price'
                    attributes='style="font-weight: bold;"'
                    required='true' /] €
            [/BLOCK]

            [BLOCK name='product-data' label='Produktangaben' independent='true']
            <br /><br />
            [INPUT  type='a'
                    name='link'
                    label='Link'
                    microdata='text:product-name,href:url,comment:product-name'
                    required='true' /]
            [/BLOCK]
        </td>
    </tr>
</table>
[/ELEMENT]

[/CONTAINER]
</body>
</html>
  1. CSS-To-Inline aktivieren.
  2. Mit dem Kommentar <!-- cssToAttribute --> innerhalb von <head> wird CSS-To-Attribute aktiviert.
  3. Am [CONTAINER] muss Microdata mit microdata_able='true' aktiviert werden. Im Editor erscheint das Mikrodaten-Icon für diesen Container.
  4. Abstand zwischen Elementen, siehe hier.
  5. Am [ELEMENT] muss Microdata mit microdata_able='true' aktiviert. Im Beispiel ist das Schema microdata_type='schema.org' gewählt.
  6. An komplexen Inputs werden die Attribute durch die Syntax microdata='<key 1>:<value 1>,<key 2>:<value 2>, ...' zugewiesen. Sind in den strukturierten Daten mehrere Bilder hinterlegt, kann das gewünschte Bild im Editor ausgewählt werden.

Ansicht des Tabs "Inhalt":

Editor-Ansicht des Microdata-Templates

Klick auf das Microdata-Icon

Microdate-Icon

öffnet den "Mikrodaten-Artikel einlesen"-Dialog. Hier kann das gewünschte Ziel-Element kann ausgewählt und die Werte der eingelesenen Felder bearbeitet werden.

Editor-Ansicht des Microdata-Templates

Alle Attribute für die Microdata-Integration findest du in der MWML-Referenz:

CONTAINER-Attribute für die Microdata-Integration

ELEMENT-Attribute für die Microdata-Integration

Lerne im nächsten Schritt, wie du HTML-Quellcode von deiner Website einbindest:

Externe Inhalte einbetten