Dynamic Meta Properties for Social Media (Open Graph) Not Updating in Vue 3 with Vite

Question

Title:

Body:

I am building a blog in Vue 3 with Vite where each article page has dynamic meta properties, including og:image, for proper social media sharing previews. The meta properties, including the thumbnail image, are retrieved from the database when the article is loaded. For example, the thumbnail URL is stored in state.article.thumbnail.

I am using @vueuse/head to dynamically set the meta properties, and here’s how I am doing it in my article.vue file:

<script setup>
import { ref, onMounted } from "vue";
import useArticle from "../modules/article";
import { useRoute } from "vue-router";
import { useHead } from "@vueuse/head";

const { getSpecificArticle, state } = useArticle();
const route = useRoute();
const isDataLoaded = ref(false);

onMounted(async () => {
  await getSpecificArticle(route.params.slug);
  isDataLoaded.value = true;

  useHead({
    meta: [
      { property: "og:title", content: state.article.title || "Default Title" },
      { property: "og:image", content: state.article.thumbnail },
    ],
  });
});
</script>

The dynamic meta tags seem to render correctly in the DOM when inspected via the browser’s developer tools. However, when I check the page source, the meta tags are missing, and SEO crawlers like Facebook’s debugger cannot detect them. I understand this is due to Vite using client-side rendering (CSR), and crawlers may not execute JavaScript.

I attempted to implement server-side rendering (SSR) by integrating vite-ssr, but ran into version compatibility issues with Vite 5 and vite-ssr, which currently supports only Vite 4.

Questions:

1.  How can I ensure the dynamic meta properties (like og:image, title, ) are properly rendered and detectable by SEO crawlers and social media platforms in a Vue 3 app with Vite?
2.  Is there a way to achieve this without fully transitioning to SSR?
3.  Are there any workarounds for this issue when using @vueuse/head or alternatives to dynamically set meta properties?

The application is built with Vue 3 and Vite 5.