Strony WWW bez Kodowania: Lepsze SEO

0:00Witaj w kolejnej lekcji.

0:00Przed nami krótkie informacje na temat ważnego tematu jakim jest SEO,

0:05a takiego tematu, który rzeczywiście wiele osób podnosi w kontekście Web Builder'ów,

0:08ponieważ nie są oni pewni, czy takie strony są dobrze zoptymalizowane pod

0:12kątem wyszukiwarek, robotów indeksujących, pod kątem Google.

0:16No i rzeczywiście panuje chyba takie jakieś niesłuszne przekonanie.

0:20Jest to absolutny mit, że te strony z Web Builder'ów nie nadają się w ogóle pod SEO.

0:25Nie wiem, co to znaczy, czy się nadają, nie nadają.

0:28Ponieważ obecnie SEO jest dosyć proste,

0:31algorytmy Google są na tyle zaawansowane, że tak naprawdę po prostu chodzi o to,

0:35żeby zrobić dobrą stronę i wtedy ona będzie dobrze rankować.

0:38Aczkolwiek trzeba trzymać się pewnych

0:40podstawowych zasad i te zasady są również w mojej ocenie w większości respektowane

0:46we wszystkich Web Builder'ach przynajmniej, które spotkałem.

0:48Nawet jeśli nie, to po eksporcie kodu

0:50można zadbać o to, aby trochę lepiej tę stronę pod SEO przygotować.

0:54Gwarantuję Ci, że te kilka minut, które poświęcę na

0:57omówienie tych najważniejszych rzeczy sprawi, że Twoja strona będzie i tak

1:01lepiej zoptymalizowana pod SEO niż chyba 90% Internetu.

1:05W związku z tym naprawdę to na początek zdecydowanie wystarczy.

1:09Pierwsza rzecz to tytuły oraz Description, a także inne meta tagi.

1:12Od razu robimy to na przykładzie Carrd.

1:14Przechodzimy w ustawienia publikowania.

1:16Wspominałem już o tytułach, tytule gdzie się go ustawia.

1:19To jest właśnie ten znacznik Title.

1:21On powinien być sensowny, powinien zawierać słowa kluczowe.

1:24Jeśli to jest możliwe, powinien być dobrze skonstruowany.

1:26Mamy to tutaj. Description to jest również ważna rzecz.

1:29Może nie tyle pod kątem słów kluczowych,

1:31co pod kątem opisu, który pojawi się w wyszukiwarce jako wynik i powinien on

1:36przekonywać osoby, które zobaczą ten wynik, że jest to wynik odpowiedni

1:39dla nich, też powinniśmy to bezwzględnie uzupełnić.

1:42Więc to mamy tutaj.

1:43Jeśli chodzi o inne meta tagi, to możemy

1:45je dodać w sekcji ustawień, czyli w Publish Settings i takie meta tagi to mogą być np.

1:51keywords i w zasadzie nie ma żadnych dowodów, a wręcz chyba Google mówi, że nie do końca

1:56to ma już jakikolwiek wpływ na pozycjonowanie, ale jak mówią ludzie z branży SEO w

2:00zasadzie nie zaszkodzi, więc można dodać meta tag keyword.

2:03Można dodać jeszcze kilka innych meta tagów jeśli będziemy potrzebowali.

2:06I ogólnie te meta tagi to są wszystkie te dane dodatkowe, które nie tyle są widoczne

2:11na stronie, co właśnie dają, czy to robotom czy przeglądarkom.

2:17Jakieś sugestie o tym jaka jest zawartość

2:19strony, co można na niej znaleźć, jaki jest jej język i tak dalej, i tak dalej.

2:23Więc te inne meta tagi są równie ważne i

2:25część z tych meta tagów to są OG tagi, które mam tutaj.

2:29I to są te OG tagi, które wypełniliśmy dla social media, te

2:33podstawowe, które przynajmniej warto wypełnić.

2:35To jest właśnie obrazek.

2:37No i tu mamy jeszcze dodatkowo favicon'kę i jeżeli będziesz chciał zrobić inny tytuł i

2:42Description dla social media też możesz to zrobić OG tagami.

2:45No ale to już musiałbyś zrobić po eksporcie takiej strony.

2:48Ale generalnie wszystkie te właśnie

2:50najważniejsze rzeczy są dostępne tutaj z poziomu Carrds.

