SEO Enchancement of Kanvas Page

[Lakshay-Pareek]

Changes Implemented

Added hidden SEO meta enhancements

• Introduced a kanvas-seo.js file using react-helmet to inject SEO metadata dynamically.
• Added optimized <title> and <meta description> to match Kanvas content and keywords.
• Included canonical tag, robots directives, and Open Graph metadata for better crawlability and link previews.

Resolved multiple SEO audit issues:

• Single H1 enforcement: Added a hidden H1 element (non-visible to users) to ensure only one H1 is detected by crawlers.
• H1–content match: Hidden H1 text semantically aligned with the main topic ("Kanvas – Cloud Native Visual Designer").
• Improved meta title & description: Optimized for keyword relevance and readability.
• Added missing image alt attributes: Automatically handled via code to improve accessibility and image SEO.
• Removed duplicate headings by hiding secondary repeated heading tags from crawlers (CSS-hidden).
• Enabled crawlability: Ensured links are crawlable and indexable using <a> attributes and robots directives.
• Performance: Minor adjustments to metadata loading to help page response metrics.

No UI or layout impact

• All additions are non-visual and only affect crawlers.
• Verified that the visual layout and user experience remain unchanged.

This PR fixes #6981

Signed commits

• Yes, I signed my commits.

[Namanv0509]

@Lakshay-Pareek please look on the build fails
Thank you for your contribution!
Let's discuss this during the website call today at 5:30 PM IST | 7 AM CT

Add it as an agenda item to the meeting minutes, if you would :)

[simihablo]

@SplinterSword, please help review, if you can.

[SplinterSword]

@SplinterSword, please help review, if you can.

Sure I will do that

[SplinterSword]

@Lakshay-Pareek can you fix the deployment issues, also did you use GitHub pages for deployment or used the preview build of netlify for testing seo score?

[Lakshay-Pareek]

@SplinterSword Sorry for the inconvience but i had some issue with my pc, so i was not able to work on it. I was using gitpod so i deployed it locally by selective rendering.

[SplinterSword]

No issues, tell me when you are working on it, meanwhile i will review the code and try to run and work on it on my machine

[Lakshay-Pareek]

@SplinterSword Actually the error is about the react-helmet package i am using for the metadata. It seems that after running npm install it is not installing the react-helmet package which is throwing the error. Rest all is good.

[SplinterSword]

Yeah I already installed it and now i am testing your code out

[SplinterSword]

To see if it actually improves the ratings

[Lakshay-Pareek]

Yes rest of it should run fine.

[SplinterSword]

Did you got to check the score, before the react helmet problem, if so then what was it and how you checked it.

[Lakshay-Pareek]

I would like to know how you are testing on, using codespace or locally? Because SEO rating also is affected by the response time of the site.

[Lakshay-Pareek]

Did you got to check the score, before the react helmet problem, if so then what was it and how you checked it.

Yeah i checked it, but there was inconsistency due the slow response time of my deployed site, Firstly i treid using the google lighthouse, but it was not accurate, so i tried the online seo checkers

[SplinterSword]

I was thinking using github pages because that is how the actual site is deployed. Like deploying your fork's branch using GitHub pages

[Lakshay-Pareek]

After making the positive changes, the rating should definitely increase, bcus there no metadata present for the page.

[SplinterSword]

But you use the slack group to ask this. You will get a more clear instruction there

[SplinterSword]

Okay i think you should use github pages as i know that is how the actual site is deployed

[Lakshay-Pareek]

@SplinterSword Ok will do it

[SplinterSword]

@Lakshay-Pareek were you able to fix the build error??

[SplinterSword]

Remove kanvas-seo.js as only the index.js file is crawled by bots and this file seems redundant to add.

[l5io]

🚀 Preview for commit e7fb44e at: https://68f8fd65fa5a64c34b665701--layer5.netlify.app

[Lakshay-Pareek]

@SplinterSword Have a look.

[l5io]

🚀 Preview for commit a05874f at: https://68f901b648e5fed4342660ce--layer5.netlify.app

[SplinterSword]

Did you check the score

[SplinterSword]

Hello @Lakshay-Pareek any updates

[Lakshay-Pareek]

@SplinterSword Ya i tried testing the SEO, but it came lower from current, the rating was lower bcus of the below error. I tried searching about it but was not able to solve it. It was not on the current kanvas, it just came on the deployed webpage.