Checkliste für das Google-Icon

[stobi_de]

Bin mit dem Thema immer noch nicht fertig.
Es scheint aber so, wenn Google einmal ein Icon drin hat, bekommt man es schlecht wieder raus - und wenn es halt das Google-eigene Icon ist.

Also, bevor ich die neue Seite Online stelle, habe ich mal hier zu allgemeinen Begutachtung eine Checkliste gemacht
https://www.tanja-hilgeland.de/ (PW: Tanja2023)

Im Root liegen einfach so rum
https://www.tanja-hilgeland.de/favicon.ico (96x96)
https://www.tanja-hilgeland.de/favicon.png (192x192)
https://www.tanja-hilgeland.de/og-image.jpg (600x600)
https://www.tanja-hilgeland.de/SocialShare.jpg (1200x630)
https://www.tanja-hilgeland.de/apple-to ... 44x144.png

In den Project-Settings wurde das "favicon.ico" ausgewählt. Absoluter Pfad ist hier nicht möglich.
In der Index.php wurde ein absoluter Pfad auf das SocialShare.jpg angegeben.
Im globalen HTML wurde eingetragen.
Achtung: diese Zeile überschreibt den von Mobi generierten Code, weil sonst nix Sinnvolles in Whatsapp angezeigt wird.

Code: Alles auswählen

<meta property="og:image" content="https://www.www.tanja-hilgeland.de/og-image.jpg" />

Generiert wird

Code: Alles auswählen

  <meta name="twitter:card" content="summary_large_image"/>
  <meta name="twitter:image:src" content="https://www.tanja-hilgeland.de/SocialShare.jpg">
  <meta property="og:image" content="https://www.tanja-hilgeland.de/SocialShare.jpg">
  <meta name="twitter:title" content="Angebote der Heilpraktikerin">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
  <link rel="shortcut icon" href="assets/images/favicon-1.ico" type="image/x-icon">

[Tommy Herrmann]

Moin,

also ich kann immer noch nichts Falsches erkennen, außer dass Deine Bilder das falsche Format haben - wie ich Dir schon im Hersteller-Forum geschrieben hatte.

Mein Logo ist quadratisch und Google zeigt es schon immer bei den Suchergebnissen mit an, ohne dass ich etwas Spezielles dazu getan hätte.

Das ist jetzt in diesem, Deinem Quelltext aber auch schlecht zu erkennen, da durch "Password Protect" alles verschlüsselt ist. Dazu muss man dann die Seite erst downloaden.

So stellt sich Dein Quelltext der heruntergeladenen Seite bei mir dar:

Code: Alles auswählen

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image:src" content="https://www.tanja-hilgeland.de/SocialShare.jpg">
<meta property="og:image" content="https://www.tanja-hilgeland.de/SocialShare.jpg">
<meta name="twitter:title" content="Naturheilpraxis in Morsbach">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<link rel="shortcut icon" href="https://www.tanja-hilgeland.de/assets/images/favicon-1.ico" type="image/x-icon">

... und die dort angegeben Bilder sind eben falsch weil nicht quadratisch:

https://www.tanja-hilgeland.de/SocialShare.jpg

... übrigens deswegen wird auch nichts beim Teilen dieser Domain in "WhatsApp" angezeigt, wie ich eben getestet habe - auch hier werden ausschließlich quadratische Bilder beim Teilen mit angezeigt.

Die Seite hat am Handy auch einen leichten horizontalen Overflow (Querscroller).

Google wird dieses viel zu große und nicht quadratische Bild verweigern, da es nicht den Richtlinien entspricht:

https://developers.google.com/search/do ... arch?hl=de

... ansonsten wüsste ich jetzt auch nicht was es sonst sein könnte.

Vielleicht hat jemand anderes hier noch eine Idee?!

[stobi_de]

Moment, das OG-Image ist doch ds Bild für Whatsapp....nee, Irrtum.
Ich setze alles mal auf das untere OG-Image, das ist quadratisch.
Aber das facebook - image?

Das Google Image entspricht doch den Richtlinien!
Was sehe ich falsch?
<link rel="shortcut icon" href="assets/images/favicon-1.ico" type="image/x-icon">

Es muss ja nicht schön werden, aber es soll mal wieder funktionieren

[stobi_de]

So, das ist jetzt die Stelle, an der ich wahnsinnig werde.
Nun ist alles quadratisch, aber Whatsapp zeigt kein Bild.

Beim Papphaus.berlin wird wenigstens ein Bild gezeigt in Whatsapp.

Ohne Password kann ich noch nicht ins Netz stellen

[Tommy Herrmann]

... mache doch mal bitte dieses Bild 250 x 250px ...

und verlinke diese beiden Tags darauf.

Code: Alles auswählen

<meta name="twitter:image:src" content="https://www.tanja-hilgeland.de/og-image.png">
<meta property="og:image" content="https://www.tanja-hilgeland.de/og-image.png">

[Tommy Herrmann]

... solange diese Seite verschlüsselt geschützt ist, wird das aber auf keinen Fall funktionieren

[Tommy Herrmann]

Ich habe mir mal erlaubt die Seite zu klauen (fast ohne Bilder), habe das Logo auf 250 x 250px verkleinert und es wird sofort bei "WhatsApp" angezeigt.

