Webflow: Wyszukiwarka w Webflow

0:00Część! W tej lekcji chciałbym pokazać Ci jak

0:02możesz zainstalować i skonfigurować na stronie wyszukiwarkę w Webflow.

0:05Webflow posiada gotowy komponent, który oszczędzi Ci masę pracy z implementacją

0:10wyszukiwania, a co więcej korzysta z darmowego open source'owego mechanizmu

0:15Elastic search, który jest obecnie najlepszy na rynku, który pozwala na

0:19znajdowanie nawet skomplikowanych fraz, pomijanie literówek i masę innych rzeczy,

0:24o których możesz oczywiście doczytać, ale ja tymczasem zabieram się do pracy i po

0:27prostu przechodzę do miejsca, w którym chciałbym umieścić wyszukiwarkę. Będzie to

0:32Blog Menu czyli ten Navigation bar, który mamy na górze.

0:35Tutaj znajduje się sekcja Menu, mamy Brand i Nav menu 2. Chciałbym do tej sekcji

0:40Menu dodać kolejny element i to będzie element, który znajduje się w komponentach,

0:44jest to komponent wyszukiwania, czyli

0:47wybieramy Search i wrzucamy Search'a do naszego Menu.

0:51Teraz mamy dwie opcje: możemy przejść do ostylowania strony wyników wyszukiwania

0:56albo pokazać po prostu ustawienia tego komponentu Search.

0:59My najpierw zajmiemy się jego dostylowaniem, przejdziemy do stylów, ale najpierw może

1:03jeszcze przesuniemy to w kolejności tutaj, abyśmy mogli wypozycjonować to obok logo.

1:08Teraz jeszcze przejdźmy do, zobacz, że mamy tutaj Search, później Search input i Search

1:13button, więc na Search możemy wrzucić od razu Flex box'a i wyrównać te elementy.

1:18Widzę, że tutaj jeszcze jest prawdopodobnie jakiś dodatkowy margines, czy Padding to

1:22właśnie mamy ten Search input, w którym musimy zresetować Padding, on automatycznie

1:27dostał klasę Search input i możemy na razie taką zostawić i Search button

1:31nie ma żadnych marginesów, ale ma nałożony jakiś Padding, my ten Padding sobie

1:35zresetujemy z altem i z shiftem zrobimy tutaj Padding rzędu sześciu pikseli.

1:40Tak powinno być OK, ponieważ chciałbym

1:42żeby cały ten Search, zresztą cały chyba jest w jakiś sposób też odsunięty, no

1:46właśnie cały ten komponent Search też musimy wybrać zero tutaj, jeśli chodzi o

1:50margines, teraz jest dobrze ustawiony i wszystko wygląda w porządku,

1:53a my możemy zrobić taki delikatny komponent Search to znaczy dla samego input'a.

1:58Przejdę do Borders i ustawię dla niego

2:02brak obramowania, czyli zmienimy te style i wybierzmy X.

2:05To będzie brak obramowania, a dodatkowo zrobimy sobie tylko obramowanie na dole,

2:09gdzie będziemy mieli kolor jasnoszary, a może weźmy ten trochę ciemniejszy szary.

2:14Zaraz pokażę Ci jak będziemy mogli dzięki temu zrobić fajny stan Hover.

2:18Jeszcze raz upewnię się, że jest on ustawiony OK na dole i to samo zrobimy na

2:23guziku Search, czyli przejdę na guzik Search, tutaj kolor wybiorę na przezroczysty,

2:28jeśli chodzi o wypełnienie i zrobimy sobie też styl jeden piksel kolor ten

2:33ciemniejszy szary nasz Dark Gray na dole. Teraz będziemy jeszcze musieli zadbać o

2:39jakiś przycisk albo tekst tutaj. Proponuję, żeby osadzić tutaj Font.

2:44Możemy zrobić to z pomocą biblioteki Font Awesome.

2:46W kursie podstawowym pokazywałem Ci jak to zrobić. W Project settings

2:50należałoby zainstalować taki Font.

2:52Przechodzę do sekcji Fonts.

2:53Font Awesome mam już pobrane i zainstalowane na naszej stronie.

2:58Jeżeli chciałbyś to zrobić, bo jeszcze tego

