Diogo Kardoso
Diogo Kardoso
NNuxt
Created by Diogo Kardoso on 11/18/2024 in #❓・help
Nuxt 3 twitter and meta SEO meta not working
Hi everyone I've been trying to add support for twitter and facebook (meta) link cards but I cant seem to get them to work after I build the final server version. I've tried to use dev nuxt (npm run dev) in combination with ngrok and with that the mentionted cards work as expected. If I make the request trough postman I get a receive size of around 80kb but after I build the server "image" and run it trough node the cards stop working and the request from postman now shows a size of 1.3mb with the SEO tags being burried after all the CSS stuff (which is a lot). Below is my nuxt.config.ts (not complete due to sensitive information) file:
pages: true,
ssr: true,
app: {
head: {
charset: 'utf-8',
viewport: 'width=device-width, initial-scale=1.0',
},
},
compatibilityDate: '2024-04-03',
devtools: {
enabled: true,

timeline: {
enabled: true
}
},
$production: {
routeRules: {
'/**': {isr: true}
}
},
build: {
transpile: ['v-phone-input', 'vuetify'],
},
modules: [// 'nuxt-delay-hydration',
'@nuxtjs/i18n',
'@pinia/nuxt',
'pinia-plugin-persistedstate/nuxt',
'@stefanobartoletti/nuxt-social-share',
'@nuxt/ui',
'@vee-validate/nuxt',
'@nuxt/scripts',
'@nuxtjs/tailwindcss',
'@nuxtjs/seo',
'@nuxtjs/google-adsense',
(_options, nuxt) => {
nuxt.hooks.hook('vite:extendConfig', (config) => {
// @ts-expect-error
config.plugins.push(vuetify({autoImport: true}))
})
},],
veeValidate: {
// disable or enable auto imports
autoImports: true
},
i18n: {
baseUrl: process.env.APP_URL,
vueI18n: './i18n.config.ts',
strategy: 'no_prefix',
locales: ['en', 'pt'],
},
postcss: {
plugins: {
'postcss-import': true,
'tailwindcss/nesting': {},
'postcss-nested': {},
autoprefixer: {},

},
},
css: [
'~/assets/css/main.css'
],
plugins: [
'~/plugins/eventBus.js',
'~/plugins/populateStore.client.ts',
'~/plugins/vee-validator.client.ts',
'~/plugins/vue-toastify.client.ts',
'~/plugins/vPhoneInput.ts',
],
pages: true,
ssr: true,
app: {
head: {
charset: 'utf-8',
viewport: 'width=device-width, initial-scale=1.0',
},
},
compatibilityDate: '2024-04-03',
devtools: {
enabled: true,

timeline: {
enabled: true
}
},
$production: {
routeRules: {
'/**': {isr: true}
}
},
build: {
transpile: ['v-phone-input', 'vuetify'],
},
modules: [// 'nuxt-delay-hydration',
'@nuxtjs/i18n',
'@pinia/nuxt',
'pinia-plugin-persistedstate/nuxt',
'@stefanobartoletti/nuxt-social-share',
'@nuxt/ui',
'@vee-validate/nuxt',
'@nuxt/scripts',
'@nuxtjs/tailwindcss',
'@nuxtjs/seo',
'@nuxtjs/google-adsense',
(_options, nuxt) => {
nuxt.hooks.hook('vite:extendConfig', (config) => {
// @ts-expect-error
config.plugins.push(vuetify({autoImport: true}))
})
},],
veeValidate: {
// disable or enable auto imports
autoImports: true
},
i18n: {
baseUrl: process.env.APP_URL,
vueI18n: './i18n.config.ts',
strategy: 'no_prefix',
locales: ['en', 'pt'],
},
postcss: {
plugins: {
'postcss-import': true,
'tailwindcss/nesting': {},
'postcss-nested': {},
autoprefixer: {},

},
},
css: [
'~/assets/css/main.css'
],
plugins: [
'~/plugins/eventBus.js',
'~/plugins/populateStore.client.ts',
'~/plugins/vee-validator.client.ts',
'~/plugins/vue-toastify.client.ts',
'~/plugins/vPhoneInput.ts',
],
. I should also note that I'm using useSeoMeta instead of useHead. Thanks in advance for any help provided 🙂
6 replies