Webdesign, WordPress Programmierung, Online und Social Media Marketing - Dienstleistungen & Blog

WordPress Artikelbild als Bild zum Link in Google Plus ausgeben

WordPress Artikelbild

Wie kriege ich Google Plus dazu mein WordPress Artikelbild als Bild zu meinem Link auszugeben? Eine Frage mit der ich mich 2 Tage beschäftigte, denn Google Plus wollte meine Artikelbilder, die ich ja ebenfalls in den Artikeln anzeige, einfach nicht anzeigen. Scheinbar gibt es eine Mindestgröße für ein Bild, damit Google Plus sich das automatisch zieht. Und diese scheint bei 120 Pixeln zu liegen. Wenn ein Bild nicht mindestens 120 Pixel breit oder hoch ist, wird es von Google Plus ignoriert. Und meine Artikelbilder haben aus Design Gründen eine Größe von 80 x 80 Pixel. Da war nun guter Rat teuer, denn eine allgemeine Größenänderung der Artikelbilder kommt aus Designgründen nicht in Frage.

WordPress Artikelbild als Image Link im Head ausgeben

Ungeachtet dessen, ob ein Artikelbild im Artikel selbst ausgegeben wird, kann man es im Head Bereich der Webseite als Image Link ausgeben. Damit kann man soziale Netzwerke wie Facebook und Google Plus anweisen, dieses Bild bevorzugt anzuzeigen. Dazu wird einfach im Head Bereich der header.php an gewünschter Stelle der folgende Code eingegeben:

<?php if (is_single() && has_post_thumbnail() ) {
$image_url = wp_get_attachment_image_src( get_post_thumbnail_id() ); ?>
<link rel="image_src" href="<?php echo $image_url[0] ?>" />
<?php } ?>

Dieser Code fragt erst ab, ob die Seite ein Artikel ist (is_single()) und ob dem entsprechenden Artikel ein Artikelbild zugeordnet wurde (has_post_thumbnail()). Ist beides der Fall, holt sich die nächste Zeile die URL des Artikelsbild und gibt diese in der dritten Zeile als Image Link aus.

Damit war ich persönlich der Lösung meines Problems noch keinen Schritt näher, denn meine Artikelbilder haben ja eine Größe von 80 x 80 Pixel und damit werden sie von Google Plus ignoriert.

Artikelbild als größeres Bild im Head ausgeben

Um nun zwar einerseits an der Ausgabe der Größe meiner Artikelbilder selbst nichts zu ändern, sie aber mit einer Größe von 120 x 120 Pixel als Link Image im Head Bereich auszugeben, sind mehrere Schritte notwendig.

Als erstes muss in den Theme Dateien, überall wo das Artikelbild ausgegeben wird, die Größe angegeben werden:

<?php if ( has_post_thumbnail() )
 the_post_thumbnail(array(80,80));
} ?>

Mit dem Zusatz array(80,80) erreiche ich die Ausgabe der Größe 80 x 80 Pixel in meinem Theme.

Als zweiten Schritt ändere ich die Mittlere Bildgröße in den WordPress Einstellungen (Einstellungen/Mediathek – Mittlere Bildgröße: 120 x 120). So kann ich nun meine Bilder in der gewünschten Größe von mindestens 120 x 120 Pixel hochladen und WordPress macht einmal mein 80 x 80 Pixel großes Artikelbild draus (Größe der Miniaturbilder in den Einstellungen auf 80 x 80). Zusätzlich legt WordPress die mittlere Version in der Größe 120 x 120 Pixel an.

Im dritten Schritt kann ich nun meine Programmierung von vorhin im Head-Bereich entsprechend anpassen, damit WordPress automatisch das größere Bild, also das mittlere Bild hier ausgibt:

<?php if (is_single() && has_post_thumbnail() ) {
$image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), "medium" ); ?>
<link rel="image_src" href="<?php echo $image_url[0] ?>" />
<?php } ?>

Zum ersten Code ist hier nur der Teil , "medium" in der zweiten Zeile hinzugekommen, damit WordPress das mittlere Bild holt.

