Summary
The Recode Website currently lacks dynamic Open Graph (OG) and Twitter Card meta tags on individual pages. When a blog post, project page, or resource is shared on social media, it renders as a plain link with no image, title, or description — significantly reducing click-through rates and the platform's social reach.
Problem
- Sharing any page from the Recode Hive website on Twitter, LinkedIn, or WhatsApp does not render a rich link preview (image, title, description).
- Without Open Graph tags (
og:title, og:description, og:image, og:url), social platforms fall back to generic or missing metadata.
- For a platform focused on developers and community building, strong social link previews are a direct growth lever.
- Static sites built with Next.js (or similar) support dynamic metadata generation per route trivially — this is a missing implementation rather than an architectural limitation.
Impact
- Every shared link from the platform has diminished social reach due to missing rich previews.
- Content creators contributing blog posts or tutorials have no social media amplification for their work.
- Reduced SEO performance across all pages without proper
<title> and <meta description> tags.
Proposed Solution
- Implement Next.js Metadata API (if using Next.js 13+ App Router) for per-page dynamic metadata:
// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
const post = await getPost(params.slug);
return {
title: post.title,
description: post.excerpt,
openGraph: {
title: post.title,
description: post.excerpt,
images: [{ url: post.coverImage }],
type: 'article',
},
twitter: {
card: 'summary_large_image',
title: post.title,
description: post.excerpt,
images: [post.coverImage],
},
};
}
- Generate OG images dynamically using
@vercel/og (Edge-compatible, zero additional infrastructure) for pages that do not have a cover image.
- Add canonical URLs to prevent duplicate content issues in search engines.
- Audit all page templates and ensure each has appropriate metadata populated.
Additional Notes
- I will implement this for all major page types: home, blog/article, project, team/contributor pages.
- I will use
opengraph-image.tsx convention for auto-generated OG images.
- Could you assign this to me?
Labels: enhancement, feature, seo, good first issue, GSSoC 2026
Summary
The Recode Website currently lacks dynamic Open Graph (OG) and Twitter Card meta tags on individual pages. When a blog post, project page, or resource is shared on social media, it renders as a plain link with no image, title, or description — significantly reducing click-through rates and the platform's social reach.
Problem
og:title,og:description,og:image,og:url), social platforms fall back to generic or missing metadata.Impact
<title>and<meta description>tags.Proposed Solution
@vercel/og(Edge-compatible, zero additional infrastructure) for pages that do not have a cover image.Additional Notes
opengraph-image.tsxconvention for auto-generated OG images.Labels:
enhancement,feature,seo,good first issue,GSSoC 2026