Webflow: SEO w Webflow cz. 1

0:00Część! Witaj w kolejnej lekcji, w której

0:01chciałbym porozmawiać o SEO i dać Ci kilka wskazówek w kontekście pracy z Webflow po to,

0:07aby Twoja strona skuteczniej pozycjonowała się w najbardziej

0:10popularnej na świecie wyszukiwarce, czyli w Google.

0:12Od razu mówię nie ma tutaj jakichś sekretnych składników do tego, nie będę

0:17pokazywał Ci jakichś optymalizacyjnych tipów, ponieważ zwyczajnie to nie działa.

0:22Na przestrzeni wielu lat, gdy Google działa, tak usprawniło swoje algorytmy, że

0:27naprawdę nie ma co próbować przechytrzyć tych mechanizmów.

0:31Raczej trzeba po prostu przyjąć taką

0:34strategię, że robimy stronę, która jest dla ludzi, a nie dla robotów i robimy ją w taki

0:38sposób, aby treści na tej stronie były jak najbardziej interesujące.

0:42Oczywiście nie znaczy to, że Google nie daje nam pewnych wytycznych, które

0:46pomogą lepiej przygotować stronę do indeksowania.

0:48I tak zaczniemy od pewnych ogólnych wskazówek.

0:51One już się zaczynają

0:53można powiedzieć w Nawigatorze, że jak przygotowujemy

0:55strukturę strony. Pamiętaj proszę, aby korzystać z odpowiednich elementów, czyli

0:59elementów takich, które definiują właściwą treść np.

1:02jak sekcja, wtedy kiedy tego potrzebujemy.

1:05Z elementów takich jak właściwe nagłówki,

1:08czy akapity, tekst bloki wtedy kiedy nie potrzebujemy dla tekstu nadać jakiegoś

1:12większego znaczenia. Wtedy kiedy tekst ma mieć jakieś znaczenie

1:15najczęściej będziemy stosowali nagłówki od H1 do H5.

1:19Powinniśmy też unikać stosowania wielozagnieżdżonych

1:21struktur. Przykładowo div blocków, których jest po prostu 10 div'ów

1:26jeden w drugim, bo to utrudni robotowi zaindeksowanie naszej witryny.

1:30No i właśnie chodzi o to, żeby stosować te rzeczy zgodnie z semantyką,

1:33czyli, jeżeli stosujemy div block on tak

1:35naprawdę nie jest w żadnym stopniu kontekstowy dla Google'a i powinien być

1:40zastosowany dla tych elementów, które zwyczajnie, po prostu mają służyć stylowaniu.

1:44Natomiast, jeżeli dokument ma jakiś element,

1:47który ma znaczenie semantyczne, powinniśmy zamiast tego zrobić np.

1:51sekcję, listę, czy wybrać jeden z tych elementów jak Article, Rich text.

1:57Więc tutaj ważne jest zastosowanie odpowiednich elementów.

2:01I ważne jest to, żeby nie były one jakoś mocno zagnieżdżone.

2:04Stosowanie właściwych klas nie jest aż tak

2:06istotne, więc te nazwy tutaj nie będą brane pod uwagę przez robota indeksującego.

2:12Natomiast na stronie powinniśmy zadbać

2:14przede wszystkim o to, żeby do przykładowo obrazków dodawać znaczniki

2:19alt, czyli dawać tutaj treść zamienną, która opisuje to co znajduje się na obrazku.

2:25Jeszcze roboty nie potrafią indeksować plików PNG, czy

2:28JPG, czy SVG, w związku z tym powinniśmy opisać co się znajduje w takim pliku.

2:32I powinniśmy również zadbać o to w

2:35kontekście Accessibility po to, żeby osoby, które np.

2:38korzystają ze Screen reader'ów miały szansę usłyszeć, zobaczyć to co jest na obrazku.

2:44Kolejno powinniśmy zadbać o strukturę nagłówków. W tym kontekście nasza strona

2:48wymaga trochę poprawek, ponieważ mamy kilka nagłówków H1, a powinien on na stronie

2:52raczej znaleźć tylko jeden. Nagłówków H2 odpowiednio powinno być więcej.

2:56Nie ma tutaj jakiejś dobrej liczby, bo