2:53Następnie odpowiednie nagłówki oraz struktura strony.

2:56Żeby Twoja strona dobrze się indeksowała w

2:58wyszukiwarkach, powinieneś zadbać o to, jaka jest jej struktura.

3:02Czyli jeżeli dodajesz tekst to masz tutaj kilka opcji.

3:05Ja wybrałem wariant Main Heading na ten główny nagłówek.

3:08Możesz jeszcze zmienić to na pod nagłówek, czyli taki Heading H2.

3:13Później masz Paragraph, czyli zwykły znacznik akapitu i zwykły tekst.

3:17No i Site Title jeszcze dodatkowo.

3:20I to jest tak, że ta hierarchia jest ważna dla robotów

3:24indeksujących, które indeksują naszą stronę pod wyszukiwarki.

3:28Site Title będzie tu najważniejszym nagłówkiem.

3:30Później mamy Machine Heading, czyli

3:31kolejne typy nagłówków i Subheading, czyli pod nagłówki.

3:35I jeśli Twoje treści są odpowiednio ważne, jeśli rzeczywiście to są nagłówki, to po

3:39prostu oznacz je tym właściwym tagiem HTML, dzięki czemu dasz sygnał robotowi

3:45indeksującemu wyszukiwarki, żeby wziął je bardziej pod uwagę.

3:48No i naturalnie zadbaj proszę o to, żeby w

3:50tych nagłówkach wtedy mogły znaleźć jakieś słowa kluczowe, czyli to, co potencjalnie

3:54Twoi użytkownicy będą wpisywać w wyszukiwarce, żeby znaleźć Twoją stronę.

3:58Oczywiście nie wpisuje tutaj masy jakichś słów kluczowych.

4:01Stronę robisz dla ludzi, a nie dla

4:02robotów, ale to jest kolejna rzecz, o którą warto zadbać.

4:06Są takie argumenty podnoszone, że właśnie

4:08ta struktura w przypadku Web Builder'ów jest kiepska, bo te Web Builder'y robią tylko jakiś

4:13jeden typ tagów HTML'owych, czyli same Divy np.

4:16Absolutnie się z tym nie zgadzam.

4:17Te nowe Web Builder'y zdecydowanie dają taką kontrolę.

4:20No ale jasne, jak ktoś zapomni

4:22tego przestawić albo po prostu wybierze zły element, no to będzie miał zły.

4:27Także zadbaj o nagłówki i zadbaj o odpowiednią strukturę strony.

4:31Również o to, żeby ta strona nie była zbytnio skomplikowana.

4:34Jeżeli w jednym kontenerze wsadzasz drugi,

4:36a później w środku jeszcze 3, a później 5 kolumn, a później jeszcze 10 jakiś znaczników

4:40różnych, no to podobnie jak w normalnym życiu wiadomo, że temu robotowi trudniej

4:45będzie po tym chodzić i ta struktura będzie trudniejsza do zrozumienia.

4:48Aczkolwiek akurat wydaje mi się, że w przypadku Web Builder'ów to po prostu one

4:52automatycznie chronią nas przed takim skomplikowaniem i dużo łatwiej jest

4:56skomplikować strukturę robiąc stronę z palca.

4:59A w momencie kiedy wyklikujemy

5:00coś z Web Builder'a.

5:01Tak naprawdę nawet nie mamy możliwości tego popsuć.

5:04Następnie zadbaj o linkowanie wewnętrzne oraz anchor.

5:08Już Ci tłumaczę czym to jest.

5:09Jeżeli mamy taki prosty Web Builder jak tutaj, tzn.

5:13że z reguły tworzymy tutaj strony typu

5:15one page, no to nie mamy problemu z linkami, z nazwami.

5:20Aczkolwiek gdybyśmy mieli tutaj kolejne

5:22podstrony, to warto by było, żeby te podstrony miały jakieś sensowne nazwy.

5:27Żeby strona Dziękuję

5:29nazywała się dziękuję albo Thank you a nie nazywała się nie wiem site 0789.HTML,

5:35bo to jak wygląda pasek adresu w przeglądarce też jest bardzo ważne dla

5:39robotów, ale w przypadku akurat tej naszej strony pamiętaj proszę o tym, żeby zadbać

5:44właśnie o dobre te anchor'y i dobre wewnętrzne linkowanie

