Nuxt•3d ago

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 🙂

2 Replies

kapa.ai•3d ago

Hi @Diogo Kardoso. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in your question and the knowledge sources available, it seems you're experiencing issues with SEO meta tags for Twitter and Facebook cards in your Nuxt 3 application after building and deploying it. Let's address this problem step by step: 1. Using useSeoMeta: You mentioned that you're using useSeoMeta instead of useHead. This is a good approach, as useSeoMeta (https://nuxt.com/docs/api/composables/use-seo-meta) is specifically designed for SEO meta tags and provides better TypeScript support. 2. Meta tags buried in CSS: The issue you're experiencing with meta tags being buried after CSS in the built version could be related to how Nuxt is generating the final HTML. To address this, you might want to try the following: a. Use useServerSeoMeta instead of useSeoMeta: useServerSeoMeta (https://nuxt.com/docs/api/composables/use-server-seo-meta) is a performance-focused utility that only runs on the server side. This might help ensure your meta tags are properly placed in the generated HTML.

   useServerSeoMeta({
     title: 'My Amazing Site',
     ogTitle: 'My Amazing Site',
     description: 'This is my amazing site, let me tell you all about it.',
     ogDescription: 'This is my amazing site, let me tell you all about it.',
     ogImage: '<https://example.com/image.png',>
     twitterCard: 'summary_large_image',
   })

   useServerSeoMeta({
     title: 'My Amazing Site',
     ogTitle: 'My Amazing Site',
     description: 'This is my amazing site, let me tell you all about it.',
     ogDescription: 'This is my amazing site, let me tell you all about it.',
     ogImage: '<https://example.com/image.png',>
     twitterCard: 'summary_large_image',
   })

b. Consider moving your SEO meta configuration to app.vue: As suggested in the migration guide (https://nuxt.com/docs/migration/meta#migration), you might want to move your shared meta configuration from nuxt.config.ts to app.vue. This could help ensure that your meta tags are properly placed in the generated HTML. 3. Check your build configuration: Make sure your nuxt.config.ts is properly configured for production builds. The routeRules you have set for production look good, but you might want to double-check other production-specific settings. 4. Verify meta tag placement: After building your application, you can inspect the generated HTML to see where your meta tags are placed. They should ideally be in the <head> section of your HTML, before any CSS or JavaScript. 5. Use Nuxt's built-in SEO module: I notice you're using @nuxtjs/seo in your modules. Make sure you're utilizing this module correctly, as it can help manage your SEO tags more effectively. 6. Consider using meta components: Nuxt 3 provides meta components (https://nuxt.com/docs/getting-started/seo-meta#components) that you can use in your templates. These might help ensure your meta tags are placed correctly:

   <template>
     <div>
       <Head>
         <Title>My Page Title</Title>
         <Meta name="description" content="My page description" />
         <Meta property="og:title" content="My Open Graph Title" />
         <Meta name="twitter:card" content="summary_large_image" />
       </Head>
       <!-- Your page content -->
     </div>
   </template>

   <template>
     <div>
       <Head>
         <Title>My Page Title</Title>
         <Meta name="description" content="My page description" />
         <Meta property="og:title" content="My Open Graph Title" />
         <Meta name="twitter:card" content="summary_large_image" />
       </Head>
       <!-- Your page content -->
     </div>
   </template>

If these suggestions don't resolve your issue, you might want to create a minimal reproduction of the problem and seek help from the Nuxt community or file an issue on the Nuxt GitHub repository. Remember to test your changes in a production-like environment before deploying, as the development and production builds can behave differently. Stack Overflow - How to add dynamic opengraph meta data to page in NuxtJS (https://stackoverflow.com/questions/77613475) Nuxt Docs - SEO and Meta (https://nuxt.com/docs/getting-started/seo-meta) Nuxt Docs - useServerSeoMeta (https://nuxt.com/docs/api/composables/use-server-seo-meta) Nuxt Docs - useSeoMeta (https://nuxt.com/docs/api/composables/use-seo-meta) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

<@344886711307730954> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Nuxt 3 twitter and meta SEO meta not working