Add Comprehensive SEO Metadata & Structured Data#36
Conversation
Updated whatsapp links across all pages, as new links are generated for all groups
|
@TheAshutoshMishra is attempting to deploy a commit to the Ayush Sharma's projects Team on Vercel. A member of the Team first needs to authorize it. |
✅ Deploy Preview for zenyukti ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
This pull request implements comprehensive SEO metadata and structured data across the ZenYukti website. The changes introduce a reusable SEO component with react-helmet-async, add Open Graph and Twitter Card metadata for rich social media previews, implement JSON-LD structured data for improved Google indexing, and update all major pages with unique SEO tags. Additionally, the PR integrates theme toggle functionality using next-themes for light/dark mode support.
Key changes:
- Created a centralized SEO component and metadata configuration for consistent meta tags across pages
- Integrated HelmetProvider and ThemeProvider into the app structure with JSON-LD structured data
- Added comprehensive light theme CSS variables and cleaned up duplicate dark theme definitions
Reviewed changes
Copilot reviewed 15 out of 15 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/SEO.tsx | New reusable SEO component with Helmet for managing meta tags, Open Graph, and Twitter Cards |
| src/config/metadata.ts | Centralized metadata configuration with site-wide and per-page SEO data |
| src/App.tsx | Integrated HelmetProvider, ThemeProvider, and JSON-LD structured data script |
| src/pages/Team.tsx | Added SEO component with team-specific metadata |
| src/pages/Join-us.tsx | Added SEO component with join page-specific metadata |
| src/pages/Index.tsx | Added SEO component with homepage-specific metadata |
| src/pages/Contact.tsx | Added SEO component with contact page-specific metadata |
| src/pages/Community.tsx | Added SEO component with community page-specific metadata |
| src/pages/About.tsx | Replaced direct Helmet usage with new SEO component |
| src/components/ThemeToggle.tsx | New theme toggle component for light/dark/system theme switching |
| src/components/ThemeProvider.tsx | Wrapper component for next-themes provider integration |
| src/components/Header.tsx | Integrated ThemeToggle component in desktop navigation |
| src/index.css | Added light theme CSS variables and reorganized theme definitions |
| src/components/icons.ts | Added Commudle icon export (unrelated to SEO) |
| public/sitemap.xml | Updated lastmod timestamps to current date |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| } from "@/components/ui/dropdown-menu"; | ||
|
|
||
| export function ThemeToggle() { | ||
| const { setTheme, theme } = useTheme(); |
There was a problem hiding this comment.
The theme variable is destructured from useTheme() but never used in the component. Remove the unused variable from the destructuring assignment.
| const { setTheme, theme } = useTheme(); | |
| const { setTheme } = useTheme(); |
| <TooltipProvider> | ||
| <Toaster /> | ||
| <Sonner /> |
There was a problem hiding this comment.
The indentation is inconsistent in the provider nesting structure. The TooltipProvider opening tag at line 36 should be indented properly to match the component hierarchy. Lines 37-38 (Toaster components) should also be aligned consistently with proper indentation.
| export { SiDiscord as Discord , SiLinkedin as Linkedin, SiGithub as Github , SiInstagram as Instagram , SiWhatsapp as Whatsapp} from "react-icons/si"; | ||
| export {PiCodeSimple as Code , PiUsersThreeLight as Users} from "react-icons/pi"; | ||
| export { LuHeart as Heart, LuMail as Mail } from "react-icons/lu"; | ||
| export { SiGoogleclassroom as Commudle } from "react-icons/si"; // Using classroom icon as placeholder |
There was a problem hiding this comment.
This icon addition appears unrelated to the PR's stated purpose of adding SEO metadata. Consider moving this change to a separate commit or PR focused on icon updates. If this is intentionally included, the PR description should be updated to reflect this additional change.
| }: SEOProps) => { | ||
| const siteUrl = "https://zenyukti.in"; | ||
| const fullTitle = title.includes("ZenYukti") ? title : `${title} | ZenYukti`; | ||
| const canonicalUrl = canonical || siteUrl + window.location.pathname; |
There was a problem hiding this comment.
Using window.location.pathname directly in a React component can cause issues during server-side rendering and is not the recommended approach when using React Router. Instead, use the useLocation hook from react-router-dom to access the current pathname. This ensures consistency with the routing system and prevents potential SSR hydration issues.
ayushHardeniya
changed the title
📊 SEO Metadata Implementation
Changes Made
Features
Pages Updated
Testing