5:48przez to, że tutaj możemy wpisać tą nazwę, ona pojawia się w pasku

5:52adresu przeglądarki po hashu, czyli mamy np.

5:55Slack.eduweb.pl# thank you section.

5:58W momencie gdy klikniemy na guzik, który nas do tego przekierowuje.

6:01Więc to jest właśnie to miejsce, które

6:03pozwoli Ci zrobić ten dobry, ten dobry link i żeby ten link w pasku adresu

6:08wyglądał sensowny, powinieneś używać tutaj dobrych nazw sensownych nazw.

6:13Druga sprawa to anchor'y.

6:15Czyli przykładowo jeśli mamy jakikolwiek

6:17link tutaj to zobacz, że no ten link odnosi się do jakiejś nieistniejącej strony.

6:22Natomiast tzw.

6:23anchor text to jest to co występuje tutaj, czyli to jest to co widać dla użytkownika,

6:28a pod spodem jest to podlinkowane tak jak nasz status.

6:31Więc to jest właśnie anchor text i ten anchor text powinien być sensowny.

6:35Nie powinno tu raczej się znaleźć właśnie to samo, czyli raczej nie róbmy tak, że

6:41adres wstawiamy i pod link i tutaj na wierzchu lepiej jest dać sensowny

6:45anchor tag tzw., czyli opis tego linku.

6:48I w tym opisie też fajnie jakby się znalazło jakieś słowo kluczowe.

6:52I mówię tutaj o linkowaniu wewnętrznym

6:54również do naszej strony, czyli o linkowaniu do tych różnych sekcji.

6:57No wiadomo, że jeżeli linkujemy do jakiejś zewnętrznej strony,

7:00to nie będzie miało takiego dużego wpływu na pozycjonowanie naszej witryny co tutaj

7:04damy w anchor tagu, ale często linkujemy np.

7:07wewnętrznie z pomocą menu i wtedy w menu zamiast nazywać jakieś sekcji o nas, to

7:13lepiej ją nazwać o Slack'u, dlatego, że wtedy będziemy mieli w środku słowo

7:18kluczowe, którego ludzie mogą szukać w wyszukiwarce.

7:21Na o nas raczej nikt w wyszukiwarce nie szuka, więc warto zadbać o te anchor tagi.

7:26To jest jedna z niezwykle istotnych rzeczy.

7:29No i samo linkowanie wewnętrzne.

7:32Czyli chodzi o te wszystkie linki u nas w

7:33menu, linki do podstron i linki, które pojawiają się w adresie, nawet jeśli są to

7:39właśnie te kotwice, czyli te linki z haszem.

7:43Następnie Alt tagi dla obrazków znów bardzo ważna, kluczowa rzecz.

7:46Czyli jeśli korzystamy z jakiegoś obrazka,

7:49to mamy możliwość zawsze nadania mu takiego alternatywnego tekstu.

7:54On jest opcjonalny, ale proszę zawsze go używaj, np.

7:57możemy wpisać tutaj, że to jest Slack logo.

7:59Oczywiście nie używaj tutaj jakichś

8:01tysięcy słów kluczowych, bo od razu Google wyrzuci Cię z indeksu, ale

8:05użyj tutaj właśnie dobrego opisu tego, co znajduje się na zdjęciu.

8:09Jedna rzecz to są roboty indeksujące, ale druga rzecz to jest accessibility i osoby,

8:14które korzystają ze screen riderów, które są niedowidzące i one nie będą w stanie w

8:18ogóle połapać się na Twojej stronie w momencie, gdy nie napiszesz dobrze tych

8:21Alt tekstów, więc poświęć na to chwilę czasu.

8:25Jak widzisz Carrd jak i również każdy

8:27przyzwoity Web Builder to oferuje i pozwala Ci wpisać właśnie te Alt tagi,

8:31Alt teksty do wszystkich obrazków powinny

8:34one się znaleźć, nawet jeżeli to jest jakiś taki prosty obrazek.

8:37A jeżeli to jest obrazek, do którego nie

8:39masz pomysłu jak zrobić taki Alt tag, to raczej nie powinien być to obrazek.

8:44powinno być to raczej tło osadzone w CSS, ale o tym może jeszcze porozmawiamy.

8:48Natomiast pamiętaj, że Alt tagi trzeba robić i są one dostępne również w Carrd.

