KiedyÅ› aby wypromować stronÄ™ wystarczyÅ‚o jÄ… zoptymalizować i wypozycjonować w wyszukiwarkach, a wÅ‚aÅ›ciwie jednej – Google (zgodnie z zasadÄ… Pareto).

Dzisiaj aby zaistnieć w sieci należy włożyć trochę więcej trudu i dostosować stronę do nowych środków komunikacji, o czym przeczytasz w niniejszym wpisie.

Web 2.0 już na dobre zagoÅ›ciÅ‚o w naszym życiu i coraz częściej sÅ‚yszy siÄ™ sÅ‚owa: „nie ma CiÄ™ na Facebooku = nie istniejesz”. Facebook niedawno chwaliÅ‚ siÄ™ 1 mld aktywnych użytkowników miesiÄ™cznie. Do tego dochodzi Google+, Twitter i wiele innych serwisów spoÅ‚ecznoÅ›ciowych. Ludzie coraz częściej korzystajÄ… z tego Å›rodka komunikacji, wymieniajÄ…c siÄ™ odsyÅ‚aczami do ciekawych treÅ›ci, pomijajÄ…c tym samym samodzielne wyszukiwania w Google.

Jak zatem przygotować nasze strony by dobrze się tam prezentowały?

Open Graph

Z pomocą przychodzi protokół Open Graph, z którego korzystają już takie serwisy jak Facebook, Google+ czy Twitter.

Protokół ten służy ujednoliceniu opisu stron WWW i zbudowaniu lepszej, semantycznej sieci, w której wszelkie zasoby są odpowiednio opisane i uporządkowane tematycznie.

Dzięki Open Graph możemy przy pomocy metadanych w prosty sposób opisywać nasze serwisy i konkretne podstrony. W opisie możemy zawrzeć tytuł, opis, zdjęcie czy film, typ zasobu i inne.

Metadane dodajemy analogicznie do wszystkim znanych Description czy Keywords, np.:

Przyjrzyjmy się zatem dostępnym nam znacznikom opisu dokumentów. Dzielą się one na dwie grupy, podstawowe (wymagane) i rozszerzone (opcjonalne).

Do podstawowych metadanych zaliczamy:

• og:title
  Tytuł opisujący zawartość strony, może być analogiczny do wartości elementu TITLE.
• og:type
  Typ danych zawartych na stronie. Dostępnych jest wiele różnych typów (np. piosenka, teledysk, film, artykuł, książka, profil osoby), a niektóre z nich pozwalają na dodanie kolejnych metadanych szczegółowo opisujących ten typ.
• og:image
  Miejsce na odsyłacz do obrazka reprezentującego daną stronę. Takie obrazki są wykorzystywane w wielu miejscach serwisów społecznościowych, jak choćby przy generowaniu miniaturki strony podczas publikacji postów na Facebooku.
• og:url
  Adres kanoniczny do aktualnej strony, tzn. pełen adres bez zbędnych parametrów (jak choćby sesja użytkownika czy oznaczenie kampanii reklamowej).

Dodatkowe metadane (opcjonalne):

• og:site_name
  W elemencie TITLE czÄ™sto jesteÅ›my zmuszeni umieszczać zarówno tytuÅ‚ podstrony, jak i nazwÄ™ serwisu (np. Moja strona – Galeria zdjęć).

  Przy uzupełnianiu danych do Open Graph powinniśmy wydzielić dwa osobne pola:

  1 2	<meta property="og:site_name" content="Moja strona"> <meta property="og:title" content="Galeria zdjęć">

• og:description
  Krótki opis strony, może być analogiczny do metadanej Description.
• og:locale, og:locale:alternate
  W polu tym umieszczamy kod języka użytego na stronie (domyślnie amerykański). Jeśli nasza strona jest dostępna w różnych językach, możemy wskazać je w polu og:locale:alternate.

  Możemy również ustawić wiele różnych języków alternatywnych przez duplikowanie tego elementu z różnymi wartościami, np.:

  1 2 3

  <meta property="og:locale" content="pl_PL"> <meta property="og:locale:alternate" content="fr_FR"> <meta property="og:locale:alternate" content="en_GB">

• og:audio, og:video
  Nasz opis dokumentu możemy urozmaicić o dodatkowy plik audio i/lub wideo (mimo to musimy pamiętać o obowiązkowym osadzeniu obrazu!).

Wszystkie powyższe znaczniki powinny oczywiście trafić do sekcji HEAD dokumentu HTML, koniecznie dopiero po określeniu kodowania (inaczej mogą pojawić się błędy).

Po więcej informacji dotyczących protokołu Open Graph odsyłam do oficjalnej dokumentacji, w której znajdziesz także przykłady użycia.

Ps. na GitHubie już pojawiła się biblioteka do generowania znaczników Open Graph :-)

Facebook i protokół Open Graph

Jak już się pewnie domyśliłeś, Facebook korzysta z metadanych Open Graph. Ponadto udostępnia dodatkowe pola metadanych, a wśród nich m. in.:

