Bildanzeige in den Social Media

[stobi_de]

Welche Bilder werden eigentlich wo angezeigt, und in welchem Format sollen sie sein?
Das Bild für Whatsapp und für Facebook sind im Format ja völlig anders.
Wobei das vorgeschriebene Format für Facebook von 1200x630px wohl auch nicht (mehr) stimmt.

Nun könnte man zwar die wichtigsten Bildelemente immer in die Mitte des Bildes stellen, aber das passt halt manchmal nicht wirklich gut.

Tommy hat nur ein quadratisches Bild drin - ist aber für Facebook nicht immer optimal, wenn man was "bildgewaltiges" darstellen will

[Tommy Herrmann]

Moin,

also ich hatte mir da ursprünglich keine Gedanken drum gemacht und habe es erst in letzter Zeit aber öfter verwendet, da ich immer mal wieder meine neuen Tutorials bei Facebook poste:

https://www.facebook.com/NOF.Tutorials

... meiner Meinung nach ist das sehr gut für die SEO als Backlinks. Hier dieses kleine Projekt als Beispiel:

https://www.mobirise-tutorials.com/Tutorials/


Mobirise generiert dafür diese Meta-Tags auf der Seite:

Code: Alles auswählen

<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image:src" content="assets/images/index-meta.png">
<meta property="og:image" content="assets/images/index-meta.png">
<meta name="twitter:title" content="Mobirise-Tutorials - Anleitungen und Skripte">

... sobald man das auch unter den Seiteneinstellungen aktiviert:

... das meinst Du wohl, wenn Du von "quadratisch" sprichst was mein Logo hier zufällig ist:

https://www.mobirise-tutorials.com/Tuto ... x-meta.png



Auf dieser Unterseite "Hintergrund Fixiert":

https://www.mobirise-tutorials.com/Tuto ... xiert.html

... habe ich allerdings ein ganz normales Bild von "Pixabay" hinterlegt (1920px breit).

Das wird dann auf Facebook (Eintrag vom 02.12.2022) auch in der vollen Breite des Beitrages angezeigt. Es kommt also darauf an, wie man das darstellen will.

Auf meiner Seite "Breadcrumb Navi":

https://www.mobirise-tutorials.com/Tuto ... crumb.html

... habe ich so ein Pixabay-Bild dann mal auf 200px Breite verkleinert:

... was dann auf Facebook so wie im Beitrag vom 07. August 2022 eben auch klein und neben dem Text angezeigt wird:

... eine unbearbeitete Größe eines Bildes, wie z.B. von diesem Einkaufswagen kann schon bescheiden auf Facebook aussehen - da muss man wirklich den Einzelfall bearbeiten:

https://www.facebook.com/plugins/post.p ... ZpL6HuCpXl

Bei WhatsApp werden diese Bilder so nicht angezeigt, sondern nur die händisch gemachten Einträge von "Open Graph" wie ich sie auf meiner Domain-Startseite habe:

https://www.mobirise-tutorials.com/

Code: Alles auswählen

<meta property="og:url"                content="https://www.mobirise-tutorials.com/" />
<meta property="og:title"              content="Mobirise Tutorials" />
<meta property="og:description"        content="Mobirise-Tutorials in deutsch. Webbaukasten Mobirise. Ansichten und Tutorials von Tommy Herrmann." />
<meta property="og:type"               content="article" />
<meta property="og:image"              content="https://www.mobirise-tutorials.com/assets/images/logo-mobirise-250x250.png" />

Das Handy will als Download eines Bookmark auf dem Display dagegen dann das "apple-touch-icon" haben, dass ich ebenfalls auf meiner Domain-Startseite oder auch hier in diesem Forum händisch eingebaut habe:

https://www.mobirise-tutorials.com/

Code: Alles auswählen

<link rel="apple-touch-icon" href="https://www.mobirise-tutorials.com/apple-touch-icon-precomposed.png"/>

Das ist das Icon, das man dann am Handy-Display zum Start der Seite sieht (Shortcut) - wie mein Buch-Logo in diesem Screenshot mehrfach zu sehen ist:

[stobi_de]

Mir scheint es inzwischen so, also ob in Facebook das Mobi Social-Share Bild angezeigt wird und in Whatsapp dann das händisch eingefügte OG-image.
Irgendwo konnte man das mal in Facebook testen, habe aber vergessen, wo das war.
Ohne irgendwelche Testumgebung kommt in FB immer ein altes Bild.

Es wäre aber eine dumme Sache, wenn Facebook und Whatsapp das gleiche og-image verwenden würden. Dann ist eines immer falsch, wenn man ein großes Bild braucht!

