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+.
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?
Do czego służy Open Graph?
– 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.
- “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.
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
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 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