Ostatnio pisałem o pewnej sztuczce, którą czasem stosuje by zmusić mechanizmy Facebooka do wyświetlenia informacji o linkowanej stronie dokładnie tak jak ja chcę, a nie tak jak akurat bawią się „chłopcy z Facebooka” (bo mam wrażenie, że – zwłaszcza ostatnio – co chwilę coś mieszają w tym temacie). Tam też pokazałem jak możemy – dla pewności – dodać na stronie taki „Open Graph”, tak by mechanizmy Facebooka odpowiedzialne za pobieranie i przetwarzanie danych nie miały wątpliwości jak interpretować treści na stronie.

W przypadku strony internetowej o relatywnie statycznej zawartości/konstrukcji sprawa jest dość prosta – na każdej (pod)stronie ustawiamy odpowiednie nagłówki i temat mamy z głowy. Sprawa trochę się komplikuje w przypadku bardziej dynamicznej (zawartości) strony.

Facebook Open Graph w WordPressie

Przykładem takiej bardziej dynamicznej strony będzie np. blog na WordPressie, gdzie oprócz kilku statycznych stron generujemy regularnie nowe wpisy, i często nie ma możliwości (lub jest to niepraktyczne) ręcznego ustalania tagów dla każdego wpisu (każdej strony) oddzielnie.

Odpowiednie tagi możemy dodać np. za pomocą często polecanej – nie tylko w tym kontekście – wtyczki Yoast SEO, ale moim zdaniem jest to niczym strzelanie do wróbla z okrętowej armaty – można, ale sensu w tym niewiele. Choć od razu przyznam, że podchodzę dość sceptycznie do tego typu wtyczek, które często są instalowane z automatu, bez żadnej refleksji „czy potrzeba”, „czy ktoś będzie w ogóle ją obsługiwał”. Zazwyczaj odbywa się to jakby wedle zasady „ktoś gdzieś napisał, że…”.

Dlatego my skorzystamy z kodu PHP, który dodamy do naszego WordPressa. Czy będzie to w ramach pliku functions.php, czy też zrobicie z tego własną wtyczkę – wybór zostawiam Wam. Przykładowy kod może wyglądać tak:

function webinsider_wp_facebook_open_graph_meta_property() {
    global $post;
    
    // SEKCJA 1A
    if( ( is_singular( 'post' ) ) || ( is_singular( 'page' )  ) ) {
        echo '<meta property="og:title" content="' . get_the_title( $post->ID ) . '"/>';
        echo '<meta property="og:url" content="' . get_permalink( $post->ID ) . '"/>';
        echo '<meta property="og:site_name" content="' . get_bloginfo( 'name' ) . '"/>'; 
    }
    else { // SEKCJA 1B
        echo '<meta property="og:title" content="' . get_bloginfo( 'name' ) . '"/>';
        echo '<meta property="og:url" content="' . get_option( 'siteurl' ) . '"/>';
        echo '<meta property="og:site_name" content="' . get_bloginfo( 'name' ) . '"/>'; 
    } 
    
    // SEKCJA 2
    if( is_singular( 'post' ) ) {
        echo '<meta property="og:type" content="article" />';
    }
    
    // SEKCJA 3A
    if( ( has_post_thumbnail( $post->ID ) ) && ( is_singular( 'post' ) ) ) {
        $post_thumbnail_url = get_the_post_thumbnail_url( $post->ID, 'xlarge' );
        echo '<meta property="og:image" content="' . $post_thumbnail_url . '" />';
    }
    else { // SEKCJA 3B
        $default_post_thumbnail = "https://webinsider.pl/wp-content/uploads/wipl_post-thumbnail_inne_wipl.jpg";
        echo '<meta property="og:image" content="' . $default_post_thumbnail . '" />';
    }
    
    // SEKCJA 4A
    if( $post->post_excerpt ) {
        $description = wp_strip_all_tags ( $post->post_excerpt );
        $description = str_replace( "\"", "'", $description );
    }
    else { // SEKCJA 4B
        $post_content = get_extended( $post->post_content );
        $post_content = wp_strip_all_tags( $post_content['main'] );
        
        if( ( is_singular( 'post' ) ) && ( mb_strlen( $post_content ) >= 5  ) ) {
            $description = str_replace( "\"", "'", $post_content );
        }
        else { // SEKCJA 4C
            $description = get_bloginfo( 'description' );
        }
    }
    echo '<meta property="og:description" content="' . $description . '"/>'; 

}
add_action( 'wp_head', 'webinsider_wp_facebook_open_graph_meta_property' );