3:00nie masz, to po prostu możesz kliknąć polecenie Upload i pobrane fonty.

3:04Ja akurat w formacie ttf je pobrałem sobie. Font Awesome

3:07możesz w tym momencie zainstalować, jeśli

3:09będziesz je miał zainstalowane to możesz korzystać

3:11z FA 400, FA brands, FA solid, ja akurat te zainstalowałem.

3:14Więc przejdźmy do Designera.

3:17Teraz przejdźmy na stronę Font Awesome.

3:19Znajdźmy tutaj Search.

3:21I ta ikonka jest całkiem spoko. Możemy

3:24ją kliknąć, a następnie pobrać jej unicode glif, czyli klikamy tutaj.

3:30W naszej stronie przejdźmy na stronę bloga.

3:33W zasadzie dowolną, która zawiera Header.

3:36I tutaj wystarczy, że wkleimy ten glif

3:40i ustawimy oczywiście front na Fa, wyszukajmy, jest to Fa solid 900 może być.

3:47I jeszcze musimy oczywiście zmienić kolor

3:50tego fonta. Zróbmy kolor granatowy i lupka się nam ładnie pokazuje.

3:55Możemy naturalnie teraz z pomocą Size zmienić rozmiar tej lupki.

4:00W ten sposób i w sumie może nawet skorzystajmy z koloru tego ciemnoszarego też dla lupki,

4:06w ten sposób nasz komponent będzie spójny.

4:08Dla całego komponentu Search możemy dodatkowo jakoś ustawić.

4:11Ja już nie będę tutaj jakoś

4:13szczególnie bawił się w pozycjonowanie i też dostosowywał to do różnych rozdzielczości,

4:18to już możesz zrobić sam, natomiast taki prosty komponent Search

4:21w ten sposób będzie wyglądał i chciałbym

4:23dla niego ustawić stan Hover, czyli w tym stanie domyślnym

4:28chciałbym, żeby cały ten komponent miał

4:30Opacity ustawione na na przykład około 40 proc.

4:35. Ważne, żeby było to w miarę czytelne, ale

4:37chodzi mi o taki efekt, że jak ktoś najedzie Hover to wtedy Opacity zwiększymy do

4:43100 procent. Kiedy wrócę teraz do stanu Non i podajrzę sobie stronę,

4:46będzie to wyglądało tak, a w momencie, gdy najadę, ten komponent Search staje się aktywny i

4:51oczywiście nasz input działa, a następnie możemy kliknąć w ikonę wyszukiwarki, jeżeli

4:55klikniemy w ikonę wyszukiwarki mam informację o tym, że muszę najpierw

4:59opublikować stronę, żeby zobaczyć jak to działa.

5:01Oczywiście my zrobiliśmy prosty stan Hover można by było przejść do interakcji i

5:05dodać tutaj nowy trigger na ten Search input po prostu

5:09po najechaniu możnaby było go powiększać, Initial state zadeklarować sobie

5:13jako takie krótkie pole Input i później go z pomocą właściwości Size powiększyć

5:17odpowiednio i wtedy mielibyśmy fajną animację rozszerzania się po najechaniu,

5:21ale to już robiliśmy w kursie podstawowym, więc na razie zostawię tak jak jest.

5:24Zależy mi na tym, żeby pokazać Ci konfigurację tego wyszukiwania.

5:28Sam ten komponent Search tutaj nie ma zbyt wielu ustawień, ale możemy przejść do Search results

5:32Page. I to jest nowa strona, którą stworzył dla nas Webflow.

5:35Może przejdę do stron i teraz pokażę Ci, gdzie ona jest. W Utility pages

5:39znajdziesz Search results. To jest strona,

5:41która została automatycznie wygenerowane przez Webflow.

5:44Zawiera ona wyniki wyszukiwania i

5:46jej struktura wygląda następująco: mamy Heading 1, czyli Search results.

5:49Możemy to wszystko sobie oczywiście

5:51ostylować, Search results container, a następnie wrzucić jakiś margines

5:57od góry. Zostawimy to nagłówkiem typu 1.

6:01Jeśli chodzi o kolejny element to jest cała wyszukiwarka, ta którą stylowaliśmy.

6:05Natomiast tutaj może ona dostać inne klasy niż tam.

6:08Naturalnie możemy też zmienić jej

