Nuxt•4w ago

useFetch, await, SEO and og

Hello all 🙂 I'm a bit concerned about some result I have using useFetch and useSeoMeta (or useServerSeoMeta), so I just want to confirm some stuff 🙂 Case 1 : useFetch without await and use(Server)SeoMeta In the Google search console, it looks like the description/ogdescription is correct 100% of the time. However, it's not working properly when sharing it over Discord, LinkedIn or else Case 2 : useFetch WITH await and use(Server)SeoMeta Now it works properly everywhere I don't really understand how it appears replaced for Google while not working on social networks. I guess Google render it twice or something but Social Network don't. Question Can I be confident that useFetch without await will be fully seo-optimized and the issue is just with Social Networks ? Or should I always use useFetch WITH await when I'm aiming for the best possible SEO ? Thanks ^^

5 Replies

kapa.ai•4w ago

Hi @Omnislash. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To answer your question about useFetch, await, SEO, and Open Graph metadata in Nuxt, let's break it down based on the information provided in the knowledge sources: 1. Using useFetch without await: When you use useFetch without await, it can lead to issues with reactivity and hydration. As mentioned in the Stack Overflow post (https://stackoverflow.com/questions/77391591), using useFetch without await may not behave as expected with reactivity. This can affect how the data is rendered and when it becomes available. 2. SEO and Open Graph metadata: For SEO and Open Graph metadata, it's crucial that the data is available during server-side rendering. The Docs on useServerSeoMeta (https://nuxt.com/docs/api/composables/use-server-seo-meta) suggest using useServerSeoMeta for performance-focused utility that works on the server side. This is important because search engines and social media platforms often rely on the initial server-rendered content. 3. Google Search Console vs. Social Networks: The difference you're seeing between Google Search Console and social networks could be due to how they process and render the page. Google may be more forgiving or use additional rendering techniques, while social networks might rely more strictly on the initial server-rendered content. 4. Best practices for SEO: For the best possible SEO, it's recommended to use useFetch WITH await. This ensures that the data is available during server-side rendering, which is crucial for SEO and social media sharing. The Nuxt documentation on data fetching (https://nuxt.com/docs/getting-started/data-fetching#the-need-for-usefetch-and-useasyncdata) emphasizes the importance of using useFetch or useAsyncData to avoid issues with hydration and ensure data is available in the payload. To answer your specific questions: 1. Can you be confident that useFetch without await will be fully SEO-optimized? No, you cannot be fully confident. While it might work in some cases (like Google Search Console), it's not guaranteed to work consistently across all platforms, especially social networks. 2. Should you always use useFetch WITH await when aiming for the best possible SEO? Yes, for the best possible SEO, you should use useFetch WITH await. This ensures that the data is available during server-side rendering, which is crucial for SEO and social media sharing. Here's an example of how you might structure your code for optimal SEO:

<script setup>
const { data } = await useFetch('/api/your-data-endpoint')

useServerSeoMeta({
  title: data.value.title,
  ogTitle: data.value.title,
  description: data.value.description,
  ogDescription: data.value.description,
  ogImage: data.value.image,
  // ... other meta tags
})
</script>

<script setup>
const { data } = await useFetch('/api/your-data-endpoint')

useServerSeoMeta({
  title: data.value.title,
  ogTitle: data.value.title,
  description: data.value.description,
  ogDescription: data.value.description,
  ogImage: data.value.image,
  // ... other meta tags
})
</script>

By using await with useFetch and useServerSeoMeta, you ensure that the SEO metadata is set with the fetched data during server-side rendering, providing the best chance for consistent results across search engines and social media platforms. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

harlan•4w ago

you need to SSR any open graph tags, maybe this will help https://nuxtseo.com/learn/mastering-meta/titles

Nuxt SEO

Nuxt SEO - All the boring SEO work for Nuxt done.

Learn how to master page titles in Vue & Nuxt using useHead, title templates, and SEO best practices. Includes reactive titles, social sharing, and template params.

harlan•4w ago

google will run js so you can get away with rendering them client side only but it's risky

OmnislashOP•4w ago

Thanks 🙂 They indeed don't explicitly say it but they do use await for the dynamic example even before talking about og Looks like it's the best practice indeed

Gaming

Programming

useFetch, await, SEO and og