Tagi Twitter Cards w WordPressie, czyli powiedz Twitterowi co jest czym na stronie (zwłaszcza gdy sam sobie nie radzi)
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.
Spis treści w artykule
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)
Na koniec zrzut z Twittera, czyli Twitter Cards w działaniu:
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 :-)
- Wakacje składkowe ZUS a zawieszenie działalności gospodarczej, czyli uważaj, bo być może nie będziesz mógł skorzystać (w 2024) - 1970-01-01
- Przykładowy kalkulator wyceny usługi druku 3D, czyli nie tylko materiał się liczy - 1970-01-01
- Home Assistant 2024.10, czyli nowa karta „nagłówek” i niedziałający TTS w ramach usługi Google Cloud - 1970-01-01