6:09właściwości, ustawić to na Flex'a, znów zmienić wyrównanie.

6:15Zrobić to samo na tym Search input'cie.

6:17Zobacz, że jeśli teraz to wyzerujemy to on dostanie tę klasę Search input 2 tak, aby nie

6:21nadpisać naszych poprzednich ustawień i z guzikiem również możemy

6:26zrobić to samo, czyli ustawić dla niego jakiś inny Padding.

6:30Tam ustawiliśmy go na 6,

6:32Tutaj możemy ustawić na 7, ponieważ zostawimy tę ramkę w polu wyszukiwania.

6:37No i teraz mamy wyniki wyszukiwania. Nie będę tego już przesadnie stylował.

6:41Wydaje mi się, że jest OK, może ewentualnie żeby trochę ładniej wyglądało

6:45może zaokrąglimy sobie narożniki. Tutaj z lewej strony zrobimy 12 pikseli i z lewej na

6:52dole 12 pikseli, a tutaj na guziku Search zrobimy z prawej 12 i też z prawej 12

6:57W ten sposób. Ale to co nas najbardziej interesuje to jest coś takiego jak Search results wrapper.

7:03Jego struktura wygląda tak jak struktura

7:05kolekcji, czyli mamy wrapper, później mamy listę, a później mamy Item.

7:08Jeżeli przestylujemy 1 item, będą adekwatnie przestylowane wszystkie pozostałe.

7:11Rzeczywiście skojarzenie z kolekcją jest nie przypadkowe.

7:14Działa to jak taka jedna wielka kolekcja wyników wyszukiwania i ta kolekcja zawiera

7:19też swoje jakieś właściwości, czyli możemy, jeżeli zaznaczę np.

7:23link. Zobacz, że mamy coś takiego jak Search index. To jest jakby kolekcja, która zawiera

7:29różne rzeczy kontekstowe do wyszukiwania, czyli np.

7:32Page URL, URL strony, która zostaje zwrócona jako wynik.

7:35Możemy też zwrócić tytuł strony, która zostanie zwrócona jako wynik wyświetlić.

7:40Więc tutaj mamy naprawdę sporo rzeczy,

7:42które możemy zaczerpnąć z tych właściwości.

7:45To tak jakby były to pola kolekcji z wynikami wyszukiwania.

7:48Dzięki temu możemy taki Search result item

7:51nie tylko zformatować, ale też dodawać do niego różne elementy.

7:54Przykładowo, jeśli wstawiłbym tutaj image, obrazek

7:58i umieśćmy go po lewej stronie, w ten sposób, to teraz mogę zadecydować w jego

8:03ustawieniach, że będę ten obrazek czerpał z Search indexu.

8:08Jakie pole będziemy chcieli użyć? Search image.

8:11Skąd Webflow wie jaki obrazek tutaj wyświetlić?

8:14Otóż wyświetla on te obrazki, które są przypisane do naszych stron jako obrazek

8:18typu og. Jeśli chodzi o strony kolekcji,

8:21czyli tę stronę np.

8:22z blog postami, to ich obrazek og jest generowany automatycznie na podstawie tego

8:27obrazka, który przypisaliśmy do posta. Więc w ten sposób z pomocą auto magii w zasadzie

8:32wyniki wyszukiwania będą zwracać nam poprawne obrazki.

8:34Rzecz jasna fajnie by było to jeszcze

8:36dodatkowo jakoś dostylować. Dodam jednego dużego link block'a.

8:40Zawsze w tych wynikach wyszukiwania lubię

8:42mieć właśnie jednego link block'a, do którego należą wszystkie elementy, tyle, że tutaj

8:46jeszcze fajnie by było dodać taki techniczny div block i dodam jeszcze jeden, żeby

8:50rozłożyć te elementy obok siebie i cały ten link block

8:54będzie miał klasę Search result link

8:58przykładowo. Następnie zrobimy dla tego div block'a klasę Search result images.

9:05Kolejna klasa, którą zrobimy tutaj to będzie Search result

9:09textt.

9:11I już możemy wkładać do poszczególnych kontenerów elementy, czyli tutaj wrzucimy

9:16obrazek. Kolejny mamy element link, ale on nie będzie mógł zostać tutaj wrzucony, dlatego,

