Does this support dynamic SEO tags? about react-pwa HOT 5 CLOSED

@taqimustafa updateSeo updates meta tag in development mode, but when you build your application, the same function returns updated metadata in source file thus giving expected output in production mode.

from react-pwa.

Yes @bytewiz. We have taken care of that. Sorry, the docs are not yet available but let me share a code snippet here.

const routes = [
  {
    path: "/blog/:id",
    layout: DefaultLayout,
    component: BlogPost,
    preLoadData: async ({match, api, updateSeo}) => {
      const { params } = match;
      const postData = await api.fetch(`https://<your-api-url>/posts/${params.id}`, { swcache: 20000 });
      updateSeo({
        title: postData.title,
        description: postData.desc,
      });
      return postData;
    },
  }
];

Thus you can take care of SEO for dynamic pages.

from react-pwa.

@tirthbodawala awesome and thank you very much for the fast response! 👍

from react-pwa.

@tirthbodawala the updateSEO part works similar to react-helmet ? or does it actually update the meta tags in page source ?

Right now i tried this code, but it's only updating meta tags in inspect view. I don't think FB crawler or other social media crawlers will be able to get the dynamic meta tags.

https://developers.facebook.com/tools/debug/

from react-pwa.

@tirthbodawala I tried this updateSEO code but it doesn't throw any error or reflect any changes in meta tags, so can you please help me with the issue in the following code
const routes = [
{
path: '/',
exact: true,
component: () => import('../components/GuestUserPage/index'),
preLoadData: async ({ match, api, updateSeo }) => {
console.log('preloading')
const { params } = match;
const postData = await api.fetch(https://jsonplaceholder.typicode.com/todos/1, { swcache: 20000 });
updateSeo({
title: postData.title,
description: postData.title,
});
return postData;
}]

from react-pwa.