Social-Media-Vorschau: Teaser-Bild beim Teilen

In diesem Beitrag dokumentieren wir die technische Implementierung der Social-Media-Vorschau (Open Graph & Twitter Cards) sowie des angepassten Favicons (Website-Icons) für unsere Website-Beiträge. Ziel war es, dass beim Teilen des Fun-Posts („Sommer, Sonne, Sprühdose: 5 Fakten über Berliner Graffiti“) das dazugehörige Graffiti-Teaserbild automatisch angezeigt wird und die Seite ein passendes, modernes Icon erhält.

Schritt 1: Zuweisung des Beitragsbildes (Featured Image)

Standardmäßig nutzt WordPress für Beiträge das sogenannte „Beitragsbild“ als primäres Repräsentationsbild. Im ersten Schritt wurde das hochgeladene Graffiti-Bild (berlin_graffiti_1781143028627.jpg) dem Beitrag mit der ID 13 als Beitragsbild zugewiesen.

Dies wurde per WP-CLI durchgeführt:

wp post update 13 --meta_input='{"_thumbnail_id": 12}' --path=/home/support/website

Hierbei ist 12 die ID des Medien-Attachments und 13 die ID des Blog-Beitrags.

Schritt 2: Bereitstellung von Open Graph- und Twitter-Metadaten

Da das aktive Theme (Twenty Twenty-Five) standardmäßig keine Social-Media-Tags im HTML-Header ausgibt und kein SEO-Plugin installiert ist, wurde ein schlankes, benutzerdefiniertes Must-Use-Plugin (MU-Plugin) entwickelt.

MU-Plugins werden von WordPress automatisch geladen und können nicht versehentlich deaktiviert werden. Die Datei wurde unter folgendem Pfad angelegt:
wp-content/mu-plugins/custom-open-graph.php

Der Quellcode des Plugins implementiert folgende Logik:

is_singular() Abfrage: Überprüft, ob ein einzelner Beitrag oder eine Seite aufgerufen wird.
Metadaten-Generierung:
- Titel: Nutzt den Beitragstitel.
- Beschreibung: Verwendet den Auszug (Excerpt) des Beitrags. Fehlt dieser, wird der Text des Beitrags automatisch gekürzt und von HTML-Tags gereinigt.
- Vorschau-Bild (Teaser): Nutzt das zugewiesene Beitragsbild. Um Verbindungsprobleme oder Ablehnungen durch Social-Media-Plattformen zu verhindern (z. B. WhatsApp beschränkt Bilder oft auf maximal 300KB), laden wir nicht das originale, 1,17 MB große Bild (1024×1024), sondern die optimierte Version medium_large (768x768px, ca. 181 KB). Falls kein Beitragsbild vorhanden ist, wird nach dem ersten im Text eingebetteten Bild gesucht.
Home- & Front-Page Fallback: Auf der Startseite der Website wird standardmäßig das Graffiti-Bild (oder das Profil-Avatar) als Vorschaubild geliefert (ebenfalls in der optimierten medium_large-Größe).

Der vollständige PHP-Code des Plugins:

<?php
/**
 * Plugin Name: Custom Open Graph Tags
 * Description: Adds Open Graph tags to the document head for social sharing.
 * Version: 1.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

function custom_og_tags() {
	$title = '';
	$description = '';
	$url = '';
	$image_url = '';
	$type = 'website';

	if ( is_singular() ) {
		global $post;
		$title = get_the_title( $post );
		$url = get_permalink( $post );
		$type = 'article';

		if ( has_excerpt( $post->ID ) ) {
			$description = get_the_excerpt( $post );
		} else {
			$content = preg_replace( '/<style[^>]*>.*?<\/style>/is', '', $post->post_content );
			$content = strip_shortcodes( $content );
			$content = wp_strip_all_tags( $content );
			$description = wp_html_excerpt( $content, 150 );
		}

		if ( has_post_thumbnail( $post->ID ) ) {
			$image_url = wp_get_attachment_image_url( get_post_thumbnail_id( $post->ID ), 'medium_large' );
		} else {
			if ( preg_match( '/<img[^>]+src=[\'"]([^\'"]+)[\'"]/i', $post->post_content, $matches ) ) {
				$image_url = $matches[1];
			}
		}
	} elseif ( is_home() || is_front_page() ) {
		$title = get_bloginfo( 'name' );
		$description = get_bloginfo( 'description' );
		$url = home_url( '/' );
		
		$image_url = wp_get_attachment_image_url( 12, 'medium_large' );
		if ( ! $image_url ) {
			$image_url = wp_get_attachment_image_url( 8, 'medium_large' );
		}
	}

	$description = trim( preg_replace( '/\s+/', ' ', $description ) );

	if ( ! empty( $title ) ) {
		echo "\n<!-- Start Custom Open Graph Tags -->\n";
		echo '<meta property="og:site_name" content="' . esc_attr( get_bloginfo( 'name' ) ) . '" />' . "\n";
		echo '<meta property="og:type" content="' . esc_attr( $type ) . '" />' . "\n";
		echo '<meta property="og:title" content="' . esc_attr( $title ) . '" />' . "\n";
		echo '<meta property="og:url" content="' . esc_url( $url ) . '" />' . "\n";
		if ( ! empty( $description ) ) {
			echo '<meta property="og:description" content="' . esc_attr( $description ) . '" />' . "\n";
		}
		if ( ! empty( $image_url ) ) {
			echo '<meta property="og:image" content="' . esc_url( $image_url ) . '" />' . "\n";
			echo '<meta name="twitter:card" content="summary_large_image" />' . "\n";
			echo '<meta name="twitter:title" content="' . esc_attr( $title ) . '" />' . "\n";
			if ( ! empty( $description ) ) {
				echo '<meta name="twitter:description" content="' . esc_attr( $description ) . '" />' . "\n";
			}
			echo '<meta name="twitter:image" content="' . esc_url( $image_url ) . '" />' . "\n";
		}
		echo "<!-- End Custom Open Graph Tags -->\n\n";
	}
}
add_action( 'wp_head', 'custom_og_tags', 5 );

Schritt 3: Design und Einbindung des Favicons (Website-Icons)

Um die standardmäßige WordPress-Logovorschau beim Teilen von Links oder in Browsertabs zu ersetzen, wurde ein passendes Favicon generiert und eingebunden:

Design: Ein kreisförmiges Icon mit einer stilisierten Spraydose im neonfarbenen Graffiti-Stil (Pink, Neongrün/Türkis) auf schwarzem Hintergrund.
Mediathek-Import & Zuweisung: Das generierte Icon wurde in die Mediathek importiert (ID 32) und als offizielles Website-Icon (Favicon) festgelegt:
```
wp option update site_icon 32 --path=/home/support/website
```
WordPress generiert daraufhin automatisch alle standardisierten Favicon-Größen und bindet sie im Header über entsprechende <link rel="icon" ...> Tags ein.

Schritt 4: Cache-Invalidierung

Da das Caching-Plugin WP Super Cache aktive statische HTML-Dateien ausliefert, mussten die bestehenden Cache-Dateien gelöscht werden, damit die neuen Metadaten im Header geladen werden. Dies wurde über administrative Serverrechte im Cache-Verzeichnis des Webservers ausgeführt:

sudo rm -rf wp-content/cache/supercache/urbanart.andur.de/*

Schritt 5: Validierung der HTML-Ausgabe

Die erfolgreiche Auslieferung der Metadaten wurde anschließend per Kommandozeilenabfrage überprüft:

curl -s -H "Host: urbanart.andur.de" http://127.0.0.1/2026/06/11/sommer-sonne-spruhdose-5-nicht-ganz-so-ernste-fakten-uber-berliner-graffiti/ | grep -A 12 "Start Custom Open Graph Tags"

Ergebnis: Die korrekten Vorschautags für Titel, Beschreibung, URL und Teaser-Bildadresse (http://urbanart.andur.de/wp-content/uploads/2026/06/berlin_graffiti_1781143028627-768x768.jpg) werden nun zuverlässig ausgesendet. Ebenso wurden die Favicon-Links verifiziert.

Wichtiger Hinweis zum Social-Media-Cache

Social-Media-Plattformen (wie Slack, WhatsApp, Facebook etc.) speichern Vorschau-Inhalte für bereits geteilte Links in ihrem eigenen Cache. Wenn ein Link bereits geteilt wurde, bevor das Beitragsbild oder die Tags eingerichtet waren, greifen die Plattformen auf ihren Cache zurück und zeigen das alte WordPress-Logo an. Um eine Aktualisierung zu erzwingen:

Hängen Sie einen Parameter an die URL an (z. B. ?v=3 oder ?neu=1), wenn Sie den Link teilen. Dies zwingt die Plattform, die Seite neu abzurufen.
Nutzen Sie Entwickler-Tools wie den Facebook Sharing Debugger, um den Cache für eine spezifische URL manuell zu leeren.

Die Social-Media-Vorschau und das Website-Favicon sind damit vollständig einsatzbereit und funktionieren dynamisch für alle zukünftigen Seitenaufrufe!