9:20że będziemy mieli link w linku, a na to Webflow nam nie powinien pozwolić. Spróbujmy.

9:24No właśnie, nie możemy wstawić jednego linku do drugiego, więc usuwamy. Text

9:28block to jest, zobaczmy co on w ogóle zawiera. On zawiera coś takiego jak Page URL,

9:32czyli URL tej strony wyników. Też go w zasadzie nie chcemy.

9:36Paragraph nam się przyda, więc wrzućmy do Search results text.

9:39A co on zwraca? Zobaczmy tutaj jest to tzw.

9:41Snippet.

9:42No właśnie. Zobacz, że w Search index mamy kilka rzeczy, które możemy tutaj zwracać.

9:47Mamy Page URL, no to wiadomo co to jest, to będzie URL do strony, która została zwrócona jako

9:51rezultat. Następnie Search Description, Search title i tzw. Snippet. Snippet jest taką

9:56sprytną rzeczą generowaną automatycznie z treści strony wyniku.

10:00Natomiast Description i Title

10:01możemy dowolnie sobie zmienić. Jeżeli przejdziemy do Pages i do ustawień dowolnej

10:06strony, czyli przykładowo klikniemy sobie Blog all posts, na ten mały trybik, to mamy całą

10:12taką sekcję, zwinę może te pozostałe sekcje, Site search settings.

10:17To są właśnie ustawienia wyszukiwania, które możemy dostosować.

10:21W tych ustawieniach możemy nadać tytuł, Description i ewentualnie obrazek.

10:26Jeżeli tych rzeczy nie wpiszemy tutaj z palca i zaznaczymy te opcje Same as SEO,

10:31title tag, Description tag i graph image url to będą one brane z poprzednich sekcji.

10:35Przykładowo tytuł SEO znajduje się w

10:38sekcji SEO settings. I tutaj jest coś takiego jak title Blog all posts.

10:41To będzie wyświetlane jako tytuł,

10:42jeżeli tego nie nadpiszemy dla stron

10:44wyszukiwania. To samo w Description, SEO description tag. W SEO settings mamy Meta Description

10:49I tutaj będzie brany ten tekst, który jest na razie pusty.

10:52Jeśli chodzi o obrazek, jeżeli go nie nadpiszemy tylko dla wyszukiwarki, to wtedy

10:56będzie brany z tej sekcji Open Graph settings, a jeśli go nie wgramy to będzie

11:00automatycznie wygenerowany z obrazków, które na tej stronie się znajdują.

11:03I właśnie dlatego te obrazki do postów

11:05zostały przypisane, więc możemy to wszystko nadpisać.

11:07Możemy skorzystać z gotowców.

11:09Ja chciałbym jeszcze oprócz Paragraph dodać sobie tutaj nagłówek Heading, niech to będzie

11:14Heading trzeciego albo może nawet czwartego typu.

11:17I ten Heading chciałbym umieścić wyżej tutaj

11:20i wybierzemy Get text from Search index a następnie wybierzemy Search title.

11:26I teraz mamy w jakiś sposób już zbudowaną

11:29strukturę możemy na Search results link jeszcze wrzucić jedną ważną rzecz, czyli

11:33będziemy chcieli podlinkować go do tego URL a Search Index.

11:38I tutaj wybieramy Page URL, czyli to będzie URL strony, która została zwrócona

11:42i po kliknięciu w związku z tym na cały ten rezultat nie ważne, czy zdjęcie, czy na

11:46ten nagłówek, czy tutaj, zostaniemy przeniesieni do tej strony.

11:49Przejdźmy teraz do ostylowania tego elementu, czyli tego Search result link

11:54i zróbmy najpierw tak na pewno chciałbym zmienić kursor na Pointer, bo to będzie link.

11:59Żeby to było intuicyjne.

12:01Następnie zmienimy układ Display na Flex box'a,

12:03zostawimy Horizontal, wyrównamy sobie to do lewej strony to jest OK.

12:08Natomiast będę musiał jeszcze jakieś style

12:09na pewno wstawić na zdjęcia, ponieważ jak widzisz są różnych rozmiarów.

12:13Więc przejdźmy do Image i może nadajmy tutaj klasę Search result image

12:19to będzie już pojedynczy obrazek. Stworzę taką klasę.

