Technische Ausgangslage.
Das Amicas Typo3 ist so aufgebaut, dass fast jede angelegt Seite, ein dazu gehöriges Bild hat, welches grundsätzlich im Mittelframe-Content als Seiteninhalt ausgelesen wird, abgelegt im Fileadmin.

Fehlfunktion:
Wenn man über Whatsapp einen Link in das Amicas Typo3 versendet, dann wird das richtige Bild (siehe Prioritätenreihung) noch nicht richtig mitübertragen in die Whatsapp-Nachricht

Fehlerbeispiele: 

• A - http://www.lebensschule.at/lebens-weisheiten/lebensplan-als-kompass - Redaktioneller Text mit Bild im Mittelframe - Bild kommt nicht richtig im Whatsapp-Link
• B - http://www.lebensschule.at/reise-ins-lebens-glueck - Redaktioneller Text mit Bild im Mittelframe - Bild kommt nicht richtig im Whatsapp-Link
• C - https://www.yogibaer.at/brot-selbst-backen - hier kommt das richtige Bild = Headerbild, weil es keinen Mittelframe-Content mit Bildern gibt.
• D - https://www.yogibaer.at/gelateria - Hier kommt das falsche Bild von Header, obwohl es im Mittelframe ein Bild vom redaktionellen Eintrag gibt.

Offene Frage - die vermutlich über das Template gesteuert werden muss: "Wenn auf einer Seite eines bestimmten Links mehrere Bilder verwendet werden - welches Bild wird dann mit welcher Priorität über den Versandlink bei Whatsapp eingefügt?"

Ideale und hoffentlich auch technisch mögliche Prioritätenreihung in der Auswahl, welches Bild bei Whatsapp-Nachricht eingefügt wird:

