Hallo
Ich würde gerne, dass wenn man meine Website mit einem Messanger wie Whatsapp verschickt, über dem Link ein Bild Angezeigt wird. Bis jetzt klappt es nicht, da ist nur der Name der Website zu sehen. Ich habe ein Favicon, aber das wird da nicht angezeigt. Könnt ihr mir weiter helfen?
Das FavIcon ist hier relativ egal.
Was du hier brauchst, ist Open Graph, genaugenommen folgender Code
<meta property="og:image" content="http://www.deinbild/images/bild.png"/>
<meta property="og:title" content="Dein Seitentitel"/>
<meta property="og:description" content="Deine Seitenbeschreibung"/>Mit dem FavIcon könnnen wir uns angucken, wenn wir die Seite oder den COde dazu haben.
Vielen Dank. Das habe ich jetzt im head stehen. Die ID wurde mir von Facebook empfohlen. Das Bild ist 1040 x 697 px groß. Es Funktioniert bei Facebook, bei Whatsapp wird Titel, Beschreibung und Link angezeigt, aber das Bild nicht.Muss für Whatsapp noch etwas anders gemacht werden?
Verwendeter Link: "https://jplichttechnik.de" (wird auf "https://jplichttechnik.de/home.html" umgeleitet.
<head>
<title>JP Lichttechnik | Home</title>
<meta charset="utf-8">
<link rel="stylesheet" href="CSS/style.css">
<link rel="shortcut icon" type="imagex-icon" href="IMG/tabreiter.ico.ico">
<meta property="og:title" content="JP Lichttechnik"/>
<meta property="og:url" content="https://jplichttechnik.de/Home.html"/>
<meta property="og:image" content="https://jplichttechnik.de/IMG/JP-Lichttechnik.png"/>
<meta property="og:description" content="Lichttechnikverleih"/>
<meta property="og:type" content="Website"/>
<meta property="fb:app_id" content="2910180315735743"/>
</head>Ja, dein Bild ist einfach zu groß.
Whatsapp unterstützt nur bis 300 KB. Deins ist knapp 900 KB groß.
Alles klar. Weißt du, ob man da noch ein zweites Bild, für genau solche fälle anlegen kann?
Wie meinst du das?
Ob du ein extra Bild nur für die Vorschau anlegen kannst? Kla, warum denn nicht. Einfach ein optimiertes Bild hochladen und verlinken.
Also ich hab jetzt den Code geändert, das Bild als jpg umgewandelt und einen og:image:alt Tag eingefügt, bei Whatsapp erscheint leider immer noch nichts. Die Bilder sind unter 300KB. Weiß jemand jetzt noch einen Ratschlag?
<head>
<title>JP Lichttechnik | Home</title>
<meta charset="utf-8">
<link rel="stylesheet" href="CSS/style.css">
<link rel="shortcut icon" type="imagex-icon" href="IMG/tabreiter.ico.ico">
<meta property="og:title" content="JP Lichttechnik"/>
<meta property="og:url" content="https://jplichttechnik.de/Home.html"/>
<meta property="og:image" content="https://jplichttechnik.de/IMG/JP-Lichttechnik.png"/>
<meta property="og:image:alt" content="https://jplichttechnik.de/IMG/Logo.png"/>
<meta property="og:description" content="Lichttechnikverleih"/>
<meta property="og:type" content="Website"/>
<meta property="fb:app_id" content="2910180315735743"/>
</head>https://jplichttechnik.de/IMG/JP-Lichttechnik.png
The requested URL was not found on this server.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
Existiert nicht.
Setz da bitte <meta property="og:image" content="https://jplichttechnik.de/IMG/Logo.png"/>
Noch eins. das Bild ist zwar 150 KB groß, aber warum ist für ein Thumbnail verdammt groß (1241x1182). Das würde ich noch verkleinern.
Weiterhin
og:image:alt
Eine Beschreibung dessen, was auf dem Bild zu sehen ist (keine Beschriftung). Bitte nimm da die URL raus.
Mehr dazu findest du unter https://ogp.me
Also ich hab jetzt den Code geändert, das Bild als jpg umgewandelt und einen og:image:alt Tag eingefügt, bei Whatsapp erscheint leider immer noch nichts. Die Bilder sind unter 300KB. Weiß jemand jetzt noch einen Ratschlag?
Jo.Wie mein Vordermann schon sagt ,
den Bildlink gibt es nicht https://jplichttechnik.de/IMG/JP-Lichttechnik.png
und warum ?
Lese deinen ersten Satz dann hast du dir die Antwort selber gegeben
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!
HTML-Seminar.de - mit Videos zum schnellen Lernen, wie man eine Website selbst erstellt.