W tym poście dokończę temat przycisków udostępniania treści w sieciach społecznościowych. Poprzednim razem napisałem o tym, jak takie przyciski przygotować i samemu napisać odnośniki do trzech największych sieci społecznościowych – Facebooka, Twittera oraz Google+. Teraz będzie o tym, jak zmodyfikować tytuł, opis oraz obrazek w udostępnianej stronie.
Podczas udostępniania zauważyliście pewnie, że powyższe informacje pobierane są z tagów meta – tak, jak robią to wyszukiwarki. Problem jest w tym, że niekoniecznie chcielibyście umieścić taki opis (ograniczony lub przygotowany specjalnie pod SEO) oraz chcielibyście zamieścić odpowiedni obrazek w panelu udostępniania (jeśli go nie określimy, to weźmie pierwszy lepszy, który znajdzie na stronie).
Tutaj z pomocą przyjdzie nam Open Graph. Dzięki tagom meta Open Graph będziemy mogli określić różne elementy treści tylko dla serwisów społecznościowych. Dla nich większy priorytet mają tagi OG, dlatego jeśli takie się pojawią, to wezmę je w pierwszej kolejności, a tagi meta dla wyszukiwarek zostawią.
Użycie ich jest bardzo proste: w tagu head dodajemy nowe tagi meta, które posiadają odpowiednie atrybuty. Trzy podstawowe tagi, sugerujące tytuł, opis, oraz obrazek, będą wyglądały tak:
<meta property="og:title" content="Example Title" /> <meta property="og:description" content="Example Description" /> <meta property="og:image" content="http://example.com/image.jpg" />
I... to wszystko. Pozostałe tagi meta oczywiście zostawiamy na swoim miejscu – one będą dla wyszukiwarek, podczas gdy meta tagi OG będą dla sieci społecznościowych. Więcej informacji o protokole Open Graph oraz więcej możliwości jest przedstawionych na stronie The Open Graph protocol: http://ogp.me/
Inny przydatny link:
Facebook Sharing Debugger: https://developers.facebook.com/tools/debug/
Przydatne narzędzie do testowania naszych linków. Niestety czasami zdarza się, że kiedy wcześniej byliśmy w panelu udostępniania danej strony, to FB zapisał sobie o niej informacje. Potem, gdy je zaktualizujemy, to Facebook nadal pokazuje stare informacje. Dzięki temu narzędziu możemy zażądać od FB, aby pobrał informacje ze strony jeszcze raz, dzięki czemu możemy sprawdzić, czy na pewno wybierze odpowiedni obrazek oraz czy pokaże szerszy opis.
