So implementieren Sie SEO-Änderungen mit Google Tag Manager

So implementieren Sie SEO-Änderungen mit Google Tag Manager

Einführung

Während meiner Arbeit stieß ich oft auf Probleme bei der Implementierung von technischen SEO-Änderungen an Websites. Dies kann verschiedene Ursachen haben: Einige Sites verfügen über starre CMSs, die keine Anpassung ermöglichen, während andere Entwicklungswarteschlangen von vielen Monaten (oder Jahren, in manchen Fällen!) Haben.

In diesen Fällen spielt es keine Rolle, wie gut dein Job ist, um die Änderungen zu ermitteln, die zur Verbesserung der Leistung erforderlich sind. Wenn nichts implementiert werden kann, ist unser Rat wertlos. Etwas, das wir gerne sagen, ist: „Es ist nicht unsere Aufgabe, Berichte zu liefern, es ist unsere Aufgabe, Veränderungen zu bewirken.“ Um dies für Kunden mit den oben genannten Themen zur Realität zu machen, müssen alternative Wege erkundet werden von Änderungen vorgenommen bekommen.


Google Tag Manager

Eine Möglichkeit hierfür ist die Implementierung einer Art “Meta-CMS”. Hierbei handelt es sich um ein System, das sich auf einem vorhandenen CMS befindet und es Ihnen ermöglicht, bestimmte Änderungen an den Seiten einer Site vorzunehmen, wobei die technischen Einschränkungen eines CMS umgangen werden.

Für Standorte, für die ein Meta-CMS keine Option ist, besteht eine dritte Lösung darin, ein Tag-Verwaltungssystem zu verwenden (wenn eines installiert und konfiguriert ist). In diesem Artikel verweise ich auf den Google Tag Manager (GTM), den am häufigsten verwendeten Tag-Manager (der nach Angaben von BuiltWith.com 72,6% des Tag-Management-Marktes ausmacht ). Tag-Manager verwenden ein einzelnes JavaScript-Container-Tag, um verschiedene Tags (z. B. Tracking-, Remarketing- und CRO-Tags) in Webseiten einzufügen. Dies hat den Vorteil, dass ein Entwickler keine Änderungen an der Seite vornehmen muss, um Tags hinzuzufügen oder zu ändern. Änderungen an den Tags innerhalb eines Containers können vorgenommen werden. Diese Tags werden auf der Seite dann automatisch implementiert.

Tag-Manager werden meistens verwendet, um Standard-Tags wie Google Analytics oder Facebook-Tracking zu implementieren. Eine weniger bekannte Funktion ist die Implementierung benutzerdefinierter HTML-Snippets (die JavaScript-Code enthalten können). Auf diese Weise können Sie beliebige beliebige Änderungen am HTML-Code einer Seite (oder einer Gruppe von Seiten) basierend auf den von Ihnen definierten Regeln vornehmen. Die Verwendung von Tag-Managern hat den Vorteil, dass Sie mit einem einzigen Tag Änderungen an einer Site schnell skalieren können.

Dadurch können wir CMS-Einschränkungen und Entwicklungswarteschlangen umgehen und Änderungen direkt auf Seitentitel, kanonische Tags und On-Page-Inhalt anwenden.

Da Tag-Manager benutzt JavaScript zum Implementieren von Tags und dies hat sich in der Vergangenheit als verlässlicher Weg für SEO-Änderungen erwiesen. Früher gab es den Gedanken, dass Google (und andere Suchmaschinen) JavaScript in Bezug auf SEO-Änderungen nicht zuverlässig ausführen können, sodass Änderungen, die mit JavaScript vorgenommen wurden, wahrscheinlich ignoriert werden. In letzter Zeit haben wir jedoch Anzeichen dafür gesehen, dass Änderungen von Google aufgegriffen werden, einschließlich der Implementierung durch Tag-Manager. In diesem Artikel werden einige Beispiele dafür gezeigt, wie Sie diese Art von Änderungen auf Ihrer Website implementieren können.


Wie kann ich mit Google Tag Manager HTML-Änderungen vornehmen?