Ich bin fast sicher, dass es dann auch von Google angezeigt werden kann. Denn auch Facebook und alle anderen zeigen es so an:

Code: Alles auswählen

https://www.mobirise-tutorials.com/Testseiten/Test/Tanja/Naturheilpraxis%20in%20Morsbach.htm

(Seite wurde an meinem Server nach 2 Stunden wieder gelöscht)

Übrigens eine sehr einfache Umgehung dieses Seitenschutzes. Wenn Du Seiten vor Google verbergen willst - oder vor mir , dann bitte immer über htaccess!

Screenshot vom Handy:

Screenshot von WhatsApp Link.jpg (41.23 KiB) 298 mal betrachtet

[stobi_de]

Ich habe jetzt erstmal in der robots.txt das Crawlen untersagt und das Passwort entfernt.
....
Gut, meine og-image Größe von 600px ist OK.
Obwohl ich eben Zwischenzeit auch mal das Passwort entfernt hatte, gehts jetzt.

Der Facebook-Sharing-Debugger ist sonderbar.
Obwohl ich ein 600x600 png drin habe, sagt er dieses "Die angegebene og:image-URL (https://www.tanja-hilgeland.de/og-image.png) war nicht gültig, weil sie nicht der Mindestgröße von 200 x 200 Pixel entsprochen hat."

ein 192er Bild hatte ich heute Mittag mal drin.
Neu scrappen bringt nix....

[Tommy Herrmann]

Du musst dieses Bild auf mindestens 250 x 250px verkleinern, sonst wird das nie funktionieren.

Probiere es doch einfach mal mit "WhatsApp" aus. Sobald das Bild 250 x 250px hat geht es.

WhatsApp, Facebook, Google, Twitter und andere müssen genau diese Bilder auf ihrem Server speichern und da sind 600 x 600px zu viel. Das wird ignoriert.

[stobi_de]

Facebook gibt eine Größe von 1200x630 vor als ideale Größe.
Whatsapp geht jetzt auch mit 600x600

"For og:image , use high-quality images with dimensions of at least 1,200 x 630 pixels, while keeping the file size under 8 MB"

nun gut, aber wie gebe ich das Whatapp-Bild an?

[Tommy Herrmann]

... also jetzt geht es doch.

Screenshot WhatsApp.jpg (29.24 KiB) 254 mal betrachtet

... aber aufgepasst. Wenn Du das "Teilen" am gleichen Browser durchführst, muss Du auch zuvor den Cache am Handy löschen, sonst passiert wieder nichts.

WhatsApp verwendet auch genau diese META-Tags.

Bei Facebook geht es aber definitiv nicht über 250 x 250px. Das habe ich x Mal getestet

... alles darüber wird von Facebook bearbeitet.

https://www.mobirise-tutorials.com/Tuto ... ok-feed-2o

[stobi_de]

Habe es jetzt nochmal durchgekaut, das ist ja eine Ecke, die bei allen meinen Seiten funktioniert.
Bei der Heilpraktikerin war das mit dem Passwort irgendwie ein Hinderniss, weil das OG-Image immer aus der index geladen wird, auch wenn man eine andere Seite angibt.

Wird also in Mobi das Social-Share eingeschaltet, also nicht via Pfad absolut angegeben, dann wird dieses Bild in Facebook angezeigt. Die Größe hierzu sollte 1200x630 sein (wirklich!)

Whatsapp will einen absoluten Pfad auf das Link-Bild haben und kann damit nichts anfangen.
Also gibt man noch das og:image ein mit absolutem Pfad.
<meta property="og:image" content="https://www.tanja-hilgeland.de/og-image.png" />

Ich habe es ohne Angabe von Höhe und Breite jetzt drin, soweit geht das.

Die ganzen Favicon Generatoren erzeugen ein Favicon.ico von 16x16. Das muss ja einfach nur im Root rumliegen.
Es gibt aber auch ein 92x92 ico. Dieses liegt jetzt bei mir im Root.

Das Problem für das Google-Such-Icon sehe ich in dieser Zeile
<link rel="shortcut icon" href="assets/images/favicon-1.ico" type="image/x-icon">
Irgendwas ist da falsch.

Ich schaue ja immer in diese Anfängerseite, aber ich sehe es einfach nicht
https://ourredeemerfree.org

[Tommy Herrmann]

... eben, das OG-Image wird immer ausschließlich aus der Domain - ergo "index" - geladen.

Das "favicon" in der Root muss meiner Ansicht nach aber auch zwingend

favicon.ico

als Dateiname heißen und nicht etwa:

favicon-1.ico

Das wird genauso wenig erkannt, wie eine index-1.html

Hier wird nach "favicon.ico" gesucht und nach nichts anderem.

Das ist ein geschützter Dateiname - genau wie "index" !!!

[stobi_de]

Das favicon, was im Root rumliegt, heißt auch favicon.ico.

Was ich da in Mobi als Projekt-Favicon einlese, war ebenfalls dieses favicon.ico, was dann von Mobi in die Assets mit favicon-1.ico verschoben wird.

So, muss laut Kundin das Passwort wieder reinmachen