Nuxt.js SEO 实践答案

【问题标题】：Nuxt.js SEO PractisesNuxt.js SEO 实践
【发布时间】：2019-01-19 11:04:01
【问题描述】：

我正在寻找重构它的方法：

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

我希望能够做的一个示例是自动将“og:url”设置为页面的 url。不需要每次都重复。

目前我在我的 Nuxt.js 应用程序的每个页面中都包含此内容：

    {
      hid: 'og:url',
      property: 'og:url',
      content: 'https://website.com' + this.$route.fullPath
    },

我确信有更好的方法可以在某处自动设置：/

【问题讨论】：

标签： vue.js seo nuxt.js

【解决方案1】：

您最好的选择可能是创建一个全局Mixin：

https://vuejs.org/v2/guide/mixins.html#Global-Mixin

这应该允许您创建一个将自动导入到每个组件中的 head mixin，因此您可以定义一次 og:url 并让它在任何地方自动注入。

这是一个如何将其注册为 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
          }
        ]
      }
    }
  })
}

在 nuxt.config.js：

plugins: [
    '~/plugins/headMixin.js'
]

【讨论】：

此解决方案仅在初始页面加载时运行。如果用户导航到另一个页面 head() 不会更新。

【解决方案2】：

这是我的方式

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

在 default.vue 中

export default {
head() {
  return {
    title: `Company - ${this.$route.meta.title}`,
    meta: [
      {
        hid: 'description',
        name: 'description',
        content: this.$route.meta.description
      }
    ],
  }
},

如果你在 router.js 中使用 @nuxtjs/router

routes: [      
{
  path: '/page',
  name: 'some',
  meta: {            
    title: 'Best seo title',
    description: 'Best seo description'
  },
  component: someComponent,
},

您在路由中写入的所有数据。一切正常。

【讨论】：