Nuxt.js SEO Practises - vue.js

Question

I am looking for ways to refactor this:
nuxt.config.js
const headConfig = require('./config/head')
const modulesConfig = require('./config/modules')
const config = {
head: headConfig,
(...)
}
module.exports = Object.assign({}, config, modulesConfig)
config/head.js
module.exports = {
meta: [
{charset: 'utf-8'},
{name: 'viewport', content: 'width=device-width, initial-scale=1'},
{name: 'fb:app_id', content: 'xxxx'},
{hid: 'og:url', name: 'og:url', content: 'xxxx'},
{hid: 'og:type', name: 'og:type', content: 'website'},
{hid: 'og:image', name: 'og:image', content: 'xxxx'},
{hid: 'og:site_name', name: 'og:site_name', content: 'xxxx'},
{hid: 'keywords', name: 'keywords', content: 'xxxx'}
]
}
An example of what I'd like to be able to do is to automatically set the 'og:url' to the url of the page. There is no need to repeat that every time.
At the moment I include this in each page of my Nuxt.js app:
{
hid: 'og:url',
property: 'og:url',
content: 'https://website.com' + this.$route.fullPath
},
I am sure there is a better way to automatically set that somewhere :/

Answer 1

Probably your best bet would be to create a global Mixin:
https://v2.vuejs.org/v2/guide/mixins.html#Global-Mixin
This should allow you to create a head mixin that will be auto-imported into every component, so you could define that og:url once and have it auto-injected everywhere.
Here's an example of how you'd register it as a plugin with Nuxt:
/plugins/headMixin.js
import Vue from 'vue'
export default ({ route }) => {
Vue.mixin({
head() {
return {
meta: [
{
hid: `og:url`,
property: 'og:url',
content: 'https://www.yoursite.com' + route.fullPath
}
]
}
}
})
}
in nuxt.config.js:
plugins: [
'~/plugins/headMixin.js'
]

Answer 2

this is my way
in nuxt.config.js:
head: {
title: 'default title',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{
hid: 'description',
name: 'description',
content: 'default description'
}
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
in default.vue
export default {
head() {
return {
title: `Company - ${this.$route.meta.title}`,
meta: [
{
hid: 'description',
name: 'description',
content: this.$route.meta.description
}
],
}
},
and if you use #nuxtjs/router in router.js
routes: [
{
path: '/page',
name: 'some',
meta: {
title: 'Best seo title',
description: 'Best seo description'
},
component: someComponent,
},
All the data you write in routes. Everything works perfectly.