12:23Teraz Max width dam mu na przykład 200 pikseli i dodatkowo jakieś właściwości przykładowo

12:30zaokrąglone narożniki na 8, może margines jakiś z prawej strony.

12:34Jeszcze wszystkie Search result item oddzielimy od siebie. Search result item

12:41dodajmy może nową klasę i wrzućmy na to jakiś sensowny margines.

12:46Naturalnie moglibyśmy to jeszcze dostylować,

12:48ale zostawmy tak jak jest. Tutaj zależy nam

12:51bardziej na funkcjonowaniu tego komponentu aniżeli na jego stylach.

12:54Cały ten Search jeszcze ewentualnie możemy wzbogacić o jakiś dodatkowy margines i na

12:59tej stronie przydałby się jeszcze Header i Footer,

13:02Czyli przejdźmy do symboli i mamy Footer, a także Blog menu musimy tutaj wstawić i

13:09teraz tylko zadbamy o to, żeby Blog menu znalazło się na samej górze.

13:13W ten sposób, a Footer na samym dole.

13:17Jeśli tak zrobiliśmy to musimy jeszcze ten cały Search results container dodać mu większy margines

13:24o właśnie, spontanicznie blick'nęła nam jedna kwestia związana z tym, że mamy Search teraz na

13:29górze i Search tutaj. W zasadzie moglibyśmy spróbować ukryć ten Search.

13:32Jak można to zrobić? Jak można wyrywkowo na

13:35jakiejś stronie po prostu ukryć jakiś element?

13:37Otóż przejdźmy do podglądu, a następnie prawy przycisk myszy i opcje inspekcji.

13:42Zobaczmy jak wygląda ten cały element to

13:46jest For Action Search i on ma jakąś swoją klasę "search w-form".

13:52W związku z tym my możemy tę całą klasę zaadresować

13:56z pomocą CSSa i dopisać do niej po prostu Display None.

13:59Wtedy by zniknęło.

14:01Wyjdźmy z trybu podglądu.

14:02Następnie przejdźmy do strony Search results i wejdźmy w jej ustawienia.

14:07Znajduje się tutaj sekcja Custom code.

14:10Pamiętaj, żeby wcześniej wyjść właśnie z podglądu.

14:12Ewentualnie możesz też opublikować Twoją

14:14stronę, jeżeli Save jest wyszarzone. Teraz będziemy musieli dodać tutaj style do

14:19sekcji Head. Zobacz, że w Custom code można dodawać do sekcji Head strony i do wnętrza

14:23strony przed domknięciem znacznika Body, więc dodajemy do sekcji Head, bo tam

14:27właśnie powinny znaleźć się style CSS, czyli robimy Style type text CSS.

14:32Następnie domykamy ten znacznik Style i w tym miejscu będziemy mogli wstawić dowolne

14:36style, czyli zaadresujemy tę klasę Search, a następnie klasę w-form

14:42i wstawimy dla niej ustawienie Display: None tak, aby ukryć ten element

14:48i będzie on, powinien zostać, ukryty tylko i wyłącznie na tej stronie.

14:52Niestety nie będzie tego widać ani tutaj, ani w podglądzie.

14:55Musimy opublikować naszą stronę wybieram Publish selected Domains.

14:59I dopiero właśnie ten custom'owy kod, który dodajemy zarówno do całej naszej witryny,

15:04jak również do poszczególnych podstron będzie widoczny w momencie, gdy go opublikujemy i

15:09podejrzymy sobie tutaj jak widzisz ten Search zniknął.

15:11I to jest dokładnie ten rezultat, którego oczekiwaliśmy.

15:14Wyniki wyszukiwania co prawda wyglądają trochę inaczej niż to co zaprojektowaliśmy,

15:18ponieważ brakuje im zdjęcia, ale dzieje się tak dlatego, że nie mamy

15:21jeszcze naszej strony opublikowanej w ramach hostingu Webflow.

15:24Niestety mechanizm Elastic search po prostu ze swojej natury wymaga tego, żeby był

15:29hostowany i skonfigurowany po stronie serwera.

15:31W związku z tym

15:33przy pobraniu jakiegoś kodu wygenerowanego przez Webflow i hostowanie u siebie,

15:37niestety ta wyszukiwarka nie zostanie wyeksportowana,

