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)

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