Breadcrumbs Markup

  • Guten Morgen,


    ich bin gerade dabei diverse markups zu erstellen und versuche mich gerade an der Implementierung.


    Wo sollte ich den nachfolgenden Code einbinden: Im header oder im Artikel selber am Ende des html?? Für mein Verständniss sollte es beides funktionieren. Ist es dennoch besser den code bezüglich der pagespeed in den Artikel zu implementieren???


    <script type="application/ld+json">

    {

    "@context": "http://schema.org",

    "@type": "BreadcrumbList",

    "itemListElement": [{

    "@type": "ListItem",

    "position": 1,

    "name": "Rezepte",

    "item": "https://www.taste-of-koroni.de/rezepte.php"

    },{

    "@type": "ListItem",

    "position": 2,

    "name": "Vorspeisen",

    "item": "https://www.taste-of-koroni.de/griechische-vorspeisen.php"

    }]

    }

    </script>



    oder aber sollte ich im header folgenden Code einfügen:

    Code
    1. <script type="application/ld+json"> { "@context" : "http://schema.org", "@type" : "WebSite", "name" : "Taste of Koroni", "url" : "https://www.taste-of-koroni.de" }
    2. </script>

    und den html code der Breadcrumbs wie nachfolgend anpassen:


    Code
    1. <div id="breadcrumb" role="navigation" class="nav">
    2.     <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">&raquo;
    3.         <a href="/" itemprop="url"><span itemprop="title">Startseite</span></a></span>
    4. ..........





    Wäre Klasse jemand weiß da etwas darüber

  • Auf die Art arbeiten Sie ja auch wunderbar an dem System vorbei, das Ihre Inhalte automatisch verwalten sollte (CMS). Bei Änderungen müssen Sie dann immer darauf achten, alle URLs ggf. manuell zu aktualisieren etc. Das lässt sich sicher auch so lösen, dass hinterher weniger Betreuungsaufwand entsteht. Zunächst aber die Frage, was versprechen Sie sich denn von der Implementierung dieses Breadcrumb Codes?

  • Vielen Dank für die Rückmeldungen:-)


    ich bin darauf Aufmerksam geworden, da ich im Heighlight Artikel einen Fehler in der searching console bezüglich fehlendem Namen bekommen habe. Nun will ich hier aber in den Codes nicht herumschreiben, hier besteht die Möglichkeit mit dem Data Highligher den Namen zusätzlich goolge anzuzeigen. Somit können in den goolge Anzeigen auch der Preis angezeigt werden. Nach recerce habe ich gelesen, dass wenn eine Fehlermeldung auftaucht die Anzeige normal ausgespielt ohne die Zusätze wie Preis, etc.


    Desweiteren wäre es für meine Rezeptsammlung Klasse ich könnte in den Google Anzeigen mit einem Bild, mit Zubereitungszeit etc. gesehen werden. Hierfür sollte ich dann auf jeder Seite die Infos implementieren. Das wäre sozusagen ein hook welcher eingebunden wird ohne dass ich in den Codes etwas verändern muss, auch sollten Änderungen an der Seite keine Auswirkungen zur Darstellung der Anzeige haben. Äderungen müsste ich dann in application/ld+json vornehmen.


    Bei der Implementierung des Breadcrumbcodes hätte ich folgende Vorteile:


    Die url ist sehr kurz mit keinen Unterverzeichnissen, wenn ich die Breadcrumbs einbinde, dann bahe ich zwei Unterverzeichnisse mehr welches zeigen soll, dass der Artikel auch übergeordnete Seiten hat. Ebenfalls habe ich hier dann zwei Links mehr in den Anzeigen.

  • Anbei ein Screenshot bezüglich den Rezepten, die Seite hat für meine Verhältnisse eine ganz gute Klickrate. Da alle Anzeigen ein Bild haben und ich nicht ist dies eventuell auch ein Vorteil. Würde aber gerne A und B Tests machen um zu schauen welches besser läuft. Für die Bilddarstellung und Zusatzinfos ist es nach meinem Verständniss erforderlich einen zusätzlichen Code zu implementieren. Das Anzeigeformat kann ich mit den Bordmitteln nicht umsetzen.


    Ich habe mich schon tief in zp eingearbeitet, wobei ich natürlich nicht den background habe wie die Entwickler:-). Villeicht kann ich hier auch etwas anderes machen...

  • Hallo,


    jetzt haben Sie mich etwas verwirrt. Ich verstehe das Ziel der Anzeige der Rezepte in den Google-Ergebnissen inkl. Breadcrumb. Den Zusammenhang zum Shop und Fehler im Highlight-Artikel verstehe ich nicht, aber egal.

    Mein Punkt war, dass Sie sich durch die vielen eingefügten Codes, die dann hardgecodete URLs etc. enthalten, einen Alptraum schaffen, falls Sie jemals Seiten umbenennen oder verschieben etc. Dann müssen Sie nämlich diese ganzen Codes auch aktualisieren. Und genau das sollte einem ja ein CMS abnehmen. Es wäre schon einiges gewonnen, wenn Sie im Code immer die entsprechende OID verwenden, statt eines hardgecodeten Links.


    Ich habe aber heute unsere ab Werk verfügbaren Breadcrumbs (Navigationspfad) entsprechend mit microdata aktualisiert, so dass Sie eigentlich auch einfach den eingebauten Navigationspfad verwenden könnten. Sobald das Update veröffentlicht ist, melde ich mich hier nochmal.

  • super vielen Dank


    das mit den oid klinkt sehr logisch, da wäre ich jetzt nicht drauf gekommen, vielen lieben Dank für den Tipp.


    Hab nun meine eigene Breadcrumbs (Quelltexte) auch mit den microdata aktualisiert. Nur hänge ich gerade an den oids. Wenn ich z.B. eine oid (oid://page/de$rezepte)in href einfüge, bekomme ich folgende Fehlermeldung


    The value provided for item.id must be a valid URL.


    Hier denke ich müsste eine andere Schreibweise der oid erstellt werden um in den code einzufügen?



    Das ist der code mit der Fehlermeldung, welche ich im body in einem Quelltext Widget einfegügt habe.


    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="breadcrumb-tk">

    <meta itemprop="position" content="2"/>

    <a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="oid://page/de$rezepte" title="Rezepte">

    <span itemprop="name">Rezepte</span>

    </a>

    </li>

  • Das sollte passen. Die OID wird aber erst beim Erstellen der Seite, durch einen gültigen Link ersetzt, also nicht den Code wie oben inkl. der OID im Google-Tool verifizieren, sondern den der nach dem Erstellen der Seite auf der Seite angezeigt wird!

  • Ach Herr Seiz, vielen Dank:-)


    Ich weiß den Support wirklich sehr zu schätzen, schließlich sind das Fremdcodes und hat mit der eigentlichen zp software nichts zu tun, aber dennoch wird sich hier der Sache angenommen und eine Lösung angeboten. Absolut Klasse :thumbup:


    Vielen lieben Dank

  • Musste das Update bzgl. der eingebauten Breadcrumbs (Navigationspfad) kurzfristig wieder zurückziehen, weil es zu Fehlern kam. Kommt aber wieder in der Zukunft.

  • Guten Morgen,


    ich habe jetzt die Breadcrumbs selber eingebunden, bekomme aber wegen der URL bei den Breadcrumbs eine Fehlermeldung.


    Code:


    <nav><ol itemscope itemtype="http://schema.org/BreadcrumbList" style="margin-left: 0 !important">

    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="breadcrumb-tk">

    <meta itemprop="position" content="1"/>

    <a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="oid://page/de$Ueber_uns" title="Startseite Taste of Koroni">

    <span itemprop="name">Taste of Koroni</span>

    </a>

    </li>

    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="breadcrumb-tk">

    <meta itemprop="position" content="2"/>

    <a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="oid://page/de$rezepte" title="Rezepte">

    <span itemprop="name">Rezepte</span>

    </a>

    </li>

    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="breadcrumb-tk">

    <meta itemprop="position" content="3"/>

    <a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="oid://page/de$vorspeisen-meze" title="Vorspeisen / Mezé">

    <span itemprop="name">Vorspeisen</span>

    </a>

    </li>

    <li class="breadcrumb-tk" title="Griechischer Bauernsalat">Griechischer Bauernsalat</li>

    </ol></nav>



    Fehlermeldung: Der Wert für item.id muss eine gültige URL sein.


    Fehlerseite: https://taste-of-koroni.de/rez…echischer-bauernsalat.php


    Test Tool: https://search.google.com/structured-data/testing-tool?hl=de


    Ich weiß nicht habe auch schon probiert im Test Tool die id (URL) durch eine https://www...... zu ersetzen, da wird aber der gleiche Fehler angezeigt.


    Jetzt gerade fällt mir nichts mehr dazu ein, wie ich den Fehler beheben kann.

    Auch ist die Seite frisch upgeloaded, somit ist die Seite auch von den Crawlern noch nicht durchsucht worden, also kann ich bis jetzt auch die Darstellung überprüfen.


    Vielleicht weiß jemand Rat

  • Missverständnis. Der Fehler ist, dass Sie im link, also im <a>-Tag nochmals die beiden Eigenschaften itemscope und itemtype="http://schema.org/Thing" aufführen. Die gehören da nicht rein, weil die ja bereits im umschließenden <li> enthalten sind. Die genannten Eigenschaften aus dem <a> löschen, dann verifiziert das.