# 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;
}
}
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.'
},
},
// ...
}
}
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' }
]
},
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20