seo Question posted in
Some basic information to get you started with this can be found here.

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

Tags:

2

Answers


  1. 0

    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'
]
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search