Zugegeben, das Ganze ist ein Workaround. Und wer die mittlere Bildgröße für etwas anderes nutzt, der kann auf diesen nicht zurückgreifen. Da ich bis auf die Miniaturbilder aber selbst diese Bildgrößen sonst nicht nutze, ist es für mich eine praktikable Lösung, um Google Plus dazu zu bringen, meine Artikelbilder als Bild zum Link mit auszugeben. Der einzige Haken an der Sache ist, dass sie erst ab jetzt funktioniert, weil die Artikelbilder meiner älteren Artikel alle zu klein sind. Außer ich würde sie manuell einzeln anpassen (als größere Version hochladen). Dafür ist mir aber der Aufwand zu groß. Es reicht schon, dass ich mir für diese Lösung nun angewöhnen muss meine Artikelbilder in der Größe von mindestens 120 x 120 Pixel zu erstellen und hochzuladen.

Dieser Artikel hat Dir gefallen? Dann würde ich mich über eine Empfehlung freuen:

Google +1
1
Twittern
8
Facebook Share
1
Lesetipps mit ähnlicher Thematik:
  • Gern verwendete Suchbegriffe:
  • wordpress artikelbild
  • google plus links unter bilder
  • <link rel=image_src href= google
  • versteckts bild für link wordpress
  • wie ändert man das große foto bei wordpress
