Nuxt.js: SEO przy użyciu JSONLD Schema

0:00Cześć. W tym dziale tak jak mówiliśmy opowiadamy

0:02troszkę o optymalizacji naszej strony pod SEO i chciałbym tutaj przedstawić jedną z

0:08najważniejszych rzeczy, którą można zrobić w kontekście prac cyfrowej nad projektem.

0:13Poza faktycznym tworzeniem contentu to opisywanie treści strony za pomocą.

0:20Z kim nie ma kropka.

0:22To jest taka strona,

0:23na której możecie sprawdzić różne metadane o Waszych fragmentach strony i np.

0:29opisywać ich dane fragmenty za pomocą różnych encji.

0:34Czyli jakbyśmy mieli np.

0:36artykuł na Wikipedii.

0:38No to mamy tutaj całą definicję obiektu

0:41artykułu, którą możemy wrzucić na naszej stronie i dzięki temu wyszukiwarki

0:46internetowe, a także przeglądarki internetowe w kontekście dostępności

0:50czasami będą zwracały na te pola troszkę inną uwagę, w związku z czym

0:56zrobimy tak, że zainstalujemy paczkę Next Jackson Child.

1:00Czyli jest to taki pakiet, który pozwoli

1:02nam tworzyć Hej Sony dla naszych podstron na podstawie tego co przekażemy mu

1:08z poziomu WP i często nawet jest to taki format dla schemat.

1:11Org. Który pozwala na deklarowanie jej stanów,

1:16a nie konkretnie pracy na bezpośrednich elementach HTML.

1:20Ponieważ jeśli zobaczymy tutaj np.

1:22id, to klasyczne org działa na takiej

1:25zasadzie, że musimy tutaj podać item type np.

1:29article item prop.

1:32Np.

1:34jakiś tekst, powiedzmy albo image.

1:36I tutaj naprawdę nam puchnie ten html

1:39przez to, że musimy każdy jeden znacznik opisywać w ten sposób.

1:43Więc prostszym sposobem jest pracowanie z Jackson LD.

1:47Jest to o wiele czytelniejsze.

1:48Efekt daje dokładnie taki sam i jesteśmy w

1:51stanie osiągnąć więcej niektórych rozwiązań względem klasycznego podejścia.

1:57HTML.

1:58Więc ja to sobie ponownie tutaj zapiszę, żeby nie było żadnych niepotrzebnych zmian

2:02i zobaczmy jak konfigurację pakietu Jackson Child.

2:06Aby zainstalować ten plugin musimy

2:08tym razem poprzez plugin go zainstalować a nie poprzez moduły.

2:12Więc jak widzimy w zależności od tego co

2:14chcemy zrobić różne rozwiązania będą nam potrzebne.

2:18Tutaj wejdziemy w katalog plugins i stworzymy nowy plik.

2:22Cześć LD to jest Wklejamy sobie ten plik.

2:35Zgodnie z dokumentacją zapiszemy

2:37i teraz musimy dodać ten plik do naszych pluginów.

2:40W configu jest.

2:45Więc wracamy do naszego projektu.

2:50Szukamy pluginów.

2:55I przekazujemy tutaj po prostu sos do naszego Jamesa na ryby zapisujemy.

3:02Wydaje mi się, że jest to plugin typu

3:04zarówno serwer jak i klient, w związku z czym zostawimy to w takiej formie.

3:10I to co teraz musimy zrobić to

3:12wewnatrz naszych komponentów wyeksportować taką metodę Jamesa YT

3:16i ona nam wygeneruje Jacksona dla tych danych, które tutaj sobie zwrócimy.

3:21Wejdźmy sobie do naszego komponentu ID.

3:26I dodajmy tutaj.

3:30Czasem nawet, w związku z czym to, co możemy zrobić to tak jak

3:34wspominaliśmy sprawdzić sobie na Steama różne dostępne typy.

3:39Ja już sprawdziłem, że jest to Arctic jako jeden z dostępnych typów.

3:44I na encji Article możemy poszukać różnych

3:47właściwości, które chcemy wypełnić, czyli np.

3:49article baby.

3:50To będzie coś, co definiuje faktyczną treść naszego

3:54artykułu, więc to możemy sobie tutaj przepisać.

3:58Article body i tutaj powiedzmy test. Chwilowo to jest.

4:04Oczywiście to może być wszystko generowane na podstawie danych, które mamy

4:07już w naszym komponencie i teraz robimy po prostu zapytanie.

4:11Więc robimy też zapytanie do activities.