Die Art von Änderungen, an denen wir interessiert sind, umfasst das Hinzufügen neuer Elemente zu einer Seite, das Ändern des Inhalts oder der Attribute von Elementen oder das Entfernen von Elementen von einer Seite. Für jeden von diesen Schritten benötigen Sie möglicherweise Kenntnisse in Bezug auf:

  1. CSS-Selektoren und HTML, um zu wissen, von welchen Elementen auf der Seite Daten geändert werden sollen
  2. JavaScript (insbesondere jQuery *), um Elemente in die Seite einzufügen

Es gibt beispielsweise einfache Elemente, die Sie in eine Seite einfügen können, ohne dass etwas aus der Seite extrahiert werden muss (mit Ausnahme der Seiten-URL, die im Google Tag Manager eine eingebaute Variable ist). Auf der anderen Seite gibt es komplexere Änderungen, z. B. das Hinzufügen von strukturierten Produktdaten auf E-Commerce-Websites, bei denen Sie Daten von der Seite extrahieren müssen (z. B. Produktnamen, Preise usw.).

Wenn Sie nicht technisch versiert sind und nur Änderungen im Google Tag Manager (GTM) implementieren möchten, füge ich am Ende dieses Beitrags einen handelsüblichen GTM-Container mit Anweisungen dazu hinzu.

* Wenn Ihre Site jQuery geladen hat, ist es viel einfacher, Elemente zu extrahieren und auf eine Seite zu schreiben. Um dies zu überprüfen, können Sie die Konsole öffnen, während Sie die Seite in Chrome oder Firefox anzeigen, und “jQuery” (Groß- und Kleinschreibung beachten) eingeben . Wenn jQuery nicht geladen ist, wird eine Fehlermeldung angezeigt.

Element einfügen

Um ein Element in eine HTML-Seite einzufügen, können Sie in GTM ein benutzerdefiniertes HTML-Tag verwenden. Im Folgenden finden Sie ein Beispiel für ein benutzerdefiniertes HTML-Tag, das ein Noindex-Tag von Meta Robots in die Seite einfügt. In diesem Beispiel wird jQuery verwendet. Sie können dasselbe jedoch auch ohne jQuery ausführen.

<script>
// Entfernt alle vorhandenen Meta Robots-Tags
jQuery ('meta [name = "robots"]'). remove ();
// Ein leeres Meta-Element mit dem Namen 'Meta' erstellen
var meta = document.createElement ('meta');
// Füge der Meta ein Namensattribut hinzu mit dem Wert 'Robots'
meta.name = 'Roboter';
// füge dem Meta-Element ein Inhaltsattribut hinzu, mit dem Wert 'noindex, follow'
meta.content = 'noindex, follow';
// Fügen Sie dieses Meta-Element mithilfe von jQuery in den Kopf der Seite ein
jQuery ('head'). attach (Meta);
</ script>

Dieses Snippet fügt nach dem Löschen aller vorhandenen Meta-Robots-Elemente zu jeder Seite, auf die es angewendet wird, ein noindex, follow-Element für Meta-Robots hinzu. In GTM ist jedem Tag mindestens ein Auslöser zugeordnet, der dem Container mitteilt, wann das Tag angewendet werden soll. Für alle Änderungen, die Google zur Kenntnis nehmen soll, werden die Tags ausgelöst, sobald die Seite geladen wird. Wir können entscheiden, auf welchen Seiten das Tag geladen werden soll, indem Sie eine beliebige Variable verwenden, in welchen Seiten wir das Tag angeben möchten.

Das obige HTML-Tag kann geändert werden, um andere Elementtypen zu erstellen. Diese werden im nachstehenden Beispielabschnitt erläutert.


Extrahieren von Daten von der Seite

Es gibt zwei Ansätze, um Daten von einer Seite zu extrahieren. Sie können entweder die eingebauten Variablen von GTM verwenden, mit denen Sie den Text oder ein Attribut eines Elements basierend auf CSS-Selektoren extrahieren können, oder dies mit JavaScript und / oder jQuery innerhalb des benutzerdefinierten HTML-Tags tun.

Im Zusammenhang mit SEO-Änderungen besteht der häufigste Ort, an dem Sie Daten aus der Seite extrahieren möchten, in der Erstellung strukturierter Daten mit JSON-LD. Um die verschiedenen Methoden zu veranschaulichen, zeige ich eine Möglichkeit zum Erstellen von Produktmarkierungen, indem Elemente sowohl in GTM-Variablen als auch in einem benutzerdefinierten HTML-Tag extrahiert werden.

