Microdata-Integration

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.
Info
Die Verwendung von strukturierten Daten ist auch für Suchmaschinen vorteilhaft, da die Datenstrukturen von den großen Suchmaschinen 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:

Beispiel

Template-Quellcode
Editor-Ansicht
Template-Quellcode
Beispiel: Template mit Microdata-Shop-Artikel
​
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Microdata Template</title>
  5.     <meta charset="UTF-8">
  6.     <style transform="true">
  7.       .font { font-family: Arial, sans-serif; }
  8.     </style>
  9.     <!-- cssToAttribute -->
  10. </head>
  11. <body>
  12. [CONTAINER name='contents' label='Inhalte' type='div' editor-only='true' microdata_able='true']

  14. [BETWEEN]
  15. <table border="0" cellspacing="0" cellpadding="0" width="640" align="center">
  16.   <tr>
  17.     <td style="height: 20px;"></td>
  18.   </tr>
  19. </table>
  20. [BETWEEN]

  22. [ELEMENT  name='shop-article-2-col'
  23.           label='Shop-Artikel (2 Spalten)'
  24.           type='div'
  25.           editor-only='true'
  26.           microdata_able='true'
  27.           microdata_type='schema.org']
  28. <table border="0" cellspacing="0" cellpadding="0" width="640" align="center">
  29.     <tr>
  30.         [BLOCK name='product-data' label='Produktangaben' independent='true']
  31.         <td style="width:200px;" valign="top">
  32.             [INPUT  type='a_img'
  33.                     name='bild'
  34.                     label='Bild'
  35.                     microdata='src:product-image,alt:product-name,href:url,comment:product-name'
  36.                     replace_path='//shop|https://shop'
  37.                     attributes='style="width:200px; height: auto; display: block;"'
  38.                     required='true' /]
  39.         </td>
  40.         <td style="width:20px;"></td>
  41.         [/BLOCK]
  42.         <td valign="top" class="font">
  43.             [BLOCK name='product-data' label='Produktangaben' independent='true']
  44.             [INPUT  type='h1'
  45.                     name='name'
  46.                     label='Produktname'
  47.                     rows='2'
  48.                     microdata='product-name'
  49.                     required='true' /]
  50.             [/BLOCK]

  52.             [BLOCK name='product-data' label='Produktangaben' independent='true']
  53.             <br /><br />
  54.             [INPUT  type='span'
  55.                     name='description'
  56.                     label='Beschreibung'
  57.                     rows='5'
  58.                     microdata='product-description'
  59.                     required='true' /]
  60.             [/BLOCK]

  62.             [BLOCK name='product-data' label='Produktangaben' independent='true']
  63.             <br /><br />
  64.             [INPUT  type='span'
  65.                     name='price'
  66.                     label='Preis'
  67.                     rows='1'
  68.                     microdata='product-offers-price'
  69.                     attributes='style="font-weight: bold;"'
  70.                     required='true' /] €
  71.             [/BLOCK]

  73.             [BLOCK name='product-data' label='Produktangaben' independent='true']
  74.             <br /><br />
  75.             [INPUT  type='a'
  76.                     name='link'
  77.                     label='Link'
  78.                     microdata='text:product-name,href:url,comment:product-name'
  79.                     required='true' /]
  80.             [/BLOCK]
  81.         </td>
  82.     </tr>
  83. </table>
  84. [/ELEMENT]

  86. [/CONTAINER]
  87. </body>
  88. </html>
Editor-Ansicht
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.
Alle Attribute für die Microdata-Integration findest du in der MWML-Referenz:
  1. CONTAINER-Attribute für die Microdata-Integration
  2. ELEMENT-Attribute für die Microdata-Integration
Lerne im nächsten Schritt, wie du HTML-Quellcode von deiner Website einbindest:
  1. Externe Inhalte einbetten