# Alt Tags und Image Title via Javascript

**URL:** <https://forum.shopware.com/t/alt-tags-und-image-title-via-javascript/99871>\
**Category:** Shopware 6 (German)\
**Created:** [29. Mai 2023 um 11:08 UTC](https://forum.shopware.com/t/alt-tags-und-image-title-via-javascript/99871 "2023-05-29T11:08:04Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![hkn11](https://avatars.discourse-cdn.com/v4/letter/h/258eb7/32.png) [@hkn11](https://forum.shopware.com/u/hkn11)\
**Post date:** [29. Mai 2023 um 11:08 UTC](https://forum.shopware.com/t/alt-tags-und-image-title-via-javascript/99871/1 "2023-05-29T11:08:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tedmalone6](https://avatars.discourse-cdn.com/v4/letter/t/d07c76/32.png) [@tedmalone6](https://forum.shopware.com/u/tedmalone6)\
**Post date:** [29. Mai 2023 um 12:11 UTC](https://forum.shopware.com/t/alt-tags-und-image-title-via-javascript/99871/2 "2023-05-29T12:11:07Z")

</div>

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[.](https://www.mybkexperience.onl/)

Best regard,

---

<div class="post-metadata">

**Author:** ![Max\_Shop](https://avatars.discourse-cdn.com/v4/letter/m/58f4c7/32.png) [@Max\_Shop](https://forum.shopware.com/u/Max_Shop)\
**Post date:** [29. Mai 2023 um 12:29 UTC](https://forum.shopware.com/t/alt-tags-und-image-title-via-javascript/99871/3 "2023-05-29T12:29:45Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![hkn11](https://avatars.discourse-cdn.com/v4/letter/h/258eb7/32.png) [@hkn11](https://forum.shopware.com/u/hkn11)\
**Post date:** [29. Mai 2023 um 19:27 UTC](https://forum.shopware.com/t/alt-tags-und-image-title-via-javascript/99871/4 "2023-05-29T19:27:57Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![hkn11](https://avatars.discourse-cdn.com/v4/letter/h/258eb7/32.png) [@hkn11](https://forum.shopware.com/u/hkn11)\
**Post date:** [29. Mai 2023 um 19:29 UTC](https://forum.shopware.com/t/alt-tags-und-image-title-via-javascript/99871/5 "2023-05-29T19:29:32Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![tom\_prok](https://avatars.discourse-cdn.com/v4/letter/t/e99b99/32.png) [@tom\_prok](https://forum.shopware.com/u/tom_prok)\
**Post date:** [30. Mai 2023 um 07:27 UTC](https://forum.shopware.com/t/alt-tags-und-image-title-via-javascript/99871/6 "2023-05-30T07:27:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![hkn11](https://avatars.discourse-cdn.com/v4/letter/h/258eb7/32.png) [@hkn11](https://forum.shopware.com/u/hkn11)\
**Post date:** [30. Mai 2023 um 10:01 UTC](https://forum.shopware.com/t/alt-tags-und-image-title-via-javascript/99871/7 "2023-05-30T10:01:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tom\_prok](https://avatars.discourse-cdn.com/v4/letter/t/e99b99/32.png) [@tom\_prok](https://forum.shopware.com/u/tom_prok)\
**Post date:** [30. Mai 2023 um 10:37 UTC](https://forum.shopware.com/t/alt-tags-und-image-title-via-javascript/99871/8 "2023-05-30T10:37:34Z")

</div>

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](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/9/8/985594363df08d7f8f9a093694195426f0b9efcd.png)  
Kommt natürlich

---

<div class="post-metadata">

**Author:** ![hkn11](https://avatars.discourse-cdn.com/v4/letter/h/258eb7/32.png) [@hkn11](https://forum.shopware.com/u/hkn11)\
**Post date:** [30. Mai 2023 um 18:26 UTC](https://forum.shopware.com/t/alt-tags-und-image-title-via-javascript/99871/9 "2023-05-30T18:26:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tom\_prok](https://avatars.discourse-cdn.com/v4/letter/t/e99b99/32.png) [@tom\_prok](https://forum.shopware.com/u/tom_prok)\
**Post date:** [31. Mai 2023 um 10:11 UTC](https://forum.shopware.com/t/alt-tags-und-image-title-via-javascript/99871/10 "2023-05-31T10:11:52Z")

</div>

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:

```auto
{% if page.metaInformation.metaTitle %}
{{page.metaInformation.metaTitle}}
{% endif %}

```

---

<div class="post-metadata">

**Author:** ![hkn11](https://avatars.discourse-cdn.com/v4/letter/h/258eb7/32.png) [@hkn11](https://forum.shopware.com/u/hkn11)\
**Post date:** [31. Mai 2023 um 12:02 UTC](https://forum.shopware.com/t/alt-tags-und-image-title-via-javascript/99871/11 "2023-05-31T12:02:25Z")

</div>

Perfekt vielen dank!