1. Das 1. Bild vom Mittelframe-Content oder von der Newsnachricht = das betrifft bzw. löst wohl 98 % der vorkommenden Fälle, was das richtige Bild betrifft, da so gut wie jeder Contentlink in`s Amicas Typo3 (in ein Serviceportal) ein zugehöriges Bild im Mittelframe-Textteil hat.
2. Das Headerbild (wenn sonst kein Content-Bild da ist)
3. Das Serviceportal-Startseitenbild (Wenn der Punkt 1 oder 2 nicht zutrifft)

Oder anders ausgedrückt:

• A) Nur wenn die Domaine alleine, ohne Unterseiten, angegeben wird, kommt das Headerbild. Z. B. https://www.lebensschule.at
• B) Sobald es eine Unterseite der Domaine gibt, wie z. B. https://www.lebensschule.at/servicevorstellung kommt das Bild aus dem redaktionellen Textteil im Mittelframe.

Externe Beispiele, wo das so gut funktioniert, wo man sich das ev. im Code der Seite ansehen kann, wie das gemacht wurde, zum Nachmachen.

• https://www.krone.at/3144304 - Beispiel für Bild, das von einem Artikel im Mittelframe richtig genommen wird, genauso sollte es bei uns im Typo3 auch funktionieren.
• https://www.meinbezirk.at/pongau/c-lokales/lage-spitzt-sich-im-gasteinertal-zu_a6232176 - 1. Bild aus dem Mittelframe-Content wird richtig im Whatsapp-Link dargestellt
• https://www.salzburg24.at/news/salzburg/dauerregen-in-salzburg-lokale-ueberflutungen-im-gasteinertal-und-grossarltal-144358237 - 1. Bild aus dem Mittelframe-Content wird richtig im Whatsapp-Link dargestellt
• https://www.kopp-verlag.at/a/fett-heilt-zucker-toetet - das ist ein Beispiel für einen Idealfall von einem Whatsapp-Link auf einen Content in einem Serviceportal - Der Whatsapp-Link bringt
  • Das 1. Bild vom redaktionellen Teil (Mittelframe-Content)
  • Die 1. Überschrift vom Seiteninhalt
  • Die 2. Überschrift vom Seiteninhalt.
  • Die Hauptdomaine vom Serviceportal

Fehlercheck-Stand: 2023-02-02 / 2023-06-09 / 2023-11-03 / 2024-07-03

Mustermailtext
++++++++++++++++++++++++++++++++++++++++++++

Problemstellung: Whats-App-Link übernimmt Bild aus Content einer Typo3 Seite nicht

Ein herzliches Hallo!

Wir haben gelesen, dass Sie Profis beim Typo3 sind.
Haben Sie die Problemstellung - beschrieben am nachfolgenden Link - schon mal gelöst?

https://www.lebensschule.at/lebens-weisheiten/lebensplan-als-kompass

Liebe Grüße - Husch Gerhard

E-Mail: office@amicas.at
Tel-Mobil. 0043-664-4011351

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Diesen Link an folgende Unternehmungen gesendet:

• Mittwald - www.mittwald.de - support@mittwald.de - Anfrage vom: 2024-06-20
• WOW-Solutions - https://www.wow-solution.at - support@wow-solution.at - Anfrage vom: 2024-06-20
• Toll-Taul - www.toll-paul.de - hi@toll-paul.de - Anfrage vom: 2024-06-20
• Typo3 Manufaktur - https://www.typo3manufaktur.com/ - kontakt@typo3manufaktur.com - Anfrage vom: 2024-06-20
• P2Media.de/Agentur - www.p2media.de/agentur/ - kontakt@p2media.de - Anfrage vom: 2024-06-20
• C2Media - www.c2media.de - info@c2media.de - Anfrage vom: 2024-06-20
• JWeiland - www.jweiland.net - support@jweiland.net - Anfrage vom: 2024-06-20
• Gluescreen - Typo3 Agentur - https://digitalagenturwien.at/typo3-agentur/ - anfragen@digitalagenturwien.at - Anfrage vom: 2024-06-20
• Paraplan - www.paraplan.com - info@paraplan.de - Anfrage vom: 2024-06-20
• Valid - www.valid-digital.com - info@valid-digital.com - Anfrage vom: 2024-06-20
• Typo3-Experten - https://www.typo3experten.com/ - office@webprofil.at - Anfrage vom: 2024-06-20
• Tuga - www.tuga.at - orga@tuga.at - Anfrage vom: 2024-06-20
• Team Digital - www.team-digital.de - info@team-digital.de - Anfrage vom: 2024-06-20
• Screencode - www.screencode.at - office@screencode.at - Anfrage vom: 2024-06-20
• Typo3-Profi DE - www.typo3profi.de - info@artif.com - Anfrage vom: 2024-06-20
• Webagentur-BB.com - https://www.webagentur-bb.com/angebot/typo3-profi/ - info@webagentur-bb.com - Anfrage vom: 2024-06-20
• Brandpfeil - https://brandpfeil.de/digitale-plattformen/website-entwicklung/typo3 - kontakt@brandpfeil.de - Anfrage vom: 2024-06-20
• Webviertler - https://www.w4.at/typo3-agentur/ - office@w4.at - Anfrage vom: 2024-06-20
• Sgalinski - https://www.sgalinski.de/typo3-agentur/typo3-support-schulungen/ - support@sgalinski.de - Anfrage vom: 2024-06-20
• Websedit - https://www.websedit.de - info@websedit.de - Anfrage vom: 2024-06-20

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Die Lösungsansätze durch die Rückmeldungen werden gesammelt auf www.amicas.at/6400.0.html

Problembeschreibung: 
In der Praxis hat sich hier noch ein Problemchen herausgefiltert – Fehlfunktion im Programmiercode wie eingestellt auf https://www.club-der-freiheit.at/manipulation/krisen -

Fehleranalyse: 
Wenn sich auf der Seite, wohin im Whatsapp verlinkt wird, im Template unterhalb ein Index mit Infoboxen befindet, dann nimmt der Whatsapp-Link (Social-Media-Link) FALSCH das Bild von der ersten Infobox unten auf der Seite.

Fehleranalyse von Didi:
Der Code funktioniert hier nicht weil die ersten Absätze vom Typ "Datensatz einfügen" (shortcut) sind.
Dieser Contenttyp wird nicht nach Bildern durchsucht weil die Bilder nicht im aktuellen Absatz, sondern im Referenz-Absatz zu finden sind. 
Der Code berücksichtig nur"Text mit Bild" und "Text mit Medien". 
lg Didi

Lösungsansatz:
Das bedeutet, dass das 1. Bild im Mittelframe, das ausgelesen werden soll, keinesfalls über "Datensatz" einfügen kommen darf, sondern einfach direkt mit der Funktion "Text und Medien" redaktionell gelöst werden muss. 

Achtung - die nachfolgend E-Mail ist fehlerhaft, da fehlt ein wichtiges Bild mit dem 
Programmiercode, welcher in der Original-E-Mail, die aufbewahrt wurde, noch erhalten ist.
++++++++++++++++++++++++++++++++++++++++++++++++++++++

Von: Christian Katzinger <christian@screencode.at>
Gesendet: Montag, Juni 24, 2024 9:36:48 AM
An: Marcin Szostak <marcin@screencode.at>
Betreff: Antwort lebensschule

Normalerweise verwendet WhatsApp das Bild, welches im Quellcode unter "og:image" hinterlegt ist:

Dieses Bild kann in TYPO3 in den Seiteneigenschaften manuell gesetzt werden:

In Ihrem Fall funktioniert das aus zwei Gründen nicht: 

• Der unter og:image hinterlegte Pfad zeigt auf das Headerbild - nicht auf das gewünschte Bild mit dem Schiff. 
• Der hinterlegte Pfad ist relativ (also ohne https://www.lebensschule.at). Damit og:image korrekt funktioniert, muss dieser Pfad absolut sein. Warum das der Fall ist bei Ihnen, können wir leider nicht sagen ohne genauere Informationen zum Setup. 

Wenn Sie das Bild nicht manuell setzen wollen auf jeder Seite, sondern automatisiert das erste Bild aus dem Content verwenden möchten, müsste das manuell programmiert werden. 

Das könnte zB mit PHP gemacht werden über die MetaTag API (https://docs.typo3.org/m/typo3/reference-coreapi/9.5/en-us/ApiOverview/MetaTagApi/Index.html)

Oder alternativ rein über TypoScript. Hier der (ungetestete) Vorschlag dafür von ChatGPT: 

Wir hoffen, das hilft Ihnen weiter - ansonsten einfach gerne nochmals melden.

Christian Katzinger, BA
Web Developer

M: +43-699-132 79 77 1
E: christian@screencode.at


screencode GmbH
Linzer Straße 17, 4100 Ottensheim
T: +43-699-132 79 77 1
E: office@screencode.at
W: www.screencode.at

FN 335268 t, Gerichtsstand Urfahr
UID-Nr.: ATU 65252139

Hallo Herr Husch,

generell muss hierfür das Bild als og:image im Quellcode hinterlegt werden. Dafür müsste das Bild gekennzeichnet werden bzw. nochmal in den Seiteneigenschaften hinterlegt werden. In den aktuelleren TYPO3-Versionen ist dies bereits von Haus aus möglich. Soweit ich mich erinnere hatten wir das in älteren Versionen nachgerüstet über eine Extension.

Generell gibt es aber auch Regeln bei den Bildern einzuhalten. Die genauen Specs habe ich jedoch nicht gefunden.

https://stackoverflow.com/questions/19778620/provide-an-image-for-whatsapp-link-sharing

https://stackoverflow.com/questions/50096135/include-image-when-sharing-a-link-on-whatsapp

Generell könnte sich das vermutlich mit ein paar wenigen Stunden erledigen lassen. So wirklich exakt, kann ich das leider nicht einschätzen. Wir haben einen Stundensatz von 90€.

Stefan Galinski

sgalinski | Inhaber & Geschäftsführer | Ryte Expert (SEO)

TYPO3 Gold Member | TYPO3 Technology Partner

Tel.: +49 (0) 151 21240734

Skype: stefangalinski | https://www.sgalinski.de

sgalinski Internet Services | 37339 Gernrode | Bahnhofstr. Gernrode 52

Hallo Gerhard,

vielen Dank für Deine sehr konkrete Frage.

Social Media nutzt das Open-Graph-Modell.

Im auf Eurer Seite hinterlegten Image-Tag ist das Bild als „relativer“ Pfad abgebildet:

<meta property="og:image" content="/fileadmin/_processed_/a/8/csm_0000734_freepik_schiff_nach_kompass_steuern_500_35b9acb0c6.jpg">

Richtig wäre es so:

<meta property="og:image" content="https://www.lebensschule.at/fileadmin/_processed_/a/8/csm_0000734_freepik_schiff_nach_kompass_steuern_500_35b9acb0c6.jpg">

Die Einstellung in TYPO3 dürfte in der Site-Konfiguration zu finden sein.

Hilft Dir das weiter?

Viele Grüße

Michael

Michael Friedrich

Geschäftsführer

michael.friedrich@brandpfeil.de

+49 40 609 400 842

brandpfeil GmbH
menschlich. partnerschaftlich. digital

Neuer Kamp 3
20359 Hamburg

www.brandpfeil.de

www.instagram.com/brandpfeil

 

Guten Tag Herr Husch,

vielen Dank für Ihre E-Mail.

og: Tags sind vorhanden, wenn diese von WhatsApp ignoriert werden, könnte es am fehlerhaften HTML Code liegen:

https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.lebensschule.at%2Flebens-weisheiten%2Flebensplan-als-kompass

Auch in der Browser Console werden Fehler gemeldet, die sollten ebenfalls behoben werden.

Eine gute Möglichkeit ist auch der Facebook Debugger zum Testen, dazu muss aber die URL auf Facebook geteilt werden:

https://developers.facebook.com/tools/debug/ 

Viele Grüße

Jochen Weiland

Ach übrigens: Google Plus gibt es schon seit Jahren nicht mehr

--
TYPO3 Hosting, Projekte, Schulungen
Info + Support: 0800 - 8976326 (0800 - TYPO3CM)
Außerhalb Deutschland: +49-711-94969-60

jweiland.net - Jochen Weiland
Echterdinger Str. 57
70794 Filderstadt
USt-ID: DE226345594

20.06.2024 20:25 (Europe/Berlin) - Husch Gerhard schrieb:

Ein herzliches Hallo!
 
Wir haben gelesen, dass Sie Profis beim Typo3 sind.

Haben Sie die Problemstellung - beschrieben am nachfolgenden Link - schon mal gelöst?
 
https://www.lebensschule.at/lebens-weisheiten/lebensplan-als-kompass
 
Liebe Grüße - Husch Gerhard
 
E-Mail: office@amicas.at
Tel-Mobil. 0043-664-4011351

Lieber Herr Husch!

Ja das könnten wir gerne für Sie relativ einfach umsetzen - um es genau sagen zu können, bräuchten wir Zugang zu Ihrem System, aber ich denke das es sollte sich in 2-3h zu Netto € 145,-- lösen lassen.

Derzeit ist einfach Ihr Header Bild (https://www.lebensschule.at/fileadmin/lebensschule/spruchkarten/lebens-weisheiten/0000068_freepik_lebensweisheiten_sprueche_zitate_1000.jpg) als Social Media Share Bild definiert weshalb es auch von WhatsApp herangezogen ist - wir könnten Ihnen aber ermöglichen, über Ihre Seiteneigenschaften für jede Seite selbst zu bestimmen, welches Bild für das SocialSharing - also auch WhatsApp herangezogen werden sollte - und somit verhindern, dass immer nur das Headerbild genommen wird.

Beste Grüße - Wolfgang Wagner

• Idee A) Wir nehmen ein Beispiel, sprich eine Seite aus dem Amicas Typo3, weil hier dann "Datensatz einfügen" funktioniert - und fügen dort die Fehlermeldung ein. In der Praxis hat sich dann rausgestellt, dass das nicht gut passt, weil dort z. B. auf der Ebene der Versicherungssparten das Spartenbild im Header eingefügt ist.
• Idee B) Wir bleiben im SP der Amicas Lebensschule und nehmen das Fehlerbeispiel A - https://www.lebensschule.at/lebens-weisheiten/lebensplan-als-kompass und fügen dort dann die Fehlerinfo extra ein.