(SP: 2) [Frontend] Fix Open Graph (OG) meta + Twitter Card#290
Conversation
✅ Deploy Preview for develop-devlovers ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📝 WalkthroughWalkthroughRemoves a title suffix and adds locale-aware metadata (siteUrl, canonical/alternate URLs, ogLocale), expands Open Graph and Twitter Card fields, and switches OG/Twitter image URLs to a relative Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
frontend/app/layout.tsx (1)
1-7:⚠️ Potential issue | 🟡 MinorDuplicate
globals.cssimport.
./globals.cssis imported on both Line 1 and Line 7. One should be removed.Proposed fix
import './globals.css'; import type { Metadata } from 'next'; import { Geist, Geist_Mono } from 'next/font/google'; import { Analytics } from '@vercel/analytics/next'; import { SpeedInsights } from '@vercel/speed-insights/next'; -import './globals.css';
🤖 Fix all issues with AI agents
In `@frontend/app/`[locale]/page.tsx:
- Line 26: The metadata's url currently uses the global siteUrl constant; change
it to the locale-specific canonical URL by concatenating siteUrl with the locale
path segment (use the locale/params.locale value available in this page
component) so each localized page outputs a unique URL; update the metadata
entry (where url: siteUrl is set) to build and use the locale-aware URL,
handling slashes properly (avoid double slashes) so social platforms see the
correct localized URL.
🧹 Nitpick comments (2)
frontend/app/layout.tsx (1)
9-9:siteUrlis duplicated acrosslayout.tsxandpage.tsx.Consider extracting this into a shared constant (e.g.,
lib/constants.ts) to avoid drift if the env variable name or fallback ever changes.frontend/app/[locale]/page.tsx (1)
28-34: OG imagealttext is hardcoded in English on a localized page.Since you already have the translation function
tavailable, consider localizing the alt text (or at least usingt('title')) for consistency with the rest of the metadata.Proposed fix
- alt: 'DevLovers — Technical Interview Platform', + alt: t('title'),
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@frontend/app/`[locale]/page.tsx:
- Around line 38-45: Replace the hardcoded OG image alt string in the metadata
images array with a localized value using the page's translator (e.g., call
t('ogImageAlt') instead of the literal 'DevLovers — Technical Interview
Platform'); update the metadata construction in page.tsx so the translator
instance used for title/description is also used to produce images[0].alt, and
add the new translation key 'ogImageAlt' to the locale files to keep alt text
consistent across locales.
🧹 Nitpick comments (2)
frontend/app/[locale]/page.tsx (2)
13-14: Redundant ternary — both branches produce the same result.Both arms evaluate to
`${siteUrl}/${locale}`, so thelocale === 'en'check is a no-op. If the intent was to mapento the root path (siteUrlwithout a segment), the'en'branch should besiteUrlalone. Otherwise, simplify:Proposed simplification
- const canonicalUrl = - locale === 'en' ? `${siteUrl}/en` : `${siteUrl}/${locale}`; + const canonicalUrl = `${siteUrl}/${locale}`;
15-31: Locale lists are hardcoded in multiple places.
localeMap(lines 15-19) andalternates.languages(lines 27-31) both enumerate the supported locales. If the project already has a central locale config (typical withnext-intl), consider deriving these from it to avoid drift when locales change.
1 participant
Summary
metadataBaseto resolve OG URLs fromNEXT_PUBLIC_SITE_URL/og.pngfor consistent OG/Twitter imagesCloses #288
Summary by CodeRabbit
New Features
Chores