8:53Sensowne nazwy stron.

8:55No to już jest to co powiedziałem.

8:57Żeby ten pasek adresu miał wyglądał

9:00dobrze, żeby zawierał słowa kluczowe, żeby nie był przesadnie długi.

9:02Raczej krótsze adresy są dobre.

9:05A kolejna, już przedostatnia rzecz, o której chcę powiedzieć to tzw.

9:07Sitemapa, czyli mapa witryny wygenerowana

9:10przez jakieś narzędzie albo stworzona przez nas.

9:12I z mojego doświadczenia wynika, że zdecydowana większość stron takiej Sitemapy w

9:16ogóle nie ma i w związku z tym korzystając z Web Builder'ów takich jak Carrd masz od razu

9:21przewagę konkurencyjną w kontekście pozycjonowania.

9:24Dlaczego? Dlatego, że Carrd i przy okazji z

9:26poprzedniej lekcji zobacz, że już mi działa domena slack.eduweb.pl

9:30na tej subdomenie już jest moja strona wyświetlana.

9:33Co prawda nie ma jeszcze certyfikatu SSL

9:35podpiętego, ale kolejna zaleta Carrd jest taka, że ten certyfikat SSL

9:40jest generowany przez Let's Encrypt taką darmową usługę, który zaraz zacznie

9:44działać, on w ciągu jednej doby zaczyna działać na takich domenach

9:47podpiętych do Carrd i jest kompletnie darmowy.

9:50To znaczy, że nie będziesz musiał dopłacić za certyfikat SSL, a w momencie gdy hostujesz

9:55to u siebie raczej ten certyfikat SSL jest płatny.

9:59Zawsze te kilka dolarów kosztuję,

10:00a polscy operatorzy to już w ogóle nie wiedzą ile za niego brać.

10:03I uważam, że to jest skandal.

10:04No ale dobra, przejdźmy na slack.eduweb.pl/sidemap.xml

10:11to właśnie w takim formacie XML jest ta Sitemapa.

10:14I okazuje się, że Carrd generuje ją nam od ręki.

10:17No więc, pokaż mi proszę narzędzie, które Ci wygeneruje to od ręki np.

10:21jeżeli piszesz stronę z palca, raczej tak nie jest.

10:23Raczej trzeba właśnie zawsze zadbać o to, żeby tą Sitemapę utrzymywać, napisać do niej

10:27jakieś oprogramowanie, które ją utrzymuje, a tutaj mamy to gotowe.

10:31Także Sitemapy są akurat przez Carrd generowane.

10:34Jest to ważna rzecz, o którą warto zadbać.

10:37A Sitemapa zawiera nic innego jak po prostu listę rzeczy, które znajdują się u nas na

10:41stronie, listę linków, listę zasobów i to jest znacznie łatwiejsze

10:45później dla robota, do skakania po tych

10:47linkach właśnie i indeksowania naszej witryny.

10:51Później OG tagi dla social media.

10:53Już o tym mówiłem, więc ostatnia rzecz, czyli optymalizacja zasobów.

10:57Pokazywałem Ci jedno z narzędzi, czyli Image optim, którym ja przelatuje

11:01wszystkie obrazki przed zaimportowaniem ich gdziekolwiek do sieci.

11:04Proszę, pamiętaj o tym, żeby takie obrazki po prostu zmniejszać.

11:07Jeżeli masz kontener 600 na 300 pikseli na

11:10obrazek, to nie ma naprawdę sensu pakować tam obrazka w rozdzielczości 4K albo

11:15150 megapikseli, bo będzie on zdecydowanie za duży.

11:18W związku z tym staraj się z pomocą prostych narzędzi, takich jak np.

11:22Figma, Sketch, Canva nawet czy Photoshop,

11:26zmniejszać te obrazki i przycinać je do odpowiednich rozmiarów.

11:29A nawet jeśli nie, to przynajmniej do

11:31mniej więcej takich rozmiarów, jakie powinny mieć, a następnie optymalizować je

11:35z pomocą jakiegoś narzędzia takiego jak Image optim albo np.

11:40TinyIMG

11:41natomiast uwaga znów kolejna ogromna

11:44zaleta Carrd w ten Web Builder jest wbudowany automatyczny taki kompresor obrazków.

11:49Ja wolę szczerze mówiąc

