Facebook und Twitter benötigen ein paar spezielle Tags, um geteilte Inhalte ansprechend darzustellen. Das erledigen oft Plugins, was aber gar nicht nötig ist. Hier ein Codeblock, der – wenn ein Artikelbild vorhanden ist – gar dieses mit dem Beitrag ausliefert.
Zunächst empfehlen wir Ihnen, ein Fallbackbild für Facebook und Twitter zu produzieren. Die Facebook-Version sollte gemäss Empfehlungen 1200px breit und 630px hoch ein. Jenes für Twitter misst 1024x512px. Diese Bilder laden Sie in die WordPress-Mediathek.
Das Facebook-Fallbackbild dieser Website sehen Sie hier als Verkleinerung.
Auch Gratisbilder können teuer werden
Seien Sie vorsichtig bei diesem Trick. Haben Sie wirklich das Recht, alle verwendeten Artikelbilder auf Facebook und Twitter zu veröffentlichen? Besonders Gratis-Bildagenturen schliessen dies oft aus.
Um (teure) Forderungen zu vermeiden, empfehlen wir Ihnen ersatzweise den Trick «Die Pflicht: WordPress-Website für Facebook und Twitter optimieren – mit Standardbild». Sicher ist sicher.
Nun fügen Sie der Datei header.php untenstehenden Code hinzu. Diese Datei öffnen Sie via Design/Theme-Editor. Der Code gehört unmittelbar oberhalb des Tags </head> platziert.
<?php
$page_id = get_queried_object_id();
if(has_post_thumbnail($page_id)){
$image_array = wp_get_attachment_image_src(get_post_thumbnail_id($page_id), "open-graph");
$facebookImgUrl = $image_array[0];}
else{
$facebookImgUrl = 'https://dr-code.ch/wp-content/uploads/dr-code-open-graph.png';}
?>
<meta property="og:url" content="<?php echo get_permalink(); ?>" />
<meta property="og:type" content="article" />
<meta property="og:title" content="<?php echo get_the_title(); ?>" />
<meta property="og:description" content="<?php echo get_the_excerpt(); ?>" />
<meta property="og:image" content="<?php echo $facebookImgUrl; ?>" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<?php
$page_id = get_queried_object_id();
if(has_post_thumbnail($page_id)){
$image_array = wp_get_attachment_image_src(get_post_thumbnail_id($page_id), "twitter-card");
$twitterImgUrl = $image_array[0];}
else{
$twitterImgUrl = 'https://dr-code.ch/wp-content/uploads/dr-code-twitter-graph.png';}
?>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="<?php echo get_permalink(); ?>"/>
<meta name="twitter:title" content="<?php echo get_the_title(); ?>">
<meta name="twitter:description" content="<?php echo get_the_excerpt(); ?>">
<meta name="twitter:image" content="<?php echo $twitterImgUrl; ?>">Folgende Dinge passieren in dem Snippet:
- Zeilen 1-8: Hier wird abgesucht, ob Sie ein Beitragsbild vergeben haben. Ist dies nicht der Fall, wird auf das Fallback-Bild, das Sie vorgängig erstellt haben, zurückgegriffen. Dieser Prozess wird auf den Zeilen 16-23 wiederholt – diesmal für Twitter.
- Ändern Sie bei Bedarf in Zeile 4 den Teil open-graph in das bei Ihnen zutreffende Format. Ebenso auf Zeile 19 den Teil twitter-card.
Wenn Sie noch keine Formate open-graph in den Massen 1200x630px und twitter-card (mit 1024x512px) besitzen, sollten Sie diese einrichten. Wie das geht, lesen Sie im Beitrag «Zusätzliche Bildformate für die WordPress-Mediathek». - Auf Zeile 7 steht derzeit die URL des Facebook-Fallbackbilds dieser Website. Hier tragen Sie die URL des von Ihnen erstellten Fallback-Bildes ein. Dasselbe auf Zeile 22 fürs Twitter-Fallbackbild.
- Auf den Zeilen 9-15 werden schliesslich die dynamischen Facebook-Angaben aus Ihrem WordPressbeitrag gesammelt und dargestellt – dasselbe für Twitter auf den Zeilen 24-28.
Wenn nun Ihre Seite oder Ihr Beitrag auf Facebook oder Twitter geteilt wird, erscheint ein ansprechend gestaltetes Beitragsbild und ein ansehnlicher Textauszug.
Werbung
Werbung
