Server Side Rendering of Meta Data needed for React website- SEO
- or -
Post a project like this1060
£50(approx. $63)
- Posted:
- Proposals: 6
- Remote
- #3269956
- Awarded
software engineer|Full-Stack Software Developer| web developer| App developer | AI Engineer | WordPress
Indore
349219853532265716780342717132527432667043
Description
Experience Level: Entry
We have many pages which need meta data. Some of these pages are static and some of these will be dynamic. At the moment, every page on the site says "Web site created using create-react-app." as its meta description.
We integrated react-helmet, but it does not work. The site still displays the public/index.html tags, which is "Web site created using create-react-app." This may be a backend problem.
However, the metadata MUST update the html template too, so that javascript is not required to load the correct metadata. This is because lots of web crawlers, search engines, and social networks do not load the read the javascript to load metadata, and they just look at the first html. This means that we need server side rendering of metadata so that it updates the html template.
In total, there are 3 pages which need dynamic meta data, and 5 pages that have static meta data.
Here are some methods you can achieve this:
OPTION 1: React Helmet with React and Redux (SSI
Use react-helmet, but also ensure that it is server side rendered ("Server Usage" in the documentation here:
Intro video: https://www.youtube.com/watch?v=UQl95wIfIR4
Static Links: https://www.youtube.com/watch?v=iAbtNdgjn2Y
Dynamic links): https://www.youtube.com/watch?v=r9PHxKEXmqY
OPTION 2: Use React Helmet with Gatsby Plugin React Helmet (https://www.npmjs.com/package/gatsby-plugin-react-helmet)
or any other options you think is best.
We integrated react-helmet, but it does not work. The site still displays the public/index.html tags, which is "Web site created using create-react-app." This may be a backend problem.
However, the metadata MUST update the html template too, so that javascript is not required to load the correct metadata. This is because lots of web crawlers, search engines, and social networks do not load the read the javascript to load metadata, and they just look at the first html. This means that we need server side rendering of metadata so that it updates the html template.
In total, there are 3 pages which need dynamic meta data, and 5 pages that have static meta data.
Here are some methods you can achieve this:
OPTION 1: React Helmet with React and Redux (SSI
Use react-helmet, but also ensure that it is server side rendered ("Server Usage" in the documentation here:
Intro video: https://www.youtube.com/watch?v=UQl95wIfIR4
Static Links: https://www.youtube.com/watch?v=iAbtNdgjn2Y
Dynamic links): https://www.youtube.com/watch?v=r9PHxKEXmqY
OPTION 2: Use React Helmet with Gatsby Plugin React Helmet (https://www.npmjs.com/package/gatsby-plugin-react-helmet)
or any other options you think is best.
Bilal P.
100% (16)Projects Completed
14
Freelancers worked with
10
Projects awarded
47%
Last project
17 Mar 2023
United Kingdom
New Proposal
Login to your account and send a proposal now to get this project.
Log inClarification Board Ask a Question
-
There are no clarification messages.
We collect cookies to enable the proper functioning and security of our website, and to enhance your experience. By clicking on 'Accept All Cookies', you consent to the use of these cookies. You can change your 'Cookies Settings' at any time. For more information, please read ourCookie Policy
Cookie Settings
Accept All Cookies