Specjalnie na potrzeby tego poradnika kod podzieliłem na kilka sekcji:

  • SEKCJA 1 – Kilka podstawowych tagów (tytuł, adres strony, nazwa strony), których zawartość jest pobierana zależnie od tego czy jest to wpis/strona (1A) czy inna strona, np. strona główna (1B)
  • SEKCJA 2 – W przypadku postów dodatkowo określamy typ strony/zawartości jako „artykuł”
  • SEKCJA 3A/3B – Jeśli jest to wpis i ma ustawiony obrazek wyróżniający, to zostaje on wykorzystany (3A), w innym przypadku zostaje wykorzystana grafika domyślna (3B)
  • SEKCJA 4A/4B/4C – Jako opis zawartości strony w pierwszej kolejności jest wykorzystywana tzw. „zajawka” (4A). W przypadku gdy jej brak i mamy do czynienia z postem/wpisem wykorzystywana jest treść wpisu, aż do znacznika „czytaj dalej” (4B), lub – w przypadku braku treści (lub gdy ma mniej niż 5 znaków) lub gdy nie jest to post/wpis – wykorzystywany jest tekst z opisu/ustawień WordPressa (4C)
Jeśli korzystacie ze stron zabezpieczonych hasłem (jedna ze standardowych funkcji WordPressa) warto rozważyć dodanie wyjątku, gdyż w innym przypadku „zajawka” (jej długość zależy od ustawień) będzie widoczna w kodzie strony. Ewentualnie wystarczy pamiętać, by „elementy tajne” wpisywać dopiero po „zajawce”.

Oczywiście nic nie stoi na przeszkodzie byście kod dopasowali do własnych potrzeb, czy to modyfikując treści (a już na pewno adres domyślnej grafiki ;-)), czy też dodając kolejne – mniej standardowe – tagi (np. fb:app_id).

Zweryfikować poprawność działania kodu możecie m.in. za pomocą narzędzi Open Graph Object Debugger i Sharing Debugger, o których pisałem niedawno, przy okazji wspomnianego już poradnika dotyczącego pewnej sztuczki, dzięki której czasem muszę zmuszać mechanizmy Facebooka do wyświetlenia informacji o linkowanej stronie dokładnie tak jak ja chcę.

(!) Zgłoś błąd na stronie
Potrzebujesz profesjonalnej pomocy? Skontaktuj się z nami!
Spodobał Ci się artykuł? Zapisz się do naszego Newslettera - ZERO SPAMu, same konkrety, oraz dostęp do dodatkowych materiałów przeznaczonych dla subskrybentów!
Na podany adres e-mail otrzymasz od nas wiadomość e-mail, w której znajdziesz link do potwierdzenia subskrypcji naszego Newslettera. Dzięki temu mamy pewność, że nikt nie dodał Twojego adresu przez przypadek. Jeśli wiadomość nie przyjdzie w ciągu najbliższej godziny (zazwyczaj jest to maksymalnie kilka minut) sprawdź folder SPAM.
Janusz i Janusz zapisali się do Newslettera WebInsider.pl i... sobie chwalą
WebInsider poleca księgowość wFirma
WebInsider korzysta z VPSa w HitMe.pl
WebInsider poleca VPSy DigitalOcean
WebInsider poleca serwis Vindicat
Napisz komentarz
wipl_napisz-komentarz_01Jeśli informacje zawarte na tej stronie okazały się pomocne, możesz nam podziękować zostawiając poniżej swój komentarz.

W tej formie możesz również zadać dodatkowe pytania dotyczące wpisu, na które – w miarę możliwości – spróbujemy Ci odpowiedzieć.
Linki partnerskie
Niektóre z linków na tej stronie to tzw. „linki partnerskie”, co oznacza, że jeśli klikniesz na link i dokonasz wymaganej akcji (np. zakup/rejestracja) możemy otrzymać za to prowizję. Pamiętaj, że polecamy tylko te produkty i usługi, z których sami korzystamy, i uważamy, że są tego na prawdę warte… :-)
Znaki towarowe i nazwy marek
W niektórych wpisach (oraz innych miejscach na stronie) mogą być przedstawione/użyte znaki towarowe i/lub nazwy marek, które stanowią własność intelektualną tych podmiotów, a zostały użyte wyłącznie w celach informacyjnych.
Janusz i Janusz zapisali się do Newslettera WebInsider.pl i... sobie chwalą