Comments (5)
@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.
Related Issues (20)
- Upgrade guide required HOT 5
- not able to start server, installation was successfull HOT 2
- npm start not working HOT 3
- npm start fails on Windows. HOT 3
- build, missing index.html HOT 1
- deployment guide on heroku HOT 1
- θΏθ‘ζ₯ι HOT 2
- React Confusion HOT 1
- 500 (Internal Server Error) HOT 5
- "npm start" is not working HOT 10
- Issue while npm start HOT 1
- reactpwa.com - host access Error 520 HOT 2
- chokidar.js 'return' outside of function HOT 2
- How To Build APK File For Android & IOS ? HOT 1
- Getting CSS problem on windows 10 OS HOT 1
- There is not sufficient document to start project HOT 3
- npm start on your homepage should be npm run dev
- npm run dev failed to start - Could not find a declaration file for module '@reactpwa/core/start HOT 1
- How can i change the html and body class and add stuff to the head element
- Documentation update. HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-pwa.