4:14Aby pobrać pełną treść naszego artykułu, bo jest do tego osobny endpoint.

4:19Ale zanim to zrobimy, wejdźmy na przykładowy widok i podejrzenie źródła.

4:26Na samej górze powinniśmy mieć wygenerowane.

4:30GN PLD.

4:32Widzę, że nam się to nie zapisało.

4:34Jestem w sumie ciekawe dlaczego.

4:37Czyżbym nie uruchomił tego?

4:40No zobaczmy tutaj Jackson.

4:45Jest zapisane.

4:48Często nawet.

4:50Odświeżony.

4:54Skala się na aplikację jeszcze przebudowuje.

4:57Poszukajmy może artykul.

5:02Nie widzę takiego wpisu.

5:04Ciekawe o co może chodzić.

5:08Mimo.

5:09Klient ustaw my nie jest oczywiście

5:11najlepszy z punktu widzenia SEO, bo to się powinno stać oczywiście na

5:16serwerze, żeby mieć renderowane dane już dostępne od razu.

5:21Ale być może coś jest problemem, chyba że faktycznie jest tutaj błąd

5:24widoczny w konsoli, ale nie wydaje się też odświeżyć.

5:31IT view Jane tern context art artykul Buddy tekst.

5:38Powinno być to, że.

5:45Zobaczmy, czy coś tu jeszcze możemy wyczytać.

5:48Nie wydaje się, aby czegoś nam tu brakowało.

5:53Article.

5:55Jest ustawiony poprawnie.

5:56Mamy typ podany.

5:59Więc przejdźmy teraz jeszcze raz na nasz

6:01frontend i zobaczmy czy coś się tutaj wygenerowało.

6:06Na pewno nam się teraz nie renderuje, bo brakuje nam.

6:10Część elit.

6:14Czasem tutaj poszukamy.

6:21Elementy.

6:24I z tego co pamiętam to się to dawało gdzieś na samej górze.

6:31Nie jestem pewien czemu to się na mnie ładuje.

6:34Być może brakuje mi jakiejś prostej.

6:38Idei, bądź możemy spróbować też wrócić z powrotem tutaj do dokumentacji.

6:46Nie faktycznie zwracamy.

6:50I taki oto czasem powinien nam się wyrenderować.

6:53Czego nam tu może brakować?

6:56Może spróbujmy wyrenderować pustą listę kompów.

7:01Całość można sobie podmienić na.

7:04Piszemy i tutaj zrobimy pustą.

7:07Termika.

7:10Zobaczmy, czy coś się wydarzyło.

7:13Nic się nie zmieniło.

7:16Więc dochodzę do wniosku, że nasza paczka nie zainstalowała się poprawnie, więc

7:20zamienimy tutaj formę instalacji na tą prostszą, gdzie przekazujemy stringa.

7:25A tak naprawdę Witold i tak nie jest

7:26używany już w naszym projekcie, więc możemy się go pozbyć.

7:31Zapiszmy.

7:33I tak naprawdę gdyby plik nie mógł zostać

7:35znaleziony, to prawdopodobnie by tak czy siak dał nam o tym znać.

7:42Zapisaliśmy to.

7:44Odśwież stronę.

7:48Ewidentnie nam to nie chce zaskoczyć.

7:50Ja spróbuję po prostu przebudować może cały serwer, być może o to chodzi,

7:54ale jeśli nam się to nie uda, to w każdym razie widzimy jak można używać

7:58tej paczki i tak naprawdę tutaj potrzebujemy tak czy

8:02siak pomocy specjalistów od SEO, ponieważ my jako developerzy jesteśmy w

8:07stanie określić część semantycznego znaczenia danego tagu.

8:11Natomiast z punktu widzenia biznesowego czy z punktu widzenia właśnie

8:16osoby, która zajmuje się optymalizacją danych pod wyszukiwarki, no to musimy

8:21tutaj się dogadać i wykorzystać odpowiednią wersję tagu czy informacji.

8:26I faktycznie po przygotowaniu

8:29znajduje się tutaj tag script, w którym znajdują się tłumaczenia.

8:36A czy znajdują się w nim miejsca na alt również się w nim znajduje,

8:39w związku z czym był to problem z przeładowaniem.

8:42Niestety czasami tak się dzieje,

8:44więc jeżeli jesteście przekonani, że robicie coś poprawnie i niestety kod

8:50wydaje się nie reagować to polecam przebudować serwer.

8:52Pomimo tego, że wygląda na to, że on się sam przebudowuje, to niestety czasami też

8:58różnego rodzaju przeszkadza nam w dokończeniu naszego zadania.