Jak sprawić aby strona internetowa była widoczna w sieciach społecznościowych?

Jestem w trakcie projektowania nowego wyglądu bloga. Postanowiłem go nieco odświeżyć i poprawić przy okazji istniejące błędy, które są źle odbierane przez czytelników bloga. Pomyślałem więc, że przy okazji opiszę proces wstawiania meta tagów do kodu HTML, tak aby strona dobrze prezentowała się w mediach społecznościowych takich jak Facebook czy Twitter.

Dobra prezentacja strony w sieciach społecznościowych jest bardzo ważna. Nie ma nic gorszego niż strona, która nie zawiera odpowiednich tagów przez prezentuje się ubogo po wklejeniu linka w wiadomości, w wybranej sieci społecznościowej.

Sekcja 1Implementacja tagów HTML pod kątem Facebooka

Zacznijmy od ustawienia meta tagów dla Facebooka. Absolutne minimum to implementacja 5 tagów, czyli:

• og:url - oznaczenie tagu zawierającego link do strony,
• og:type - typ treści,
• og:title - tytuł treści,
• og:description - opis treści,
• og:image - oznaczenie tagu zawierającego link do obrazka.

Jak można zauważyć, wszystkie oznaczenia zaczynają się od prefiksu og: jest to związane z tym, że Facebook korzysta z semantycznej składni Open Graph. Open Graph, podobnie jak RDF czy OWL, służy do opisywania treści, dzięki czemu może ona zostać w jakimś stopniu zrozumiana przez mechanizmy rozumowania wbudowane w roboty/crawlery stron internetowych (i nie tylko).

Temat sematyki w kodzie i rozumienia treści przez algorytmy był tematem mojej pracy magisterskiej na studiach, gdzie skupiałem się na stworzeniu wyszukiwarki semantycznej potrafiącej zrozumieć pytanie i na podstawie posiadanych danych przedstawić trafną odpowiedź na zadane pytanie. W skrócie, skomplikowany temat.

Abstrahując od tematu wyszukiwarek semantycznych, wróćmy do przykładu implementacji składni HTML przeznaczonej dla Facebooka:

1
2
3
4
5

<meta property="og:url" content="https://blog.piotrnalepa.pl">
<meta property="og:type" content="website">
<meta property="og:title" content="Przykładowy tytuł strony">
<meta property="og:description" content="Przykładowy opis strony">
<meta property="og:image" content="https://blog.piotrnalepa.pl/logo.jpg">

Jak łatwo wywnioskować, składnia HTML z metadanymi dla Facebooka, to po prostu tagi <meta /> posiadające atrybuty property oraz content. Powyższy przykład pokazuje absolutne minimum tagów wymaganych przez Facebooka. Oficjalnie, Facebook udostępnia listę dodatkowych meta tagów, dedykowanych treści typu wideo i obrazków.

W przypadku meta tagu og:type dopuszczalna jest wartość article, zamiast website. W ten sposób wskazujemy na konkretny artykuł znajdujący się na stronie, a nie samą stronę. Pozostałe tagi pozostają bez zmian.

Warto wiedzieć, że zalecanymi wymiarami obrazków, które będą udostępniane Facebookowi w meta tagach są wymiary: 1200x630 pikseli. Natomiast minimalny rozmiar obrazka, który nie spowoduje błędów w wyświetlaniu wynosi 200x200 pikseli.

Sekcja 2Tagi dla Twittera

W przypadku Twittera, rzecz wygląda bardzo podobnie, ale jednak inaczej. W porównaniu do Facebooka, Twitter wymaga od nas zdefiniowania rodzaju karty, jaka będzie wyświetlona na timelinie Twittera. Przeanalizujmy poniższy kod:

1
2
3
4
5
6

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@sunpietro">
<meta name="twitter:url" content="https://blog.piotrnalepa.pl">
<meta name="twitter:title" content="Przykładowy tytuł strony">
<meta name="twitter:description" content="Przykładowy opis strony">
<meta name="twitter:image" content="https://blog.piotrnalepa.pl/logo.jpg">

Pierwsze dwa meta tagi są najciekawsze i różnią się od tych z Facebooka. Pierwszy tag, czyli twitter:card definiuje jak ma być wyświetlona informacja o treści na Twitterze. Możliwe są 4 wartości:

• summary_large_image - czyli widok treści z podglądem dużego obrazka,
• summary - widok treści z podglądem małego obrazka,
• app - widok informacji o aplikacji z linkiem do pobrania jej,
• player - karta z odtwarzaczem treści multimedialnych.

Dodatkowo, należy również zdefiniować meta tag z informacją o twórcy treści: twitter:creator. Dzięki niemu, informacja na Twitterze będzie przypisana do konkretnego użytkownika sieci społecznościowej.

Jak można zauważyć, meta tagi Twittera różnią się składnią w stosunku do meta tagów Facebooka. Te z Twittera zaczynają się prefiksem: twitter:.

Sekcja 3Podsumowanie

Mam nadzieję, że wykorzystując informacje zawarte w tym wpisie będziesz w stanie skutecznie przygotowywać swoją stronę do wykorzystania jej w sieciach społecznościowych. Niewątpliwie, w sieciach społecznościowych jest bardzo duża siła przebicia i można zdobyć dużą popularność odpowiednio tagując treści znajdujące się na stronie. Należy jednak pamietać, że tagi to jedno, a jakość treści to druga (najważniejsza) sprawa. Bez jakościowej tresci użytkownicy nie będą chcieli udostępniać stron w sieciach społecznościowych.