In diesem Beispiel können wir uns eine Site mit Produktseiten vorstellen, die Daten zu ihren Produkten haben, deren eindeutige IDs im HTML-Code der Seite angegeben sind. In der Realität müssen Sie CSS-Selektoren finden, die Ihnen genau die Elemente geben, nach denen Sie suchen. Ein hervorragendes Werkzeug dafür ist die Chrome-Erweiterung “Selector Gadget” , mit der Sie einen eindeutigen CSS-Selektor für jedes Element auf einer Seite finden können.

Stellen wir uns für unser Beispiel folgende IDs vor:

Element-IDZugeordnetes Schemaelement
productnameName
product_imgBild
price_valuePreis
price_currencypriceWährung
ratings_countreviewCount
avg_ratingratingValue

Verwenden von GTM-Variablen

Wenn Sie GTM-Variablen verwenden, um die Daten aus der Seite zu ziehen, müssen Sie für jedes der oben genannten Elemente eine Variable einrichten. Gehen Sie dazu zum Menü “Variablen” und klicken Sie auf “NEU” unter “Benutzerdefinierte Variablen”.

Definieren Sie für jedes der obigen Elemente eine neue Variable vom Typ “DOM-Element”. Verwenden Sie dazu eine ID oder einen CSS-Selektor, die für jedes Element geeignet sind. Für alle oben genannten Zwecke sollten Sie das Feld “Attributname” leer lassen, mit Ausnahme des Bildes, in dem Sie das Attribut ” src” extrahieren möchten .

Um diese Variablen in ein JSON-LD-Markup zu übernehmen, müssen Sie ein benutzerdefiniertes HTML-Tag einrichten, das auf sie verweist.

Beachten Sie, dass Sie, um auf eine GTM-Variable zu verweisen, diese in geschweifte Klammern einschließen müssen. Beachten Sie auch, dass wir auf “Seiten-URL” verwiesen haben, eine standardmäßig in GTM integrierte Variable. Die letzten vier Zeilen dieses Skripts machen das jsonData-Element zu einem Teil eines Skriptelements mit dem Typ “application / ld + json”, das in den Kopf der Seite eingefügt wird.

JQuery verwenden

Wir können dasselbe wie oben tun, ohne GTM-Variablen zu berühren, anstatt ein einzelnes HTML-Tag zu verwenden. In diesem Fall müssen Sie jQuery verwenden, um dieselbe Aufgabe wie die GTM-Variablen auszuführen.

Dieses HTML-Tag ist dem Tag mit Variablen sehr ähnlich, außer, dass anstelle der einzelnen Variablen mit jQuery Daten aus der Seite extrahiert werden. Natürlich ist dies nur für Seiten möglich, auf denen jQuery geladen ist. In JS sind jedoch gleichwertige Ausdrücke ohne jQuery möglich.

Der Vorteil dieser Methode besteht darin, dass Sie keine einzelnen Variablen für jedes Element einrichten müssen. Alle Informationen sind in diesem einen Tag enthalten. Wenn Sie jedoch auf Variablen verweisen, auf die von vielen verschiedenen Tags und / oder Auslösern verwiesen wird, ist es sinnvoll, Variablen zu verwenden. Wenn Sie also die Definition der Variablen ändern müssen, gilt dies für alle Tags und Auslöser ohne die Notwendigkeit, jeden einzelnen zu ändern.


Funktioniert es?

Dies ist alles sehr gut und gut, solange Google die Änderungen, die über GTM vorgenommen werden, tatsächlich sieht und indiziert. Wie bereits erwähnt, besteht Ungewissheit darüber, ob Google Markups und Inhalte, die durch JavaScript implementiert werden, indizieren kann (und sogar dann, ob Google respektiert). Ich habe drei Beispiele aus den letzten Monaten, in denen Änderungen durch Googel Tag Manager vorgenommen und von Google sofort respektiert wurden.

1. JSON-LD-Markup für strukturierte Daten

Mit dem obigen Beispiel, das sowohl die jQuery-Methode als auch die Variablenmethode verwendet, können wir Rich Snippets in Suchergebnissen sehen, bei denen vor der Anwendung von Google Tag Manager überhaupt keine strukturierten Daten auf der Seite vorhanden sind. Das folgende Snippet stammt von einer Dummy-Seite, auf die ein Produkt-Snippet angewendet wurde.

