feat(blog): resolve SEO cannibalization, update blog posts & clean up dev posts

This commit is contained in:
2026-08-05 21:52:53 +02:00
parent cf05e60251
commit 6071561ba4
31 changed files with 858 additions and 1109 deletions

View File

@@ -1,5 +1,6 @@
import React from 'react'
import { Metadata } from 'next'
import Image from 'next/image'
import Link from 'next/link'
import SeoNavbar from '@/components/seo/SeoNavbar'
import SeoFooter from '@/components/seo/SeoFooter'
@@ -14,7 +15,22 @@ export const metadata: Metadata = {
},
}
const readMoreLabel: Record<string, string> = {
en: 'Read Full Guide',
de: 'Ganzen Artikel lesen',
es: 'Leer la guía completa',
}
const languageBadge: Record<string, { label: string; flag: string }> = {
en: { label: 'EN', flag: '🇬🇧' },
de: { label: 'DE', flag: '🇩🇪' },
es: { label: 'ES', flag: '🇪🇸' },
}
export default function BlogIndexPage() {
// This index page's own chrome (hero copy) stays English, but every post —
// English, German, Spanish — is listed here with a small language badge so
// DE/ES posts are actually discoverable instead of living at an unlinked URL.
const posts = Object.values(blogPosts)
return (
@@ -46,7 +62,7 @@ export default function BlogIndexPage() {
{/* Blog Cards Grid */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{posts.map((post) => (
{posts.map((post, index) => (
<Link
key={post.slug}
href={`/blog/${post.slug}`}
@@ -54,15 +70,21 @@ export default function BlogIndexPage() {
>
{/* Image */}
<div className="relative h-52 w-full overflow-hidden bg-emerald-950">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
<Image
src={post.heroImage}
alt={post.heroImageAlt}
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
fill
priority={index < 3}
loading={index < 3 ? undefined : 'lazy'}
sizes="(min-width: 768px) 33vw, 100vw"
className="object-cover group-hover:scale-105 transition-transform duration-500"
/>
<div className="absolute top-4 left-4 bg-emerald-950/90 backdrop-blur-md px-3.5 py-1 rounded-full text-[10px] font-extrabold uppercase tracking-wider text-emerald-300 border border-emerald-500/30">
{post.category}
</div>
<div className="absolute top-4 right-4 bg-white/95 backdrop-blur-md px-2.5 py-1 rounded-full text-[10px] font-extrabold uppercase tracking-wider text-emerald-900 border border-emerald-600/20 shadow-sm">
{languageBadge[post.locale]?.flag ?? ''} {languageBadge[post.locale]?.label ?? post.locale}
</div>
</div>
{/* Card Content */}
@@ -80,7 +102,7 @@ export default function BlogIndexPage() {
</div>
<div className="text-emerald-700 font-bold text-sm flex items-center gap-1.5 group-hover:translate-x-1 transition-transform">
<span>Read Full Guide</span>
<span>{readMoreLabel[post.locale] ?? readMoreLabel.en}</span>
<span></span>
</div>
</div>

View File

@@ -1,4 +0,0 @@
import { buildSeoPageMetadata, createSeoPage } from '@/lib/seoPageFactory'
export const metadata = buildSeoPageMetadata('wie-funktioniert-pflanzenerkennung')
export default createSeoPage('wie-funktioniert-pflanzenerkennung')

View File

@@ -1,4 +0,0 @@
import { buildSeoPageMetadata, createSeoPage } from '@/lib/seoPageFactory'
export const metadata = buildSeoPageMetadata('zimmerpflanzen-mit-wenig-licht')
export default createSeoPage('zimmerpflanzen-mit-wenig-licht')