• geolokalizacja: og:latitude, og:longitude, og:street-address, og:locality, og:region, og:postal-code, og:country-name (przydatne przy opisywaniu np. placówki firmy),
• informacje kontaktowe: og:email, og:phone_number, og:fax_number,
• bogatszy wybór typów (food, drink, author, musican, etc) – tak opisane strony sÄ… lepiej agregowane przez Facebooka (Adam Nowak polubiÅ‚ sportowca XYZ).

Warto również wiedzieć o dwóch dedykowanych Facebookowi polach, które umożliwiają administrowanie i śledzenie statystyk strony:

• fb:admins
  W polu tym należy wskazać administratorów strony (można użyć wiele identyfikatorów rozdzielonych przecinkami).

  Identyfikatory możemy uzyskać z adresu: http://graph.facebook.com/me (zamiast me wpisujemy nazwÄ™ konta i przechodzimy pod wskazany adres – tam znajdziemy interesujÄ…ce nas dane w polu id)

• fb:app_id
  Służy do wskazania identyfikatora aplikacji Facebook Platform, jeśli taką posiadamy.

W razie pytań i wątpliwości warto zajrzeć do bogatej dokumentacji Open Graph dla Facebooka.

Warto również zapoznać się z narzędziem Open Graph Debugger, w którym sprawdzimy poprawność metadanych oraz podejrzymy efekt wprowadzonego opisu.

Przykładowy efekt użycia protokołu Open Graph po opublikowaniu postu na Facebooku:

Twitter Cards

Żeby nie żyło nam się za łatwo, Twitter wymyślił swój własny protokół metadanych. Uzupełnienie tych danych umożliwi wzbogacanie publikowanych tweetów o tzw. Twitter Cards, czyli rozwijaną zakładkę z opisem strony.

Jest to funkcjonalność tylko dla zaakceptowanych przez Twittera witryn. Żeby dodać obsługę dla naszej strony wypełniamy formularz: Participate in Twitter Cards.

Do dyspozycji dostajemy następujące pola metadanych:

• twitter:card
  Definiuje typ karty: summary, photo lub video.
• twitter:url
  Pole analogiczne do og:url.
• twitter:title
  Pole analogiczne do og:title.
• twitter:description
  Pole analogiczne do og:description. Maksymalnie 200 znaków.
• twitter:image
  Pole analogiczne do og:image.
• twitter:site, twitter:site:id
  Wskazuje konto strony na Twitterze. W pierwszym przypadku identyfikator poprzedzamy znakiem @, np. „@kamilbrenk”, natomiast w drugim podajemy samÄ… nazwÄ™ konta: „kamilbrenk”.
• twitter:creator, twitter:creator:id
  Wskazujemy tutaj konto autora treści na Twitterze, np. redaktora (zasady te same co przy polu site).

Dodatkowo należy wiedzieć, że przy wyborze typu photo lub video dochodzą kolejne pola metdanych do wypełnienia. Przy zdjęciach będą to:

• twitter:image:width
• twitter:image:height

Przy filmach natomiast:

• twitter:player
• twitter:player:width
• twitter:player:height
• twitter:player:stream
• twitter:player:stream:content_type

Po szczegóły odsyłam do dokumentacji Twitter Cards.

Co istotne, jeśli na jednej stronie używamy zarówno tagów Open Graph, jak i Twitter Cards, możemy pominąć duplikujące się pola (zostawiamy pola Open Graph z racji, że to otwarty protokół wykorzystywany przez wiele serwisów).

Schema.org

JeÅ›li ktoÅ› pomyÅ›laÅ‚, że powyższe protokoÅ‚y opisu zasobów w Sieci bÄ™dÄ… wystarczajÄ…ce to niestety siÄ™ rozczaruje – do naszej kolekcji dochodzi kolejny standard opisu danych strukturalnych: schema.org.

Schema.org został stworzony przy współpracy głównych wyszukiwarek i jest wykorzystywany m. in. przez Bing, Google, Yahoo! czy Yandex. Myślę, że to wystarczający argument, by stosować się do tego standardu :-)

Po więcej informacji odsyłam do oficjalnej strony schema.org, gdzie znajdziesz wszelkie możliwe informacje. Jeśli ktoś natomiast szuka polskojęzycznych zasobów to ma do dyspozycji np. Przewodnik schema.org – wprowadzenie

Praktyczny przykład użycia

Na zakończenie wypadałoby podsumować omówione protokoły i standardy opisu zasobów WWW przykładem z prawdziwego zdarzenia.

Metadane dla niniejszego bloga (blog.kamilbrenk.pl) wyglądałyby następująco:

Sporo tych informacji, dodatkowo niektóre siÄ™ powtarzajÄ…. Nie wyglÄ…da to elegancko, niestety pozostaje nam siÄ™ dostosować do panujÄ…cych zasad – marketing to podstawa w budowaniu dobrze prosperujÄ…cego biznesu :-)