NuxtN
Nuxtβ€’15mo agoβ€’
5 replies
Diogo Kardoso

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',
    ],
.
I should also note that I'm using useSeoMeta instead of useHead.
Thanks in advance for any help provided πŸ™‚
Was this page helpful?