Open Graph

Czym jest Open Graph? I jak wpływa na linki w social mediach

Czas czytania: 2 minut

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 (Og Properties) możemy np. dodać informacje nie widoczne dla zwykłego użytkownika, ale interpretowane przez media społecznościowe takie jak Facebook lub Google+.

Znaczniki stosowane w Og Properties
Znaczniki stosowane w OP na Facebooku

Przykładowo na Facebooku jako miniaturka (link) do naszego wpisu, artykułu dodaje się meta opis (Title + description). Z pomocą tych znaczników możemy ten stan zmienić. I samodzielnie dodać specjalnie przygotowany tekst oraz obraz konkretnie pod tą platformę.

Czy jest Open Graph

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

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. 
  • 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.

Znaczniki te deklarujemy w bardzo prosty sposób:

<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 (px)
  • og:image:height – wysokość obrazka w pixelach
budowa obrazka – jak dodać obrazek do strony, web page

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" />

Personalizacja pod Twitter

Kolejną ciekawą funkcją open graf jest możliwość dostosowywania ich po konkretną platformę. Opcja ta może okazać się przydatna kiedy chcemy dodać inny opis lub grafikę np. na Twitterze i Facebooku.

W tym celu do znacznika dodajemy name=”” a w nim informacje dla której platformy ma być on przeznaczony np:

<meta name="twitter:title" content="Jak wykorzystać protokół Open Graph dla Facebook" />
<meta name="twitter:site" content="@aureliajulianna" />
<meta name="twitter:image" content="https://www.aurainweb.pl/wp-content/uploads/2018/08/8.jpg" />

Na Facebooku z kolei używamy zwykłych znaczników OG.

Gdzie umieścić tagi OG

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

Samodzielnie dodawania OG może być problematyczne w przypadku gdy posiadamy stronę opartą o CMS. Dlatego warto jest sprawdzić czy nie jest dostępna wtyczka lub inna opcja ułatwiająca nam pracę.

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
https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started