{"id":8433,"date":"2020-09-14T14:44:01","date_gmt":"2020-09-14T12:44:01","guid":{"rendered":"https:\/\/www.lh.pl\/pomoc\/open-graph-co-zrobic-gdy-facebook-nie-laduje-miniatury-strony-lub-wpisu\/"},"modified":"2021-11-04T12:38:35","modified_gmt":"2021-11-04T11:38:35","slug":"meta-tagi-open-graph-w-social-media","status":"publish","type":"post","link":"https:\/\/www.lh.pl\/pomoc\/meta-tagi-open-graph-w-social-media\/","title":{"rendered":"Open Graph – co zrobi\u0107, gdy Facebook nie \u0142aduje miniatury strony lub wpisu?"},"content":{"rendered":"\r\n
\"\"<\/figure>\r\n\r\n\r\n\r\n

Wsp\u00f3\u0142cze\u015bnie prowadzenie swojej firmy, bez utworzonego jej profilu w mediach spo\u0142eczno\u015bciowych jest nie lada wyzwaniem dla przedsi\u0119biorcy. U\u017cytkownicy Internetu coraz cz\u0119\u015bciej poszukuj\u0105 r\u00f3\u017cnego rodzaju informacji oraz opinii dotycz\u0105cych konkretnej firmy lub dzia\u0142alno\u015bci w\u0142a\u015bnie w mediach spo\u0142eczno\u015bciowych. Utworzenie takiego konta daje wiele mo\u017cliwo\u015bci. Mo\u017cesz tam wymienia\u0107 wiadomo\u015bci z klientami, nawi\u0105zywa\u0107 r\u00f3\u017cnego rodzaju interakcje, promowa\u0107 swoje produkty, organizowa\u0107 wydarzenia, a tak\u017ce udost\u0119pnia\u0107 tre\u015bci ze swojej strony (np. odno\u015bniki do artyku\u0142\u00f3w z Twojego bloga). Ale czy wiesz, jak przygotowa\u0107 swoj\u0105 stron\u0119, aby udost\u0119pniane z niej tre\u015bci wy\u015bwietla\u0142y si\u0119 poprawnie w mediach spo\u0142eczno\u015bciowych? Musisz zaimplementowa\u0107 meta tagi Open Graph na swojej stronie.<\/p>\r\n\r\n\r\n\r\n

Czym s\u0105 meta tagi Open Graph?<\/h2>\r\n\r\n\r\n\r\n

Open Graph funkcjonuje od 2010 roku i zosta\u0142 stworzony przez pracownik\u00f3w Facebooka jako zestaw regu\u0142 do lepszej komunikacji mi\u0119dzy portalem spo\u0142eczno\u015bciowym a serwisami zewn\u0119trznymi (np. Twoim blogiem). Dzi\u0119ki tym regu\u0142om mo\u017cliwe jest \u0142atwiejsze pobieranie przez serwisy spo\u0142eczno\u015bciowe najwa\u017cniejszych informacji o udost\u0119pnianej stronie w celu jej lepszej prezentacji na podgl\u0105dzie (np. we wpisie na Facebooku czy wiadomo\u015bci w Messengerze).<\/p>\r\n\r\n\r\n\r\n

Warto podkre\u015bli\u0107, \u017ce mimo i\u017c tw\u00f3rcami Open Graph jest zesp\u00f3\u0142 Facebooka, to z tego protoko\u0142u korzystaj\u0105 tak\u017ce inne media spo\u0142eczno\u015bciowe.<\/strong><\/p>\r\n\r\n\r\n\r\n

Meta tagi Open Graph s\u0105 niesamowicie istotne zar\u00f3wno z perspektywy samodzielnego udost\u0119pniania tre\u015bci na w\u0142asnych social mediach, jak i z perspektywy udost\u0119pniania np. naszych wpis\u00f3w z bloga przez naszych czytelnik\u00f3w. Z pewno\u015bci\u0105 nie chcesz, aby Twoja strona po udost\u0119pnieniu w mediach spo\u0142eczno\u015bciowych wy\u015bwietli\u0142a si\u0119 jako zwyk\u0142y, „suchy” link bez \u017cadnego opisu, tytu\u0142u i obrazka. W\u0142a\u015bnie dlatego u\u017cywamy meta tag\u00f3w Open Graph, kt\u00f3re wskazuj\u0105 serwisom spo\u0142eczno\u015bciowym, jakich tre\u015bci u\u017cy\u0107 do stworzenia podgl\u0105du.<\/p>\r\n\r\n\r\n\r\n

Gdzie znale\u017a\u0107 i jak sprawdzi\u0107 meta tagi Open Graph?<\/h2>\r\n\r\n\r\n\r\n

W praktyce, Open Graph to nic innego, jak meta tagi HTML, kt\u00f3re umieszcza si\u0119 w sekcji <head> kodu \u017ar\u00f3d\u0142owego strony.<\/strong> Wskazuj\u0105 one dla ka\u017cdej podstrony, jaki obrazek, tytu\u0142 czy opis ma by\u0107 przydzielony w trakcie udost\u0119pniania. To taka wizyt\u00f3wka danej podstrony dla medi\u00f3w spo\u0142eczno\u015bciowych.<\/strong><\/p>\r\n\r\n\r\n\r\n

Portale spo\u0142eczno\u015bciowe wykorzystuj\u0105ce standard Open Graph (czyli np. Facebook), w trakcie udost\u0119pniania linku skanuj\u0105 kod \u017ar\u00f3d\u0142owy strony i poszukuj\u0105 tag\u00f3w Open Graph. Pozyskane informacje zostaj\u0105 wykorzystane i przeanalizowane. Pozwala to odpowiednio wy\u015bwietli\u0107 najwa\u017cniejsze dane z udost\u0119pnianej strony – jej tytu\u0142, opis, wyr\u00f3\u017cniony obrazek i tak dalej. <\/p>\r\n\r\n\r\n\r\n

Je\u015bli nie masz pewno\u015bci, czy Twoja strona internetowa jest dostosowana do medi\u00f3w spo\u0142eczno\u015bciowych, to warto sprawdzi\u0107 w \u017ar\u00f3dle strony, czy masz odpowiednie meta tagi Open Graph w sekcji <head>. <\/strong> Aby to zrobi\u0107, nale\u017cy przej\u015b\u0107 na stron\u0119 WWW, a nast\u0119pnie klikn\u0105\u0107 prawym przyciskiem myszy i wybra\u0107 \u201eWy\u015bwietl \u017ar\u00f3d\u0142o strony\u201d.<\/strong> Nazwa tej funkcji mo\u017ce delikatnie r\u00f3\u017cni\u0107 si\u0119 w zale\u017cno\u015bci od wykorzystanej przegl\u0105darki internetowej. Istnieje tak\u017ce drugi spos\u00f3b np. w przegl\u0105darce Chrome po wpisaniu „view-source:https:\/\/www.lh.pl\/pomoc” otrzymasz kod \u017ar\u00f3d\u0142owy – podmie\u0144 tylko adres na sw\u00f3j w\u0142asny.<\/p>\r\n\r\n\r\n\r\n

\"Wdro\u017cenie<\/figure><\/div>\r\n\r\n\r\n\r\n

W kodzie \u017ar\u00f3d\u0142owym wyszukaj sekcji <head><\/strong> i zawartych w nich meta tag\u00f3w, oznaczonych jako „og:”<\/strong> w parametrze „property”<\/strong>. Dla ka\u017cdej podstrony powinny by\u0107 one dynamicznie ustawione i odwzorowywa\u0107 odpowiednie tre\u015bci. Przyk\u0142adowo, w przypadku artyku\u0142\u00f3w powinny by\u0107 w nich zawarte: obrazek wyr\u00f3\u017cniony danego artyku\u0142u jako „og: image”<\/strong>, tytu\u0142 artyku\u0142u jako „og:title”<\/strong> oraz opis jako „og:description”<\/strong>.<\/p>\r\n\r\n\r\n\r\n

Dlaczego warto wykorzysta\u0107 Open Graph w social media?<\/h2>\r\n\r\n\r\n\r\n

Przyniesie to nie tylko rezultat w postaci zwi\u0119kszonej estetyki oraz lepszego wygl\u0105du opublikowanych tre\u015bci, ale przyczyni si\u0119 tak\u017ce do zwi\u0119kszenia ruchu i zainteresowania nasz\u0105 stron\u0105. <\/strong>Gwarantuje to zatem dostosowanie strony do uniwersalnego standardu, wykorzystywanego przez wiele serwis\u00f3w spo\u0142eczno\u015bciowych.<\/p>\r\n\r\n\r\n\r\n

Najwa\u017cniejsze meta tagi Open Graph<\/h2>\r\n\r\n\r\n\r\n

Pe\u0142na lista tag\u00f3w znajduje si\u0119 bezpo\u015brednio na stronie samego protoko\u0142u Open Graph<\/a><\/strong>. Warto jednak zaznaczy\u0107, \u017ce tak naprawd\u0119 najwa\u017cniejsze podstawowe tagi to:<\/p>\r\n\r\n\r\n\r\n