4 min. czytania
Jak działa i skąd się wziął internet
Niekiedy można mieć wrażenie, że internet jest z nami od zawsze. Czy wiemy jednak jak i kiedy powstał? Jakie są podstawy jego działania?
Jak za darmo wyróżnić się w Google - JSON LD, rich result snippets
Nie chcesz płacić za reklamę w Google? Wyróżnij się za darmo - rich results.
Temat SEO to temat rzeka. Na pozycję w wynikach wyszukiwania wpływa mnóstwo rzeczy, między innymi:
- To jakie strony prowadzą do naszej
- Jak popularny jest nasz serwis
- Jak pisane są przez nas treści
Nie mam zamiaru wchodzić w buty ekspertów z tej dziedziny, ale chcę pokryć możliwie duży obszar tego, co programiści mogą zrobić by dana strona pozycjonowała się lepiej. Skupić się tylko na tym co Ty możesz wdrożyć w swojej pracy i zabłysnąć, a przede wszystkim - wnieść nową wartość i pomagać biznesom rosnąć.
Jedną z takich rzeczy jest poznanie JSON-LD.
Czym jest JSON-LD?
JSON-LD to format danych, który bazuje na znanym większości programistów JSON-ie. Za tym standardem stoi potężny włodarz internetu - W3. To oni wyznaczają standardy HTML, CSS, JavaScript.
Nim wyjaśnię “co robi” JSON-LD, muszę przytoczyć jeszcze jedną nową nazwę. Jest nią IRI czyli “umiędzynarodowione identyfikatory zasobów”. Mówiąc po ludzku, społeczność internetowa umawia się na wspólnie przyjęty słownik identyfikatorów. Żeby to lepiej zobrazować, popatrzmy na przykładowego JSON’a.
1{
2 "name": "Radek Madecki",
3 "homepage": "<https://madecki.io>",
4 "image": "<https://madecki.io/images/moja-twarz.png>",
5}Nawet bez kontekstu, jesteśmy w stanie się domyślić, że mamy przed sobą coś w rodzaju danych do wizytówki pewnego Radka Madeckiego. Wiemy jaką ma stronę internetową i gdzie znaleźć jego zdjęcie.
Problem w tym, że maszyny nie są (jeszcze) zbyt dobre w domyślaniu się z kontekstu. To na pewno wkrótce się zmieni, patrząc na rozwój LLM’ów, ale póki co - są w tym słabe.
Ktoś mógłby użyć fullName albo rozdzielić to na firstName i lastName. Ktoś inny użyje fName. Wiesz o co chodzi - niby to samo, ale nie do końca, przynajmniej dla komputerów.
Dlatego powstały standardy takich identyfikatorów. To właśnie przy ich użyciu, definiujemy pola w JSON-LD o którym mowa w tym artykule.
Wyglądałoby to tak:
1{
2 "<http://schema.org/name>": "Radek Madecki",
3 "<http://schema.org/url>": {
4 "@id": "<https://madecki.io>"
5 },
6 "<http://schema.org/image>": {
7 "@id": "<https://madecki.io/images/moja-twarz.png>"
8 }
9}Tylko teraz mamy problem w drugą stronę. Choć dla komputera wszystko stało się jasne, to z kolei dla człowieka taki zapis staje się mniej czytelny. Rozwiązaniem na to jest kontekst.
Jak powiesz w swoim rodzinnym domu:
Podaj mi mój ulubiony kubek
To większość domowników będzie wiedziała o jaki kubek chodzi. To ten z napisem “Najlepsza mama pod słońcem”, bo przypomina Ci czemu w ogóle czytasz tego bloga i rozwijasz się w IT. Oni mają kontekst.
Podobnie można zrobić z zapisem JSON-LD. Można dać komputerowi i ludziom kontekst. Robi się to tak:
1{
2 "@context": {
3 "name": "<http://schema.org/name>",
4 "image": {
5 "@id": "<http://schema.org/image>".
6 "@type": "@id"
7 },
8 "homepage": {
9 "@id": "<http://schema.org/url>",
10 "@type": "@id"
11 }
12 },
13 "name": "Radek Madecki",
14 "homepage": "<https://madecki.io>",
15 "image": "<https://madecki.io/images/moja-twarz.png>",
16}Możemy też wskazać na “zewnętrzny” kontekst. To częsta praktyka, bo mamy wtedy jeden plik z definicjami pól dla wielu różnych .jsonld.
1{
2 "@context": "<https://madecki.io/context.jsonld>",
3 "name": "Radek Madecki",
4 "homepage": "<https://madecki.io>",
5 "image": "<https://madecki.io/images/moja-twarz.png>",
6}Dobra, ale po co to wszystko?
Gdzie tak naprawdę dochodzi do potrzeby skorzystania z tego? Albo inaczej - kiedy nam się opłaca wysilić i co z tego mamy?
Google oraz inne wyszukiwarki mogą zrobić użytek z zaserwowania im takich ustrukturyzowanych danych. Dzięki temu wyświetlą wyniki wyszukiwania w bardziej atrakcyjny i odpowiedni dla treści sposób. Przykład?
1<html>
2 <head>
3 <title>Tytuł artykułu</title>
4 <script type="application/ld+json">
5 {
6 "@context": "<https://schema.org>",
7 "@type": "NewsArticle",
8 "headline": "Tytuł artykułu",
9 "image": [
10 "<https://example.com/photos/1x1/photo.jpg>",
11 "<https://example.com/photos/4x3/photo.jpg>",
12 "<https://example.com/photos/16x9/photo.jpg>"
13 ],
14 "datePublished": "2015-02-05T08:00:00+08:00",
15 "dateModified": "2015-02-05T09:20:00+08:00",
16 "author": [{
17 "@type": "Person",
18 "name": "Jane Doe",
19 "url": "<https://example.com/profile/janedoe123>"
20 },{
21 "@type": "Person",
22 "name": "John Doe",
23 "url": "<https://example.com/profile/johndoe123>"
24 }]
25 }
26 </script>
27 </head>
28 <body>
29 </body>
30</html>Powyższy kod sprawi, że nasza strona może wyświetlić się w dużo bardziej przykuwający wzrok sposób niż zwykły niebieski link z podpisem (jak to ma miejsce przy “zwykłych” wynikach wyszukiwania).
Takie coś może mieć kluczową wartość szczególnie w przypadku sklepów internetowych, gdzie:
- dodatkowe informacje o produkcie,
- jego zdjęcie,
- wyświetlona od razu cena,
…mogą wpłynąć w znacznym stopniu na ilość zakupów w naszym sklepie.
Jakiego typu “uporządkowane dane” możemy użyć?
Lista jest długa i zawiera wszystkie niezbędne informacje, ale poniżej prezentuję jedne z najciekawszych.
- Informacja o kursie (takim do uczenia, nie walut :) )
- Oferta pracy
- Produkt
- Przepis (kulinarny)
- Fragment opinii
- Pytania i odpowiedzi (Q&A)
Jakie widzisz zastosowanie u siebie?
Chociaż jest to fantastyczna funkcja, to dalej nie jest specjalnie powszechnie znana (sam dowiedziałem się o niej niedawno od kolegi z pracy, dzięki Piotrek!). Można dzięki niej łatwo się wyróżnić.
Jestem więc ciekaw - masz jakiś pomysł na kreatywne zastosowanie tego? Przyda się w Twoim projekcie?
