#lessonlearned - Automatische Sitemaps in Storyblok

Wie funktioniert unser Sitemap-Code in Storyblok?

Eine Sitemap ist eine Liste mit allen wichtigen Seiten einer Website. Sie hilft Suchmaschinen wie Google, diese Seiten schneller zu finden und richtig einzuordnen. In diesem Beitrag zeigen wir Ihnen, wie unser Code automatisch eine Sitemap aus den Storyblok-Stories erstellt – mit Hilfe von nuxtjs/sitemap.

Installation und Konfiguration von nuxtjs/sitemap

Modul nuxtjs/sitemap in package.json hinzufügen und dann die nuxt.config.js erweitern. Folgende Konfiguration wurde im Beispiel verwendet:

Datei nuxt.config.js

Unter modules Plugin registrieren:

  modules: [
    '@nuxtjs/sitemap',
    ...
  ]

Konfiguration hinzufügen:

sitemap: {
    autoI18n: true,
    sources: ['/api/__sitemap__/urls'],
    xslColumns: [
      {label: 'URL', width: '100%'},
    ]
},

Projektstruktur und Anlegen der Sitemap-Datei

Ordner "server/api/‎__sitemap__" anlegen. Darin legen wir unsere urls.js Datei an, die alle Methoden enthalten wird.

Der Einstiegspunkt: defineSitemapEventHandler

Nun starten wir indem wir in der urls.js unsere Methoden anlegen.
Folgender Code läuft auf dem Server und wird ausgeführt, wenn jemand die Sitemap aufruft:

export default defineSitemapEventHandler(async () => {
    const { public: config } = useRuntimeConfig()
    const locales = Object.keys(config.i18n.locales);
    ...
}

Mit useRuntimeConfig() werden zunächst die Konfigurationen der Anwendung (z. B. welche Sprachen es gibt) geholt.
Dann speichern wir in locales alle verfügbaren Sprachcodes (z. B. ['en', 'de']).

Stories aus Storyblok abrufen

Im nächsten Schritt rufen wir die Stories aus Storyblok ab. Hierfür haben wir den API-Call in eine eigene Methode (fetchStories()) ausgelagert, da sie an anderen Stellen ebenfalls genutzt wird:

export const fetchStories = async (apiEndpoint, options) => {
    const storyblokApi = new StoryblokClient({ accessToken: options.accessToken })

    return await storyblokApi.get(apiEndpoint, options.apiParams)
}

Abrufen aller Stories aus Storyblok:

const { data } = await fetchStories('cdn/stories/', {
        accessToken: runtimeConfig.public.storyblok.accessToken,
        apiParams: {
            version: version,
            resolve_links: 'story',
            per_page: 100,
        },
    })

Nur relevante Seiten in die Sitemap aufnehmen

Manche Seiten (z. B. Testseiten) sollen nicht in der Sitemap erscheinen. Daher haben wir in Storyblok in den Stories um einen Schalter (excludeFromSitemap) erweitert.

Diese Option (excludeFromSitemap) prüfen wir nun über:

const storiesInSitemap = data.stories.filter((story) => {
        return story.content.excludeFromSitemap === false;
    })

Und geben dann die gefilterten Stories zurück (story.full_slug enthält die vollständige URL der Story):

return storiesInSitemap.map(story => story.full_slug)

Story URLs ins richtige Format bringen

Den Rückgabewert (storiesResponse) in unserem try-catch-Block müssen wir noch in das richtige Format bringen:

const arrayOfPaths = Object.entries(storiesResponse).map(([key, item]) => ({
        loc: `${locales[0]}/${item}`,
    }));

Dabei werden die URLs so angepasst, dass sie korrekt in der Sitemap erscheinen.
${locales[0]}/${item} bedeutet, dass die Hauptsprache (z. B. en) an den Anfang der URL gesetzt wird.

Fazit: Automatisierte Sitemap für bessere SEO

Mit diesem Code wird automatisch eine Sitemap aus den Stories von Storyblok erstellt. Dadurch können Suchmaschinen die Webseiten besser finden, und die Verwaltung bleibt einfach!