How to fix "//*" canonical error in GatsbyJS
Gatsby creates a "/*" canonical URL when using the "path" from a programmatically created page. Use the page URI to remove this error.
The following article addresses the issue above by which Gatsby creates pages with a "/*" in the canonical URL instead of the correct URI.
This occurs when an individual programmatically create pages using the "gatsby-node." script and subsequently uses the "path" that is produced by the "gatsby-node" script to create the canonical URL.
To avoid it follow the steps outlined below.
Step One: Remove the Path
In all the templates that use the path, remove the path from the props.
Step Two: Add the URI to the GraphQL Query
Add the uri to the GraphQL query and associated typescript types.
Step Three: Update the Canonical URL
Wherever you had previously used the path, use the uri.
Please note this might require you updating the logic.
Step Four: Test
Build, deploy the website and confirm the canonical error has been resolved.
Looking to learn more about ReactJS, GatsbyJS or SEO ?
Search our blog to find educational content on learning SEO as well as how to use ReactJS and GatsbyJS.