15:39nie będzie działać. Będzie ona działać

15:41tylko i wyłącznie wtedy, kiedy naszą stronę hostujemy na Webflow w planie CMS lub wyższym.

15:46Niestety jest to jedno z ograniczeń,

15:48aczkolwiek nie ma w tym chyba jakiejś dużej winy Webflow, bo po prostu to jest taki

15:52element serwerowy, który na serwerze też musi działać. Więc te wyniki będą kompletne i na

15:58razie są przykładowe, a będą one dobrze wyświetlały się dopiero wtedy, kiedy

16:02podłączymy do naszej strony plan hostingowy później jeszcze Ci to pokażę.

16:06Natomiast można powiedzieć, że nasza

16:08wyszukiwarka jest wstępnie skonfigurowana, jeżeli przejdziesz na Search result wrapper

16:13jest tutaj jeszcze dosłownie kilka opcji, które można zmienić. Przede wszystkim można

16:18wybrać Results length, czyli ile wyników będzie zwracanych.

16:23Ja mam tutaj 10 wyników zwracanych. Snippets length, czyli ile znaków będzie

16:27zwracanych wewnątrz tego Snippet'a i dodatkowo możemy to sobie zawęzić np.

16:32184 i zobaczyć teraz ucinany jest ten Snippet i dodawane 3 kropki po tych 184 znakach.

16:39W ten sposób możemy zadbać, że wszystko będzie miało maksymalnie np.

16:43trzy linie. Mamy też opcję Highlight search terms in snippets.

16:46Jeżeli ktoś zacznie coś tutaj wpisywać do wyszukiwania np.

16:49szukałby frazy "omnis" to ta fraza zostanie automatycznie pogrubiona

16:54zarówno tu i tu w wynikach wyszukiwania. Jak ona jest sformatowana?

16:58Jest ona sformatowana tak jak wszystkie

17:00tagi bold, czyli wystarczy, że przejdziesz do stylów i będziesz chciał sformatować

17:06Bold tags

17:07I możesz tutaj zmienić to jak podświetlany jest ten wyraz, czyli przykładowo

17:11możesz zrobić to w ten sposób, aby był on podświetlany jakimś żółtym kolorem

17:16i wtedy łatwiej będzie znaleźć tę odpowiednią frazę, której użytkownik by szukał.

17:21Jeśli chodzi o te podstawowe opcje wyszukiwania Settings to tyle.

17:24Tutaj mamy jeszcze jedną ważną opcję Search Index Settings i jest ona związana z tym, co

17:29jest w ogóle indeksowane w naszej wyszukiwarce.

17:31Jest to bardzo ważne i trzeba zapamiętać, że po

17:34pierwsze możesz wyłączyć z wyników wyszukiwania całe poszczególne strony,

17:39czyli przykładowo, jeżeli nie chcesz, żeby strona np.

17:44z Blog all posts kanibalizowała nam wyniki w wyszukiwarce, ponieważ zawiera ona listing

17:50wszystkich postów, ale jednocześnie to samo znajduje się na stronie głównej, a także na

17:54stronach kategorii, to możesz przejść do jej ustawień, a następnie wybrać w Site

17:59Search Settings opcję Exclude this page from site search results.

18:04Czyli w tym momencie ta strona zostanie w całości wyłączona z wyników wyszukiwania,

18:09nie będzie indeksowana pod wyszukiwarkę. Wybieram polecenie Save,

18:13aby zapisać te zmiany.

18:14Poza tym jeszcze mamy Utility pages, czyli np.

18:16Stronę 404. Ona nie powinna być indeksowana.

18:18Co prawda Webflow mówi, że rzeczywiście te

18:20Utility pages nie są indeksowane, ale ta opcja nie jest zaznaczona. W związku

18:24z tym na wszelki wypadek, czemu nie można upewnić się, że na pewno nie będzie jej w

18:28wynikach wyszukiwania, podobnie jak strony Password itd.

18:31Natomiast strony CMS Collection Pages

18:33powinniśmy, przynajmniej te, które chcemy,

18:35oczywiście uwzględnić wynikach wyszukiwania. Przykładowo Blog post templates

18:39powinna to być strona, która będzie

18:40oczywiście wyświetlana w wynikach wyszukiwania.

