Clash Royale CLAN TAG#URR8PPP

Nuxt.js SEO Practises

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 :/

1 Answer
1

Probably your best bet would be to create a global Mixin:

https://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.

og:url

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'
]


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.