Kontrola udostępnianych treści w serwisach społecznościowych

Tweet, like, share, +1 – symbole te są nieodzowne niemal na każdej, dzisiejszej stronie internetowej. Nie wszyscy jednak wiedzą, że możemy w łatwy sposób kontrolować treść jaką udostępniamy poprzez te kanały promocji.

Facebook i znaczniki Open Graph

Protokół Open Graph umożliwia integrowanie serwisów internetowych z Facebookiem. Dzięki temu mamy kontrolę nad prezentacją naszych treści w social media. Jak wykorzystać to narzędzie?

Wszystkie znaczniki Open Graph umieszcza się w sekcji head podobnie jak inne znaczniki meta. Facebook wymaga podania 4 podstawowych znaczników:

<meta property="og:title" content="Tytuł" />
<meta property="og:type" content="typ" />
<meta property="og:url" content="http://adres-strony.pl" />
<meta property="og:image" content="http://link-do-obrazka.jpg" />

Dodatkowo możemy dodać kilka opcjonalnych znaczników:

• og:description – opis treści;
• og:site_name – nazwa serwisu, będzie wyświetlona pod tytułem strony jako link prowadzący do strony głównej;
• fb:app_id – identyfikator aplikacji w Facebook;
• fb:admins – administratorzy strony (identyfikatory oddzielone przecinkami);

Typy treści

Open Graph udostępnia kilka typów treści. Najczęściej używanymi są:

• article – artykuł, wpis blogowy;
• website – strona internetowa;
• blog;
• video;
• audio;

Pełną listę dostępnych typów zanjdziesz w dokumentacji.

Czyszczenie cache Facebooka

Mimo tych zmian Facebook i tak często wyświetla „stare dane”. Dzieje się tak, ponieważ korzysta on ze swojego mechanizmu cache’owania. Można odświeżyć cache uruchamijąc … debuger. W tym celu przejdź do strony debugera i wpisz adres strony. Po tej operacji powinny być już wyświetlane poprawne dane ze znaczników Open Graph :).

Google+

Google używa „swoich” znaczników, jednak używa się ich analogicznie do Open Graph.

<meta itemprop=”name” content=”Tytuł”>
<meta itemprop=”description” content=”Opis”>
<meta itemprop=”image” content=”http://link-do-obrazka.jpg”>

Twitter

I podobnie ma się rzecz z Twitterem:

<meta name=”twitter:card” content=”A Twitter title for the page being shared. Keep keywords towards the front”>
<meta name=”twitter:site” content=”@profilename”>
<meta name=”twitter:title” content= “Tytuł”>
<meta name=”twitter:description” content=”Opis”>
<meta name=”twitter:creator” content=”Autor”>
<meta name=”twitter:image:src” content="http://link-do-obrazka.jpg">
<meta name=”twitter:domain” content=”domain.com”>