2:58zależy jak wygląda nasza strona, jeżeli to jest jeden długi Landing page to

3:02naturalnie tych nagłówków H2 może być dużo więcej.

3:05Natomiast, jeżeli mamy możliwość to

3:08starajmy się różnicować właśnie te nagłówki, czyli stosować np.

3:12od H1 do H3 zwłaszcza jeśli struktura strony jest trochę bardziej złożona i te rzeczy, które

3:18są zdecydowanie ważniejsze dawajmy w nagłówkach H2 i w nagłówku H1.

3:22Starajmy się też przygotować nagłówki tak, aby zawierały jakieś słowa kluczowe.

3:27Naturalnie tworzymy stronę dla ludzi, więc powinno to być czytelne.

3:30Nie chodzi tutaj o to, żeby robot po prostu miał jak najwięcej słów w nagłówku.

3:34Ale starajmy się, jeśli to jest tylko możliwe tak sformułować ten nagłówek, aby

3:39pojawiło się tam słowo, które teoretycznie użytkownik może wpisywać do wyszukiwarki.

3:44I to są takie ogólne wskazówki co do struktury, co do semantyki naszej strony.

3:49Czy powinniśmy mieć bardzo dużo tekstu na stronie naszpikowanego słowami kluczowymi?

3:53Google mówi, że nie. Nawet

3:55jest wiele przykładów stron, które

3:57nie mają prawie wcale tekstu, a dobrze się indeksują. W związku z tym

4:00raczej chodzi tutaj o trochę inne rzeczy.

4:02To na co mamy wpływ jeszcze,

4:04jeśli chodzi o nasze wewnętrzne pozycjonowanie, bo nie będziemy oczywiście

4:08mówić o pozycjonowaniu zewnętrznym, gdzie na przykład zdobywamy linki do naszej

4:11strony, czy w inny sposób budujemy reputację witryny.

4:15Mowa tutaj o tym, co możemy zrobić w Webflow. Przede wszystkim powinniśmy przejść do

4:20sekcji Pages, a następnie przejść do właściwości każdej ze stron.

4:23Ten mały trybik i przejrzeć sobie

4:25Ustawienia. W sekcji General mamy nazwę strony Page name.

4:30To jest tylko i wyłącznie ustawienie wewnętrzne Webflow,

4:32w związku z tym to co się pojawia tutaj,

4:34nie jest to istotne w kontekście pozycjonowania.

4:37Natomiast poniżej są bardzo ważne ustawienia SEO settings.

4:40I tutaj nawet Webflow generuje dla nas

4:42podgląd "Search results preview", czyli to jak będzie wyglądała nasza strona, która

4:47pojawi się jako wynik wyszukiwania w Google.

4:50Będziemy mieli tutaj "Title tag" na górze, później link i później "Meta description".

4:54W Title tag warto jest zawrzeć, to jest najważniejszy znacznik w kontekście pozycjonowania na naszej stronie,

5:00warto w nim zawrzeć jakieś słowa kluczowe.

5:03Oczywiście nie warto

5:04naszpikować go słowami kluczowymi. Znów

5:06optymalna długość to jest około 50, 60 znaków.

5:09Webflow sugeruje tutaj 55 znaków.

5:11I tutaj po prostu wpisujemy to, co znajduje

5:14się na stronie, a jeśli to możliwe używamy znów słowa kluczowego.

5:17Możemy tutaj wpisać np.

5:19nazwę naszej firmy, czyli Juice i znalazłem na szybko wpisując po prostu ASCI dot.

5:24Znalazłem na szybko jakąś stronę, z której mogę skopiować sobie taką kropkę i np.

5:28umieścić ją, żeby ten tytuł w wyszukiwarce wyglądał trochę ciekawiej.

5:31Możemy tutaj wpisać Software Services.

5:36I sprawić, żeby ten tytuł był trochę bardziej unikalny, trochę bardziej ciekawy,

5:40interesujący na przykład "For Busy Companies".

5:44Prawdopodobnie jest trochę dłuższy niż 55 znaków, ale chodzi mi o to, żeby też

5:48zbudować ten tytuł w taki sposób, żeby on dobrze wyglądał.

5:51Czyli po pierwsze ma kropkę.

