Google Tag Manager to potężne narzędzie, które najczęściej służy marketerom do implementowania kodów konwersji na stronie oraz do zaawansowanego konfigurowania konta Google Analytics. W tym artykule przedstawię, jak GTM można wykorzystać do celów SEO. Skupimy się w nim na czterech tagach.

  1. Dane strukturalne. Dzięki Google Tag Managerowi możemy jednym tagiem załatwić kwestię danych strukturalnych na każdej podstronie swojej strony, karty produktu w sklepie internetowym, itd.
  2. Mobile Speed Test. Google Tag Manager pomoże również w kwestii podniesienia szybkości strony i wyników jakości kodu w narzędziach takich jak Google Page Speed Insight.
  3. Rel. Canonical. Google Tag Manager przyda się również w dodaniu linka kanonicznego na stronie.
  4. Meta dane. Google Tag Manager pomoże również w generowaniu meta tagów takich jak meta description i meta title.

Poniżej przedstawiam, krok po kroku, w jaki sposób ustawić odpowiednie tagi SEO.

Dane strukturalne

1. Dodajemy tag Custom HTML. Wartości w podwójnych nawiasach, to zmienne, które dynamicznie podmieniają dane na podstronach. Dzięki tym zmiennym możemy dodać do GTM tylko jeden tag, który „ogarnie” nam kwestię danych strukturalnych na każdej podstronie.

<script>    
(function(){
        var jsonData = {
            "@context": "http://schema.org/",
        "@type": "LocalBusiness",
        "name": "{{Title}}",
        "image": " {{Image}} ",
        "priceRange": "PLN",
     "url": " {{Path}} ",
      "logo": " {{Logo}} ",
        "address": {
            "@type": "PostalAddress",
            "addressCountry": "PL",
            "addressLocality": "Miasto",
            "addressRegion": "Region",
              "streetAddress": "ulica 23/17",
            "postalCode": "00-000",
            "email": "[email protected]",
            "telephone": "+48 000 000 000",
            "mainEntityOfPage": " {{Path}} ",
        },
        "description": "{{Description}}",
  "telephone": "+48 000 000 000",
  "openingHours": "Mo,Tu,We,Th,Fr,Sat 07:00-20:00",
  "geo": {
    "@type": "GeoCoordinates",
    "latitude": "50.2958849",
    "longitude": "18.2249015"
 },          
  "sameAs" : [ 
    "https://www.facebook.com",
],
"hasMap": "https://www.google.com/maps/place/",
        "aggregateRating": {
            "@type": "AggregateRating",
            "ratingValue": "5",
            "reviewCount": "5",
            "description": "Opinia o firmie"
        } 
    };
        var el = document.createElement('script');
        el.type = 'application/ld+json';
        el.innerHTML = JSON.stringify(jsonData);
        document.head.appendChild(el);
    })();
</script>

2. Ustawiamy regułę „Wszystkie strony”

Google Tag Manager - reguła wszystkie strony

3. Zapisujemy tag
4. Sprawdzamy tag w narzędziu do testowania danych strukturalnych.

Oczywiście dane strukturalne w zależności od potrzeb możesz modyfikować w obiekcie jsonData. Przykład podany dotyczy zwykłej strony-wizytówki firmowej. Dla sklepu internetowego przydałyby się jeszcze dane uporządkowane dot. opinii, ilości gwiazdek, ceny, stanu magazynowego.

Mobile Speed Test

1. Dodajemy tag Custom HTML. Jest to krótki kod, który uczyni wszystkie Twoje skrypty na stronie asynchroniczne.

<script>
var script = document.querySelectorAll('script')
for (var i = 0; i < script.length; i++) {
script[i].async = true}
</script>

2. Ustawiamy regułę „Wszystkie strony”
3. Zapisujemy tag
4. Sprawdzamy wynik w narzędziu PageSpeed Insights

Tego typu tag podniesie prędkość ładowania strony i poprawi jakość kodu, ponieważ skrypty w oddzielnych plikach nie będą już dłużej blokować renderowania strony. Załatwi to nam słowo kluczowe „async” dodane do każdego skryptu JavaScript,

