Pozycjonowanie

Jak wykorzystać protokół Open Graph dla Facebook

Open Graph jest to standard z pomocą, którego możemy dokonać opisu treści i obrazów na stronie internetowej. Z pomocą Open Graph możemy np. informacje nie widoczne dla zwykłego użytkownika, ale interpretowane przez media społecznościowe takie jak Facebook lub Google+.

Czy jest Open Graph

Open Graph jest typem meta tagów (mikro dane). Protokół został stworzony przez na potrzeby Facebooka w 2010 roku. W przeciwieństwie do innych meta tagów OG nie umieszczamy na potrzeby robotów wyszukiwarek. Ich zadaniem jest poinformowanie portalu społecznościowego co ma zostać wyświetlone podczas dodawania linka do witryny.

Z pomocą tych tagów możemy więc np. narzucić Facebookowi, którego zdjęcia ze strony ma użyć oraz jaką treść (opis) ma wyświetlić.

Znaczniki stosowane w OP

Open Graph posiada kilka typów znaczników:

  • og:type – typ obiektu, z którego korzystamy np. „article”, „video.movie„, „book”,
  • og:title – tytuł jaki chcemy aby pojawiał się  w sieciach społecznościowych , np. „Tytuł mojej strony”,
  • og:description – opis jaki ma zostać wyświetlony
  • og:url – adres URL do do naszego artykułu, np. http://moja-strona.pl/artykul/tytul-artykulu,
  • og:locale – lokalizacja, informacja w jakim języku został napisany
  • og:image – adres URL grafiki, która pojawi się w mediach społecznościowych  np: http://moja-nazwa.pl/img/obrazek.jpg.

Przykładowe zastosowanie tagów:

<meta property="og:url" content="http://www.moja-strona.pl/adres-strony" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Przykładowy tytuł" />
<meta property="og:description" content="Opis" />
<meta property="og:image" content="http://www.moja-strona.pl/obrazki/obrazek-na-facebok.jpg" />

Formatowanie obrazów

  • og:image:type – jakiego typu jest obrazek np. jpg, png
  • og:image:width – szerokość obrazka w pixelach
  • og:image:height – wysokość obrazka w pixelach

np.

<meta property="og:image" content="http://moja-strona.pl/obrazki/obrazek.jpg" />
<meta property="og:image:height" content="180" />
<meta property="og:image:width" content="250" />

Gdzie umieścić tagi OG

Tagi OG podobnie jak inne tagi umieszczamy między znacznikami  <header></header>.

W przypadku jeśli nasza strona oparta jest o system CMS przed samodzielnym wdrożeniem warto sprawdzić czy nie ma do niego wtyczki lub modułu dzięki, któremu można zarządzać tagami.

W przypadku WordPress umożliwia nam to np:

  • WordPress SEO, Yoast
  • WP Facebook Open Graph protocol

 

Źródła:
https://developers.facebook.com/docs/sharing/webmasters/
http://o12.pl/wiedzodajnia/czytaj/the-open-graph-krotki-poradnik
https://blog.getresponse.pl/sposob-wykorzystac-tagi-open-graph-zwiekszyc-ruch-stronie-internetowej.html