Nuxt.js SEO практики

Я ищу способы реорганизовать это:

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

12.08.2018 17:08

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

1 328

Ответы 2

Вероятно, лучше всего было бы создать глобальный Mixin:

https://vuejs.org/v2/guide/mixins.html#Global-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 () не обновляется.

— 09.07.2020 17:21

14.08.2018 02:05

это мой путь

в 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
      }
    ],
  }
},

и если вы используете @ nuxtjs / router в router.js

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

Все данные, которые вы пишете в маршрутах. Все работает отлично.

04.03.2021 13:59