Czego szukasz?

Jeżeli szukasz odpowiedzi na pytania związane z SEO lub Wordpressem wpisz frazę i czekaj na podpowiedzi lub kliknij enter! Wyniki pokazują także linki do zewnętrznych źródeł.

3184 artykułów w bazie

Open Graph w WordPress

Dziś pokażę jak w prosty sposób zaimplementować Facebookowy Open Graph na stronę WordPressa dla standardowych artykułów za pomocą wtyczki jak i bez jej pomocy. Zacznę może od wyjaśnienia czym jest Open Graph.

Opisuje on na naszej stronie dane w taki sposób aby Facebook mógł korzystać dokładnie z tych danych jakie mu wskażemy. Poniżej zamieszczam przykład przy Share artykułu:

open-graph

1. Aby to zrobić należy w swoim szablonie strony w pliku functions.php umieścić poniższy kod:

2. Następnie w pliku header.php znajdujemy nasz tag <html> i zamieniamy go na taki:

Wtyczka do Open Graph

Jeżeli używasz All in Seo Pack (włącz i skonfiguruj dodatek Social Meta poprzez opcje wtyczki)  lub Yoast SEO (SEO => Społeczności) możesz użyć ich funkcji do oznaczenia elementów dla FB.

WP Facebook Open Graph protocol

Przetestowałem kilka z nich i ta wydaje mi się najlepsza. Po zainstalowaniu do opcji dodaje nam się panel wtyczki w którym możemy znaleźć:

  • User account ID – koniecznie wpisać trzeba ID swojego profilu/strony FB.
  • Domyślny obrazek, który będzie wyświetlany jeżeli dany artykuł nie będzie posiadał żadnego.
  • Wymuszanie korzystania przez Facebooka tylko z tego url obrazka podanej wyżej

open-graph-plugin

Wojciech Władziński

O Wojciech Władziński

Branżą SEO zajmuję się od 2008 roku. Na co dzień starszy specjalista ds. SEO w firmie Seogroup. Tworzę i optymalizuję duże serwisy jak i mniejsze strony internetowe. Szczególnie upodobałem sobie środowisko WordPressa, który mimo powszechnej opinii nie jest tylko platformą blogową.
Udostępnij na: Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

5 komentarzy

  1. U mnie świetnie sprawdza się dodatek do All in One SEO Pack o nazwie Social Meta.
    Podajemy ID profilu Facebook, wybieramy czy Description ma być generowany automatycznie na podstawie wpisu, czy tytuł ma być brany z All in One SECO oraz (dla mnie bardzo ważne), które zdjęcie wpisu ma być pobierane pod uwagę.
    Korzystam z dodatku Social Meta, ponieważ nie muszę instalować kolejnej wtyczki, tylko dodatek do All in One SEO.

  2. Całkiem fajne rozwiązanie, jeśli chcemy od razu w szablon wbudować obsługę Open Graph. Osobiście korzystam z wtyczki WordPress SEO by Yoast, która posiada pełne wsparcie Open Graph, możemy dodać jakie zdjęcie, opis i tytuł ma się wyświetlać, albo wtyczka robi to za nas na podstawie treści i zdjęć z wpisu/podstron.

  3. Witam serdecznie,
    Próbowałem zrobić według zaleceń ale cały czas wyskakują mi niewłaściwe dane.
    Skopiowałem do functions.php dokładnie to co umieściłeś. W headerze wkleiłem fragment kodu html.
    Oto kod mojego przycisku który ma udostępniać post:
    <a href="http://www.facebook.com/sharer.php?u= ” onclick=”window.open(‚http://www.facebook.com/sharer.php?u=’,’Facebook’,’width=600,height=300,left=’+(screen.availWidth/2-300)+’,top=’+(screen.availHeight/2-150)+”); return false;” class=”facebook-icons small-icons”>

    Błąd który mi debbuger cały czas pokazuje:
    Your page has meta tags in the body instead of the head. This may be because your HTML was malformed and they fell lower in the parse tree.
    Please fix this in order for the tags to be usable.
    Sprawdzałem w firebagu i mam meta dane w head a nie w body.
    Próbowałęm też z pluginami ale ten sam problem.
    Nie bardzo wiem jak sobie z tym poradzić.
    Na twiterze , google plus, LinkedIn działa poprawnie.
    Tylko na facebooku nie działa jak powinno.
    Jakieś pomysły?
    http://blog.acroart.eu to jest blog który napisałem.
    Pozdrawiam

Zostaw odpowiedź

Email nie będzie publikowany. Wymagane pola są oznaczone *

Możesz używać tych tagów HTML <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Oferuję szereg usług związanych z WordpressemSPRAWDŹ OFERTĘ
Przeczytaj inne:
Wyświetlanie pól wpisów i taksonomii tworzonych przez Types

Jakiś czas temu pisałem o tym jak w Wordpress tworzyć i modyfikować bezkodowo taksonomie, pola wpisów i typy postów za...

Zamknij