Mit einem kleinen Codeschnipsel in der Header.php könnt ihr selbst festlegen, welches Bild, welcher Titel und welche Beschreibung an Facebook weiter gegeben werden soll. So geht ihr auf Nummer sicher, dass euer geteilter Post auch auf Facebook schick aussieht.
Webseiten auf Facebook teilen zu lassen ist eine super Sache. Allerdings greift sich Facebook einfach irgendeine Grafik heraus und setzt im Default Zustand als Beschreibungstext lediglich die ersten Worte.
Ihr könnt selbst festlegen, welches Bild, welcher Titel und welche Beschreibung an Facebook weiter gegeben werden soll. So geht ihr auf Nummer sicher, dass euer geteilter Post auch auf Facebook schick aussieht. Dafür sind die Open Graph Angaben im Header der Website zuständig:
<meta property="og:title" content="Titel der Seite" /> <meta property="og:description" content="Beschreibungstext" /> <meta property="og:image" content="dein_Beitragsbild.jpg" />
Und so sieht das dann in Facebook aus:
Es gibt diverse Plugins, mit denen man Bilder und Texte zum Teilen für Facebook explizit setzen kann. Beispielsweise das SEO-Plugin von Yoast. Wenn bei euch allerdings das Beitragsbild durchgängig zum Teilen ausreicht, dann könnt ihr euch diesen Mehraufwand beim schreiben eines einzelnen Blogartikel sparen
Denn die Integration der Open Graph Daten ohne Plugin ist super einfach in wenigen Minuten erledigt.
<!--allgemeine Angaben für alle Seitentypen --> <meta property="og:site_name" content="ideenlounge.de" /> <meta property="og:url" content="<?php echo 'https://www.ideenlounge.de'.$_SERVER['REQUEST_URI']; ?>"/> <meta property="og:type" content="website" /> <meta property="og:locale" content="de_de" /> <!-- Archivseiten Titel = Category-Titel Description = Blogtitel & Blogbeschreibung Bild = Standardbild --> <?php if ( is_archive() ) { ?> <meta property="og:title" content="<?php single_cat_title( '', true ); ?>" /> <meta property="og:description" content="<?php bloginfo( 'name' ); ?> | <?php bloginfo( 'description' ); ?>" /> <meta property="og:image" content="<?php echo get_stylesheet_directory_uri(); ?>/images/opengraph.jpg" /> <?php } <!-- Single / Artikel --> elseif ( is_single()) {?> <meta property="og:title" content="<?php the_title() ?>" /> <meta property="og:description" content="<?php echo get_the_excerpt(); ?>" /> <?php <!--Single / Artikel: Wenn kein Beitragsbild vorhanden ist, wird das Standardbild angezeigt--> if(has_post_thumbnail()) :?><meta property="og:image" content="<?php $thumb_id = get_post_thumbnail_id(); $thumb_url = wp_get_attachment_image_src($thumb_id,'thumbnail-size', true); echo $thumb_url[0]; ?>" /> <?php else :?> <meta property="og:image" content="<?php echo get_stylesheet_directory_uri(); ?>/images/opengraph.jpg" /> <?php endif;?> <!-- Restliche Seiten (Startseite, Seiten, Suche, etc...) Titel = Blogtitel Description = Blogbeschreibung Bild = Standardbild --> <?php } else {?> <meta property="og:title" content="<?php bloginfo( 'name' ); ?>" /> <meta property="og:description" content="<?php bloginfo( 'description' ); ?>" /> <meta property="og:image" content="<?php echo get_stylesheet_directory_uri(); ?>/images/opengraph.jpg" /> <?php }?>
Die roten Kommentare könnt ihr entfernen. Wichtig: Bitte ersetzt am Anfang den Wert für og:site_name mit eurem eigenen Namen und setzt für das Standardbild – hier opengraph.jpg – den Namen eures Standardbildes ein.
Der Code kann noch weiter aufgedröselt werden – beispielsweise für Seiten oder mit Ausgabe eines Kategoriebildes. Hier auf der Ideenlounge bin ich mit dieser Lösung jedoch super zufrieden. Also Leute – testet das mal und teilt fleißig diesen Artikel 🙂
Wenn ihr einfach global für euren Blog ein Bild einmalig einstellen möchtet, braucht ihr nicht die ganzen Abgfrage, ob es eine Single Seite oder ein Archiv ist. dann reicht einfach diese Zeile:
<meta property="og:image" content="<?php echo get_stylesheet_directory_uri(); ?>/images/opengraph.jpg“ />
In diesem Fall wird ein Bild global für den kompletten Blog genommen.
Das werde ich mir doch mal näher anschauen, bin selbst gerade einen Monat dabei mit meinem Blog und kann noch Tipps gebrauchen
Uiii, für einen Monat schaut dein Blog aber schon richtig gut aus! Habe gleich mal dein Gewinnspiel in meinem Kochblog geteilt 🙂
Hi Mirjam
wollte heute deine lösung auf meinem Blog anwenden. Leider ist der Blog nicht mehr erreichbar, sobald ich deinen code oben (angepasst auf meine Umgebung) in die header.php des themes einfüge.
So sieht der angepasste code aus den ich einfüge:
<meta property="og:url" content="“/>
<meta property="og:title" content="“ />
<meta property="og:description" content=" | “ />
<meta property="og:image" content="/images/default_article.jpg“ />
<?php }
elseif ( is_single()) {?>
<meta property="og:title" content="“ />
<meta property="og:description" content="“ />
<?php
if(has_post_thumbnail()) :?><meta property="og:image" content="“ />
<meta property="og:image" content="/images/default_article.jpg“ />
<meta property="og:title" content="“ />
<meta property="og:description" content="“ />
<meta property="og:image" content="/images/default_article.jpg“ />
vielleicht hast mal Zeit, wäre super lieb 😉
DankUrs
Hallo,
da hat es ein paar PHP-Schleifen zerschossen 🙂 Und zwar fehlt beispielsweise die Abfrage
Sehe ich das richtig, dass du immer das selbe Bild geteilt haben möchtest?
Wenn ja, kannst du statt dem ganzen Quellcodegedönse eine Zeile einsetzen – diese Zeile habe ich im Artikel ganz unten ergänzt, nachdem WordPress sich weigert, diese Zeile in einem Kommentar auszugeben 🙂
Die ganzen Abfragen braucht es nur, wenn man für die Single Seiten jeweils das Beitragsbild verwenden möchte.
Und die anderen Angaben wie og:description und og:title würde ich weglassen, wenn hier kein expliziter Inhalt angegeben wird – denn sonst kann es passieren, dass nur ein Leerzeichen an Facebook übergeben wird.
Ciao,
Mirjam
Danke Mirjam
Da habe ich wohl was falsch verstanden bei deiner Lösung.
Facebook „frisst“ meine ‚futured images‘ nicht, wenn ich den Beitragslink poste. Mit deiner Lösung hier werden die vordefinierten Bilder gezeigt. Ist mein fehler…aber vieleicht weisst du da ja aucg
h Rat?