Imeplementation of Dynamic Meta Tags

Satoshi-Sh commented 9 months ago

Web Dev Path
208

closes #208

Have you updated the CHANGELOG.md file? If not, please do it.

Yes, I did.

Requirements

[x] Remove the static canonical link from _document.js to avoid conflicts with the dynamic canonical URLs.
[x] Ensure the Meta component is correctly implemented in the Layout component, which wraps all pages in _app.js.
[x] Include a fallback mechanism in Meta for routes not explicitly defined in meta.js.
[x] Collaboration Note: Please coordinate with @mariana-caldas for the content of the meta.js properties for each page to ensure consistency and accuracy in our SEO efforts.

What is this change?

Updated pageMeta on the utils/meta.js file to implement meta tags dynamically for each page.
Used usePathname to get a current path and used ternary expression to implement a fallback mechanism when a route is not defined on pageMeta.

Were there any complications while making this change?

No

How to replicate the issue?

N/A

If necessary, please describe how to test the new feature or fix it.

Run the app locally or use the preview page, and open the element tab to check the title, meta(keywords and description), and link(canonical) tags on your browser. They should match with the info in utils/meta.js file.

To check the fallback mechanism, you can type a URL like "localhost:3010/newpage". Meta tags should be the same as "/".

When should this be merged?

After getting reviewed.

netlify[bot] commented 9 months ago

Deploy Preview for webdevpathstage ready!

Name	Link
Latest commit	bc12090af158c1c0f756c73b0caec2249b1fea55
Latest deploy log	https://app.netlify.com/sites/webdevpathstage/deploys/656579dcc692d5000817e3b6
Deploy Preview	https://deploy-preview-209--webdevpathstage.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Satoshi-Sh commented 9 months ago

@mariana-caldas Let me know if you want to change the pageMeta properties for the blog and contact.

Satoshi-Sh commented 9 months ago

Mariana fixed that, @LuSilvaDeveloper

Thanks for reviewing!!

Web-Dev-Path / web-dev-path