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

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, Instagram czy kiedyś Google+.

Znaczniki stosowane w Open Graph Properties

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

Czym jest i do czego służy Open Graph?

Czym jest Open Graph?

Open Graph jest rodzajem meta tagów (mikro dane). Protokół został stworzony na potrzeby Facebooka w 2010 roku. Dlatego też OG przeciwieństwie do innych meta tagów nie jest dodawany na potrzeby wyszukiwarek internetowych.

Do czego służy Open Graph?

Open Graph służy głównie do informowania portalów społecznościowych (social media) co ma zostać wyświetlone podczas dodawania linka do portalu. Z jego pomocą możemy więc np. narzucić Facebookowi, którego:

  • zdjęcia ze strony ma użyć
  • jaką treść (opis) ma wyświetlić.

W ten sposób możemy zastąpić np. Title strony czy miniaturkę wpisu.

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 >

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 >

Personalizacja OG pod X (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://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 na stronie

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

Leave a Comment