5:53Po drugie zrobiłem jeszcze to kapitalikami oprócz słowa for, czyli

5:57łącznika i dzięki temu wygląda to na taki solidny tytuł.

6:01Musisz przyznać, że to w wyszukiwarce

6:04mogłoby rzeczywiście przyciągnąć uwagę użytkownika.

6:07Następnie Meta description też jest bardzo ważne.

6:10Tutaj Google mówi, że nie bierze pod uwagę

6:13słów kluczowych, które znajdują się w meta description, więc w zasadzie powinniśmy

6:16przygotować to w taki sposób, aby było to jak najbardziej zachęcające użytkownika do

6:21kliknięcia w nasz link. Jako długość meta description

6:23Webflow sugeruje od 155 do 300 znaków i

6:27mogę wkleić jakiś przykładowy opis, który stworzyłem.

6:30Użyłem tutaj też pewnych takich małych haków, to znaczy użyłem liczb, które

6:36fajnie przyciągają wzrok, przyciągają uwagę.

6:38Dodatkowo wstawiłem znak "&", też trochę lepiej to wygląda.

6:42Zrobiłem niektóre wyrazy kapitalikami

6:45i dodatkowo jeszcze na koniec wstawiłem frazę "interested?",

6:49Można by tu było wstawić np.

6:52Sprawdź teraz albo

6:53zobacz naszą stronę albo coś co w zasadzie nawołuje użytkownika do akcji.

6:57Jeżeli widzimy znak zapytania w pewien

6:59sposób jesteśmy zaciekawieni, możemy wtedy kliknąć, aby odkryć taki link.

7:05Więc wpisz tutaj coś, co za ciekawi Twojego użytkownika po to, aby był skłonny kliknąć

7:09w ten link, który wyświetli dla niego wyszukiwarka.

7:12Następnie mamy ustawienia Open Graph Settings.

7:14Nie są one kluczowe w kontekście

7:16pozycjonowania, w związku z tym przejdę do nich może troszeczkę później.

7:20Natomiast chcę też powiedzieć, że Site search settings to broń Boże nie są ustawienia w

7:25kontekście Google, bo niektóre osoby myślą, że jeżeli wybiorą tutaj polecenie "Exclude

7:29this page from search results" to ta strona w ogóle nie będzie indeksowana w Google.

7:33Oczywiście, że nie. Tu chodzi o naszą wewnętrzną wyszukiwarkę,

7:37którą stworzyliśmy, więc to ustawienie nie ma nic wspólnego z Google, a także możemy

7:42tę sekcję też pominąć, już ją wcześniej omawialiśmy.

7:45No i mamy jeszcze tutaj sekcję Custom code.

7:48W jakim kontekście może ona stać się dla nas przydatna dla SEO?

7:52W zasadzie istnieje jeszcze szereg różnych metatagów, które możemy dodać do naszej

7:56strony po to, aby lepiej opisać ją m.in. dla robotów indeksujących.

8:01Przykładowo możemy skorzystać z znaczników meta keyword i podać tutaj słowa kluczowe np.

8:08software np.

8:10AI services

8:12i po przecinku możemy podać szereg słów kluczowych.

8:15Co prawda Google twierdzi w zasadzie

8:18jednoznacznie, że te słowa kluczowe nie są raczej brane pod uwagę, ale w niektórych

8:23przypadkach, w przypadkach niektórych aplikacji, czy urządzeń, czy przeglądarek

8:27być może warto te dodatkowe

8:30tagi meta uzupełnić,

8:32jeżeli oczywiście tylko mamy na to czas.

8:34Zachęcam Cię do tego, żebyś sprawdził trochę

8:36więcej informacji o metatagach, które można dodać.

8:38Część zresztą z tych metatagów możesz sprawdzić w kodzie źródłowym, Webflow doda

8:42automatycznie do Twojej strony, a na stronach takich jak W3Schools

8:46możesz przeczytać o tym, jakie tagi mogą zostać dodatkowo użyte.

8:50Jeden z metatagów, który chciałbym

8:53szczególnie na niego zwrócić uwagę i go omówić, znajduje się w dokumentacji wyszukiwarki Google i

