Social Images

[neelix]

Hallo zusammen,

ich habe die Erweiterung Social Images (https://github.com/codefog/contao-social_images) installiert. Eigentlich mit dem Gedanken, dass sie beim Teilen von Events auf Facebook automatisch das Teaserbild übernimmt. Tut sie aber nicht. Zumindest nicht solange, wie die Detailseite nicht mehr als den Teaser enthält.

Wenn aber die Detailseite Inhalt ohne ein Bild enthält, was in diesem Fall die Regel ist, dann wird kein Bild übernommen. Noch nicht mal das in der Root-Seite eingestellte.

Verstehe ich hier etwas falsch? Gibt es eine bessere Erweiterung für meinen Zweck?

Danke & Gruß

Neelix

[Spooky]

Hast du die Funktion denn überhaupt in deinem Seitenlayout aktiviert?

[neelix]

Ja. Sonst würde ja gar kein Bild übernommen.

Beispiele:
https://www.opengraph.xyz/url/https%...rsammlung.html
(Kein Bild in den Details, kein Bild in den OpenGraph-Daten.)

https://www.opengraph.xyz/url/https%...f-klausen.html
(Nur Teaserbild - wird übernommen.)

[Spooky]

Ja. Sonst würde ja gar kein Bild übernommen.

Doch, Facebook sucht sich dann eines von der Seite aus, wenn kein og:image definiert ist.

[neelix]

Ich teste ja absichtlich nicht mit Facebook (kann ich auch nicht, bin kein Kunde bei Meta), sondern mit OpenGraph Tools, aber irgendwie kommt da nie das raus, was ich erwartet habe.

Probier mal selbst mit https://dev.luetteraten.de/

[Spooky]

Solange im Quellcode der og:image Meta Tag ausgegeben wird, funktioniert die Extension.

[neelix]

Aber eben das wird er ja nicht.
siehe hier: https://dev.luetteraten.de/events/de...rsammlung.html
Der Eintrag hat ein Teaserbild.

Und auf der Startseite stehen sogar fünf Einträge:

<meta property="og:image" content="https://dev.luetteraten.de/files/img/hero_images/20230315_170658.jpg">
<meta property="og:image:width" content="4032">
<meta property="og:image:height" content="2268">
<meta property="og:image" content="https://dev.luetteraten.de/files/img/events/guenter_muechler.JPG">
<meta property="og:image:width" content="2016">
<meta property="og:image:height" content="1512">
<meta property="og:image" content="https://dev.luetteraten.de/files/img/events/mangold27.jpeg">
<meta property="og:image:width" content="1854">
<meta property="og:image:height" content="1658">
<meta property="og:image" content="https://dev.luetteraten.de/files/img/events/IMG_9811.JPG">
<meta property="og:image:width" content="2016">
<meta property="og:image:height" content="1512">
<meta property="og:image" content="https://dev.luetteraten.de/files/img/events/IKLR_Pla_web_GTschinag_230309.png">
<meta property="og:image:width" content="1778">

Aber z.B. nicht der, den ich in den Seiteneigenschaften festgelegt habe.

[Spooky]

Poste einen Screenshot der Einstellungen deiner Root Seite, Startseite und der jeweiligen Seitenlayouts.

[neelix]

Screenshot 2023-04-09 at 23-30-32 Seitenstruktur Seite ID 2 bearbeiten dev.luetteraten.de.png
Screenshot 2023-04-09 at 23-31-03 Seitenstruktur Seite ID 1 bearbeiten dev.luetteraten.de.png
Screenshot 2023-04-09 at 23-31-28 Themes OPTIMIST Seitenlayouts Seitenlayout ID 7 bearbeiten dev.png

Beim Layout weigert sich das Forum. Die Datei ist zu groß. Daher nur der Ausschnitt.

Nachtrag:
Was mir gerade auffällt: Die Einträge auf der Startseite sind die dort vorhandenen Bilder. Aber es müssten eigentlich noch mehr Einträge sein. Das sind aber SVG Grafiken. Die werden ignoriert. Auch die in der Root- und Startseite ausgewählte Datei ist eine SVG-Grafik. Nämlich das Logo.
Und das könnte auch erklären, warum ich bei den Events kein Bild sehe.

OpenGraph unterschützt wohl auch kein SVG. Aber es gibt kein besseres Format, damit eine Grafik stufenlos skaliert.

Wenn ich das richtig sehe, könnte ImageMagick das SVG nach PNG konvertieren. Setzt aber wohl voraus, dass zusätzlich Inkscape bzw. RSVG installiert ist.

[Spooky]

SVGs sind grundsätzlich erlaubt (ob das von den jeweiligen Services, die die Open Graph Daten nutzen, verarbeitet werden kann ist eine andere Geschichte). Du hast als Mindestgröße 200x200 im Seitenlayout eingestellt. Welche Größe haben deine SVGs? Vermutlich weniger als 200x200, wenn du sagst, dass du dort das Logo eingefügt hast. Dein Logo hat aktuell gar keine fix definierte Größe und ansonsten eine Viewport Größe von 156.86x194.49 und wird somit ignoriert.

Unabhängig davon macht es nicht wirklich Sinn ein kleines Logo als og:image zu definieren. Für Facebook sollte es bspw. ein Grafik mit einer Mindestgröße von 1200x600 Pixel sein. Die Safe Area innerhalb dieser Grafik ist dann ungefähr 4:3.

[neelix]

Ich hatte nur kurz Google befragt und gelesen, dass FB mit SVGs nichts anfragen kann.

Aber es bringt mir auch nichts, wenn auf einer Seite 10 Bilder sind, die dann alle als og:image aufgelistet werden und FB das letzte oder irgendeines davon nimmt (s. Startseite, wo Artikel, News und Termine Bilder haben können). Ich kann auch nicht garantieren, dass die von der Größe den FB Vorgaben entsprechen. Die, die die Bilder bei den Veranstaltungen machen, habe davon keine Ahnung (wollen sie auch nicht). Bei Vereinen muss man nehmen, was man bekommen kann (wenn der Verein nicht gerade groß genug ist um sich eine PR-Abteilung leisten zu können).
Also gibt es keine automatische Übernahme der Bilder nach FB.

Danke.

[Spooky]

Also gibt es keine automatische Übernahme der Bilder nach FB.

In wie fern gibt es das nicht? Mit der Extension kannst du prinzipiell ein Default og:image festlegen (eigens erstellte Grafik) und ansonsten wird bei News & Events das Teaserbild genommen bspw.

Kann natürlich sein, dass das nicht immer Sinn macht - aber besser als nichts, denn Facebook nimmt sich ansonsten irgendein Bild von der Seite.

[neelix]

Ich kann das aber nicht wirklich steuern.

Wenn die Einstellung aktiv ist, bietet die Erweiterung alle Bilder einer Seite an, die die Anforderungen erfüllen, oder man muss für jede Seite oder jede/n Termin/News explizit ein Bild festlegen. Das ist in diesem Fall in der Praxis nicht mach. Also werde ich vermutlich eine Grafik global über den Header definieren. Dann gibt es auch keine Probleme, wenn FB ein Bild würfeln sollte, das nicht für Social Media bestimmt ist.

[Spooky]

Ich kann natürlich nur von unseren Kunden sprechen - aber dort wird meist im Website Root das generelle og:image festgelegt und ansonsten werden die Teaser Images ausgespielt. Wir setzen die Einstellung wieviele og:image zur Verfügung stehen sollen dann auf 1. Das bedeutet es wird immer entweder das generelle og:image aus dem Website Root ausgespielt, oder eben ein Teaser Image, wenn vorhanden.

[neelix]

Ich probiere das gleich nochmal mit der 1.

Ist halt nur blöd, wenn das SVG nicht funktioniert.

[Spooky]

Ist halt nur blöd, wenn das SVG nicht funktioniert.

Siehe https://community.contao.org/de/show...l=1#post571451 - aber SVG nützt dir sowieso nichts bei Facebook bspw. Und der Fallback sollte ja eine Grafik sein, die beim Sharing einigermaßen gut aussieht.

[neelix]

So, ich habe jetzt eine für Facebook passende Grafik erstellt.

Habe die Anzahl der Bilder auf "1" gestellt und in der Root-Seite die Grafik hinterlegt.

Auf klassischen Seiten wird jetzt auch diese Grafik genommen, aber Probleme habe noch immer mit den Events und Terminen, wo als Teaser die SVG-Datei eingebunden ist. Die wird von der Erweiterung ignoriert, aber der Fallback greift nicht.
Beispiel: https://dev.luetteraten.de/aktuelles...eht-voran.html

[Spooky]

https://github.com/codefog/contao-social_images/pull/37

[neelix]

Dein PR klingt logisch. Ich habe die Zeilen bei mir gerade mal manuell geändert. Sieht gut aus. Habe ich auch im PR geschrieben.