Bildschirmfoto 2017-05-04 um 19.33.22.png

2. Kanonische Tags

Es hat sich auch gezeigt, dass Google kanonischen Tags, die durch GTM implementiert wurden, Beachtung schenkt. Das folgende Diagramm (entnommen aus STAT) zeigt die Anzahl der Schlüsselwörter, für die eine Seite vor und nach einem kanonischen Tag mithilfe von GTM bewertet wurde. Nach der Implementierung wurde die Rangierung der Seite für alle Schlüsselwörter gestoppt, und das Ziel des kanonischen Tags begann an seiner Stelle.

3. Mobile Telefonzentrale

In diesem Beispiel verfügte eine Site über separate Desktop- und mobile Versionen in verschiedenen Subdomains. Mobile Switchboard-Tags wurden auf der Desktopseite mithilfe von GTM implementiert, und sofort wurden die Seiten der mobilen Subdomäne indiziert.

 


Einige Beispiele für Tags

Sie gelten nur für Websites, auf denen jQuery geladen ist. Führen Sie folgende Schritte aus, um die Tags zu implementieren:

Tag zum Einfügen von Mobile Switchboard-Tags

Wenn Sie über eine separate mobile Site mit derselben Seiten- und URL-Struktur verfügen, können mit diesem Tag Switch-Tags hinzugefügt werden, die “www” durch “m” in Domänennamen ersetzen. Mobile Seiten, die noch keine haben, werden mit einem kanonischen Tag versehen, das auf ihre direkten Desktop-Entsprechungen verweist.

Tag zum Hinzufügen des Noindex-Tags

Dies ist identisch mit dem oben erwähnten Tag. Seien Sie vorsichtig mit dem Auslöser, wenn Sie dies verwenden – Sie möchten nicht versehentlich jede Seite auf Ihrer Website indexieren! Mit diesem Tag werden alle vorhandenen Meta-Robots-Tags entfernt und ein Meta-Robots-Tag “noindex follow” geschrieben.

Ein möglicher Anwendungsfall dafür wäre, dass keine Produktseiten für nicht vorrätige Produkte erstellt werden. Sie können einen Auslöser verwenden, der in einem bestimmten Element auf der Seite einen Lagerbestand erkennt und automatisch ein noindex-Tag hinzufügt, wenn dies der Fall ist.

Tag, um kanonisch selbstreferenziell hinzuzufügen

Dadurch wird den Seiten ein kanonisches Tag hinzugefügt, das auf sich selbst verweist – oder, wenn die Seite URL-Parameter hat, auf eine parameterlose Version der Seite. Seien Sie vorsichtig, wenn Sie dies auf Seiten implementieren, die kanonisch für andere Seiten sind (einschließlich auf separaten mobilen Websites), da dadurch alle vorhandenen kanonischen Tags überschrieben werden. Stellen Sie außerdem sicher, dass Sie es nicht auf einer Seite implementieren, die über Parameter verfügt und nicht dazu gedacht ist, die Version der Seite ohne Parameter zu kanonisieren (z. B. paginierte Versionen von Seiten).

Tag zum Einfügen von Breadcrumb-strukturierten Daten

Dieses Tag durchläuft alle Breadcrumb-Elemente, die einen CSS-Selektor auf einer Seite gemeinsam nutzen, und schreibt sie in JSON-LD. Sie nimmt dann entweder die kanonische URL der aktuellen Seite oder die aktuelle URL, wenn keine kanonische vorhanden ist, und schreibt diese als letztes Breadcrumb-Element.

Tag zum Einfügen von strukturierten Produktdaten

Dies ist das jQuery-Beispiel, das oben erläutert wurde. Ersetzen Sie die IDs innerhalb der Selektoren der spezifischen Elemente, die Sie in die strukturierten Daten aufnehmen möchten.

Wenn Ihnen dieser Artikel gefallen hat, teilen Sie unseren Beitrag mit anderen oder besuchen Sie uns bei Facebook. Sie wollen noch mehr über das Thema Marketing, SEO und WordPress erfahren? Komme Sie in unsere interaktive Facebook Lerngruppe: SEO for Dummies – Seo einfach erklärt

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.