hubble Documentation

# SEO

# SEO durch Serverside Rendering

Serverseitige Rendering den Vorteil, dass die an den Client gelieferte Seite von Suchmaschinen erfasst werden kann und somit erfolgreich indiziert wird. In jeder Komponente kann die Property head verwendet werden, um Meta Informationen wie Keywords und eine Seitenbeschreibung hinzuzufügen. Eine Beschreibung der Property head gibt es in der API Dokumentation von NuxtJS: The head Method (opens new window). In der nuxt.config.js existieren für die dynamischen Seitenarten category, product und cms Default Werte für title, metaKeywords und metaDescription, die über process.env.meta referenziert werden können.

Dazu ein Ausschnitt aus der ViewCategory Komponente, die in der ~/pages/_.vue eingebunden wird, wenn die API Response als Seiten-Typ category zurückliefert:

// ~/components/productlist/ViewCategory.vue
head() {
    let metaDescription = {},
    metaKeywords = {},
    // ...

    if(!_.isEmpty(this.categoryItem.meta_description)) {
        metaDescription = this.categoryItem.meta_description;
    } else {
        metaDescription = process.env.meta.category.metaDescription;
    }

    if(!_.isEmpty(this.categoryItem.meta_keywords)) {
        metaKeywords = this.categoryItem.meta_keywords;
    } else {
        metaKeywords = process.env.meta.category.metaKeywords;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Die in der head Property referenzierten process.env.meta Einträge in der nuxt.config.js sehen dabei wie folgt aus:

// ~/nuxt.config.js (simplified)
module.exports = {
    env: {
        meta: {
            category: {
                title: 'Category - Hubble Demo',
                titleAdd: ' - buy now at hubble Demostore',
                metaKeywords: 'PWA, ecommerce, hubble, headless, nuxt, vue, responsive, progressive',
                metaDescription: 'Official hubble demo page.'
            },
        },
        // ...
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Ebenfalls in der nuxt.config.js sind die Header der Seite definiert:

// ~/nuxt.config.js (simplified)
env: {
    // ...
    head: {
        title: 'Buy now | Hubble Demo-Shop',
        htmlAttrs: {
            lang: 'de'
        },
        meta: [
            { charset: 'utf-8' },
            { name: 'viewport', content: 'width=device-width, initial-scale=1' },
            { hid: 'description', name: 'description', content: pkg.description },
            { content: 'width=device-width,initial-scale=1', name: 'viewport' },
            { hid: 'author', name: 'author', content: 'digital.manufaktur GmbH' }
        ],
        link: [
            { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
        ]
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

← Einführung →