Alt Tags und Image Title via Javascript

Shopware 6 (German)
1

Hallo zusammen,

wir pflegen tausende Artikel über die Warenwirtschaft an, leider lassen sich über den Connector keien Title und Alt Tags mitgeben. Aus SEO-Sicht nicht optimal.

Ich hatte jetzt überlegt, das ganze via JS zu lösen. z.B. folgender Ansatz:

jQuery(document).ready(function($) {
$(„img:not([title])“).each(function() {
if($(this).attr(„alt“) != ‚‘) $(this).attr(„title“, $(this).attr(„alt“));
else $(this).attr(„title“, $(this).attr(„src“));
});
});

Die Frage ist jetzt, wenn ich z.b. den Seo Title Tag des Artikels als Title und Alt Tag der Bilder haben wollen würde, wie würde ich die entsprechenden „title“ und „alt“ platzhalter richtig dynamisch befüllen?

Oder hat jemand eine ganz andere Lösung?

Viele Grüße

2

Hello, @hkn11

Es scheint, dass Sie versuchen, die Title- und Alt-Tags Ihrer Bilder dynamisch zu setzen, basierend auf dem SEO-Titel des Artikels. Um dies zu erreichen, können Sie den folgenden Ansatz verwenden:

jQuery(document).ready(function($) {
var seoTitle = $(‚meta[name=„title“]‘).attr(‚content‘); // SEO-Titel des Artikels

$(‚img:not([title])‘).each(function() {
var altText = $(this).attr(‚alt‘);
var titleText = altText !== ‚‘ ? altText : seoTitle;

$(this).attr('title', titleText);
$(this).attr('alt', altText);

});
});

In diesem Code wird der SEO-Titel des Artikels über das meta-Tag mit dem Namen „title“ abgerufen. Sie müssen sicherstellen, dass dieses meta-Tag korrekt gesetzt ist.

Anschließend wird für jedes Bild, das kein title-Attribut hat, überprüft, ob ein alt-Attribut vorhanden ist. Wenn dies der Fall ist, wird der Wert des alt-Attributs als title-Attribut gesetzt. Andernfalls wird der SEO-Titel des Artikels als title-Attribut verwendet. Das alt-Attribut bleibt unverändert.

Dieser Ansatz ermöglicht es Ihnen, die Title- und Alt-Tags Ihrer Bilder dynamisch zu setzen. Sie können diesen Code entsprechend Ihren Anforderungen anpassen.

Hoffentlich hilft Ihnen das weiter. Wenn Sie weitere Fragen haben, stehe ich Ihnen gerne zur Verfügung.

Best regard,

3

Wenn Google einen statischen Crawler nutzt, dann bringt das ganze JS für SEO überhaupt nichts. Lieber versuchen Zusatzfelder anzulegen/übertragen zu laden (falls möglich) und diese für Titel und SEO nutzen.

4

vielen dank! das ist wirklich genau das was wir wollten, aber wie Max_Shop anmerkt, scheint es wohl so, als würde Google diese dynamischen Tags nicht crawlen? Also müsste ich doch auf eine Bulk Import Lösung oder einen anderen Workaround zurückgreifen…

5

Also über die Warenwirtschaft zwei Zusatzfelder mitgeben die mit dem Titel Tag und Alt Tag befüllt sind, bzw mehrere bei mehreren Bildern, und dann irgendwei die Bilder korrekt zuordnen, das klingt schon wesentlich komplizierter. Vielleich kan nich auch über den Import oder über die Datenbank eine Tabelle mit den Tags importieren?

6

Hallo,

warum wollt ihr das Ganze über Javascript lösen? Ihr könnt doch auch den Seo Title Tag des Artikels über das Template (Twig) als Title und Alt Tag der Bilder ausgeben, würde auch das Problem mit dem Google Crawling lösen.

Viele Grüße
Tom

7

Das wäre natürlich am cleversten. Müsste ich es dann aber nicht überall ändern, wo bilder ausgegeben werden? Das dürfte ja eine riesen Menge sein
Und die artikel title tags werden ja vermutlich nicht überall verfügbar sein oder? Also zB auf einer landingpage mit slider element

8

Ja, die o.g. Änderung beziehe ich natürlich nur auf die Produktbilder. Alles weitere wie z.B. auf einer Landingpages mit Slidern müssen ja eh manuell erstellt werden und dann können die alt bzw. Title Tags direkt in den Medien hinterlegt werden:

image
image391×828 54.5 KB

Kommt natürlich

9

Ok verstehe, das heißt für die Google Snippets würden ja die Produktdetailseiten genügen.

Vielen Dank! Hat jemand vielleicht die passenden Twig Variabel parat für den Title Tag als Alt Tag? Ich vermute mal da sollte eine IF Abfrage rein, falls der titel Tag mal leer sein sollte.

VG

10

In der /views/storefront/element/cms-element-image-gallery.html.twig findest du die Bilder bzw. Thumbnails.

Den SEO Meta-Title kannst du über die Variable page.metaInformation.metaTitle ausgeben in einer if-Abfrage würde das ganze ungefähr so aussehen:

{% if page.metaInformation.metaTitle %}
{{page.metaInformation.metaTitle}}
{% endif %}
11

Perfekt vielen dank!