SEO/AEO

src/app/(marketing)/blog/page.tsx

@@ -1,76 +1,128 @@
-'use client';
-
 import React from 'react';
+import type { Metadata } from 'next';
 import Link from 'next/link';
+import Image from 'next/image';
+import SeoJsonLd from '@/components/SeoJsonLd';
+import { websiteSchema } from '@/lib/schema';
 import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
 import { Badge } from '@/components/ui/Badge';
 
+function truncateAtWord(text: string, maxLength: number): string {
+  if (text.length <= maxLength) return text;
+  const truncated = text.slice(0, maxLength);
+  const lastSpace = truncated.lastIndexOf(' ');
+  return lastSpace > 0 ? truncated.slice(0, lastSpace) : truncated;
+}
+
+export async function generateMetadata(): Promise<Metadata> {
+  const title = truncateAtWord('QR Insights: Latest QR Strategies', 60);
+  const description = truncateAtWord(
+    'Expert guides on QR analytics, dynamic codes & smart marketing uses.',
+    160
+  );
+
+  return {
+    title,
+    description,
+    alternates: {
+      canonical: 'https://www.qrmaster.com/blog',
+      languages: {
+        'x-default': 'https://www.qrmaster.com/blog',
+        en: 'https://www.qrmaster.com/blog',
+      },
+    },
+    openGraph: {
+      title,
+      description,
+      url: 'https://www.qrmaster.com/blog',
+      type: 'website',
+    },
+    twitter: {
+      title,
+      description,
+    },
+  };
+}
+
 const blogPosts = [
+  {
+    slug: 'qr-code-analytics',
+    title: 'QR Code Analytics: Track, Measure & Optimize Campaigns',
+    excerpt: 'Learn how to leverage scan analytics, campaign tracking, and dashboard insights to maximize QR code ROI.',
+    date: 'October 16, 2025',
+    readTime: '8 Min',
+    category: 'Analytics',
+    image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&q=80',
+  },
   {
     slug: 'qr-codes-im-restaurant',
-    title: 'QR-Codes im Restaurant: Die digitale Revolution der Speisekarte',
-    excerpt: 'Erfahren Sie, wie QR-Codes die Gastronomie revolutionieren und welche Vorteile sie für Restaurants und Gäste bieten.',
-    date: '2024-01-15',
+    title: 'QR Codes in Restaurants: The Digital Menu Revolution',
+    excerpt: 'Discover how QR codes are revolutionizing the restaurant industry and what benefits they offer for restaurants and guests.',
+    date: 'January 15, 2024',
     readTime: '5 Min',
-    category: 'Gastronomie',
-    image: '🍽️',
+    category: 'Restaurant',
+    image: 'https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=800&q=80',
   },
   {
     slug: 'dynamische-vs-statische-qr-codes',
-    title: 'Dynamische vs. Statische QR-Codes: Was ist der Unterschied?',
-    excerpt: 'Ein umfassender Vergleich zwischen dynamischen und statischen QR-Codes und wann Sie welchen Typ verwenden sollten.',
-    date: '2024-01-10',
+    title: 'Dynamic vs Static QR Codes: What\'s the Difference?',
+    excerpt: 'A comprehensive comparison between dynamic and static QR codes and when you should use each type.',
+    date: 'January 10, 2024',
     readTime: '3 Min',
-    category: 'Grundlagen',
-    image: '📊',
-  },
-  {
-    slug: 'qr-code-marketing-strategien',
-    title: 'QR-Code Marketing-Strategien für 2024',
-    excerpt: 'Die besten Marketing-Strategien mit QR-Codes für Ihr Unternehmen im Jahr 2024.',
-    date: '2024-01-05',
-    readTime: '7 Min',
-    category: 'Marketing',
-    image: '📈',
+    category: 'Basics',
+    image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&q=80',
   },
 ];
 
 export default function BlogPage() {
   return (
-    <div className="py-20">
-      <div className="container mx-auto px-4">
-        <div className="text-center mb-12">
-          <h1 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-4">
-            Blog & Resources
-          </h1>
-          <p className="text-xl text-gray-600">
-            Learn about QR codes, best practices, and industry insights
-          </p>
-        </div>
+    <>
+      <SeoJsonLd data={websiteSchema()} />
+      <div className="py-20 bg-gradient-to-b from-gray-50 to-white">
+        <div className="container mx-auto px-4">
+          <div className="text-center mb-16">
+            <h1 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-6">
+              QR Code Insights
+            </h1>
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+              Expert guides on dynamic QR codes, campaign tracking, UTM analytics, and smart marketing use cases.
+              Discover how-to tutorials and best practices for QR code analytics.
+            </p>
+          </div>
 
-        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
-          {blogPosts.map((post) => (
-            <Link key={post.slug} href={`/blog/${post.slug}`}>
-              <Card hover className="h-full">
-                <CardHeader>
-                  <div className="text-4xl mb-4 text-center bg-gray-100 rounded-lg py-8">
-                    {post.image}
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
+            {blogPosts.map((post) => (
+              <Link key={post.slug} href={`/blog/${post.slug}`}>
+                <Card hover className="h-full overflow-hidden shadow-md hover:shadow-xl transition-all duration-300">
+                  <div className="relative h-56 overflow-hidden">
+                    <Image
+                      src={post.image}
+                      alt={`${post.title} - QR code guide showing ${post.category.toLowerCase()} strategies`}
+                      width={800}
+                      height={600}
+                      className="w-full h-full object-cover transition-transform duration-500 hover:scale-110"
+                    />
                   </div>
-                  <div className="flex items-center justify-between mb-2">
-                    <Badge variant="info">{post.category}</Badge>
-                    <span className="text-sm text-gray-500">{post.readTime}</span>
-                  </div>
-                  <CardTitle className="text-xl">{post.title}</CardTitle>
-                </CardHeader>
-                <CardContent>
-                  <p className="text-gray-600 mb-4">{post.excerpt}</p>
-                  <p className="text-sm text-gray-500">{post.date}</p>
-                </CardContent>
-              </Card>
-            </Link>
-          ))}
+                  <CardHeader className="pb-3">
+                    <div className="flex items-center justify-between mb-3">
+                      <Badge variant="info">{post.category}</Badge>
+                      <span className="text-sm text-gray-500 font-medium">{post.readTime} read</span>
+                    </div>
+                    <CardTitle className="text-xl leading-tight mb-3">{post.title}</CardTitle>
+                  </CardHeader>
+                  <CardContent className="pt-0">
+                    <p className="text-gray-600 mb-4 leading-relaxed">{post.excerpt}</p>
+                    <div className="flex items-center justify-between pt-4 border-t border-gray-100">
+                      <p className="text-sm text-gray-500">{post.date}</p>
+                      <span className="text-primary-600 text-sm font-medium">Read more →</span>
+                    </div>
+                  </CardContent>
+                </Card>
+              </Link>
+            ))}
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
-}
+}