Hier ein Beispiel mit den Open Graph Meta Daten
Für ein aktuelles Projekt setze ich das Theme Customizr ein und wpSEO. Hierbei werde ich die Beitragsbilder für die Open Graph Meta Daten verwenden, ohne das dieses Bild direkt auf der Seite gezeigt werden muss. Die Artikelbilder direkt einzublenden ist nicht immer sinnvoll, da diese für Social Media andere Größen haben sollen als oft im Design vorgesehen. Also lieber Bilder manuell eintragen und ein Beitragsbild für Soziale Netzwerke bereithalten.
Integration der Open Graph Meta Daten
Eine einfache Lösung die auf im Hilfecenter von wpSEO vorgestellt wird beinhaltet folgende Erweiterung (header.php):
<meta property="og:title" content="<?php do_action('wpseo_the_title') ?>" />
<meta property="og:description" content="<?php do_action('wpseo_the_desc') ?>" />
[ Quelle: Daten für Open Graph Protokoll aus wpSEO ]
Jetpack verwende ich nicht – hier gibt es ebenfalls eine Erweiterungsmöglichkeit
Für die Twitter Cards bietet der Plugin-Autor ebenfalls eine Lösung an:
<?php if ( is_singular() || is_front_page() ) { ?>
<meta name="twitter:card" value="summary" />
<meta name="twitter:site" value="@website-account"/>
<meta name="twitter:creator" value="@author-account" />
<meta name="twitter:url" value="<?php the_permalink() ?>" />
<meta name="twitter:title" value="<?php do_action('wpseo_the_title') ?>" />
<meta name="twitter:description" value="<?php do_action('wpseo_the_desc') ?>" />
<?php if ( is_singular() && has_post_thumbnail(get_the_ID()) ) {
$post_thumbs = wp_get_attachment_image_src(
get_post_thumbnail_id( get_the_ID() ),
'full'
);
if ( ! empty($post_thumbs[0]) ) { ?>
<meta name="twitter:image" value="<?php echo esc_url($post_thumbs[0]) ?>" />
<?php }
} ?>
<?php } ?>
[ Quelle: Ausgabe der Twitter Cards Informationen im WordPress-Template header.php befüllt mit wpSEO Metadaten – wpSEO Twitter Cards https://gist.github.com/sergejmueller/5382823 update 2018 – nicht mehr verfügbar]
Diese Variante setzt auf die Datei header.php, mit dem Customizer Theme und kann man das so nicht lösen.
In einem weiteren Artikel Paulund.co.uk wird eine Funktion definiert und an wp_head mit dem „add_action“ gebunden.
[Quelle: Paulund.co.uk: Add Facebook Open Graph Tags To WordPress ]
Diese Vorlage habe ich nur noch mit den Meta Feldern von wpSEO ergänzen und voila! (nein nicht Templa voi…)
Child Theme für Customizr erstellen
Das ist einfach und braucht nur eine „fast leere“ style.css. In meinem Fall benötige ich noch die Datei functions.php. Diese enthält schlauerweise „nur“ den Aufruf :
//Fire Customizr require_once( get_template_directory() . '/inc/init.php' );
Bei Updates und der Verwendung eines Child Themes ist das von großem Vorteil. Hier müssen nur die wirklichen Erweiterungen eingetragen werden. Das Theme bleibt update-fähig!
Der folgende Code wurde der functions.php hinzugefügt:
// Facebook Open Graph
add_action('wp_head', 'add_fb_open_graph_tags');
function add_fb_open_graph_tags() {
//if (is_single()) {
global $post;
if(get_the_post_thumbnail($post->ID, 'thumbnail')) {
$thumbnail_id = get_post_thumbnail_id($post->ID);
$thumbnail_object = get_post($thumbnail_id);
$image = $thumbnail_object->guid;
} else {
$image = ''; // Change this to the URL of the logo you want beside your links shown on Facebook
}
$description = get_bloginfo('description');
$description = strip_tags($description);
$description = str_replace("\"", "'", $description);
?>
<meta property="og:title" content="<?php do_action('wpseo_the_title') ?>" />
<meta property="og:type" content="article" />
<meta property="og:image" content="<?php echo $image; ?>" />
<meta property="og:url" content="<?php the_permalink(); ?>" />
<meta property="og:description" content="<?php do_action('wpseo_the_desc') ?>" />
<meta property="og:site_name" content="<?php echo get_bloginfo('name'); ?>" />
<?php
//}
}
Bei dem Beispiel wird bei einem Fehlenden Beitragsbild das Logo als alternatives Bild. Wenn man will kann man natürlich auch einfach abfragen ob ein Bild existiert.
Dieses Beispiel lässt sich natürlich noch erweitern. Weitere Parameter können aus dem Blog ausgelesen und hier werden.
Fragen und Anregungen sind willkommen.
Enrico Cotulelli
HInweis: Für Fehler in den angegebenen Beispielen übernehme ich keinerlei Garantie und auch keine Haftung!