1 Pingback:
20 Kommentare:
  1. Marc — 6.12.2011, 21:08 Uhr:

    Kopfkratz.
    Habe mich mangels kompatiblem Theme noch nicht mit Artikelbildern beschäftig, bring mich auf’s laufende ;-)
    Ist das Artikelbild immer Smallsize? Oder kann man – nach Lust und Laune – auch mal das Medium oder Large Format nehmen?

  2. Marc — 6.12.2011, 21:10 Uhr:

    PS: http://i.imgur.com/ncIx1.png
    Die Überlagerung Bild/Text sieht leicht… seltsam aus?!

  3. Tanja — 7.12.2011, 07:13 Uhr:

    @Marc: Die Artikelbilder sind hinter der WordPress Funktion post_thumbnail versteckt. Da sollte man sich schon auf eine Größe beschränken. Ich denke es gibt diese Funktion seit WP 2.9 (wenn ich nicht irre) und die Bilder sind nicht im Artikel selbst integriert, sondern über das Theme mit der Funktion. Wenn du es in den Artikel selbst einfügst, kannst Du Dich für das Format entscheiden, das Du möchtest, ansonsten ist es eine Größe.

    Hab Dir schon eine eMail dazu geschrieben. Welcher Browser? Ich kann das hier nirgends nachvollziehen (auch nicht Miren). Siehst so aus, als ob da die Funktion mit der Verkleinerung nicht funktioniert.

  4. Sylvi — 10.12.2011, 15:35 Uhr:

    Hallo Tanja,

    ich habe ebenfalls das Problem, dass meine Artikelbilder sowohl vom Haupt- als auch bunten Blog nicht bei Google+ gepostet werden. Meist bietet er vom Hauptblog nur meinen Twittervogel an, eine Auswahl über die Pfeile ist überhaupt nicht möglich.
    Nun habe ich Deinen Code in der header.php an allen erdenklichen Stellen eingefügt, aber ständig erscheint ein Syntax Error?
    Hast Du eine Idee, woran das liegen könnte?

    Lieben Gruß
    Sylvi

  5. Tanja — 10.12.2011, 17:35 Uhr:

    @Sylvi: Syntax Error klingt nicht gut. Nutzt Du auch wirklich die Artikelbild Funktion in Deinen Blogs? Dazu muss:

    a) post_thumbnails über die functions.php aktiviert sein:
    if ( function_exists('add_theme_support') )
    add_theme_support('post-thumbnails');

    b) bei den Artikel selbst auch ein Artikelbild hinzugefügt worden sein.

    Der erste bzw. dritte Code in meinem Artikel gehört in die header.php des Themes innerhalb des head-Bereichs.

  6. Sylvi — 10.12.2011, 18:27 Uhr:

    Hej Tanja,

    ich habe mal den Code add_theme_support( 'post-thumbnails', array( 'post' ) ); ersetzt durch Deinen Kommentar-Code.
    Auch habe ich im head-Bereich der header.php den ersten Code eingefügt.
    Artikelbilder verwende ich zwar, d. h. ich benenne eines bei “Artikelbild festlegen”, aber letztendlich füge ich die Bilder dann im Beitrag selber manuell ein und lasse sie dort nicht automatisch generieren. Könnte es vielleicht daran liegen?
    Was ich allerdings in jedem Beitrag zusätzlich noch einsetze ist, dass ich ein benutzerdefiniertes Feld “thumbnail” verwende und dort den Link der gewünschten Mediendatei einfüge.

    Gruß Sylvi

  7. Tanja — 10.12.2011, 18:34 Uhr:

    @Sylvi: Klingt nach ein bissi viel des Ganzen. Aber ohne den genauen Fehler kann ich nicht sagen, woran es liegt. Du kannst ihn mir ja mal per eMail schicken, dann kuck ich mir das an.

  8. Sylvi — 10.12.2011, 18:52 Uhr:

    Mal ne ganz andere Theorie. Könnte es an der Dateieindung jpg liegen? Ich habe nämlich jetzt ein wenig herumprobiert und mit gif-Bildern scheint es keine Probleme zu geben. Mein Twitter-Vogel ist png.
    Nur die jpg-Bilder verweigert google+.

  9. vanvox — 10.12.2011, 19:45 Uhr:

    Also ich habe das Problem seit ein paar Tagen auch, dassbei Google+ nur noch mein Bild aus der Sidebar zur Auswahl steht. Davor konnte ich noch jedes Bild, das im Artikel eingebunden war auswählen. Facebook macht das richtig. Und ich habe es auch mal mit Artikelbild probiert, was bei mir 150×150 ist und auch das geht nicht. Ich warte noch ein bisschen ab, bevor ich am Code etwas ändere, vielleicht ändert Google das wieder.

  10. Sylvi — 10.12.2011, 20:54 Uhr:

    So, ich bin nun ein Stückchen weiter. Bei mir lag das Problem des syntax errors in der geschweiften Klammer einmal vor “$image_url” des Codes in der header.php und auch beim Einbau z. B. in der single.php (auch wieder vor “$image_url”). Nachdem ich diese entfernt hatte, konnte die Seite wieder problemlos geladen werden.
    Nur funktioniert die Ausgabe des jpg-Bildes immer noch nicht bei Google+. Wer weiß woran das liegt. Ich werde auf jeden Fall am Ball bleiben.

    Gruß Sylvi

  11. Sylvi — 10.12.2011, 23:14 Uhr:

    Jetzt aber ein letztes Mal ;-) . Ich habe die Macke gefunden (wer lesen kann ist klar im Vorteil) … war meine eigene Blödheit. Meine Thumbnails waren auf 150 x 112 festgelegt. Nun habe ich das letzte Bild mal auf 150 x 120 eingestellt und schon klappt es.

  12. Tanja — 11.12.2011, 07:42 Uhr:

    @Sylvi: Das mit den jpg’s ist ein guter Punkt, ich verwende nämlich auch fast nur solche. Nimmt Google+ auch kleinere Bilder (kleiner 120×120) in den anderen Formaten?

    Geschweifte Klammern: Jeckerl, mein Fehler. Die gehören da schon rein, nur hat es die letzte Zeile jeweils verschluckt, weil ich vergessen hatte die eckige Klammer im Code Snippet zu kodieren. Wenn man eine geschweifte Klammer aufmacht, muss man sie auch zumachen. Hab das gerade korrigiert. Danke für den Hinweis.
    In der single.php musst Du den Code für die header.php übrigens nicht mehr einbauen. Wenn er in der header.php drin ist, dann wird er auch in den einzelnen Artikeln angezeigt. Kuck mal Deinen Quelltext an in einem Artikel, da müsste der Image-Link jetzt zwei mal drin sein. In der single.php arbeite ich nur mit dem zweiten Code Schnipsel, um das Artikelbild im Beitrag selbst den Lesern anzuzeigen.

    Gut zu wissen, dass Google auch nur mit einer Seite kleiner 120 Pixel Probleme macht…

    @vanvox: Bei mir war das von Anfang an so. Bilder kleiner als 120×120 sind, mag Google nicht.

  13. Sylvi — 11.12.2011, 12:01 Uhr:

    Ich möchte nur noch mal kurz schildern, was ich nun alles gemacht habe (war ja klar, dass da oben doch noch nicht mein letzter Kommentar dazu war ;-) ):

    1. Den ersten Code in die header.php eingebaut
    2. die geschweifte Klammer wie oben beschrieben entfernt
    3. Meinen Code durch deinen empfohlenen Kommentar-Code if ( function_exists('add_theme_support') )
    add_theme_support('post-thumbnails');
    in der funcitions.php ersetzt.
    4. Nur mal versuchsweise den Code für die Ausgabe des Artikelbildes in der single.php eingebaut – funktioniert! Habe ihn aber wieder entfernt, weil ich die Bilder lieber manuell einbaue.
    5. Bei beiden Blogs die Bilder der letzten Artikeln statt in der Thumbnail-Größe 150 x 112 in der Größe 150 x 120 eingebunden.
    DAS war es letztendlich, warum statt der Codes die Bilder immer noch nicht angezeigt wurden – es lag an der Bildgrö0e.
    Dass die gif-Bilder bei Google+ gepostet werden konnten, lag wohl daran, dass ich diese auch schon mal in ihrer ursprünglichen – nicht Thumbnail-Größe – im Beitrag einbinde.

    Auf jeden Fall klappt es nun und ich bin total erleichtert.

    Einen schönen 3. Advent,
    lieben Gruß
    Sylvi

  14. Tanja — 11.12.2011, 12:05 Uhr:

    @Sylvi: Wichtig ist, dass es klappt. Du musst nur nochmal kucken, was bei Artikeln passiert, wo Du kein Artikelbild verwendest. Dazu könnte nämlich die geschweifte Klammer vonnöten sein (nicht dass es dort was verhaut). Nur war es eben mein Fehler, dass die auch wieder geschlossen gehört in der letzten Zeile (den Code hat es mir zerhaun oben im Artikel, ist jetzt aber korrigiert).

  15. Sylvi — 11.12.2011, 12:25 Uhr:

    Alles klar, habe den Code auf allen Seiten noch mal geändert (mit beiden geschweiften Klammern) und die Seiten werfen keinen Syntax Error aus. Danke schön. :-)

  16. Tanja — 11.12.2011, 13:09 Uhr:

    @Sylvi: Perfetto :-) Der Syntax Error von vorher geht auf meine bzw. auf die WordPress Kappe.

  17. Marc — 17.01.2012, 16:08 Uhr:

    Mal zurück zu diesem Thema, weil ich den Code demnächst verwenden will ;-)

    Meine WP-Thumbnail-Größe ist 100×100 – und Google+ verwendet diese anstandslos!

  18. Marc — 17.01.2012, 16:11 Uhr:

    PS: und beim fröhlichen googeln lese ich gerade, dass sowohl fb als auch G+ scharf auf diesen Metatag für ein Artikelbild sind?!

  19. Marc — 17.01.2012, 16:12 Uhr:

    PPS: Bäh, mein Code wurde verschluckt… also hier gucken:
    http://agafix.org/show-specific-thumbnail-while-sharing-on-google-facebook/

  20. Tanja — 18.01.2012, 08:38 Uhr:

    @Marc: Vielleicht hat Google in der Zwischenzeit was geändert. Vorher war auf jeden Fall die Mindestgröße 120px, habe ich auch im Netz immer mal wieder gelesen.

    Der meta property wäre natürlich auch eine Möglichkeit. Mir persönlich gefällt aber das link image etwas besser. Ist Geschmackssache denke ich.

Hinterlasse einen Kommentar

» nach oben springen «
Blogverzeichnis - Blog Verzeichnis bloggerei.de    BlogPingR.de - Blog Ping-Dienst, Blogmonitor