Nuxt•7d ago

How to activate preview of website when sending the url to whatsapp

Hello everyone, does anyone know about how we can use seo to activate the preview of our website when sending the url to whatsapp. I have already did this way, but the preview is still not appear.

9 Replies

kapa.ai•7d ago

Hi @Adnan Erlansyah. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To enable website previews when sharing URLs on WhatsApp, you need to implement proper SEO meta tags, particularly Open Graph tags. These tags help WhatsApp understand how to display a preview of your website. Based on the knowledge sources, here's how you can implement this in your Nuxt application: Using useSeoMeta Composable The recommended approach is to use the useSeoMeta composable, which provides type safety and helps avoid common mistakes:

<script setup lang="ts">
useSeoMeta({
  title: 'My Website Title',
  ogTitle: 'My Website Title', // Open Graph title
  description: 'This is my website description.',
  ogDescription: 'This is my website description.', // Open Graph description
  ogImage: '<https://example.com/image.png',> // Full URL to your preview image
  ogUrl: '<https://example.com',> // Your website URL
  ogType: 'website'
})
</script>

<script setup lang="ts">
useSeoMeta({
  title: 'My Website Title',
  ogTitle: 'My Website Title', // Open Graph title
  description: 'This is my website description.',
  ogDescription: 'This is my website description.', // Open Graph description
  ogImage: '<https://example.com/image.png',> // Full URL to your preview image
  ogUrl: '<https://example.com',> // Your website URL
  ogType: 'website'
})
</script>

The og prefixed properties are specifically for Open Graph, which is what WhatsApp uses to generate previews Learn more about useSeoMeta. Using Meta Components Alternatively, you can use Nuxt's meta components in your template:

<template>
  <div>
    <Head>
      <Title>My Website Title</Title>
      <Meta name="description" content="This is my website description" />
      <Meta property="og:title" content="My Website Title" />
      <Meta property="og:description" content="This is my website description" />
      <Meta property="og:image" content="<https://example.com/image.png"> />
      <Meta property="og:url" content="<https://example.com"> />
      <Meta property="og:type" content="website" />
    </Head>
    
    <!-- Your page content -->
  </div>
</template>

<template>
  <div>
    <Head>
      <Title>My Website Title</Title>
      <Meta name="description" content="This is my website description" />
      <Meta property="og:title" content="My Website Title" />
      <Meta property="og:description" content="This is my website description" />
      <Meta property="og:image" content="<https://example.com/image.png"> />
      <Meta property="og:url" content="<https://example.com"> />
      <Meta property="og:type" content="website" />
    </Head>
    
    <!-- Your page content -->
  </div>
</template>

Note that these component names must be capitalized to distinguish them from native HTML elements Learn more about SEO and Meta. Testing Your Open Graph Tags Nuxt DevTools provides an Open Graph tab that can help you test and debug your SEO tags. It shows you a preview of how your page would appear on social platforms and identifies any missing SEO tags Learn more about Nuxt DevTools. Important Notes 1. Make sure your ogImage URL is an absolute URL (including the domain), not a relative path 2. The image should be reasonably sized (recommended minimum is 1200×630 pixels) 3. Your server must be accessible to WhatsApp's crawlers 4. If you're using prerendering, ensure the pages you want to share are prerendered to include all meta tags If you're still having issues, you might want to check if your hosting provider or CDN is blocking WhatsApp's crawlers, or if there are any caching issues preventing the meta tags from being properly served. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7d ago

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

Adnan ErlansyahOP•7d ago

@kapa.ai I have already made like this but why it still not working?

message.txt