18:43Musimy, więc zadbać o to, aby Title tagi, czy Description tagi były właściwe, o ile oczywiście

18:48korzystamy z nich w wynikach wyszukiwania. My akurat korzystamy np.

18:52z Title tagów.

18:53Gdybyśmy chcieli jeszcze lepiej je dopracować to wyłączamy opcję Same as SEO title tag,

18:57chyba, że tam dopracujemy to i zrobimy tak samo.

19:01Ale to, co możemy tu zrobić, to dodać sobie pole, bo chcielibyśmy oczywiście, żeby te

19:06tytuły były w pewnym stopniu ewentualnie jeszcze dynamiczne.

19:09Czyli dodajemy sobie pole i teraz to pole jest dziedziczone, ponieważ mamy kolekcję

19:14blog postów to mamy wszystkie pola z tej kolekcji dostępne.

19:18Czyli możemy tutaj wpisać Name i będzie

19:20to nazwa posta, a następnie możemy zrobić myślnik i przykładowo wybrać tutaj coś

19:27takiego jak Category name, czyli będziemy mieli

19:31Nazwa artykułu, myślnik, nazwa kategorii np.

19:34w ten sposób możemy sformatować sobie

19:36tytuły dla wyszukiwania i będą one tutaj widoczne.

19:38Ewentualnie możemy zostawić przykładowo

19:40nazwę tego artykułu, a nazwę kategorii wyświetlić w jakiś inny sposób. Zaraz

19:46pokażę ci jak to zrobić, ale póki jestem przy tym włączaniu i wyłączaniu opcji

19:52indeksowania stron to chciałbym pokazać Ci że ta opcja nie jest dostępna tylko dla

19:56stron, ale również dla poszczególnych elementów i np.

20:00Webflow domyślnie nie indeksuje symboli czyli symbolach takich jak Header i Footer,

20:07nie musimy się martwić o to, że wszystkie strony będą się pokazywały.

20:11Jeżeli ktoś wpisze przykładowo frazę marketing w wyszukiwarce,

20:14jeżeli byłby indeksowany Header i Footer,

20:16czyli nasze Menu, a tutaj znajduje się fraza marketing to, ponieważ znajduje się

20:20na wszystkich podstronach naszej witryny to wszystkie podstrony wylądowałyby w wynikach

20:23wyszukiwania, więc Webflow jest na tyle inteligentny, że po prostu zaznacza

20:27domyślnie dla symboli tę opcję Exclude blog menus content from site search results,

20:32ale, jeśli chcemy jakieś inne jeszcze

20:34elementy wyłączyć z wyszukiwania jakiejś np.

20:38elementy techniczne, no to możemy także to zrobić.

20:40Przykładowo przejdźmy na naszą stronę bloga.

20:44Gdybyśmy np.

20:45chcieli wyłączyć nagłówki z indeksowania to

20:47możemy cały Collection list wrapper, który tu mamy albo nawet cały

20:52Header section po prostu wybrać opcję Exclude div blogs content from site search results.

20:58Wtedy, gdy ktoś wpisze Software to

20:59niekoniecznie zawsze będzie się strona główna nasza wyświetlała.

21:03Zauważ, że ten element zadziałał nam na Header section.

21:06Jeśli przejdziemy na Header section, która

21:08znajduje się, tutaj jest symbolem, ona jest domyślnie już wyłączona dlatego, że jest to

21:12symbol i kolejne Header section, które tutaj mamy zaznaczone

21:16będziemy musieli wyłączyć ręcznie, czyli osobno dla każdego z elementów.

21:19To nie jest tak, że dziedziczy to po

21:21stylach, będziemy musieli wyłączać je z wyszukiwania, więc mamy tutaj bardzo

21:25szczegółową kontrolę nad tym, które z tych rzeczy chcemy wyłączyć z wyszukiwania. W

21:30zasadzie nam zależy tylko na tym, aby jako wyniki wyszukiwania pojawiały się

21:34poszczególne posty, czyli już linki do właściwych postów właściwych treści.

21:38Więc to co powinniśmy zrobić to w sumie

21:40wyłączyć sobie indeksowane wszystkich podstron, czyli zarówno strony głównej

21:44powinniśmy wyłączyć jej indeksowane jak i Style guide'a to jest oczywiste.