11:51samodzielnie kompresować te obrazki, bo wtedy mam na to wpływ.

11:54Jak finalnie one wyglądają.

11:55Jeżeli byś wrzucił naprawdę jakiś bardzo

11:57dużo obrazek do Carrd typu dwumegowy, to on potrafi Ci dwumegowy obrazek

12:01skompresować do ok. nie wiem 200, 300, 400 KB maksymalnie.

12:06No i rzeczywiście odbywa się to kosztem

12:08jakości, no ale po to, żeby nasza strona była szybsza, ponieważ strony szybsze

12:12zdecydowanie lepiej indeksuje się w wyszukiwarkach.

12:15No i warto zadbać, jeżeli się potrafi te

12:18obrazki przeskalować samemu o to, żeby to zrobić samemu i poświęcić na to chwilę

12:22czasu nawet z pomocą Image optim, które jest bardzo proste w obsłudze.

12:25Natomiast jeśli nie, no to zobacz, że w przypadku Web Builder'ów też mamy tę zaletę, że

12:30one zrobią to za nas w przypadku pisania stron z palca.

12:33Niestety nie.

12:34Co więcej, jeśli chodzi o dostarczanie tych zasobów, to Web Bulider'y często też

12:39mają przewagę, ponieważ przeciwieństwie do jakiegoś naszego zwykłego hostingu, one

12:42często korzystają z hostingu, który jest rozrzucone po całym świecie, obsługują

12:46serwery CDN, obsługują cash'owanie, czyli właśnie nagłówki.

12:51Pokazywałem to już wcześniej w Carrds.

12:53Ustawiane odpowiednio nagłówki potrafią znacznie przyspieszyć naszą stronę.

12:56W sekcji publikacji znajduje się w opcjach tutaj informacja o tym Update Frequency

13:01to jest właśnie to miejsce, w którym powinieneś to ustawić

13:04i ta opcja znacznie przyspieszy ładowanie Twojej strony.

13:07Nie mówiąc już o tym, że Web Builder'y takie jak np.

13:09Carrd mają też wbudowane w przypadku

13:11obrazków nie tylko optymalizację tych obrazków.

13:13Tutaj właśnie możesz zaznaczyć czy odznaczyć tą opcję, aby nie kompresowało

13:16Ci obrazków. Możesz też to zrobić, ale też implementuje

13:19akurat Carrd takie coś jak lazy loading czyli ładowanie takie obrazka sekwencyjne.

13:26Widziałeś to pewnie jak pierwszy raz odświeżaliśmy sobię tą stronę, gdzie cały

13:30obrazek w tle nie wczytał się od razu tylko ładował się po kolei.

13:33I to też znacznie przyspiesza ładowanie.

13:36I jeszcze inne rzeczy np.

13:39responsywność tej strony, czyli to, że out of the box.

13:42Te strony, które tworzymy są responsywne, czyli dobrze wyglądają na każdej

13:46rozdzielczości, w zasadzie na każdym urządzeniu.

13:48To jest ogromnie ważne.

13:49Ja o tym nie mówię przypadkowo, dlatego że zarówno prędkość, jak i responsywność

13:54strony są jednymi z głównych czynników, które Google bierze pod uwagę przy

13:58ustalaniu rankingów w wynikach wyszukiwania.

14:01Naprawdę to są kluczowe rzeczy i jeżeli ktoś jeszcze ma wątpliwości, czy Web Builder'y

14:06są dobre pod SEO, czy są kiepskie pod SEO, to proszę pokażcie mi albo sprawdźcie

14:10sobie te strony, które ludzie kodują z palca i zobaczcie ile z nich ma

14:14zimplementowane te wszystkie mechanizmy czyli dobre cash'owanie, optymalizacja

14:17plików, lazy loading, RWD, CDN'y, które dostarczają zawartość.

14:23No i wszystkie rzeczy macie na

14:24wyciągnięcie ręki, czyli Alt teksty i wszystkie jakieś inne rzeczy.

14:27Więc naprawdę to jest podejście quality first.

14:30W przypadku Carrd

14:32czapki z głów, ponieważ wszystko to co powinno być jest zrobione i obiecuję Wam,

14:36że pod SEO ten Web Builder naprawdę jest bardzo dobry.

14:40To wszystko w tej lekcji. Do usłyszenia!