mir ist aufgefallen dass beim Standardtheme und auch bei anderen Premium Themes als standard vorschaubild also meta og:image (für twitter und co auch) im meta.html.twig immer das Logo genommen wird.
Für die Produktdetailseite wird dieses durch das Hauptproduktbild überschrieben.
Ich denke es wäre durchaus sinnvoll, wenn man für Kategorie Seiten auch das Kategorie Bild als quelle nimmt? Einfach um die SEO Vorschau zu verbessern.
Jedoch hat das Listing kein eigenes meta.html.twig was dafür vorgesehen ist.
Ich habe mal rumgebastelt und probiert wie ich es am besten „nur“ für Kategorieseiten umlenke.
Ich dachte entweder an ein if-statement, das abfragt ob es sich um eine Kategorieseite handelt im haupt meta.html.twig oder eben ein eigenes meta.html.twig für kategorieseiten, bei ersterer Lösung komme ich bei der Abfrage nicht weiter und letzterer Lösung frage ich mich wo ich dieses meta.html.twig für kategorien includen könnte.
Das Problem hatten wir auch schon SW5. Und es nervt wirklich. Der Support sieht da keinen Fehler oder versteht das Problem nicht. Um ehrlich zu sein, bin ich erleichtert, dass es auch noch andere Anwender gibt, die dieses Problem haben.
Wir haben das og:image jetzt über eine Custom Template Erweiterung einfach pauschal für alle Seiten mit einem festen Platzhalter-Bild ersetzt. Eine individuelle Ansteuerung des Kategorie-Bildes war auch hier nicht möglich. Oder wir sind einfach nur zu blöd für den richtigen Ausdruck im Template. Wir sind damit aber nicht glücklich. Shopware scheint dieses Problem nicht erkannt oder verstanden zu haben.
Die Profis werden hier sicherlich einen klugen Tipp haben, den sie vielleicht hier teilen möchten.
Die Produkt-Seiten haben sowieso ein passendes Bild. Die Kategorien oder alle sonstigen Seiten leider nicht. Jedenfalls ist das im Standard Theme so. Dennoch sollte es ja gerade da korrekt funktionieren.
Ich bastel ja gerade dran (bin kein Programmierer) aber versuche mir das so zusammen zu Frankensteinen.
Die Produktdetailseite hat ja im Storefront Standardtheme ein eigenes meta.html.twig, in welchem der allgemeine meta.html twig block für diese Stelle ersetzt wird.
Dort ist dann einfach das Produktbild hinterlegt:
Diese meta.html.twig wird in der index.html.twig der Produktdetailseite dann included.
Für die Kategorieseite gibt es ja die listing.html.twig - dort würde ich dann eine eigene meta.html.twig includen, in der ich eben diesen Block auch ersetze.
Mein erster Ansatz war jetzt etwas wie:
{{ page.header.navigation.active.media.url }}
Dann aber vermutlich mit if abfrage - falls die kategorie kein bild hat? also
{% if page.header.navigation.active.media.url %} davor? Oder „is null?“ or „is empty“ ?
{% if page.header.navigation.active.media.url is empty %}
{# Wenn keine URL vorhanden ist (z. B. auf der Startseite), verwende das Standardlogo #}
<meta property="og:image" content="{{ theme_config('sw-logo-desktop') }}"/>
{% else %}
{# Wenn eine URL vorhanden ist (nicht auf der Startseite), verwende die URL des aktiven Medienobjekts im Header #}
<meta property="og:image" content="{{ page.header.navigation.active.media.url }}"/>
{% endif %}
bzw.
{% if page.header.navigation.active.media.url is empty %}
{# Wenn keine URL vorhanden ist (z. B. auf der Startseite), verwende das Standardlogo #}
<meta property="og:image" content="{{ theme_config('sw-logo-desktop') }}"/>
{% else %}
{# Wenn eine URL vorhanden ist (nicht auf der Startseite), verwende eine alternative Bild-URL #}
<meta property="og:image" content="/pfad/zum/alternativen/bild.jpg"/>
{% endif %}
Teste ich mal aus - dann lag ich ja gar nicht mal so falsch !
Gibts für die meta images einen eigenen block? Bei mir ist im Storefront meta.html.twig nur ein großer block für gesamten metadaten - oder eben ein block innerhalb des „contents“ der entsprechenden meta tags - die könnte man ja sonst auch aufgreifen.
Also z.B. steht bei og:image folgendes im Content: {% block layout_head_meta_tags_image_og %}{{ theme_config('sw-logo-desktop') }}{% endblock %}"
wobei hier ist auch neuer interessanter Punkt hinzugekommen! Für die Startseite, bei der es sich ja weder um eine Listing Seite noch eine Produktdetailseite handelt, wäre ja nochmal ein dritter separater Fall vorhanden. Da könnte ich aber kein separates meta.html.twig einbinden was ich nur auf der Listing Seite einbinde, sondern müsste die basis - meta.html.twig entsprechend anpassen. Frage ist jetzt ob ich einfach via if die SEO url „hardcode“ also: WENN {{ absolute_url(‚frontend.home.page‘) }} = startseite(n) - DANN wähle /pfad/zum/alternativen/bild.jpg… - Richtig?
Leider führt dann aber der code noch nicht zum Erfolg. Nachwievor wird das Logo geladen - hatte folgendes getestet:
Es liegt aber nicht am if-statement oder dem Code an sich - sondern daran dass er nicht korrekt eingebunden wird.
Ist die Idee denn richtig - im listing.html.twig ein eigenes meta.html.twig zu includen, welches das storefront meta.html.twig und den block im jeweiligen content des og:image meta tags extended und in diesem dann den code zu platzieren?
{% sw_extends '@Storefront/storefront/layout/meta.html.twig' %}
{% block layout_head_meta_tags_opengraph %}
{{ parent() }}
{% if not page.isErrorPage() is defined or page.isErrorPage() === false %}
{% if page.header.navigation.active.media.url is empty %}
{# Wenn keine URL vorhanden ist (z. B. auf der Startseite), verwende das Standardlogo #}
<meta property="og:image" content="{{ theme_config('sw-logo-desktop') }}"/>
{% else %}
{# Wenn eine URL vorhanden ist (nicht auf der Startseite), verwende die URL des aktiven Medienobjekts im Header #}
<meta property="og:image" content="{{ page.header.navigation.active.media.url }}"/>
{% endif %}
{% if page.header.navigation.active.media.url is empty %}
{# Wenn keine URL vorhanden ist (z. B. auf der Startseite), verwende das Standardlogo auch für Twitter #}
<meta name="twitter:image" content="{{ theme_config('sw-logo-desktop') }}"/>
{% else %}
{# Wenn eine URL vorhanden ist (nicht auf der Startseite), verwende die URL des aktiven Medienobjekts im Header auch für Twitter #}
<meta name="twitter:image" content="{{ page.header.navigation.active.media.url }}"/>
{% endif %}
{% endif %}
{% endblock %}
Schmeiß das mal in Dein eigenes Template, sozusagen als Override!
Leider wird immer noch nur das Logo geladen - Ich vermute mal der Code wird gar nicht erst ausgeführt.
Ich hab den genannten code in einer meta.html.twig welche im Ordner meines Templates ist:
Resources/views/storefront/component/product
Dort ist auch das „listing.html.twig“ welches diese genannte meta.html.twig included.
Hast Du überhaupt ein eigens Theme erstellt? Wenn nicht, musst da ja erst mal eins erstellen:
Wenn Du hast, musst Du auch zuweisen, also Deinem Verkaufskanal! Dann musst Du die Datei dort hinschmeißen, also sozusagen ein Override erstellen! Deswegen ja auch…
Ja klar, ich hatte auch schon eine eigene meta.html.twig im layout ordner, für das einbinden von scripten im head etc. - welche auch Laden.
Aber irgendwie greift der ganze if block nicht, ich hab sogar den teil im if-statement, der das LOGO lädt durch einen direkten Link zu einem anderen Bild ersetzt, um zu schauen ob er greift, aber das ist leider nicht der Fall
Danke schon einmal bis hiehin, jetzt schaue ich noch wie ich auf der Startseite abfrage, dass ich auf der Startseite bin, um dann ein festes Bild einzubinden…
Edit: brauche ich gar nicht, SEO Bild wird dennoch geladen.
{% sw_extends '@Storefront/storefront/layout/meta.html.twig' %}
{% block layout_head_meta_tags_image_og %}
{% if page.isHomePage() %}
{# Wenn die Seite die Startseite ist #}
{{ theme_config('sw-logo-desktop') }}
{% elseif page.header.navigation.active.media.url is empty %}
{# Wenn keine URL vorhanden ist (z. B. auf der Startseite), verwende das Standardlogo #}
{{ theme_config('sw-logo-desktop') }}
{% else %}
{# Wenn eine URL vorhanden ist (nicht auf der Startseite), verwende die URL des aktiven Medienobjekts im Header #}
{{ page.header.navigation.active.media.url }}
{% endif %}
{% endblock %}
