Falsches Bild beim teilen auf soziale Netzwerke

    Hallo Leute,

    ich habe mal eine allgemeine Frage. Wird ein Link von meiner Webseite auf zum Beispiel Facebook geteilt, So wird immer das Logo als Vorschau angezeigt, lieber wäre mir aber wenn das Einleitungsbild des Beitrags angezeigt wird. Das ist meine Webseite bzw. ein Beitrag, oben das Logo und dann das Einleitungsbild.



    LG und vielen Dank

    Hallo,


    ich habe sozusagen das umgekehrte Problem: Ich habe in jedem Artikel Bilder, die auch beim Teilen bei Facebook angezeigt werden sollen.

    Leider ist es jedoch so, dass nicht alle Bilder am Anfang des Artikels stehen und somit auch als Einleitungsbild verwendet werden. Daher habe ich in einigen Artikeln ein Einleitungsbild hinterlegt. Da es in der Blogansicht nur 200px haben soll, ist es auch in entsprechender Größe hinterlegt.

    Dummerweise nimmt jetzt aber Facebook trotz der Bilder im Artikel und trotz Ophen Graph Plugin diese kleinen Einleitungsbilder als Voransicht, weil diese offensichtlich die ersten zu findenen Bilder sind.

    Im Facebook-Debugger wird unten in den Metas das jeweils richtige Bild als OG Image angezeigt, aber oben kommt ein Warnhinweis, dass die OG Graphik (nämlich das jeweilige Einleitungsbild) nicht groß genug ist. Das Bild wird bei Facebook dann z.T. skaliert (Tabletansicht) und ist natürlich total verschwommen.

    Ich suche daher überall nach einer Möglichkeit, die Größe der Einleitungsbilder über die Custom CSS vorzugeben, damit ich entsprechend größere Bilder als Einleitungsbilder hinterlegen kann, die dann zwar in meinem Kategorieblog in nur 200px dargestellt werden, aber bei Facebook dennoch in voller Größe und Qualität zu sehen sind.

    Kann mir da jemand behilflich sein, der mich nicht vierteilt, weil ich ein Artisteer-Template verwendet? Das wäre super!

    Ein Beispiel: https://www.katzeninfo.com/wis…ersicherungsschutz-ratsam


    Der Kategorieblog dazu: https://www.katzeninfo.com/wissenswertes


    Was beim Betrachten des Kategorieblos zudem auffällt und ein weiteres Problem darstellt, ist, dass bei den speziell angelegten Einleitungsbildern, die nicht aus dem Artikel übernommen werden, der Text am Bild klebt, weil ich dort keinen Abstand zum Text rechts neben dem Bild wählen kann.

    Vielen Dank schon einmal vorab!



    Darf ich Dich noch einmal bemühen, Re-Later?

    1. Wie müsste der Code für die Hauptbeiträge auf der Startseite aussehen, denn dort hatte ich jetzt die ausgetauschten großen Bilder in der Voransicht.


    2. In einer Kategorie habe ich die Einltungen z.T. zweispaltig, da sollte das Einleitungsbild eigentlich über die ganze Spalte gehen. Kann ich für den 2-spaltigen Blog einen gesonderten Eintrag mit max 100% machen? Wenn ja, wie müsste er beginnen?

    Vielen Dank im Voraus!

    Jetzt kommt halt der Rattenschwanz, weil Artisteer mit Java-Script dazwischenpfuscht und eigene Breiten per Inline-Stilen reindingst. Auch deshalb ist Artisteer so beliebt ;)


    Geh mal auf die tipps und teste mit kleineren Browserfenster-Breiten. Also Fenster zusammenschieben. Dann siehst, dass plötzlich die Bilder die 200px nicht mehr einhalten und der Kratzbaum riesengroß wird.


    Könntest du vermutlich mit einem zusätzlichen, unschönen !important

    CSS
    max-width: 200px !important;

    in deinen Blöcken verhindern.


    Die 2-spaltigen:

    Code
    .blog .items-row.cols-2 img {
 width: 100%;
 max-width: none;
}

    Der Block sollte nach deinen beiden bisherigen stehen.

    Wahrscheinlich brauchen beide Zeilen jetzt auch ein !important.


    Und zusätzlich

    Code
    .blog .items-row.cols-2 .img-intro-left {
float: none;
}

    Du bist mir echt eine gigantische Hilfe!! Ich hatte die responsive Ansicht gar nicht geprüft und es war mir somit nicht mal aufgefallen. Danke, dass Du mich darauf hingewiesen hast. Mit dem !important geht es.
    Sieht zwar in der Tablet-Ansicht dann auch wieder etwas komisch aus, wenn die ursprünglich 2-spaltigen Einleitungen dann einspaltig werden und die Bilder plötzlich sehr viel größer sind als die anderen, aber damit muss ich wohl leben. ABER:
    1. In der responsiven Ansicht werden jetzt die Einleitungsbilder nicht maximal sondern generell 200 px angezeigt, was zur Folge hat, dass mein Profilfoto (kommt aus dem Artikel zu meiner Person) auf dem Tablett und dem Smartphone viel größer angezeigt wird, als ich es im Artikel eingestellt habe. Sieht jetzt total protzig aus, was mir gar nicht gefällt.
    2. Ich hatte ja "margin-right: 5px" mit in die CSS geschrieben. In der Tablettansicht wird es auch so angezeigt, aber in der Phone-Ansicht nicht, da klebt der Text wieder am Bild. Das sieht übel aus. Zudem wird in der Phone-Ansicht das Bild nach oben verschoben und klebt an der Überschrift.

    Meine Frage lautet daher: Muss ich noch einen speziellen Eintrag für diese beiden responsiven Ansichten eintragen??


    Weil Du Artisteer nochmal angesprochen hast: Ich kann natürlich verstehen, dass Artisteer unter Programmierern verpönt ist, da sie selbst programmieren können. Ich für meinen Teil hab das nie gekonnt und suche mir alles einzeln im Netz zusammen. Ich habe meine Website vor genau 20 Jahren zunächst mit Fusion aufgebaut, weil ich keinerlei Ahnung von html hatte. Als ich dann auf Joomla umgestiegen bin, hätte ich mir niemals ein eigenes Template ohne einen entsprechenden Editor basteln können. Und so hab ich mir Artisteer gekauft, weil ich keine andere Lösung wusste. Aber ich ärgere mich selbst oft über Artisteer, z.B. dass der Slider im Header nicht responsiv ist und Artisteer selbst im USA Forum keine Lösung dafür bieten kann. Ein unhaltbarer Zustand meines Erachtens. Den jetzigen Kompromiss habe ich mit vielen Versuchen über einen CSS Eintrag gebastelt. Vorher sah man auf Tablet und Handy nur einen schmalen Streifen der Bilder. Jetzt ist wenigstens die volle Höhe zu sehen, auch wenn rechts und links abgeschnitten wird. Ich hatte es sogar geschafft, die Slider-Grafiken mit 100% Breite und automatischer Höhe voll responsiv anzuzeigen, aber dann standen sie auf einem ansonsten leeren Hintergrund von 500px Höhe. Sah sehr bescheiden aus.
    Kurz: Ich weiß, dass Artisteer absolut nicht das Gelbe vom Ei ist!

    Ach ja, und auf dem Phone werden jetzt nach dem CSS Eintrag die beiden Hauptbeiträge, die zweispaltig eingerichtet sind, zum einen in einer kleineren Schrift angezeigt und zum anderen füllen sie auch nicht mehr die volle Bildschirmbreite des Smartphones wie vorher.

    Hallo Leute, bei mir hat es jetzt etwas länger gedauert. Ich hatte auch im Supportforum von Viktor Vogel geschrieben. Er hat nun die EFSEO Erweiterung so angepasst, dass man in dieser auch ein Vorschaubild definieren kann. Das ist wirklich Perfekt, ich kann die Meta Daten eingeben und dann noch Bild etc definieren. Geht super leicht von der Hand.



    Vielen Dank

    Zitat von Re:Later

    .blog .items-row.cols-2 img { width: 100%; max-width: none; }

    Hallo noch einmal,


    ich hab leider durch diese Einstellung ein erneutes Problem, denn jetzt meldet mir die Google Search Console für alle Rubriken-Blogs, in denen ich diese Einstellung verwende, dass sie nicht mobil tauglich wären. Fehlermeldung siehe beigefügter Screenshot.

    Selbst wenn ich die max-width beschränke bleibt das Problem bestehen. Hast Du diesbzüglich einen Tipp für mich, Re:Later?

    Vielen Dank im Voraus!

    Problem gelöst!

    Ich habe in der robots.txt den Eintrag 'Disallow: /templates' gelöscht, und jetzt erkennt Google, dass die Breite der Einleitungsbilder per css auf width: 100% beschränkt ist. Im Livetest werden jetzt alle zweispaltigen Rubrik-Blogs, die bisher eine Fehlermeldung der GSC ergeben haben, als "für Mobilgeräte optimiert" angezeigt.

    Nur falls jemand anders dasselbe Problem hat und auf diesen Beitrag stößt. Die Lösung ist so simple und in 2 Sekunden umgesetzt.