Tag Kanoniczny

1.Dodajemy tag Custom HTML

<script>
var linkCanonical = document.createElement('link');   
linkCanonical.rel = 'canonical';   
linkCanonical.href = location.href;   
Element.prototype.insertChildAtIndex = function(child, index) {    
if (!index) index = 0     
if (index >= this.children.length)  
{this.appendChild(child)} 
else { this.insertBefore(child, this.children[index])}}
var parent = document.head;   
parent.insertChildAtIndex(linkCanonical, 4); 
</script>

2. Ustawiamy regułę „Wszystkie strony”
3. Zapisujemy tag

W powyższym przykładzie dodatkowo została utworzona metoda dzięki której możesz pozycjonować link kanoniczny w sekcji head dokumentu HTML. Wystarczy, że zmienisz numer indeksu, a link kanoniczny zmieni swoją pozycję. Przetestuj i przekonaj się sam!

Meta Dane

1. Dodajemy tag Custom HTML

document.querySelector("head > title").remove();
var newTitle = document.createElement('title');
newTitle.text = 'To jest title strony';
document.querySelector("meta[name='Description']").remove();
var newDesc = document.createElement('meta');
newDesc.name = 'Description'
newDesc.content = 'To jest nowy description'
Element.prototype.insertChildAtIndex = function(child, index) {    
    if (!index) index = 0     
    if (index >= this.children.length) 
    {this.appendChild(child)} 
    else { this.insertBefore(child, this.children[index])}}
    var parent = document.head;   
    parent.insertChildAtIndex(newTitle, 1);
    parent.insertChildAtIndex(newDesc, 2); 

2. Ustawiamy regułę na której stronie tag ma się odpalać
3. Zapisujemy tag
4. Sprawdzamy wynik w konsoli

W tym przykładzie ustawiony jest statyczny meta tytuł i desc. Możesz jednak generować te dane dynamicznie. Popatrz na przykład z linkiem kanonicznym.

Podsumowanie

Tagi SEO, które tutaj zaprezentowałem przydadzą w szczególności przy optymalizacji SEO stron postawionych na popularnych frameworkach, które domyślnie nie są zoptymalizowane pod techniczne SEO. Dlatego jeśli nie znasz jeszcze Google Tag Managera – polecam się z nim zaprzyjaźnić. To naprawdę proste w obsłudze narzędzie. Znasz dobrze język Java Script? Wiedza z JS-a połączona z umiejętnością obsługi GTM, posłuży Ci na robienie niesamowitych rzeczy, nie tylko SEO.

Kategorie: SEO

6 Komentarzy

Paweł · 13 stycznia, 2020 o 2:46 pm

Kolejny raz słyszę dużo pozytywnych rzeczy o GTM, niestety sam z niego nie korzystałem, ale mam nadzieję, że niedługo to się zmieni. Dzięki za dobre i szczegółowe rady, na pewno je wykorzystam na samym początku przygody z tym narzędziem

Paweł · 26 lutego, 2020 o 2:21 pm

Bardzo fajny poradnik, ostatnio coraz więcej czytam o GTM. Warto jest podpinać to narzędzie do małej strony usługowej?

Łukasz · 27 kwietnia, 2020 o 1:04 pm

GTM jest mega przydatny nie tylko dla seo ale dla całej analityki internetowej. Ale też trzeba uważać, bo znam przypadki kiedy przez GTM lądowały w kodzie hakerskie skrypty.

Jacek · 13 maja, 2020 o 8:19 am

WOW! Dobre!

Paweł · 24 lipca, 2020 o 8:19 am

Najwięcej problemu miałem z danymi strukturalnymi, bardzo duzo tego jest na wprowadzenie na stronie, a w internecie nie ma wyczerpujących informacji co jak gdzie.

Łukasz · 11 września, 2020 o 9:00 am

Najbardziej zainteresowały mnie dane strukturalne. 🙂 zauważyłem ze na mojej stronie nie miałem ich w ogólę zastosowanych…

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *