Shopware 6 + OpenAI: Automatische SEO-Metadaten-Generierung

Wer kennt das nicht: Hunderte von Produkten im Shop, aber die SEO-Metadaten sind immer noch Standard-Platzhalter oder lieblos kopiert. Durch meine Erfahrungen mit KI-Integration in Shopware-Projekten für Kunden wusste ich, wie viel Zeit sich bei repetitiven Aufgaben sparen lässt. Also dachte ich mir: Metadaten-Generierung wäre ein perfekter Use Case für Automatisierung. Das Ergebnis ist ein Plugin, das OpenAI API für die automatische Metadaten-Generierung nutzt.

Das Interessante daran

Context-aware Mehrsprachigkeit

private function getLocaleFromLanguageId(string $languageId, Context $context): string
{
    $criteria = new Criteria([$languageId]);
    $criteria->addAssociation('locale');

    $language = $this->languageRepository->search($criteria, $context)->first();
    return $language?->getLocale()?->getCode() ?? 'en-GB';
}

Das Plugin ermittelt automatisch die aktuelle Sprache aus dem Shopware Context und generiert die Metadaten in der entsprechenden Sprache. Deutsche Produkte bekommen deutsche Meta-Beschreibungen, englische Produkte englische – ohne manuelle Konfiguration.

Structured Prompting für konsistente Ergebnisse

private function buildPrompt(string $productName, string $description, string $locale): string
{
    return sprintf(
        "Generate SEO-optimized meta title, meta description, and keywords for this product in locale '%s':\n\n" .
        "Product Name: %s\nDescription: %s\n\n" .
        "Return as JSON: {\"metaTitle\": \"...\", \"metaDescription\": \"...\", \"keywords\": \"...\"}",
        $locale, $productName, strip_tags($description)
    );
}

Statt vage “generiere mir SEO-Texte” zu fragen, bekommt die API spezifische Anweisungen mit Zeichenlimits und Formatvorgaben. Das Ergebnis: konsistente, verwendbare Metadaten.

Frontend-Integration ohne Core-Hacks

Component.override("sw-product-seo-form", {
  template,

  computed: {
    canGenerateMetadata() {
      return this.product?.name?.trim() && this.product?.description?.trim();
    },
  },

  methods: {
    async onGenerateMetadata() {
      const response = await this.aiMetaGeneratorApiService.generateMetadata({
        productId: this.product.id,
        productName: this.product.name,
        description: this.product.description,
        languageId: Shopware.Context.api.languageId,
      });

      if (response.success) {
        this.updateProductMetadata(response.data);
      }
    },
  },
});

Ein simpler Button im SEO-Tab, der die bestehende Komponente erweitert. Kein Core-Code wird angefasst, Updates sind problemlos möglich.

Was ich dabei gelernt habe

Administration UI Extension ist eleganter als gedacht

Component.override("sw-product-seo-form", {
  computed: {
    canGenerateMetadata() {
      return this.product?.name?.trim() && this.product?.description?.trim();
    },
  },
});

Die bestehende SEO-Form zu erweitern war überraschend clean. Shopware’s Component System erlaubt es, bestehende Komponenten zu “overriden” ohne den Core-Code anzufassen. Der Button erscheint genau da, wo er hingehört.

Sprach-Synchronisation zwischen Frontend und Backend

// Frontend: Aktuelle Sprache explizit übertragen
const currentLanguageId = Shopware.Context.api.languageId;
const requestData = {
  productId: this.product.id,
  productName: this.product.name,
  description: this.product.description,
  languageId: currentLanguageId, // Wichtig!
};

// Backend: Context für die richtige Sprache erstellen
$requestLanguageId = $data['languageId'] ?? null;

if ($requestLanguageId && $requestLanguageId !== $context->getLanguageId()) {
  // Neuen Context mit Frontend-Sprache erstellen
  $context = new Context(
    $context->getSource(),
    $context->getRuleIds(),
    $context->getCurrencyId(),
    [$requestLanguageId], // Frontend-Sprache verwenden
    $context->getVersionId(),
    // ... weitere Context-Parameter
  );
}

Das Backend hat keinen direkten Zugriff auf die aktuelle Administration-Sprache. Wenn ein Benutzer in der deutschen Administration arbeitet, weiß das Backend nicht automatisch, dass deutsche Metadaten generiert werden sollen. Die Sprach-ID muss explizit vom Frontend übertragen und im Backend ein neuer Context mit der richtigen Sprache erstellt werden.

Ohne diese Synchronisation würde das Plugin immer Metadaten in der Standard-Sprache generieren, unabhängig davon, in welcher Sprache der Benutzer gerade arbeitet.

Vue.js Reaktivität in Shopware Administration

updateProductMetadata(metadata) {
  if (metadata.metaTitle) {
    this.product.metaTitle = metadata.metaTitle;
  }
  if (metadata.metaDescription) {
    this.product.metaDescription = metadata.metaDescription;
  }
  if (metadata.keywords) {
    this.product.keywords = metadata.keywords;
  }
  this.$emit("product-changed"); // Wichtig für Dirty State
}

Shopware’s Administration basiert auf Vue.js und folgt dem Prinzip, dass Props nicht direkt mutiert werden sollten (Vue.js Anti-Pattern). Stattdessen werden Änderungen über Events an die Elternkomponente kommuniziert. Das product-changed Event signalisiert der Shopware Administration, dass sich Produktdaten geändert haben, wodurch der “Dirty State” korrekt verwaltet wird - ähnlich wie v-model Binding zwischen Eltern- und Kindkomponenten.

Dieses Pattern ist standard in Shopware’s Component System, wie auch What means the “element-update” in Shopware 6? verwendet wird.

Warum als Open Source?

Nach verschiedenen KI-Integrationsprojekten für Kunden war mir klar geworden, wie universell das Problem der Metadaten-Generierung ist. Fast jeder Shop-Betreiber kämpft damit. Also dachte ich: Warum nicht eine saubere, wiederverwendbare Lösung entwickeln und mit der Community teilen?

Das Plugin ist bewusst minimal gehalten – keine komplexen Konfigurationen, keine UI-Überladung. Ein Button, ein API-Call, fertig. Basierend auf dem, was in Kundenprojekten wirklich gebraucht wird.

Try it yourself

git clone https://github.com/yterasaka/sw-ai-meta-generator
bin/console plugin:install --activate AiMetaGenerator

OpenAI API Key in den Plugin-Einstellungen eintragen, und los geht’s. Das Plugin kostet nichts, braucht aber einen OpenAI API Key (ein paar Cent pro Generierung).

Interessant für euch? Feedback und Pull Requests sind willkommen. Besonders gespannt bin ich auf Erfahrungen mit anderen Sprachen und Edge Cases.

Falls ihr das Plugin nützlich findet, würde ich mich über einen GitHub Star freuen! ⭐

Repository: https://github.com/yterasaka/sw-ai-meta-generator