Fügen Sie Mikrodaten zum Breadcrumbs-Modul hinzu (mod_breadcrumbs). „Breadcrumbs“: Mikro-Markup und seine Auswirkungen auf Seitenausschnitte Mikro-Markup von Breadcrumbs Schema org
Grüße Freunde. Heute ist der Beitrag zum 400-jährigen Jubiläum auf meinem Blog. Anlässlich eines solchen Termins wollte ich unbedingt einige wirklich nützliche Inhalte bereitstellen, damit diese interessant, nützlich und relevant sind. Und das Thema für einen solchen Artikel kam aus heiterem Himmel – ich wollte die Entstehung schöner Snippets bei der Suche verstehen, habe mich aber gleichzeitig mit zwei weiteren Themen beschäftigt:
- Breadcrumbs auf Ihrem WordPress-Blog installieren (ich wollte es ohne Plugin, um die Site nicht zu laden),
- und das Einrichten von Mikro-Markup (ohne dieses nützen Breadcrumbs wenig).
Ich habe schon lange von Breadcrumbs gehört und gelesen, aber ich konnte einfach nicht wirklich verstehen, welchen Nutzen sie für einen normalen Blog mit einer einfachen und verständlichen Struktur haben. Urteilen Sie selbst, ich habe eine Hauptseite, alle Beiträge sind in Kategorien unterteilt und das war’s. Das heißt, der maximale Weg von der Startseite zum endgültigen Artikel beträgt 2 Klicks. Jeder Artikel verfügt über einen Link zu der Kategorie, zu der er gehört, sodass der Besucher sich einfach nicht verlaufen kann.
Eine andere Sache ist es, wenn die Site komplex ist und so strukturiert ist, dass man eine halbe Stunde lang im Kreis laufen kann und nicht findet, was man sucht. Wenn Sie eine Art Online-Shop mit Dutzenden von Kategorien haben, von denen jede in untergeordnete Überschriften unterteilt ist, diese nacheinander und dann noch eine, und dann ist jedes Produkt in Farben unterteilt – hier verstehe ich die Bedeutung von Semmelbröseln – das Der Benutzer benötigt sie als Navigationselement und .
Der Name „Breadcrumbs“ stammt übrigens davon; ursprünglich war es nur die Navigation auf der Website. Erinnern Sie sich an das Märchen „Hänsel und Gretel“, in dem die Kinder Brotstücke auf den Weg warfen, damit sie später den Weg zurück finden konnten. Im Märchen hat ihnen diese Methode nicht viel geholfen, aber für Websites war sie nützlich.
Darstellung des Snippets in den SuchergebnissenDaher habe ich den Sinn eines solchen Gadgets für meinen Blog erst erkannt, als ich auf die zweite Bedeutung von Krümeln stieß – es stellte sich heraus, dass sie nicht nur von Menschen, sondern auch von Suchmaschinen gesehen werden. Und Suchmaschinen betrachten sie nicht nur als interne Links, die die Verlinkung und Verteilung der Seitengewichte beeinflussen, sondern auch als wichtiges Navigationselement. Yandex und Google verwenden dieses Element, um ein Snippet zu erstellen. Wie es aussieht, möchte ich euch noch lange nicht verraten, lieber einmal mit eigenen Augen sehen:
Ein Snippet ist eine Anzeige einer Website in den Suchergebnissen.
Je attraktiver das Snippet, desto höher ist seine Klickrate, was sofort einen doppelten Effekt hat:
- Mehr Klicks bedeuten mehr Verkehr auf der Website,
- Die Klickrate eines Snippets bezieht sich auf Verhaltensfaktoren. Je höher sie ist, desto einfacher ist es für eine Ressource, bei den erforderlichen Abfragen an die Spitze zu gelangen.
Der einzige Punkt, der mir nicht klar war, ist, dass es sich bei diesen Links um Brotkrümel handelt und nicht um etwas anderes. Stimmen Sie zu, die Seite eines beliebigen Blogartikels enthält weitere Links zur Kategorie und zur Hauptseite (oberes Menü, Kategorien in der Seitenleiste, Link zur Kategorie im Block mit Artikelmetadaten).
Kein Mensch, er kann sich die Seite nicht ansehen und verstehen – dieser Link stammt aus dem Menü, dieser stammt aus dem Text des Artikels und das ist ein Brotkrümel.
Ich musste durch Foren scrollen und viele Blogs lesen. In den meisten Fällen schreiben sie nur darüber, dass Crumbs benötigt werden, und sie verbessern die Benutzerfreundlichkeit und das Snippet. Anschließend schreiben sie Anweisungen zum Einrichten des Breadcrumb NavXT-Plugins (Breadcrumb bedeutet auf Englisch Breadcrumbs) oder stellen Implementierungscode ohne Plugin bereit – und das ist alles. Ich habe den Eindruck, dass die meisten Webmaster keine Ahnung haben, wie man mit diesem Element richtig umgeht, und es nur als Element der internen Seitenverlinkung wahrnehmen.
Die Ergebnisse von Google zeigen, dass nicht mehr als 10 % der Websites die richtigen Breadcrumbs in ihrem Arsenal haben, der Rest funktioniert auf altmodische Weise und zeigt die Seiten-URL im Snippet an.
Mikromarkierung von SemmelbröselnIch war nicht zu faul, ging in die Suche und analysierte, wie Breadcrumb auf verschiedenen Websites erstellt wurde und wie diese Websites in der Suche aussehen. Meine Theorie erwies sich als richtig:
- Es gibt Krümel auf der Website – kein Mikro-Markup – ein normales Snippet mit einer URL.
- Es gibt Krümel – es gibt Mikro-Markup – ein verbessertes Snippet.
Ich habe alles ausgegraben, was ich brauchte, und heute erzähle ich Ihnen von A bis Z etwas über Semmelbrösel. Technisch gesehen ist es nicht einmal die halbe Miete, sie auf die Website zu stellen – es sind 10 %. Das Hauptmerkmal, das echte Vorteile bringt, ist das Mikro-Markup.
Der Hauptvorteil liegt nicht in den Breadcrumbs, sondern in der korrekten Mikroauszeichnung für das Snippet.
Erst vor ein paar Monaten habe ich das Konzept der Mikromarkierung kennengelernt. Ich habe damals nicht viel verstanden, aber ich habe versucht, die Grundelemente für Artikel und Kommentare einzurichten. Einige Blogger schrieben, dass dies fast ein magischer Knopf sei, der Websites an die Spitze bringt (hauptsächlich Schüler der Bloggerschule von Alexander Borisov) – ich weiß nicht, warum sie sich so entschieden haben. Das kam mir zunächst zweifelhaft vor, aber jetzt kann ich mit Sicherheit sagen: In den zwei Monaten, in denen ich Mikro-Markup auf meiner Website hatte, habe ich keine nennenswerten Bewegungen in den Suchergebnissen für beworbene Suchanfragen bemerkt.
Bei der Markierung von Breadcrumbs sollte die Situation anders sein; wir werden nicht auf Bewegungen in den organischen Suchergebnissen warten, sondern wir werden mit dem rechnen, was ich oben gesagt habe – einer Verbesserung der Anklickbarkeit von Snippets und den entsprechenden Brötchen (Wachstum aufgrund von Verhaltensfaktoren).
Breadcrumbs auf WordPress ohne PluginWir sind also von Gesprächen über das „Warum und Wozu“ zu Gesprächen über die Frage übergegangen, „wie man es macht“. Ich habe das Breadcrumb NavXT-Plugin sofort verworfen, da es keinen Sinn macht, „Änderungen mit einer Datei zu erfordern“, und es selbst nicht weiß, wie man Mikro-Markups durchführt. Es gibt noch eine andere Option – das WordPress-SEO-Plugin SEO von Yoast, es kann auch Breadcrumbs machen, aber ich habe keine Lust, es zu ändern. Die einzige verbleibende Option ist die Verwendung eines Skripts oder einer Funktion.
Wenn Sie sich entscheiden, Breadcrumbs auf WordPress zu installieren, dann tun Sie es ohne Plugins – die Seite wird weniger belastet und es gibt mehr Möglichkeiten, den Code anzupassen.
Schritt 1. Funktion wp_zhilin_krohiDa ich gerade angefangen habe, die Grundlagen von PHP zu erlernen, begann ich, selbst eine Funktion zu erstellen, die Breadcrumbs in meinem Blog anzeigt. Intuitiv habe ich gesehen, dass es keine Probleme geben sollte, da alle Krümelelemente bereits in der Vorlage angezeigt werden. Sie müssen sie nur nehmen und die erforderlichen Links wie erwartet anordnen.
Mit Blick auf die Zukunft kann ich sagen, dass es mir gelungen ist, die kompakteste (leicht und schnell lesende) Funktion zu erstellen, die ich je auf anderen Websites gefunden habe.
Die erste Version des Codes stellte sich schnell heraus, aber einen Punkt habe ich nicht berücksichtigt – der Code sollte nicht nur Links zur Site anzeigen, sondern auch Mikro-Markup enthalten, aber es gab einen Hinterhalt damit – mein Code wiederholte sich Die Fehler vieler Webmaster: Aufgrund der Standardausgabeimplementierung funktionierte die Verteilung von Links zu Elementen zur Markup-Einbettung nicht.
Ich musste noch einmal von vorne beginnen und mich auf einfachere WordPress-PHP-Funktionen verlassen (aber ich habe etwas Neues gelernt). Das Ergebnis war die Funktion wp_zhilin_krohi (das erste Mal, dass ich eine Funktion mit meinem eigenen Namen benannt habe – schön), die Breadcrumbs auf Seiten mit Artikeln und auf Kategorieseiten anzeigt. Alle übergeordneten Kategorien (egal wie viele es gibt) werden automatisch berücksichtigt und jedes Element wird in Mikro-Markup eingeschlossen.
Bei Artikeln sehen die Krümel wie folgt aus:
Startseite > Übergeordnete Überschrift (falls vorhanden) > Kategorie > Artikel
Startseite > Übergeordnete Kategorie (falls vorhanden) > Kategorie >
Ich befürchte, dass der Titel des Artikels in Breadcrumbs dazu führt, dass die Seite mit Schlüsselwörtern zugemüllt wird. Ich habe diesbezüglich eine Anfrage an den technischen Support von Yandex gestellt. Als Antwort schrieben sie, dass es keine Sanktionen geben sollte, wenn dies nicht darauf abzielt, Suchmaschinen zu täuschen, aber sie werden berücksichtigt. Hier ist die Antwort:
Wenn Sie also der Meinung sind, dass unnötige Wiederholungen des Artikeltitels Sie stören, streichen Sie die Zeilen 17 bis 20.
Hier ist die Funktion selbst. Sie müssen sie vor der schließenden Datei zur Datei „functions.php“ Ihres Themes hinzufügen?> (Dies erfolgt direkt über das Admin-Panel, Sie benötigen nicht einmal einen FTP-Client):
/*** Crumbs mit Mikro-Markup ***/ function wp_zhilin_krohi() ( if (!is_home()) ( echo "Home" "; ) if (is_category() || is_single()) ( $cats = get_the_category() ; foreach ($cats as $cat) ( echo "term_id)." >" .$cat->name." " " ) ) if(is_single()) ( the_title(); ) );
Das Mikro-Markup wird sofort in den Funktionscode integriert und automatisch zusammen mit jedem Link angezeigt.
Schritt 2. Anzeige der Funktion auf SeitenDamit die von uns erstellte Linkkette auf den Seiten angezeigt wird, müssen Sie Ihre WordPress-Themedatei öffnen, die für den entsprechenden Seitentyp verantwortlich ist, und darin den Code einfügen, der die Funktion aufruft:
Sie benötigen mindestens eine Datei single.php (zeigt Beiträge an) – sie heißt fast immer gleich, und dann hängt es von der Vorlage ab, irgendwo werden Kategorieseiten über archive.php angezeigt, irgendwo über index.php – Sie finden die eine, die Sie brauchen.
In dieser Datei müssen Sie die Stelle finden, an der Sie die Krümel sehen möchten. Sie werden normalerweise oben auf der Website (vor dem Titel des Beitrags) als Navigationselement platziert. Suchen Sie nach diesem Codestück – php the_title, und fügen Sie die Ausgabe der Funktion davor ein (schauen Sie sich das Design an, wo es passt).
Breadcrumb wird nicht immer oben auf der Seite platziert; es gibt Ausnahmen. Nehmen wir an, Sie benötigen sie nur zur Anzeige eines Snippets, dann können Sie sie im Keller platzieren – Suchmaschinen sehen dort das Micro-Markup. Diese Option wurde im Blog von Sergei Sosnovsky implementiert – er hat oben einen separaten Block für Benutzer, der jedoch kein Mikro-Markup hat und in der Fußzeile werden Breadcrumbs mit Mikro-Markup angezeigt (ich verstehe allerdings nicht wirklich warum). ):
Das Erscheinungsbild jedes Seitenelements muss mit dem Design Ihrer Website harmonieren. Daher gibt es keine einheitliche Lösung für jeden Blog.
Das Gleiche habe ich bei meinen Ressourcen eingerichtet – ich habe die Schriftart der Breadcrumbs im Vergleich zum Hauptinhalt reduziert. Dazu habe ich nicht einmal separate Stile in der Datei style.css erstellt, sondern die Funktion in einen div-Container eingeschlossen und darin einen einzigen Parameter angegeben – die Schriftgröße (Sie haben es vielleicht im Screenshot oben bemerkt):
Alle anderen Breadcrumb-Merkmale werden von den Theme-Stilen übernommen. Um kleine Ergänzungen vorzunehmen (Schriftart, Textfarbe usw. ändern), geben Sie die erforderlichen Eigenschaften im selben Container an.
Wenn Sie das Design der angezeigten Linkkette radikal ändern möchten (einige Bilder oder Schaltflächen erstellen), weisen Sie ihnen beispielsweise eine spezielle Klasse wie diese zu. Erstellen Sie dann für diese Klasse einen separaten Block in style.css und geben Sie an alle notwendigen Parameter.
Hier kommen Ihnen Ihre Kenntnisse über CSS-Cascading-Stylesheets und Ihr Design-Gespür zugute (sofern Sie das Design selbst erstellen).
Überprüfung der Mikromarkierung von SemmelbröselnNachdem Sie alles erledigt haben, überprüfen Sie unbedingt die korrekte Funktion des Mikro-Markups in speziellen Validatoren von Yandex und Google. Man weiß ja nie, dass einige Fehler auftauchen:
webmaster.yandex.ru/microtest.xml Developers.google.com/structured-data/testing-tool/ (45 Stimmen, Durchschnitt: 4,7 von 5)Hallo zusammen, heute werden wir den Mindestsatz und Beispiele für die Implementierung von Micro-Markup von Breadcrumbs, Artikeln und Produkten für kommerzielle und Informationsseiten definieren. Die Technologie selbst ist nicht mehr neu, aber die Vielfalt ihrer Eigenschaften kann verwirrend sein. Deshalb werde ich in diesem Artikel versuchen, einige typische und bewährte Lösungen hervorzuheben, die sofort sicher implementiert werden können.
Das gesamte Thema Mikroformate kann nicht in einem Artikel behandelt werden, und daher werde ich, da es in anderen Materialien besprochen wird, darauf verweisen. Darüber hinaus können Sie jederzeit tiefer in die Materie eintauchen Google Micro Markup Builder.
Mikromarkierung von SemmelbröselnNun, das ist ein Klassiker des Genres, der auf jeder Seite vorhanden sein muss. Für eine Seite sieht es beispielsweise so aus:
//1. Ebene: Hauptseite
SEO-Blog Pingo
//Ebene 2: Kategorie
Für Anfänger
//Stufe 3: Abschlussmaterial
Arten von Suchanfragen
Was sehen wir also hier? Erstens ist jede Ebene der Breadcrumbs ein eigenes Element, eine Ebene, und nur deren Reihenfolge spielt hier eine Rolle. Zweitens ist jedes Element (außer dem letzten) dreimal verschachtelt:
Das letzte Element kann auch ein URL-Attribut haben, ist aber meiner Meinung nach nicht nötig – warum sollte die Seite im Breadcrumb auf sich selbst verweisen?
Attribute können in Verbindung mit beliebigen Tags verwendet werden – wichtig ist nur die Reihenfolge und Ebene der Verschachtelung. Zum Beispiel:
Für Anfänger
Die Einführung von Micro-Markup-Breadcrumbs auf der Website hilft Suchmaschinen dabei, „lesbare“ Breadcrumbs im Snippet anzuzeigen (was nicht schlecht ist) und auch einfach die Struktur der Website besser zu verstehen.
Artikel-MarkupDiese Art von Mikro-Markup ist für Artikel und andere Informationsmaterialien sowohl auf kommerziellen als auch auf regulären Websites gedacht. Die Seite, die Sie gerade lesen, hat beispielsweise den folgenden Aufbau:
//Den Elementnamen deklarieren
//Definition des Attributs „Veröffentlichungsdatum“.
Wettbewerbsfähigkeit von Suchanfragen
//Definieren des Attributs „Publikationsname“.
Inhalt des Artikels. //Definition des Attributs „Artikelinhalt“.
Arithmetische Mittelschätzung
Maximaler Bewertungswert
Mindestbewertungswert
Anzahl der Bewertungen
Hier ist alles wie bei Semmelbröseln, bis auf folgendes:
- Das Attribut „Datum der Veröffentlichung“ muss im ISO-8601-Format in der Form JJJJ-MM-TTTHH:MM angegeben werden, wobei T nur ein Zeichen ist, JJJJ das Jahr, MM der Monat, TT das Datum und HH die Stunde ist , und MM ist die Minute.
- Bei der Definition der Attribute „Publikationskategorie“ und „Publikationsname“ ist es überhaupt nicht beängstigend, dass der Link auch in den Wertebereich fällt – der Roboter ruft nur die Daten ab, die dem erwarteten Wert für das Attribut entsprechen.
Die Einführung von Artikel-Markup hilft dem Suchroboter, den Inhalt von Informationsmaterial besser zu verstehen und einzuordnen. Wenn die Informationen außerdem eindeutig sind, werden sie schließlich zur Google-Datenbank hinzugefügt.
Mikrogröße der Ware (Produkt oder Dienstleistung)Diese Art von Mikroformat ist für Seiten, die Waren und Dienstleistungen beschreiben, unverzichtbar:
//Element deklarieren
Rosa Elefant //Bestimmen Sie den Namen des Produkts oder der Dienstleistung
Schöner Elefant. //Definieren der Beschreibung des Produkts oder der Dienstleistung
//Deklarieren Sie den Subtyp „Angebot“
//Bestimmen Sie die Kosten des Produkts oder der Dienstleistung
//Geben Sie die Währung des Preises des Produkts oder der Dienstleistung an
Arithmetische Mittelschätzung
Maximaler Bewertungswert
Mindestbewertungswert
Anzahl der Bewertungen
Das Gleiche – der Suchroboter sieht sofort, was sich auf der Seite befindet und wo es sich befindet und warum es überhaupt benötigt wird. Das visuelle Ergebnis kann eine Steigerung der Attraktivität des Snippets in SERP sein.
Breadcrumbs (Breadcrumbs oder Breadcrumbs) sind ein Element der Website-Oberfläche, dessen Hauptzweck darin besteht, den Pfad von der Hauptseite dorthin anzugeben, wo sich der Benutzer gerade befindet. Dies geschieht natürlich in erster Linie, um den Aufenthalt des Benutzers auf der Website zu erleichtern und so das Verständnis der virtuellen Struktur zu erleichtern. Die Sorge um den Benutzerkomfort ist eine der geheimen Missionen, die Hunderte von Usability-Köpfen erfüllt: Jeder möchte die Benutzeroberfläche komfortabler gestalten, und Suchmaschinen bilden da keine Ausnahme. Lassen Sie uns über Breadcrumb-Mikro-Markup zur Visualisierung von Links in Google-Suchergebnissen sprechen.
Zur Verdeutlichung finden Sie hier visuelle Beispiele für die Ausgabe von Suchergebnissen ohne und mit Mikro-Markup:
1. Im ersten Eintrag wird der Link unter dem Titel wie gewohnt angezeigt und ist für den durchschnittlichen Benutzer in der Regel nicht vollständig lesbar.
2. Im zweiten Eintrag ist alles anders, der Link ist dort nicht sichtbar, aber es gibt dieselben Breadcrumbs, die die logische Struktur des Standorts des gefundenen Elements anzeigen. Die zweite Option sieht konstruktiver aus. Sehen wir uns an, wie Sie diese auf Ihrer Website platzieren.
Dieses Wunder wird durch die Verwendung von Mikrodaten im Breadcrumb erreicht. Stellen wir uns vor, wir haben diese Struktur auf der Website:
Startseite – Betriebssysteme – FreeBSD
Jedes Element hat seinen eigenen Pfad und ist in der Navigationskette als Link vorhanden. Außerdem ist der Link in ein Tag eingeschlossen, beispielsweise ein div. Die Tag-Attribute werden festgelegt:
Itemscope itemtype="http://data-vocabulary.org/Breadcrumb"
Sie erhalten einen Block für den Artikel:
...
Dieser Block enthält den Link und den Namen des Elements. Für einen Link ist das Attribut itemprop=“url“ gesetzt, der Titel ist außerdem in einem separaten Span-Tag eingeschlossen und das Attribut itemprop=“title“ ist gesetzt. Dadurch wird ein separates Element in der Kette wie folgt gebügelt:
