Hinzufügen von Mikrodaten für die Hintergrundbilder auf einfacher HTML-Seite

Ich versuche, unsere alte HTML-Seite (Webstore) mit Schema zu verbessern und habe einige Schwierigkeiten am Anfang. Wir haben über 1.500 individuelle HTML-Produktseiten, denen ich gerne ein Schema hinzufügen würde. Es ist also ein Muss, das zu korrigieren.Hinzufügen von Mikrodaten für die Hintergrundbilder auf einfacher HTML-Seite

Das größte Problem so weit ist, wie der Produktbild-Code als unser Site-Layout mit dem Hauptprodukt Bild Tabelle als Hintergrund-Element eingefügt basierend hinzuzufügen. Die meisten Forschungsbeispiele, die ich bisher gefunden habe, zeigen unterschiedliche Implementierungen, ist das möglich?

Hier ein Codebeispiel ist:

<TR> 
    <TD COLSPAN=2><IMG SRC="images/spacer.gif" WIDTH=122 HEIGHT=10 ALT=""></TD> 
</TR> 
<TR> 
    <TD COLSPAN=2><IMG SRC="images/spacer.gif" WIDTH=122 HEIGHT=18 ALT=""></TD> 
</TR> 
</TABLE> 
</td> 

<td valign="top"> 
    <table width="599" border="0" cellpadding="0" cellspacing="0" background="images/LOTR/BKG_Hobbit-Sting-UC2892.jpg" style="background-repeat: no-repeat;"> 
    <tr> 
    <td width="259" valign="top"><span class="style2 "><IMG SRC="images/spacer.gif" alt="" WIDTH=259 HEIGHT=150 border="0"><br></span> 
    <table width="238" border="0" align="right" cellpadding="0" cellspacing="0"> 
     <tr> 
     <td colspan="2"><span class="style109 style31">The HOBBIT<br> BILBO'S STING SWORD</span><span class="style117"><br> <span class="style33">UC2892 United Cutlery</span></span></td> 
     </tr>

Von diesem Code, würde Ich mag images/LOTR/BKG_Hobbit-Sting-UC2892.jpg als Produktbild über Schema.org markieren.

Ich versuchte zunächst, die Informationen zu den <HEAD> Abschnitt hinzugefügt, aber es Besuche nicht richtig auf strukturierte Daten-Test-Tool von Google:

<div itemscope itemtype="schema.org/Product">; <meta itemprop="image" content="images/LOTR/BKG_Hobbit-Sting-UC2892.jpg"></meta>

Auch Tests in Bing Markup-Tester mir das Ergebnis gibt:

Wir sehen keine Markup auf dieser Seite. Bitte stellen Sie sicher, dass das Markup korrekt implementiert wurde.

Ist es nicht in Ordnung, die Schema-Daten über <div> zum head Bereich hinzufügen?

Auch sollte der Bildlink eine vollständige URL www.example.com/images/LOTR/BKG_Hobbit-Sting-UC2892.jpg sein?

Quelle

2017-08-16 Tyler Timpe

Nach vielen Forschung, habe ich das Problem gelöst, indem Sie mit JSON-LD zu gehen und das Hinzufügen all Mikrodaten über ein Skript. https://developers.google.com/search/docs/guides/intro-strukturierte-daten –

Als Ihre table Markup schien nicht sehr wartbar zu sein, und als die (obsolete) background Attribut kann nicht für Mikrodaten verwendet wird, ist die beste Art und Weise, in Ihrem Fall wäre wahrscheinlich den Inhalt zu kopieren und sie markieren mit meta/link Elementen.

Sie können diese Markup im head oder im body hinzufügen, aber Sie können nicht div im head verwenden, so ist es einfacher, sie in der body zu tun.

So in der body, können Sie einfach hinzufügen:

<div itemscope itemtype="http://schema.org/Product"> 
    <link itemprop="image" href="images/LOTR/BKG_Hobbit-Sting-UC2892.jpg" /> 
</div>

Sie have to Verwendung link statt meta wenn der Wert eine URL ist. Auf diese Weise können Sie jede Art von URL angeben, absolut oder relativ (genau wie im Element a).

(Beachten Sie auch, dass weder meta noch link einen schließenden Tag haben, so ist es <meta> oder <meta />, aber nicht <meta></meta>.)

Das hieß, Mikrodaten funktionieren am besten, wenn Sie Ihre vorhandenen Inhalte markieren, ohne sie zu duplizieren. Wenn Sie es duplizieren müssten, es might work better für Ihre Verwendung von JSON-LD anstelle von Microdata.

Quelle

2017-08-17 15:57:45 unor

Zustimmen, JSON-LD ist in diesem Fall (altes Tabellenlayout) wahrscheinlich die bessere Wahl. –

Vielen Dank Unor, extrem hilfreiche Informationen! Hier ist, was ich bei der Verwendung von JSON (keine Bing-Nutzung) beschlossen: '' –

Hinzufügen von Mikrodaten für die Hintergrundbilder auf einfacher HTML-Seite

Antwort

Verwandte Themen