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

163 artykułów w bazie

Open Graph w WordPress2 min read

2 min read" > wordpress-facebook

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

Czytaj również

Automatyczne publikowanie postów WP w Social Media... Wielu z Was zastanawiało się pewnie czy jest możliwość automatycznego publikowania na swoich profilach społecznościowych jak Facebook, Twitter napisan...
Pokaż na blogu swoje profile z social media bez uż... Social media weszło już do naszej codzienności dawno temu. Kto nie ma konta na Facebook’u, Twiter. Instagramie czy innym portalu społecznościowym? Pra...

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. 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:
linki-przesylanie-disavow
Zgłaszanie pliku disavow i prośby o rozpatrzenie

Na początku wspomnę może o tym jak powinien być zbudowany plik disavow i co powinien zawierać. Plik powinien zawierać listę...

Zamknij