Skip to content

feat: add opengraph and twitter metadata for better social media sharing #448

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mmd-rehan wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat: add opengraph and twitter metadata for better social media sharing #448

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ebe4060
feat: add opengraph and twitter metadata for better social media sharing
mmd-rehan Aug 4, 2025
2bc422d
fix: using helpers to get url paths
mmd-rehan Aug 5, 2025
f5f2bfb
fix: reverted metadata from additional pages
mmd-rehan Aug 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 50 additions & 0 deletions src/app/[locale]/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,56 @@ import { routing } from '@/libs/I18nRouting';
import '@/styles/global.css';

export const metadata: Metadata = {
metadataBase: new URL('https://demo.nextjs-boilerplate.com'),
title: {
default: 'Next.js Boilerplate',
template: '%s | Next.js Boilerplate',
},
description: 'Next.js Boilerplate is the perfect starter code for your project. Build your React application with the Next.js framework.',
keywords: ['Next.js', 'React', 'TypeScript', 'Tailwind CSS', 'Boilerplate', 'Starter'],
authors: [{ name: 'CreativeDesignsGuru' }],
creator: 'CreativeDesignsGuru',
publisher: 'CreativeDesignsGuru',
formatDetection: {
email: false,
address: false,
telephone: false,
},
openGraph: {
type: 'website',
locale: 'en_US',
url: 'https://demo.nextjs-boilerplate.com',
siteName: 'Next.js Boilerplate',
title: 'Next.js Boilerplate',
description: 'Next.js Boilerplate is the perfect starter code for your project. Build your React application with the Next.js framework.',
images: [
{
url: '/assets/images/nextjs-starter-banner.png',
width: 1200,
height: 630,
alt: 'Next.js Boilerplate',
},
],
},
Comment on lines 10 to +41
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Aug 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

❓ Verification inconclusive

Consider dynamic metadata generation for proper i18n support.

The static metadata doesn't adapt to different locales, which may impact the i18n objectives mentioned in the PR. The hardcoded locale: 'en_US' in OpenGraph won't be appropriate for French pages.

Consider implementing generateMetadata function instead of static metadata to support locale-specific content:

export async function generateMetadata(props: {
  params: Promise<{ locale: string }>;
}): Promise<Metadata> {
  const { locale } = await props.params;
  
  return {
    // ... existing metadata
    openGraph: {
      // ... existing openGraph
      locale: locale === 'fr' ? 'fr_FR' : 'en_US',
      url: `https://demo.nextjs-boilerplate.com/${locale}`,
    },
  };
}

Let me verify if there are locale-specific metadata implementations in other files:

🏁 Script executed:

#!/bin/bash
# Search for generateMetadata functions that handle locale-specific metadata
ast-grep --pattern 'export async function generateMetadata($$$) {
  $$$
}'

Length of output: 76

Implement dynamic metadata generation for i18n support

No existing generateMetadata function was found in the codebase. To ensure your metadata (including OpenGraph locale and URLs) adapts to each locale, replace the static export const metadata in src/app/[locale]/layout.tsx with an async generateMetadata function:

• Remove the block at lines 10–41 that reads:

export const metadata: Metadata = { … }

• Add something like:

export async function generateMetadata({
  params: { locale },
}: {
  params: { locale: string }
}): Promise<Metadata> {
  const isFR = locale === 'fr';

  return {
    metadataBase: new URL(`https://demo.nextjs-boilerplate.com/${locale}`),
    title: {
      default: isFR ? 'Next.js Boilerplate FR' : 'Next.js Boilerplate',
      template: '%s | Next.js Boilerplate',
    },
    description: isFR
      ? 'Next.js Boilerplate est le code de démarrage parfait pour votre projet. Build your React application avec Next.js.'
      : 'Next.js Boilerplate is the perfect starter code for your project. Build your React application with the Next.js framework.',
    keywords: ['Next.js', 'React', 'TypeScript', 'Tailwind CSS', 'Boilerplate', 'Starter'],
    authors: [{ name: 'CreativeDesignsGuru' }],
    creator: 'CreativeDesignsGuru',
    publisher: 'CreativeDesignsGuru',
    formatDetection: { email: false, address: false, telephone: false },
    openGraph: {
      type: 'website',
      locale: isFR ? 'fr_FR' : 'en_US',
      url: `https://demo.nextjs-boilerplate.com/${locale}`,
      siteName: 'Next.js Boilerplate',
      title: isFR ? 'Next.js Boilerplate FR' : 'Next.js Boilerplate',
      description: isFR
        ? 'Next.js Boilerplate est le code de démarrage parfait pour votre projet. Build your React application avec Next.js.'
        : 'Next.js Boilerplate is the perfect starter code for your project. Build your React application with the Next.js framework.',
      images: [
        {
          url: '/assets/images/nextjs-starter-banner.png',
          width: 1200,
          height: 630,
          alt: 'Next.js Boilerplate',
        },
      ],
    },
  };
}

This ensures your metadata—and especially the OpenGraph locale—correctly reflects the user’s locale.

🤖 Prompt for AI Agents 
In src/app/[locale]/layout.tsx from lines 10 to 41, replace the static export
const metadata object with an async generateMetadata function that accepts the
locale parameter. Remove the existing metadata export and implement
generateMetadata to return metadata dynamically based on the locale, adjusting
metadataBase URL, title, description, and openGraph locale and URL accordingly
to support i18n. This will ensure metadata and OpenGraph data reflect the user's
locale properly.

twitter: {
card: 'summary_large_image',
site: '@ixartz',
creator: '@ixartz',
title: 'Next.js Boilerplate',
description: 'Next.js Boilerplate is the perfect starter code for your project. Build your React application with the Next.js framework.',
images: ['/assets/images/nextjs-starter-banner.png'],
},
robots: {
index: true,
follow: true,
googleBot: {
'index': true,
'follow': true,
'max-video-preview': -1,
'max-image-preview': 'large',
'max-snippet': -1,
},
},
icons: [
{
rel: 'apple-touch-icon',
Expand Down
4 changes: 3 additions & 1 deletion src/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,11 +62,13 @@
},
"Dashboard": {
"meta_title": "Dashboard",
"meta_description": "Access your personalized dashboard with Next.js Boilerplate",
"hello_message": "Hello {email}!",
"alternative_message": "Want to build your SaaS faster using the same stack? Try <url></url>."
},
"UserProfile": {
"meta_title": "User Profile"
"meta_title": "User Profile",
"meta_description": "Manage your account settings and profile information"
},
"DashboardLayout": {
"dashboard_link": "Dashboard",
Expand Down
4 changes: 3 additions & 1 deletion src/locales/fr.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,11 +62,13 @@
},
"Dashboard": {
"meta_title": "Tableau de bord",
"meta_description": "Accédez à votre tableau de bord personnalisé avec Next.js Boilerplate",
"hello_message": "Bonjour {email}!",
"alternative_message": "Vous voulez créer votre SaaS plus rapidement en utilisant la même stack ? Essayez <url></url>."
},
"UserProfile": {
"meta_title": "Profil de l'utilisateur"
"meta_title": "Profil de l'utilisateur",
"meta_description": "Gérez les paramètres de votre compte et les informations de votre profil"
},
"DashboardLayout": {
"dashboard_link": "Tableau de bord",
Expand Down