21:49Też nie będzie to zrobione by default, również wyłączymy tę główną stronę bloga

21:54spod indeksowania, jak również Blog all posts też Exclude from site search results.

22:00Chcemy, żeby były tylko indeksowane strony pojedynczych postów.

22:04Oczywiście chodzi tutaj o naszą wewnętrzną wyszukiwarkę, tą nad którą pracujemy.

22:09Nie chodzi tutaj o wyszukiwanie w Google, ponieważ oczywiście od tego są

22:14odpowiednie inne ustawienia czyli SEO settings.

22:16Te strony będą wyszukiwane w Google, ale o tym jeszcze później. Więc mamy tutaj

22:20możliwość wyłączenia albo poszczególnych stron albo poszczególnych elementów.

22:23Jak widzisz, jeśli cała strona jest

22:25wyłączona to nawet ten element już jest wyszarzony, bo nie możemy poszczególnych

22:29elementów wyłączyć, jeśli cała strona nie jest indeksowana w naszej wyszukiwarce.

22:34To są te najważniejsze ustawienia. Pokażę Ci jeszcze jedną trochę bardziej zaawansowaną

22:37rzecz, którą możemy tutaj zrobić. Jeśli wejdziemy do strony Search results i

22:41przykładowo załóżmy, że chcielibyśmy wyświetlać tutaj jeszcze jeden element.

22:46Dodam teraz zwykłego text block'a,

22:49Na razie w tym miejscu i będę chciał wyświetlać tutaj kategorię,

22:53czyli, jeśli tutaj będzie widok wszystkich postów, wyników wyszukiwania,

22:57fajnie by było też móc wyświetlić

22:58kategorie. Kategorie są dynamiczne i musimy je pobrać. Gdzie one w ogóle są? One są

23:02w kolekcji kategorii i są ewentualnie połączone z blog postami,

23:05Ale, jeśli wybierzemy tę taką pseudo

23:08kolekcję Search index, no to tutaj ich nie będzie,

23:10czyli jest Page URL, Description itd., ale możemy to zrobić z pomocą pewnego hack'a.

23:17Przykładowo nigdzie tutaj nie używamy Search description. Używamy snippet'a i używamy tytułu

23:22i też URL, ale nie używamy Search description. Wybierzmy w związku z tym Search description.

23:27Na razie jest tutaj coś takiego jak Sample search description. Pójdziemy teraz do stron, a

23:31następnie do stron blog postów, czyli Blog post templates

23:34I znajduje się tutaj sekcja Search description.

23:38My chcielibyśmy w tej sekcji właśnie wstrzyknąć kategorię, więc wyłączamy Same as

23:42SEO description tag i dodajemy tutaj filtr Category name.

23:46W ten sposób wstrzykniemy do tego pola

23:49to, co znajduje się jako nazwa kategorii. Teraz nie będzie to widoczne, ponieważ to

23:54są przykładowe wyniki. Nie mamy jeszcze skonfigurowane jako hostingu i wyszukiwarki,

23:58ale będzie tutaj wyświetlana odpowiednia fraza. My możemy jeszcze np.

24:02przejść sobie do strony bloga i sformatować to podobnie jak tutaj ten

24:09Caption blog tag, czyli skorzystamy właśnie z tych klas.

24:12Wrócę do Search results i przestylujemy ten text blog tak, żeby dostał

24:17klasę Caption, a później jeszcze Cmd + Return blog tag w ten sposób.

24:24Dajmy mu jeszcze może Position absolute zpozycjonujemy go absolutnie względem tego

24:30najwyższego rodzica, to będzie chyba ten Search result

24:32wrapper akurat tak jak chcieliśmy i zmienimy marginesy, ale wcześniej dodamy jeszcze

24:37dodatkową combo klasę Search result, tak, żeby nie popsuć sobie poprzednich elementów.

24:41I wrzucimy tutaj margines z każdej strony

24:46rzędu sześciu pikseli. Powinny się tutaj pojawić ładnie kategorie.

24:49No dobra to mamy to i pokazałem Ci nawet kilka fajnych sztuczek i hack'ów związanych z

24:53wyszukiwarką. A zacznie ona działać wtedy, kiedy opublikujemy naszą stronę.

24:57Teraz to wszystko. Do usłyszenia.