[Tommy Herrmann]

... aber dieses Beispiel habe ich doch gerade genau beschrieben und dargestellt.

Für ein großes Bild auf Facebook eignet sich die "Social Image" Option in den Seiteneinstellungen von Mobirise hervorragend.

[Tommy Herrmann]

Ich habe hier auch lange gerätselt und herausgefunden, dass das "Open Graph Image" nur zum Beispiel bei "WhatsApp" angezeigt wird, wenn keine Datei angegeben wird - wie zum Beispiel:

index.html

Gebe ich zum Beispiel als bei "Senden an" nur diese URL an:

https://www.mobirise-tutorials.com/Tutorials/

... dann klappt das wunderbar mit dem Image - auch nur mit dem von Mobirise angegebenen Meta-Tag - man benötigt also nichts anderes:

Code: Alles auswählen

<meta property="og:image" content="assets/images/index-meta.png">

Gebe ich dagegen bei "Senden an" die URL und zusätzlich die Datei an - also zum Beispiel so:

https://www.mobirise-tutorials.com/Tutorials/index.html

... dann funktioniert das nicht mehr - dann wird das Bild nicht mit angezeigt.

[stobi_de]

Dann bleibt noch das Rätsel, warum in den Google-Suchergebnissen manchmal nicht das korrekte Icon angezeigt wird, auch wenn es die vorgeschriebene 192er Größe hat, die jeder Icongenerator als Standard erzeugt (war doch was im 32er Raster....).

Könnte man eigentlich mit dem Maik Lange testen (https://www.maik-lange.com/)
Den sollte ich noch nicht in Google anmelden, wird also noch nicht gefunden.

[Tommy Herrmann]

Moin,

Du - ja - keine Ahnung

Ich habe nichts dergleichen gemacht, keine Mini-Icons - kein nichts. Dennoch wird mein Logo bei Google angezeigt:

... übrigens (fast) überall - auch hier beim Forum:

[stobi_de]

Da gab es doch Anfang des Jahres ein Google-Update, seit dem ist alles anders bei neu angemeldeten Seiten.
Ich habe auch an einer Ecke gelesen, dass medizinische Seiten besonders geprüft werden. Was da jetzt allerdings geprüft wird, ist mir ein Rätsel. Vermutlich der Grund, warum die Bonn-HNO nicht in Google hochläuft.
Die ganzen anderen Arzt - Seiten sind in den Top-10, aber der eben nicht.
Vielleicht auch die Rache der Aktion, dass die Seite zunächst als Hauptdomain HNO-Bonn.eu lief, aber das EU gefiel dem Kunden nicht....

[Tommy Herrmann]

... hmm - diese Seite habe ich am 21. Februar 2023 erstmalig publiziert - glaube eher nicht, dass das Update da was gemacht hat. Keine Ahnung wann Google sie indiziert hat, aber auch da ist das kleine Icon.

https://www.mobirise-tutorials.com/Tuto ... llery.html

[Tommy Herrmann]

Moin,

also - ich musste hier noch weiter testen, denn das Icon ist nicht immer beim Senden eines Links an "WhatsApp" mit übertragen worden.

Ich bin mir jetzt fast sicher, dass das ein Bug in Mobirise ist.

Sobald ich bei "Social Sharing Image URL" eine absolute URL eintrage wird dieses Image auch immer bei WhatsApp dargestellt:

Verwende ich dagegen "Social Sharing Image" (ohne URL) wird ein relativer Pfad von Mobirise eingetragen und dann wird das Bild zwar zum Beispiel an Facebook übertragen, allerdings in einer falschen Größe, aber gar nicht an WhatsApp.

Hier kann das gerne getestet werden:

https://www.mobirise-tutorials.com/Tutorials/

und hier:

https://www.mobirise-tutorials.com/CMS-Dynpage/

... oder eben auch irgendein beliebig anderes Bild - ich habe jetzt bei meiner CMS-Seite anstelle von meinem Buch-Logo nun dieses Symbol verwendet:

... auf meiner "Hauptseite" geht das schon immer, weil ich dort die absoluten URLs schon von Beginn an selbst eingebaut hatte:

https://www.mobirise-tutorials.com/



Dies wird u.a. auch hier beschrieben:

Open Graph "og:image" attribute should use absolute URL instead of relative

https://github.com/jitsi/jitsi-meet/issues/6031

... siehe auch hier:

https://stackoverflow.com/questions/985 ... 94#9858694



Ich habe das hier im Hersteller-Forum nochmals gemeldet:

https://forums.mobirise.com/discussion/ ... e-issue/p1