8:58jest to metatag "robots". On będzie nam szczególnie przydatny wtedy, kiedy będziemy

9:03chcieli niektóre strony w Webflow usunąć z indeksu wyszukiwania w Google.

9:08To jest bardzo częsta praktyka, często się tego używa po to, aby Google niepotrzebnie

9:13nie indeksował rozmaitych stron z naszego serwisu takich jak np.

9:16strona kontaktowa, polityka prywatności, strony poszczególnych użytkowników, ich

9:20profili itd. Bardzo dużo stron się wyindeksowuje i robi się to

9:25specjalnie często również po to, nie tylko żeby ukryć jakieś niepotrzebne, czy

9:29wrażliwe dane, ale też po to, aby nasza treść nie konkurowała ze sobą.

9:34Często jest tak, że mamy rozmaite strony,

9:36które w inny sposób przedstawiają kontent, który mamy w ramach naszej witryny i

9:41mogłyby po prostu ze sobą konkurować w wynikach wyszukiwania.

9:45Nie jest to dobra praktyka.

9:46Lepiej mieć jedną stronę dobrze

9:48przygotowaną i zoptymalizowaną pod Google, aniżeli po prostu zabiegać o to, aby

9:53wszystkie nasze strony ze sobą jakoś konkurowały o pozycję. Więc

9:56warto to uwzględnić w naszej strategii pozycjonowania, które strony chcemy

10:00wykluczyć z indeksu i robimy to właśnie z pomocą metatagu robots.

10:04Proponuję Ci przeczytać tutaj dokumentację,

10:06natomiast to jak stosujemy to, aby jakiejś strony nie indeksować to po prostu

10:12używamy znaczniki meta name robots i jako kontent podajemy np.

10:16"no index" wtedy

10:18nie będzie ta strona indeksowana, możemy po przecinku tutaj jeszcze np.

10:22dopisać "no follow", aby nie śledzić linków z

10:25tej strony do innych witryn i ich nie indeksować albo np.

10:29"follow", że można z tej strony, to jest

10:31wytyczna dla robota, który będzie śledził linki z tej strony

10:35i indeksował właśnie witrynę, do której ona linkuje.

10:38Więc mamy coś takiego jak " meta name="robots" content="noindex" "

10:41i wtedy ta nasza główna strona nie byłaby brana pod uwagę przy indeksowaniu.

10:46W zasadzie jest to wytyczna dla robota, a nie musi ona być koniecznie respektowana.

10:50Czasem może się okazać, że wejdziesz sobie do wyszukiwarki Google,

10:53wpiszesz takie polecenie "site" następnie

10:55dwukropek i możesz teraz wpisać nazwę strony np.

11:00codeless.how, żeby sprawdzić jak ona się indeksuje w wyszukiwarce.

11:05I tutaj możesz zobaczyć wszystkie zwrócone linki i czasem może się okazać, że ta

11:11strona, na której dałeś noindex jest tak, czy inaczej indeksowana.

11:15Czasem jest to błąd robota, czasem po prostu robot ignoruje taką wiadomość.

11:20Natomiast są to niezwykle rzadkie przypadki. Warto jednak wiedzieć jak

11:24sprawdzić w wyszukiwarce, które strony są indeksowane.

11:27Jeżeli chciałbyś sprawdzić jakąś konkretną

11:29stronę, to oczywiście też możesz to zrobić wpisując site, dwukropek i adres konkretnej strony,

11:34żeby zobaczyć, czy jest ona w indeksie jest respektowane to noindex, czy też nie.

11:38I to jest akurat bardzo dobre miejsce na

11:40to, żeby wstawić jako Custom code do konkretnej strony "meta name="robots" content="noindex"

11:44dlatego, że właśnie dotyczy on

11:46tylko strony Home. Natomiast przypominam też, mogę sobie zapisać, że możemy

11:51kod dla sekcji Head całej naszej witryny,

11:53nie tylko podstrony Home, ale wszystkich podstron, które tutaj mamy, definiować w

11:57ustawieniach projektu. Jeśli przejdziemy do Project settings

12:00znajdziemy tutaj kilka ważnych zakładek,

12:02ale te chciałbym już omówić w kolejnej lekcji, na którą serdecznie Cię zapraszam.