Nic tak nie robi dobrze indeksowaniu stron, jak wskazanie wyszukiwarce tych, które chcemy, aby zostały odnalezione przez użytkownika. REL Canonical pomoże także zabezpieczyć stronę przed duplikacją treści zarówno zewnętrzną, jak i wewnętrzną.
Czym jest REL Canonical?
REL = canonical, często nazywany „linkiem kanonicznym” (inne nazwy to tag rel canonical, canonical url tag, link canonical tag, canonical tag), jest elementem HTML, który pomaga webmasterom zapobiegać problemom z duplikacją treści. REL Canonical służy do określenia kanonicznego adresu URL oraz preferowanej wersji witryny (niezły tekst, sama nie wiem o co w nim chodzi :).
Dla przykładu mam domenę w obrębie, której są strony i mam tekst o pieczeniu szarlotki. Do tekstu o tym, jak przygotować ciasto można się dostać na kilka różnych sposobów:
Ten sam tekst przygotowany dla różnych urządzeń:
- https://example.com/szarlotka – strona na desktop
- https://m.example.com/szarlotka – strona na urządzenia mobilne
Mam dynamiczne adresy URL, do których dodawane są parametry wyszukiwania albo dodatkowe znaczniki identyfikacyjne:
- https://www.example.com/pieczenie?kategoria=ciasta&owoc=jablko
- https://example.com/ciasta/pieczenia?gclid=ABCD
- https://www.example.com/ciasta/pieczenie/szarlotka.html
System automatycznie zapisuje stronę w różnych sekcjach:
- https://example.com/pieczenie/szarlotka/
- https://example.com/nowe-ciasta/szarlotka/
Strona może się wyświetlać z www lub bez, albo/i z https oraz http:
- http://example.com/szarlotka
- https://example.com/szarlotka
- http://www.example.com/szarlotka
To tylko niektóre przykłady tego w jaki sposób treść może zostać uznana za zduplikowaną. Inną przyczyną może być kradzież przez scraperów. Jeśli, któraś z powyższych sytuacji wystąpi, a Ty nie użyjesz REL Canonical to Google sam zdecyduje, która wersja jest najważniejsza.
Proces kanonizacji = I ❤ GTM
Zanim zaczniemy ustawiać REL Canonical musimy się zastanowić, która wersja będzie dla nas najważniejsza i najkorzystniejsza. Wróćmy więc do przepisu na szarlotkę.
Mamy cudowny przepis na ciasto, wiemy, że sprowadzi on setki osób na stronę, w tysiącach domów za parę chwil będzie pachnieć świeżo pieczoną szarlotką, miliony osób będą nas sławić. Dlatego ważnym jest wybór URL, najlepszym będzie ten najprostszy, nie zwierający dodatkowych parametrów wyszukiwania i przekierowań, czyli https://example.com/szarlotka.
A teraz, żeby sława szarlotki się rozeszła w internecie logujemy się do GTM. Nie będziemy jednak generować pojedynczego REL Canonical, ale zrobimy od razu dynamiczny (jak wiadomo lenistwo jest matką wynalazków ;), należy jednak pamiętać o tym, że nie poprawimy tak rozwalonego CMS i architektury witryny, która duplikuje treści).
Zaczniemy od tworzenia zmiennych. W tym celu logujemy się do GTM i z menu po prawej stronie wybieramy zmienne, następnie zjeżdżamy na dół strony i wybieramy nowa.
Będziemy teraz tworzyć trzy zmienne, tj.: protokół (http lub https), nazwa hosta (nazwa domeny z www lub bez), page path (zmienna powodująca wyświetlenie konkretnej strony).
W celu utworzenia zmiennej protokół wybieramy Typ zmiennej: Adres URL i Typ elementu: Protokół.
Podobnie sytuacja będzie wyglądała w przypadku zmiennej Nazwa Hosta:
Natomiast zmienna Page Path jest wbudowana, aby ją uruchomić logujemy się do GTM, wybieramy Zmienną, klikamy na czerwony przycisk skonfiguruj i z menu po prawej stronie wybieramy Page Path. Et voilà!
Do leniwych świat należy – konfiguracja dynamicznego tagu canonical
Ostatnim, co robimy na etapie konfiguracji zmiennych jest stworzenie tagu canonical. W tym celu ponownie wybieramy zmienną i łączymy wszystkie wcześniej przygotowane zmienne w całość, tworząc imitację faktycznego URL.
Wstawianie tagu dynamicznego do strony
Mamy dwie możliwości wstawienia REL Canonical do strony:
- Z wykorzystaniem języka JavaScript dla stron, które nie mają w CMS ustawienia liników kanoniczych;
- Z wykorzystaniem kodu jQuery dla stron, które korzystają z ustawień linków kanonicznych przez CMS.
W pierwszym przypadku kod wygląda następująco:
<script>
var c = document.createElement(‚link’);
c.rel = ‚canonical’;
c.href = {{Tag Canonical}};
document.head.appendChild(c);
</script>
Natomiast z wykorzystaniem kodu jQuery tak:
<script>
$(function() {
$(‚link[rel=”canonical”]’).attr(„href”, {{Tag Canonical}});
});
</script>
Niezależnie, który wybierzemy nasz Tag powinien wyglądać tak:
Podsumowując REL Canonical pomaga wyszukiwarką trafiać na te strony, które są dla nas najważniejsze, ogranicza duplikację treści i poprawia stronę pod względem SEO. Same korzyści 🙂
Kolejny świetny artykuł. Czekam na kolejne praktyczne wykorzystania GTM w pracy Seowca 🙂
Pytanie mam dotyczące ostatniego screena. Tu mamy tag i regułę, a gdzie podpinamy tę zmienną?
Zmienna z ostatniego screena to Tag. Całość wdrożenia składa się z dwóch składników – tagów pierwszy ze zmiennymi a drugi zaciąga zmienne. Wygląda to tak, że tworzymy zmienne, które zmodyfikują URL – i to jest Tag Canonical. Następnie, aby działo się to zastępowanie dynamicznie to tworzymy tag – REL Canonical i tam na screenie jest fragment kodu z tymi zmiennymi, który ja nazwałam Tag Cannonical. Ja mam to ustawione na całą stronę. Gdybym chciała tylko na część to w regule wybrałabym zamiast all pages niektóre strony. Mam nadzieję, że to wyjaśniłam. W ogóle dzięki za to, że napisałeś ten komentarz te zdjęcia wyglądają szajsko, nic na nich nie widać 🙂
Dziękuję za pomoc!
Potestowałem trochę i dla Joomli! tag html powinien wyglądać następująco:
var c = document.createElement(‚link’);
c.rel = ‚canonical’;
c.href = {{Tag Canonical}};
document.head.appendChild(c);
Masz błędy w kodzie w swoim przykładzie – zamiast ‚ masz , 🙂
Powinno być tak:
var c = document.createElement(‚link’);
c.rel = ‚canonical’;
c.href = {{Tag Canonical}};
document.head.appendChild(c);
Przestawia Ci znaki 😉
Damian, jesteś mega 🙂 Super rozwiązanie. Bardzo Ci za nie dziękuję 🙂
Nie ma problemu 🙂 Kiedy następny artykuł?
Po dość długiej przerwie 😉 od dziś co tydzień
Cześć Natalio! Bardzo przydatna instrukcja krok po kroku. Wiele osób, na przykład optymalizujących Presta Shop, kupuje dodatki, a można to załatwić poprzez tego typu rozwiązania 🙂
Bardzo Ci dziękuję 🙂
Świetny artykuł, pozdrawiam.