Webflow: OG Tagi i Social Media

0:00Witaj kolejnej lekcji. Chciałbym uzupełnić poprzednie lekcje o SEO.

0:03Wyjaśnieniem tego jak działają w tym kontekście social media. Mówiłem Ci o

0:07specjalnych meta tagach, które możemy dodać np.

0:10keywords, czy robots, które są wytycznymi dla wyszukiwarki, ale są też takie Znaczniki

0:15meta, które możemy dodać po to, aby lepiej opisać naszą stronę w social media.

0:20Większość przynajmniej serwisów social

0:22media korzysta właśnie z takiej struktury, która pierwotnie była zainicjowana przez

0:26Facebooka, czyli Open Graph protocol, a możemy dodać go w ten sposób, że dodajemy

0:30sobie takie podstawowe meta dane. Dzięki znacznikom meta Property

0:35i obie mamy np.

0:37tytuł, typ URL, image obrazek, ale jeszcze tych og tagów jest dużo więcej, jeżeli miałbyś

0:42na to czas to możesz w Webflow dodawać je po pierwsze do indywidualnych stron, tak

0:47jak pokazywałem Ci wcześniej, czyli przechodząc do strony, a następnie

0:51dodając to do odpowiedniej podstrony do znacznika Head

0:56albo przechodząc do ustawień projektu, czyli Project settings.

1:00Tutaj w Custom code również możesz dodawać te informacje o og tagach.

1:04Natomiast część informacji o og tagach,

1:06przejdźmy do Designera, jest dostępna do wyklikania z interfejsu Webflow.

1:10Są to te najważniejsze og tagi, które będą

1:13służyły share'owaniu właśnie naszej strony w social media. Znajdują się w sekcji Open

1:17Graph settings. I znów tutaj mamy taki podgląd, podobnie jak w wyszukiwarce, mamy

1:22tytuł, następnie description i Open Graph image URL.

1:26Te dane będą wykorzystane przy dzieleniu

1:28się naszą stroną w social media. Przykładowo, gdybym teraz chciał wrzucić

1:32adres naszej strony na Facebooka, czyli webflow.blog.eduweb.pl,

1:37dodajmy przedrostek https, to zobacz, że zostanie wygenerowany

1:41jakiś podgląd, ale tutaj nic tak naprawdę nie ma. Jest wzięty nasz tytuł strony

1:45domyślny i jakiś link, a my chcielibyśmy żeby to wyglądało dużo lepiej.

1:50To znaczy chcielibyśmy jeszcze tutaj dodać obrazek, ewentualnie jakiś opis i to

1:53właśnie możemy zrobić za pomocą Open Graph. Open Graph title

1:57to będzie tytuł. Jak widziałeś

1:59Facebook sobie wziął domyślnie ten tytuł naszej strony, możemy zrobić taki sam jak

2:03rzeczywiście tytuł strony, żeby mieć pewność, że to

2:07właśnie ten tytuł zostanie przekazany albo odznaczyć to i wpisać dowolny.

2:10Tak samo możemy zrobić z meta description.

2:12Jeśli chcemy możemy właśnie zaciągnąć go z opisu, no ale Open Graph image URL musimy sobie

2:18wkleić sami. Musimy upewnić się, że te obrazki mają

2:21przynajmniej 1200 pikseli szerokości, a wysokości przynajmniej 630 pikseli.

2:27Optymalne aspekt ratio to jest 1,91:1, czyli 1200x630

2:32to jest dobry rozmiar dla takiego obrazka. I teraz potrzebujemy wkleić do niego URL.

2:37W przeciwieństwie do po prostu upload'owania plików do Webflow,

2:40tutaj nie mamy możliwości zupload'ować tego

2:42pliku, ale podajemy jego adres, adres URL, więc możemy wkleić to np.

2:47na jakąś chmurową usługę, aczkolwiek z tym też warto uważać bo np.

2:52Facebook ma problem z linkami do poglądów Dropbox'a.

2:55Możemy skorzystać z, ja korzystam z dropshare po to, żebym mógł łatwo

2:59umieszczać pliki, czy screenshoty, gdzieś w sieci i uzyskiwać łatwo do nich link.

3:04Więc taki link, który mamy, który prowadzi do naszego obrazka, w moim przypadku to jest

3:09pagecover.JPG, po prostu tu umieszczamy, a następnie zapisujemy tę zmianę.

3:13I koniecznie musimy opublikować je na

3:16naszej stronie. Teraz nie jest zbyt dobrym pomysłem

3:19jeszcze raz publikowanie

3:21nowego posta na Facebooku i oglądanie tego podglądu, ponieważ Facebook

3:25ma to do siebie i inne social media też, że cache'ują rozmaite informacje o stronach,

3:30o podglądach i znacznie lepiej jest skorzystać zamiast z tego sposobu,

3:34teraz z takiego narzędzia, które nazywa

3:36się "Facebook sharing debugger". W tym sharing debuggerze możemy wpisać adres

3:40naszej strony, a następnie wybrać polecenie "Debug".

3:43W tym momencie zostaną pobrane nowe dane.

3:45Mamy tutaj już dużo lepiej wyglądający podgląd na Facebooku.

3:49Poniżej są wyświetlane tagi, które akurat mamy przypisane. Mamy description, image, title,