kapa.ai•7d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand you're having trouble getting WhatsApp previews to work despite implementing the SEO meta tags. Let's troubleshoot some common issues that might be preventing your previews from appearing: Common Issues to Check 1. Caching Issues: WhatsApp might have cached an older version of your page. Try using a slightly different URL (like adding a query parameter) when testing. 2. Image Problems: - Ensure your ogImage is an absolute URL (https://yourdomain.com/image.jpg) - Verify the image is accessible (not behind authentication) - Check that the image dimensions meet the requirements (ideally 1200×630 pixels) - Make sure the image format is supported (JPG, PNG) 3. Server Response Time: If your server takes too long to respond, WhatsApp might time out before fetching the meta tags. 4. Reactive Data Issues: If you're using dynamic data, make sure you're using the computed getter syntax correctly:

<script setup lang="ts">
const title = ref('My title')

useSeoMeta({
  title,
  ogTitle: () => title.value,
  description: () => `This is a description for the ${title.value} page`
})
</script>

<script setup lang="ts">
const title = ref('My title')

useSeoMeta({
  title,
  ogTitle: () => title.value,
  description: () => `This is a description for the ${title.value} page`
})
</script>

5. Server-Side Rendering: For better compatibility, consider using useServerSeoMeta which ensures the meta tags are rendered on the server Learn more about useServerSeoMeta. 6. Testing Tool: Use Facebook's Sharing Debugger (https://developers.facebook.com/tools/debug/) to validate your Open Graph tags, as WhatsApp uses Facebook's crawler. 7. Implementation Method: If you're using both nuxt.config.ts and page-level meta tags, the page-level ones should override the global ones. Make sure you're using the correct hid or unique identifiers. If you're still facing issues, could you share more details about your implementation? Specifically: - Are you using SSR or SPA mode? - How are you implementing the meta tags (global config or page components)? - Have you verified the meta tags are actually in your HTML when viewing the page source? This would help provide more targeted troubleshooting advice for your specific situation. I'm sorry you're experiencing this frustration, but with a bit more information, we should be able to get your WhatsApp previews working! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7d ago

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

Adnan ErlansyahOP•7d ago

Uppp Uppppp

Adnan ErlansyahOP•7d ago

@kapa.ai is it affect issue seo of open graph isn't working when use seo meta like this?

message.txt

kapa.ai•7d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, issues with Open Graph implementation can definitely affect how your website appears when shared on platforms like WhatsApp, which can impact your overall SEO effectiveness. Based on the knowledge sources, here are some potential issues that might be causing your Open Graph tags not to work properly: Reactivity Issues If you're using dynamic data with useSeoMeta, make sure you're implementing the reactive values correctly. According to the documentation:

<script setup lang="ts">
const title = ref('My title')

useSeoMeta({
  title,
  description: () => `This is a description for the ${title.value} page`
})
</script>

<script setup lang="ts">
const title = ref('My title')

useSeoMeta({
  title,
  description: () => `This is a description for the ${title.value} page`
})
</script>

When using reactive values, you should use the computed getter syntax (() => value) for dynamic content Learn more about useSeoMeta. Server-Side Rendering Considerations For better SEO and social sharing, consider using useServerSeoMeta instead of useSeoMeta. This is especially important because:

"In most instances, the meta doesn't need to be reactive as robots will only scan the initial load. So we recommend using useServerSeoMeta as a performance-focused utility that will not do anything (or return a head object) on the client." Learn more about useServerSeoMeta

Conflicting Meta Tags If you have meta tags defined in both your nuxt.config.ts and your page components, make sure they're not conflicting. For example, in your nuxt.config.ts you might have:

export default defineNuxtConfig({
  app: {
    head: {
      meta: [
        { hid: 'og-title', property: 'og:title', content: 'Vuetify + Nuxt'},
        // other meta tags
      ]
    }
  }
})

export default defineNuxtConfig({
  app: {
    head: {
      meta: [
        { hid: 'og-title', property: 'og:title', content: 'Vuetify + Nuxt'},
        // other meta tags
      ]
    }
  }
})

And then in your component:

<script setup>
useHead({
    meta: [
        { hid: 'og-title', property: 'og:title', content: projName },
        // other meta tags
    ],
})
</script>

<script setup>
useHead({
    meta: [
        { hid: 'og-title', property: 'og:title', content: projName },
        // other meta tags
    ],
})
</script>

Make sure you're using the same hid values to properly override the global meta tags. Dynamic Content Handling For dynamic content that comes from API calls, you should use a computed approach:

<script setup>
const projName = ref('my project name') // your projName `Ref`

const computedPageMeta = computed(() => {
    return {
        title: projName.value,
        meta: [
            { hid: 'og-title', property: 'og:title', content: projName.value },
            // other meta tags
        ]
    };
});

useHead(computedPageMeta);
</script>

<script setup>
const projName = ref('my project name') // your projName `Ref`

const computedPageMeta = computed(() => {
    return {
        title: projName.value,
        meta: [
            { hid: 'og-title', property: 'og:title', content: projName.value },
            // other meta tags
        ]
    };
});

useHead(computedPageMeta);
</script>

This ensures that when your API data loads, the meta tags are properly updated Stack Overflow solution. If you're still having issues, consider using the Nuxt DevTools Open Graph tab to debug your SEO tags and see how they appear on social platforms Learn more about Nuxt DevTools. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7d ago

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

Gaming

Programming

How to activate preview of website when sending the url to whatsapp

Did you find this page helpful?