Skoro wczoraj opublikowałem wpis/poradnik o tym jak dodać tagi Open Graph wykorzystywane przez Facebooka do strony opartej o WordPressa (choć nie tylko, bo schemat jest uniwersalny), to chyba nie ma powodów, by nie opublikować podobnego poradnika, z tym że dla Twittera.

Twitter Cards

Wprawdzie głównym elementem wpisu (poradnika) będzie kod do wykorzystania na stronie opartej o WordPressa, to zaczniemy od ogólnego schematu, z którego możecie skorzystać na dowolnej stronie:

<head>
    [...]
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@WebinsiderPL">
    <meta name="twitter:creator" content="@WebinsiderPL">
    <meta name="twitter:title" content="Tytuł (pod)strony"/>
    <meta name="twitter:description" content="Jakiś opis strony..."/>
    <meta name="twitter:image" content="grafika-promująca.jpg" />
    [...]
</head>

Praktycznie wszystko w powyższym kodzie powinno być raczej jasne, może poza jednym miejscem:

<meta name="twitter:card" content="summary_large_image">

Powyższa linijka definiuje tym „karty” na Twitterze, a konkretnie wpis/podsumowanie z (dużą) grafiką. Możecie ew. dać podsumowanie bez grafiki:

<meta name="twitter:card" content="summary">

Ale chyba każdy z Was się ze mną zgodzi, że w większości przypadków takie podsumowanie wygląda lepiej z grafiką, a już zdecydowanie lepiej przyciąga uwagę…

Twitter Cards w WordPressie

Podstawa za nami, możemy więc przejść do WordPressa, do którego dodamy „kilka linijek kodu” do pliku functions.php:

function webinsider_wp_twitter_card_property() {
    global $post;
        
    // SEKCJA 1
    echo '<meta name="twitter:card" content="summary_large_image">'; 
    echo '<meta name="twitter:site" content="@WebinsiderPL">'; 
    echo '<meta name="twitter:creator" content="@WebinsiderPL">'; 

    // SEKCJA 2
    if( ( is_singular( 'post' ) ) || ( is_singular( 'page' )  ) ) {
            echo '<meta name="twitter:title" content="' . esc_html( get_the_title( $post->ID ) ) . '"/>'; 
        }
        else {
            echo '<meta name="twitter:title" content="' . esc_html( get_bloginfo( 'name' ) ) . '"/>';
        }
    
    // SEKCJA 3A
    if( $post->post_excerpt ) {
        $description = wp_strip_all_tags ( $post->post_excerpt );
        $description = str_replace( "\"", "'", $description );
    }
    else { // SEKCJA 3B
        $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 3C
            $description = esc_html( get_bloginfo( 'description' ) );
        }
    }
    echo '<meta name="twitter:description" content="' . $description . '"/>'; 

    // SEKCJA 4A
    if( ( has_post_thumbnail( $post->ID ) ) && ( is_singular( 'post' ) ) ) {
        $post_thumbnail_url = get_the_post_thumbnail_url( $post->ID, 'xlarge' );
        echo '<meta name="twitter:image" content="' . $post_thumbnail_url . '" />';
    }
    else { // SEKCJA 4B
        $default_post_thumbnail = "https://webinsider.pl/wp-content/uploads/wipl_post-thumbnail_inne_wipl.jpg";
        echo '<meta name="twitter:image" content="' . $default_post_thumbnail . '">';
    }

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

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

  • SEKCJA 1 – Kilka podstawowych tagów, m.in. typ podsumowania oraz autora (profil na Twitterze)
  • SEKCJA 2 – W przypadku postów i stron wyświetlamy tytuł strony/wpisu, w innym przypadku podstawiamy nazwę strony/bloga
  • SEKCJA 3A/3B/3C – Jako opis zawartości strony w pierwszej kolejności jest wykorzystywana tzw. „zajawka” (3A). W przypadku gdy jej brak i mamy do czynienia z postem/wpisem wykorzystywana jest treść wpisu, aż do znacznika „czytaj dalej” (3B), 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 (3C)
  • SEKCJA 4A/4B – Jeśli jest to wpis i ma ustawiony obrazek wyróżniający, to zostaje on wykorzystany (4A), w innym przypadku zostaje wykorzystana grafika domyślna (4B)
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”.

Na koniec zrzut z Twittera, czyli Twitter Cards w działaniu:

(!) Zgłoś błąd na stronie

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.

Patryk

CEO Webinsider.pl, a do tego CTO, CIO, CFO, CMO, CSO, COO i CRO ;-)
Pasjonat nowych technologii - od sprzętu po oprogramowanie, od serwerów po smartfony i rozwiązania IoT. Potencjalnie kiepski bloger, bo nie robi zdjęć "talerza" zanim zacznie jeść.

Dumny przyjaciel swoich psów :-)