3:55zobacz, że update time też Webflow dla nas

3:58automatycznie wygenerował, ale na przykład jakieś inne tagi jak og image alt albo

4:03Rules URL nie są wypełnione i, gdybyśmy chcieli je wypełnić, oczywiście możemy to

4:07zrobić z pomocą dodatkowego kodu w sekcji Head strony.

4:10Możemy również dodać te tagi, które

4:11Facebook nam tutaj sugeruje, że powinny zostać dodane, czyli og url,

4:15URL do share'owania naszej strony, a także FB app ID,

4:19jeżeli byśmy mieli aplikację na Facebooku połączoną z naszą stroną, która np.

4:23umożliwia użytkownikom logowanie przez

4:25Facebooka wtedy moglibyśmy rzeczywiście to wypełnić. Ale tak jest

4:29wszystko OK i udało nam się skutecznie uzupełnić te tagi.

4:32Tak jak powiedziałem, jeżeli chcesz dodać jakieś kolejne og tagi, te, które nie są do

4:36wyklikania w interfejsie, to dodajesz je tutaj w sekcji Custom code.

4:40Jeszcze jedna wskazówka na koniec - podobnie

4:42jak og tagi można użyć do opisania naszej strony jeszcze lepiej dla robotów

4:46indeksujących takiego narzędzia jak schema.org.

4:49Tutaj możemy przejść do sekcji schemmas,

4:51zobaczyć sobie jakieś przykładowe schematy np.

4:54dla produktów.

4:56I tutaj mamy informację o tym, że możemy dodać kategorię,

5:00kolor produktu, brand produktu. Na pewno mamy też możliwość wskazania, gdzie

5:05znajduje się cena, model produktu, jakieś nie wiem SKU, czyli jakiś numer wewnętrzny,

5:10pewnie jakaś cena promocyjna, rating, gwiazdki, opinie, recenzje. I po co to

5:15wszystko się przydaje? Oczywiście robot indeksujący

5:17Google nie ma pojęcia, że np.

5:19w tym konkretnym divie naszym znajdują się recenzje albo, że jakiś

5:25jakiś format, którego użyjemy do tego, żeby pokolorować cztery z pięciu gwiazdek na

5:28stronie to jest rzeczywiście recenzja, ocena.

5:31Więc, jeżeli skorzystamy ze schema.org i dodatkowo opiszemy strukturę danych na

5:35naszej stronie, no to będziemy mogli poinformować Google'a lepiej o tym co znajduje

5:40się w ramach naszej witryny.

5:43Być może widziałeś takie bogate wyniki

5:45wyszukiwania czasem, gdzie obok nazwy produktu np.

5:49w wyszukiwarce, pojawia się właśnie jego rating albo link do opinii.

5:52To jest właśnie ten moment kiedy Google

5:54może pobrać te dynamiczne dane i to sprzyja oczywiście naszej obecności w

5:59wyszukiwarce dlatego, że użytkownicy są dużo bardziej skłonni kliknąć na rezultat,

6:03który zawiera np. Jakieś gwiazdki albo jest opisany dodatkowymi danymi.

6:07Rzecz jasna Google nie gwarantuje, że to

6:09wszystko weźmie pod uwagę, ale można na pewno to dodać, zwłaszcza, jeżeli mamy czas.

6:13W praktyce wygląda to tak

6:15i przejdźmy jeszcze na chwilę na stronę Home, że dodajemy sobie takie mikro dane

6:20na przykład coś takiego jak item type i movie i dodajemy to jako osobne atrybuty,

6:26przykładowo do kontenera div. W ramach Webflow

6:29możemy to zrobić wybierając sobie

6:31jakiś nasz kontener. Zaznaczmy przykładowo Hero header, jest to div blok, a następnie

6:38przejdźmy do jego ustawień i mamy tutaj coś takiego jak Custom div attributes.

6:42To właśnie w to miejsce, którego jeszcze nie omawialiśmy, chyba ostatnie, które

6:46zostało nam z interfejsu Webflow, możemy dodać tutaj kolejne atrybuty.

6:49Na przykład właśnie ten atrybut, gdzie podajemy sobie

6:55ten item type i jako wartość możemy wkleić

6:59to co w schema było zadeklarowane, czyli movie przykładowo. Wybieramy polecenie Save.

7:04W ten sposób deklarujemy taki atrybut dla tego diva. Ja sobie to usunę, ale ogólnie

7:10polecam Ci przejrzeć informacje o schema.org.

7:12Jeżeli chcesz wzbogacić swoją stronę o dodatkowe metadane to warto na pewno uzupełnić

7:16ją o jakieś Meta tagi, o dane dotyczące schema i ewentualnie o dodatkowe og tagi,

7:23które byłyby przydatne na potrzeby social media.

7:26Robimy to wszystko zawsze na tej samej

7:27zasadzie, że albo wrzucamy to do Custom code, jeżeli ma dotyczyć pojedynczej strony albo

7:33przechodzimy do Project settings i wrzucamy do sekcji

7:36Custom code w to miejsce, jeżeli ma dotyczyć wszystkich podstron naszej witryny.

7:41To już wszystko w tej lekcji.

7:43Bardzo Ci dziękuję za uwagę i do usłyszenia.