14 blog post schedule
This commit is contained in:
Timo Knuth
parent
702e2710de
commit
2771faf3ba
|
|
@ -0,0 +1,83 @@
|
|||
📅 Blog Content Roadmap (Q1 2026)
|
||||
Goal: Publish 20 high-quality SEO posts over 60 days (Jan 29 - Mar 27). Cadence: Every 3 days. Strategy: "Strict 404 Gate" (Future posts are invisible/404 until publish date).
|
||||
|
||||
✅ Completed (Ready to Ship)
|
||||
Jan 29:
|
||||
Free Barcode Generator (Online)
|
||||
Status: 🟢 Ready (Content Complete + SEO Optimized + Hero Image Generated).
|
||||
Key Feature: Quick Answer Box, SVG/PNG Comparison, FAQ.
|
||||
🚀 Next Priority: Feb 01
|
||||
🎵 Spotify Code Generator: Share Music Instantly
|
||||
Target Audience: Artists, bands, podcasters, playlist curators. SEO Focus: spotify code generator, create spotify code, music marketing qr, spotify uri to code.
|
||||
|
||||
Drafting Blueprint:
|
||||
|
||||
H1: Spotify Code Generator: Share Songs, Albums & Playlists
|
||||
Quick Answer: How to get a code (3-step process).
|
||||
Visual Guide: Where to find the "Spotify URI".
|
||||
Use Cases:
|
||||
Merch: T-shirts with album link.
|
||||
Posters: Gig promotion.
|
||||
Socials: Instagram Stories overlay.
|
||||
Critical Comparison (Pro Tip):
|
||||
Spotify Codes = Cool look, but NO analytics.
|
||||
Dynamic QR Codes = Less "native" look, but FULL tracking (scans, location, etc.).
|
||||
Recommendation: Use QR for marketing campaigns where ROI matters; use Spotify Codes for pure branding on merch.
|
||||
FAQ: Vector download? Do they expire? High-res printing?
|
||||
CTA: "Generate Music QR Code" (Link to main generator).
|
||||
Image Concept:
|
||||
|
||||
Style: Neon, vibrant, "Spotify Green" accents, dark mode aesthetic.
|
||||
Subject: A stylized soundwave transforming into a scannable code, or a vinyl record with a code center.
|
||||
📋 Upcoming Schedule (Backlog)
|
||||
Publish Date Topic / Slug Category Status
|
||||
Feb 04 WhatsApp QR Code (Direct Chat Link) Social ⚪ Pending
|
||||
Feb 07 Instagram QR Code (Grow Following) Social ⚪ Pending
|
||||
Feb 10 vCard QR Code (Digital Business Card) Business ⚪ Pending
|
||||
Feb 13 QR Code Analytics Guide (Deep Dive) Analytics ⚪ Pending
|
||||
Feb 16 Trackable QR Codes (How-to) Tracking ⚪ Pending
|
||||
Feb 19 Dynamic vs Static QR (Ultimate Guide) Basics ⚪ Pending
|
||||
Feb 22 UTM Tracking with QR Codes Marketing ⚪ Pending
|
||||
Feb 25 QR Code Statistics 2026 Trends ⚪ Pending
|
||||
Feb 28 Restaurant Menu QR Codes Hospitality ⚪ Pending
|
||||
Mar 03 QR Codes for Events Events ⚪ Pending
|
||||
Mar 06 Business Card QR Codes Business ⚪ Pending
|
||||
Mar 09 Marketing Strategy Examples Marketing ⚪ Pending
|
||||
Mar 12 Bulk QR Code Generator (Excel/CSV) Bulk ⚪ Pending
|
||||
Mar 15 Google QR Alternative Comparison ⚪ Pending
|
||||
Mar 18 Security & Quishing Security ⚪ Pending
|
||||
Mar 21 Best QR Generator 2026 Review Reviews ⚪ Pending
|
||||
Mar 24 QR Code API Documentation Developer ⚪ Pending
|
||||
Mar 27 Free vs Paid Generator Comparison ⚪ Pending
|
||||
🛠️ Execution Workflow (Repeat for each post)
|
||||
Select Topic: Take next item from list.
|
||||
SEO & Outline: Define title, keywords, and H2 structure (use User/Expert persona).
|
||||
Implement: Replace placeholder content in
|
||||
src/lib/blog-data.ts
|
||||
.
|
||||
Asset: Generate hero image (public/blog/[slug].png) via DALL-E.
|
||||
Verify: Ensure no build errors and correct 404 behavior if date > now.
|
||||
✅ SEO Validation Checklist (Target Score: 80+)
|
||||
1. Page Title
|
||||
|
||||
Focus keyword used at the beginning.
|
||||
Length: ~60 characters (0 characters available is perfect).
|
||||
2. Meta Description
|
||||
|
||||
Focus keyword included.
|
||||
Length: ~160 characters.
|
||||
3. Content Structure
|
||||
|
||||
H1 contains focus keyword.
|
||||
First Paragraph contains focus keyword.
|
||||
Word count: > 600 words (Aim for comprehensive coverage).
|
||||
Keyword Density: ~2% (e.g., used 4-5 times in 600 words).
|
||||
4. Assets (Images)
|
||||
|
||||
Image Filename contains focus keyword (e.g.,
|
||||
free-barcode-generator-guide.png
|
||||
).
|
||||
Image Alt Tag contains focus keyword.
|
||||
5. Links
|
||||
|
||||
Add relevant internal links to tools/pricing/other posts.
|
||||
|
|
@ -49,6 +49,7 @@
|
|||
"react-i18next": "^13.5.0",
|
||||
"react-simple-maps": "^3.0.0",
|
||||
"resend": "^6.4.2",
|
||||
"sanitize-html": "^2.17.0",
|
||||
"stripe": "^19.1.0",
|
||||
"tailwind-merge": "^2.2.0",
|
||||
"uuid": "^13.0.0",
|
||||
|
|
@ -62,6 +63,7 @@
|
|||
"@types/qrcode": "^1.5.5",
|
||||
"@types/react": "^18.2.45",
|
||||
"@types/react-dom": "^18.2.18",
|
||||
"@types/sanitize-html": "^2.16.0",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"cross-env": "^10.1.0",
|
||||
"eslint": "^8.56.0",
|
||||
|
|
@ -4152,6 +4154,16 @@
|
|||
"@types/react": "^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/sanitize-html": {
|
||||
"version": "2.16.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/sanitize-html/-/sanitize-html-2.16.0.tgz",
|
||||
"integrity": "sha512-l6rX1MUXje5ztPT0cAFtUayXF06DqPhRyfVXareEN5gGCFaP/iwsxIyKODr9XDhfxPpN6vXUFNfo5kZMXCxBtw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"htmlparser2": "^8.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/trusted-types": {
|
||||
"version": "2.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
|
||||
|
|
@ -6215,6 +6227,15 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/deepmerge": {
|
||||
"version": "4.3.1",
|
||||
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
|
||||
"integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/define-data-property": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
|
||||
|
|
@ -6312,6 +6333,47 @@
|
|||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/dom-serializer": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
|
||||
"integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"domelementtype": "^2.3.0",
|
||||
"domhandler": "^5.0.2",
|
||||
"entities": "^4.2.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/domelementtype": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
|
||||
"integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/fb55"
|
||||
}
|
||||
],
|
||||
"license": "BSD-2-Clause"
|
||||
},
|
||||
"node_modules/domhandler": {
|
||||
"version": "5.0.3",
|
||||
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
|
||||
"integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
|
||||
"license": "BSD-2-Clause",
|
||||
"dependencies": {
|
||||
"domelementtype": "^2.3.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/fb55/domhandler?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/dompurify": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.3.1.tgz",
|
||||
|
|
@ -6321,6 +6383,20 @@
|
|||
"@types/trusted-types": "^2.0.7"
|
||||
}
|
||||
},
|
||||
"node_modules/domutils": {
|
||||
"version": "3.2.2",
|
||||
"resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
|
||||
"integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
|
||||
"license": "BSD-2-Clause",
|
||||
"dependencies": {
|
||||
"dom-serializer": "^2.0.0",
|
||||
"domelementtype": "^2.3.0",
|
||||
"domhandler": "^5.0.3"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/fb55/domutils?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/dotenv": {
|
||||
"version": "17.2.3",
|
||||
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.2.3.tgz",
|
||||
|
|
@ -6393,6 +6469,18 @@
|
|||
"once": "^1.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/entities": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
|
||||
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
|
||||
"license": "BSD-2-Clause",
|
||||
"engines": {
|
||||
"node": ">=0.12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/fb55/entities?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/es-abstract": {
|
||||
"version": "1.24.0",
|
||||
"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.0.tgz",
|
||||
|
|
@ -6628,7 +6716,6 @@
|
|||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
|
||||
"integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
|
|
@ -8098,6 +8185,25 @@
|
|||
"node": ">=8.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/htmlparser2": {
|
||||
"version": "8.0.2",
|
||||
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
|
||||
"integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
|
||||
"funding": [
|
||||
"https://github.com/fb55/htmlparser2?sponsor=1",
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/fb55"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"domelementtype": "^2.3.0",
|
||||
"domhandler": "^5.0.3",
|
||||
"domutils": "^3.0.1",
|
||||
"entities": "^4.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/https-proxy-agent": {
|
||||
"version": "7.0.6",
|
||||
"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
|
||||
|
|
@ -8557,6 +8663,15 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/is-plain-object": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
|
||||
"integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/is-regex": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
|
||||
|
|
@ -9823,6 +9938,12 @@
|
|||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/parse-srcset": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
|
||||
"integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/path-exists": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
|
||||
|
|
@ -9948,7 +10069,6 @@
|
|||
"version": "8.5.6",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
|
||||
"integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
|
|
@ -10862,6 +10982,20 @@
|
|||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/sanitize-html": {
|
||||
"version": "2.17.0",
|
||||
"resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.17.0.tgz",
|
||||
"integrity": "sha512-dLAADUSS8rBwhaevT12yCezvioCA+bmUTPH/u57xKPT8d++voeYE6HeluA/bPbQ15TwDBG2ii+QZIEmYx8VdxA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"deepmerge": "^4.2.2",
|
||||
"escape-string-regexp": "^4.0.0",
|
||||
"htmlparser2": "^8.0.0",
|
||||
"is-plain-object": "^5.0.0",
|
||||
"parse-srcset": "^1.0.2",
|
||||
"postcss": "^8.3.11"
|
||||
}
|
||||
},
|
||||
"node_modules/saxes": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
|
||||
|
|
|
|||
|
|
@ -68,6 +68,7 @@
|
|||
"react-i18next": "^13.5.0",
|
||||
"react-simple-maps": "^3.0.0",
|
||||
"resend": "^6.4.2",
|
||||
"sanitize-html": "^2.17.0",
|
||||
"stripe": "^19.1.0",
|
||||
"tailwind-merge": "^2.2.0",
|
||||
"uuid": "^13.0.0",
|
||||
|
|
@ -81,6 +82,7 @@
|
|||
"@types/qrcode": "^1.5.5",
|
||||
"@types/react": "^18.2.45",
|
||||
"@types/react-dom": "^18.2.18",
|
||||
"@types/sanitize-html": "^2.16.0",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"cross-env": "^10.1.0",
|
||||
"eslint": "^8.56.0",
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 749 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 623 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 601 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 577 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 865 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 896 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 672 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 966 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 712 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 577 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 662 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 679 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 584 KiB |
|
|
@ -4,6 +4,10 @@ import LoginClient from './LoginClient';
|
|||
export const metadata: Metadata = {
|
||||
title: 'QR Master – Smart QR Generator & Analytics',
|
||||
description: 'Create dynamic QR codes, track scans, and scale campaigns with secure analytics. Free advanced features, bulk generation, and custom branding available.',
|
||||
robots: {
|
||||
index: false,
|
||||
follow: true,
|
||||
},
|
||||
};
|
||||
|
||||
export default function LoginPage() {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,10 @@ import SignupClient from './SignupClient';
|
|||
export const metadata: Metadata = {
|
||||
title: 'Create Account | QR Master',
|
||||
description: 'Start creating dynamic QR codes in seconds. Join thousands of businesses using QR Master.',
|
||||
robots: {
|
||||
index: false,
|
||||
follow: true,
|
||||
},
|
||||
alternates: {
|
||||
canonical: 'https://www.qrmaster.net/signup',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -74,6 +74,7 @@ export default function MarketingLayout({
|
|||
<li><a href="/">Home</a></li>
|
||||
<li><Link href="/pricing">{t.nav.pricing}</Link></li>
|
||||
<li><Link href="/blog">{t.nav.blog}</Link></li>
|
||||
<li><Link href="/learn">{t.nav.learn}</Link></li>
|
||||
<li><Link href="/faq">{t.nav.faq}</Link></li>
|
||||
<li><Link href="/about">{t.nav.about}</Link></li>
|
||||
<li><Link href="/contact">{t.nav.contact}</Link></li>
|
||||
|
|
@ -179,6 +180,9 @@ export default function MarketingLayout({
|
|||
<Link href="/blog" className="px-3 py-2 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors">
|
||||
{t.nav.blog}
|
||||
</Link>
|
||||
<Link href="/learn" className="px-3 py-2 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors">
|
||||
{t.nav.learn}
|
||||
</Link>
|
||||
<Link href="/#faq" className="px-3 py-2 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors">
|
||||
{t.nav.faq}
|
||||
</Link>
|
||||
|
|
@ -265,6 +269,7 @@ export default function MarketingLayout({
|
|||
<Link href="/#pricing" className="block px-4 py-3 text-slate-700 font-medium rounded-xl hover:bg-slate-50" onClick={() => setMobileMenuOpen(false)}>{t.nav.pricing}</Link>
|
||||
<Link href="/about" className="block px-4 py-3 text-slate-700 font-medium rounded-xl hover:bg-slate-50" onClick={() => setMobileMenuOpen(false)}>{t.nav.about}</Link>
|
||||
<Link href="/blog" className="block px-4 py-3 text-slate-700 font-medium rounded-xl hover:bg-slate-50" onClick={() => setMobileMenuOpen(false)}>{t.nav.blog}</Link>
|
||||
<Link href="/learn" className="block px-4 py-3 text-slate-700 font-medium rounded-xl hover:bg-slate-50" onClick={() => setMobileMenuOpen(false)}>{t.nav.learn}</Link>
|
||||
<Link href="/#faq" className="block px-4 py-3 text-slate-700 font-medium rounded-xl hover:bg-slate-50" onClick={() => setMobileMenuOpen(false)}>{t.nav.faq}</Link>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 pt-4">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,93 @@
|
|||
import { notFound } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import Script from "next/script";
|
||||
import { getAuthorBySlug, getPostsByAuthor } from "@/lib/content";
|
||||
import { authors } from "@/lib/author-data";
|
||||
import { authorPageSchema } from "@/lib/schema";
|
||||
|
||||
export function generateMetadata({ params }: { params: { slug: string } }) {
|
||||
const author = getAuthorBySlug(params.slug);
|
||||
if (!author) return {};
|
||||
return {
|
||||
title: `${author.name} - ${author.role} | QR Master`,
|
||||
description: author.bio
|
||||
};
|
||||
}
|
||||
|
||||
export function generateStaticParams() {
|
||||
return authors.map((author) => ({
|
||||
slug: author.slug,
|
||||
}));
|
||||
}
|
||||
|
||||
export default function AuthorPage({ params }: { params: { slug: string } }) {
|
||||
const author = getAuthorBySlug(params.slug);
|
||||
if (!author) return notFound();
|
||||
|
||||
const posts = getPostsByAuthor(params.slug);
|
||||
const jsonLd = authorPageSchema(author, posts);
|
||||
|
||||
return (
|
||||
<main className="container mx-auto max-w-3xl py-12 px-4 space-y-10">
|
||||
<Script id="ld-author" type="application/ld+json" strategy="afterInteractive"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
|
||||
<header className="flex flex-col md:flex-row gap-8 items-center md:items-start text-center md:text-left">
|
||||
{author.image ? (
|
||||
<div className="relative w-32 h-32 flex-shrink-0">
|
||||
<Image
|
||||
src={author.image}
|
||||
alt={author.name}
|
||||
fill
|
||||
className="rounded-full object-cover border-4 border-white shadow-lg"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-32 h-32 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold text-4xl shadow-lg">
|
||||
{author.name.charAt(0)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<h1 className="text-3xl font-extrabold text-gray-900">{author.name}</h1>
|
||||
<Image src="/logo.svg" alt="QR Master" width={24} height={24} className="opacity-80" />
|
||||
</div>
|
||||
<p className="text-lg text-blue-600 font-medium">{author.role}</p>
|
||||
<p className="text-gray-600 max-w-xl">{author.bio}</p>
|
||||
{!!author.sameAs?.length && (
|
||||
<div className="flex gap-4 justify-center md:justify-start pt-2">
|
||||
{author.sameAs.map((url) => {
|
||||
let label = "Profile";
|
||||
if (url.includes('linkedin')) label = "LinkedIn";
|
||||
if (url.includes('github')) label = "GitHub";
|
||||
if (url.includes('instagram')) label = "Instagram";
|
||||
if (url.includes('twitter') || url.includes('x.com')) label = "Twitter";
|
||||
return (
|
||||
<a key={url} href={url} target="_blank" rel="noreferrer" className="text-sm font-semibold text-gray-500 hover:text-black border-b border-transparent hover:border-black transition-colors">
|
||||
{label}
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="border-t border-gray-100"></div>
|
||||
|
||||
<section className="space-y-6">
|
||||
<h2 className="text-2xl font-bold text-gray-900">Latest Articles</h2>
|
||||
<div className="space-y-4">
|
||||
{posts.map(p => (
|
||||
<Link key={p.slug} href={`/blog/${p.slug}`} className="block group p-6 rounded-xl border border-gray-200 bg-white hover:border-blue-200 hover:shadow-sm transition-all">
|
||||
<div className="text-sm text-gray-400 mb-1">{p.date}</div>
|
||||
<h3 className="text-xl font-bold text-gray-900 group-hover:text-blue-700 transition-colors mb-2">{p.title}</h3>
|
||||
<p className="text-gray-600">{p.description}</p>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,157 +1,110 @@
|
|||
import React from 'react';
|
||||
import type { Metadata } from 'next';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { notFound } from 'next/navigation';
|
||||
import SeoJsonLd from '@/components/SeoJsonLd';
|
||||
import Breadcrumbs from '@/components/Breadcrumbs';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Badge } from '@/components/ui/Badge';
|
||||
import { blogPosts } from '@/lib/blog-data';
|
||||
import { notFound } from "next/navigation";
|
||||
import Script from "next/script";
|
||||
import { getPublishedPostBySlug, getAuthorBySlug, getRelatedPosts, getPublishedPosts } from "@/lib/content";
|
||||
import { AnswerBox } from "@/components/aeo/AnswerBox";
|
||||
import { StepList } from "@/components/aeo/StepList";
|
||||
import { FAQSection } from "@/components/aeo/FAQSection";
|
||||
import { AuthorCard } from "@/components/author/AuthorCard";
|
||||
import { RelatedPosts } from "@/components/blog/RelatedPosts";
|
||||
import { blogPostingSchema, howToSchema, faqPageSchema } from "@/lib/schema";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
interface PageProps {
|
||||
params: {
|
||||
slug: string;
|
||||
export function generateMetadata({ params }: { params: { slug: string } }) {
|
||||
const post = getPublishedPostBySlug(params.slug);
|
||||
if (!post) return {};
|
||||
return {
|
||||
title: post.title,
|
||||
description: post.description,
|
||||
};
|
||||
}
|
||||
|
||||
export function generateStaticParams() {
|
||||
return Object.keys(blogPosts).map((slug) => ({
|
||||
slug,
|
||||
// Only generate static params for published posts
|
||||
return getPublishedPosts().map((post) => ({
|
||||
slug: post.slug,
|
||||
}));
|
||||
}
|
||||
|
||||
export function generateMetadata({ params }: PageProps): Metadata {
|
||||
const post = blogPosts[params.slug];
|
||||
|
||||
if (!post) {
|
||||
notFound();
|
||||
return {} as Metadata; // Typescript satisfaction (unreachable)
|
||||
}
|
||||
export default function BlogPostPage({ params }: { params: { slug: string } }) {
|
||||
const post = getPublishedPostBySlug(params.slug);
|
||||
if (!post) return notFound(); // STRICT 404 GATE
|
||||
|
||||
return {
|
||||
title: {
|
||||
absolute: `${post.title} | QR Master Blog`,
|
||||
},
|
||||
description: post.excerpt,
|
||||
openGraph: {
|
||||
title: post.title,
|
||||
description: post.excerpt,
|
||||
type: 'article',
|
||||
publishedTime: post.datePublished,
|
||||
modifiedTime: post.dateModified,
|
||||
authors: [post.author],
|
||||
images: [
|
||||
{
|
||||
url: post.image,
|
||||
alt: post.imageAlt,
|
||||
},
|
||||
],
|
||||
},
|
||||
twitter: {
|
||||
card: 'summary_large_image',
|
||||
title: post.title,
|
||||
description: post.excerpt,
|
||||
images: [post.image],
|
||||
},
|
||||
};
|
||||
}
|
||||
const author = getAuthorBySlug(post.authorSlug);
|
||||
const related = getRelatedPosts(post);
|
||||
|
||||
export default function BlogPostPage({ params }: PageProps) {
|
||||
const post = blogPosts[params.slug];
|
||||
|
||||
if (!post) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const jsonLd = {
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'BlogPosting',
|
||||
headline: post.title,
|
||||
image: post.image,
|
||||
datePublished: post.datePublished,
|
||||
dateModified: post.dateModified,
|
||||
author: {
|
||||
'@type': 'Organization',
|
||||
name: post.author,
|
||||
url: post.authorUrl,
|
||||
},
|
||||
};
|
||||
|
||||
const breadcrumbItems = [
|
||||
{ name: 'Home', url: '/' },
|
||||
{ name: 'Blog', url: '/blog' },
|
||||
{ name: post.title, url: `/blog/${post.slug}` },
|
||||
];
|
||||
const jsonLd = blogPostingSchema(post, author);
|
||||
const howtoLd = post.keySteps?.length ? howToSchema(post, author) : null;
|
||||
const faqLd = post.faq ? faqPageSchema(post.faq) : null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<SeoJsonLd data={[jsonLd]} />
|
||||
<main className="container mx-auto max-w-4xl py-12 px-4">
|
||||
<Script id="ld-blogposting" type="application/ld+json" strategy="afterInteractive"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
|
||||
{howtoLd && (
|
||||
<Script id="ld-howto" type="application/ld+json" strategy="afterInteractive"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(howtoLd) }} />
|
||||
)}
|
||||
{faqLd && (
|
||||
<Script id="ld-faq" type="application/ld+json" strategy="afterInteractive"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(faqLd) }} />
|
||||
)}
|
||||
|
||||
<div className="min-h-screen bg-white pb-20">
|
||||
{/* Hero Header */}
|
||||
<div className="bg-gray-50 border-b border-gray-100">
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 py-12 max-w-4xl">
|
||||
<Breadcrumbs items={breadcrumbItems} className="mb-8" />
|
||||
<header className="space-y-6 text-center max-w-3xl mx-auto mb-10">
|
||||
<div className="flex justify-center gap-2 text-sm text-gray-500 font-medium">
|
||||
<Link href="/learn" className="hover:text-blue-600">Hub</Link>
|
||||
<span>/</span>
|
||||
<Link href={`/learn/${post.pillar}`} className="hover:text-blue-600 capitalize">{post.pillar}</Link>
|
||||
</div>
|
||||
<h1 className="text-3xl md:text-5xl font-extrabold text-gray-900 tracking-tight leading-tight">{post.title}</h1>
|
||||
<p className="text-xl text-gray-600 relaxed">{post.description}</p>
|
||||
|
||||
<Badge variant="info" className="mb-6">
|
||||
{post.category}
|
||||
</Badge>
|
||||
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 leading-tight mb-6">
|
||||
{post.title}
|
||||
</h1>
|
||||
|
||||
<div className="flex items-center text-gray-600 mb-8 space-x-6 text-sm">
|
||||
<div className="flex items-center">
|
||||
<span className="font-medium text-gray-900 mr-2">{post.author}</span>
|
||||
{author && (
|
||||
<div className="flex items-center justify-center gap-3 pt-4">
|
||||
{author.image ? (
|
||||
<Image src={author.image} alt={author.name} width={40} height={40} className="rounded-full" />
|
||||
) : (
|
||||
<div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold">
|
||||
{author.name.charAt(0)}
|
||||
</div>
|
||||
<div>•</div>
|
||||
<div>{post.date}</div>
|
||||
<div>•</div>
|
||||
<div>{post.readTime} read</div>
|
||||
)}
|
||||
<div className="text-left text-sm">
|
||||
<div className="font-bold text-gray-900">{author.name}</div>
|
||||
<div className="text-gray-500">Updated {post.updatedAt || post.date}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
|
||||
{post.heroImage && (
|
||||
<div className="relative aspect-video w-full rounded-2xl overflow-hidden shadow-lg mb-10">
|
||||
<Image src={post.heroImage} alt={post.imageAlt || post.title} fill className="object-cover" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Featured Image */}
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl -mt-8 mb-12">
|
||||
<div className="relative aspect-video w-full overflow-hidden rounded-2xl shadow-xl">
|
||||
<Image
|
||||
src={post.image}
|
||||
alt={post.imageAlt}
|
||||
fill
|
||||
className="object-cover"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
{/* AEO BLOCK: ANSWER */}
|
||||
<div className="max-w-3xl mx-auto">
|
||||
{post.quickAnswer && <AnswerBox html={post.quickAnswer} />}
|
||||
|
||||
{/* AEO BLOCK: STEPS (If defined separate from body) */}
|
||||
{!!post.keySteps?.length && <StepList steps={post.keySteps} title="Step-by-Step Guide" />}
|
||||
|
||||
|
||||
{/* MAIN CONTENT */}
|
||||
<article className="prose prose-lg prose-blue max-w-none text-gray-800" dangerouslySetInnerHTML={{ __html: post.content }} />
|
||||
|
||||
{/* AEO BLOCK: FAQ */}
|
||||
{!!post.faq?.length && <div className="mt-12"><FAQSection items={post.faq} /></div>}
|
||||
|
||||
<div className="border-t border-gray-100 my-12"></div>
|
||||
|
||||
{author && <AuthorCard author={author} />}
|
||||
|
||||
<div className="mt-12">
|
||||
<RelatedPosts posts={related} />
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<article className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-3xl">
|
||||
<div
|
||||
className="prose prose-lg prose-blue max-w-none hover:prose-a:text-blue-600 transition-colors"
|
||||
dangerouslySetInnerHTML={{ __html: post.content }}
|
||||
/>
|
||||
|
||||
{/* Share / CTA */}
|
||||
<div className="mt-16 pt-8 border-t border-gray-200">
|
||||
<div className="bg-blue-50 rounded-2xl p-8 text-center">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-4">
|
||||
Enjoyed this article?
|
||||
</h3>
|
||||
<p className="text-gray-600 mb-6 text-lg">
|
||||
Create your first dynamic QR code for free and start tracking your campaigns today.
|
||||
</p>
|
||||
<Link href="/signup">
|
||||
<Button size="lg" className="px-8">
|
||||
Create Free QR Code
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,11 @@ import { websiteSchema, breadcrumbSchema } from '@/lib/schema';
|
|||
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
|
||||
import { Badge } from '@/components/ui/Badge';
|
||||
import Breadcrumbs, { BreadcrumbItem } from '@/components/Breadcrumbs';
|
||||
import { blogPosts } from '@/lib/blog-data';
|
||||
|
||||
// Enable Incremental Static Regeneration (ISR)
|
||||
// Revalidate every hour
|
||||
export const revalidate = 3600;
|
||||
|
||||
function truncateAtWord(text: string, maxLength: number): string {
|
||||
if (text.length <= maxLength) return text;
|
||||
|
|
@ -46,89 +51,27 @@ export async function generateMetadata(): Promise<Metadata> {
|
|||
};
|
||||
}
|
||||
|
||||
const blogPosts = [
|
||||
// NEW POSTS (January 2026)
|
||||
{
|
||||
slug: 'qr-code-restaurant-menu',
|
||||
title: 'How to Create a QR Code for Restaurant Menu',
|
||||
excerpt: 'Step-by-step guide to creating digital menu QR codes for your restaurant. Learn best practices for touchless menus, placement tips, and tracking.',
|
||||
date: 'January 5, 2026',
|
||||
readTime: '12 Min',
|
||||
category: 'Restaurant',
|
||||
image: '/blog/restaurant-qr-menu.png',
|
||||
},
|
||||
{
|
||||
slug: 'vcard-qr-code-generator',
|
||||
title: 'Free vCard QR Code Generator: Digital Business Cards',
|
||||
excerpt: 'Create professional vCard QR codes for digital business cards. Share contact info instantly with a scan—includes templates and best practices.',
|
||||
date: 'January 5, 2026',
|
||||
readTime: '10 Min',
|
||||
category: 'Business Cards',
|
||||
image: '/blog/vcard-qr-code.png',
|
||||
},
|
||||
{
|
||||
slug: 'qr-code-small-business',
|
||||
title: 'Best QR Code Generator for Small Business: 2025 Guide',
|
||||
excerpt: 'Find the best QR code solution for your small business. Compare features, pricing, and use cases for marketing, payments, and operations.',
|
||||
date: 'January 5, 2026',
|
||||
readTime: '14 Min',
|
||||
category: 'Business',
|
||||
image: '/blog/small-business-qr.png',
|
||||
},
|
||||
{
|
||||
slug: 'qr-code-print-size-guide',
|
||||
title: 'QR Code Print Size Guide: Minimum Sizes for Every Use Case',
|
||||
excerpt: 'Complete guide to QR code print sizes. Learn minimum dimensions for business cards, posters, banners, and more to ensure reliable scanning.',
|
||||
date: 'January 5, 2026',
|
||||
readTime: '8 Min',
|
||||
category: 'Printing',
|
||||
image: '/blog/qr-print-sizes.png',
|
||||
},
|
||||
// EXISTING POSTS
|
||||
{
|
||||
slug: 'qr-code-tracking-guide-2025',
|
||||
title: 'QR Code Tracking: Complete Guide 2025',
|
||||
excerpt: 'Learn how to track QR code scans with real-time analytics. Compare free vs paid tracking tools, setup Google Analytics, and measure ROI.',
|
||||
date: 'October 18, 2025',
|
||||
readTime: '12 Min',
|
||||
category: 'Tracking & Analytics',
|
||||
image: '/blog/1-hero.webp',
|
||||
},
|
||||
{
|
||||
slug: 'dynamic-vs-static-qr-codes',
|
||||
title: 'Dynamic vs Static QR Codes: Which Should You Use?',
|
||||
excerpt: 'Understand the difference between static and dynamic QR codes. Learn when to use each type, pros/cons, and how dynamic QR codes save money.',
|
||||
date: 'October 17, 2025',
|
||||
readTime: '10 Min',
|
||||
category: 'QR Code Basics',
|
||||
image: '/blog/2-hero.webp',
|
||||
},
|
||||
{
|
||||
slug: 'bulk-qr-code-generator-excel',
|
||||
title: 'How to Generate Bulk QR Codes from Excel',
|
||||
excerpt: 'Generate hundreds of QR codes from Excel or CSV files in minutes. Step-by-step guide with templates, best practices, and free tools.',
|
||||
date: 'October 16, 2025',
|
||||
readTime: '13 Min',
|
||||
category: 'Bulk Generation',
|
||||
image: '/blog/bulk-qr-events-hero.png',
|
||||
},
|
||||
{
|
||||
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: '15 Min',
|
||||
category: 'Analytics',
|
||||
image: '/blog/qr-code-analytics-hero.webp',
|
||||
},
|
||||
];
|
||||
|
||||
export default function BlogPage() {
|
||||
const breadcrumbItems: BreadcrumbItem[] = [
|
||||
{ name: 'Home', url: '/' },
|
||||
{ name: 'Blog', url: '/blog' },
|
||||
];
|
||||
|
||||
// Filter posts to only show those published in the past or today
|
||||
// sort by date descending (newest first)
|
||||
const currentDate = new Date();
|
||||
|
||||
const publishedPosts = blogPosts
|
||||
.filter(post => {
|
||||
const publishDate = post.datePublished ? new Date(post.datePublished) : new Date(post.date);
|
||||
return publishDate <= currentDate;
|
||||
})
|
||||
.sort((a, b) => {
|
||||
const dateA = a.datePublished ? new Date(a.datePublished) : new Date(a.date);
|
||||
const dateB = b.datePublished ? new Date(b.datePublished) : new Date(b.date);
|
||||
return dateB.getTime() - dateA.getTime();
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<SeoJsonLd data={[websiteSchema(), breadcrumbSchema(breadcrumbItems)]} />
|
||||
|
|
@ -146,13 +89,13 @@ export default function BlogPage() {
|
|||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
|
||||
{blogPosts.map((post) => (
|
||||
{publishedPosts.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`}
|
||||
alt={post.imageAlt || `${post.title} - QR code guide`}
|
||||
width={800}
|
||||
height={600}
|
||||
className="w-full h-full object-cover transition-transform duration-500 hover:scale-110"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
import { notFound } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import Script from "next/script";
|
||||
import { pillarMeta } from "@/lib/pillar-data";
|
||||
import { getPostsByPillar } from "@/lib/content";
|
||||
import type { PillarKey } from "@/lib/types";
|
||||
import { pillarPageSchema, faqPageSchema } from "@/lib/schema";
|
||||
import { FAQSection } from "@/components/aeo/FAQSection";
|
||||
import { AnswerBox } from "@/components/aeo/AnswerBox";
|
||||
|
||||
export function generateMetadata({ params }: { params: { pillar: string } }) {
|
||||
const meta = pillarMeta.find(p => p.key === params.pillar);
|
||||
if (!meta) return {};
|
||||
return {
|
||||
title: `${meta.title} - Ultimate Guide | QR Master`,
|
||||
description: meta.description
|
||||
};
|
||||
}
|
||||
|
||||
export function generateStaticParams() {
|
||||
return pillarMeta.map((pillar) => ({
|
||||
pillar: pillar.key,
|
||||
}));
|
||||
}
|
||||
|
||||
export default function PillarPage({ params }: { params: { pillar: PillarKey } }) {
|
||||
const meta = pillarMeta.find(p => p.key === params.pillar);
|
||||
if (!meta) return notFound();
|
||||
|
||||
const posts = getPostsByPillar(meta.key);
|
||||
const jsonLd = pillarPageSchema(meta, posts);
|
||||
const faqLd = meta.miniFaq ? faqPageSchema(meta.miniFaq) : null;
|
||||
|
||||
return (
|
||||
<main className="container mx-auto max-w-5xl py-12 px-4 space-y-10">
|
||||
<Script id="ld-pillar" type="application/ld+json" strategy="afterInteractive"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
|
||||
{faqLd && (
|
||||
<Script id="ld-pillar-faq" type="application/ld+json" strategy="afterInteractive"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(faqLd) }} />
|
||||
)}
|
||||
|
||||
<header className="space-y-4 max-w-3xl">
|
||||
<div className="text-sm font-medium text-gray-500 hover:text-gray-700">
|
||||
<Link href="/learn">Learn</Link> → <span className="text-gray-900">{meta.title}</span>
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-extrabold text-gray-900">{meta.title}</h1>
|
||||
<p className="text-xl text-gray-600">{meta.description}</p>
|
||||
</header>
|
||||
|
||||
<AnswerBox html={meta.quickAnswer} />
|
||||
|
||||
<section className="space-y-6">
|
||||
<h2 className="text-2xl font-bold text-gray-900">Guides & Articles</h2>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{posts.map(p => (
|
||||
<Link key={p.slug} href={`/blog/${p.slug}`} className="group block rounded-xl border border-gray-200 bg-white p-6 shadow-sm hover:shadow-md hover:border-blue-200 transition-all">
|
||||
<div className="text-xs text-gray-400 mb-2">{p.date}</div>
|
||||
<div className="text-lg font-bold text-gray-900 mb-2 group-hover:text-blue-700">{p.title}</div>
|
||||
<div className="text-sm text-gray-600 line-clamp-2">{p.description}</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{!!meta.miniFaq?.length && <FAQSection items={meta.miniFaq} title={`${meta.title} FAQ`} />}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
import Link from "next/link";
|
||||
import { pillarMeta } from "@/lib/pillar-data";
|
||||
import { getPublishedPosts } from "@/lib/content";
|
||||
|
||||
export const metadata = {
|
||||
title: "Learn QR Code Mastery | QR Master Hub",
|
||||
description: "Guides, use cases, tracking deep-dives, and security best practices for dynamic QR codes.",
|
||||
};
|
||||
|
||||
export default function LearnHubPage() {
|
||||
const posts = getPublishedPosts();
|
||||
// Sort by date descending
|
||||
const topLatest = [...posts].sort((a, b) => (new Date(a.datePublished).getTime() < new Date(b.datePublished).getTime() ? 1 : -1)).slice(0, 6);
|
||||
|
||||
return (
|
||||
<main className="container mx-auto max-w-5xl py-12 px-4 space-y-12">
|
||||
<header className="space-y-4 max-w-3xl">
|
||||
<h1 className="text-4xl md:text-5xl font-extrabold text-gray-900 tracking-tight">QR Code Knowledge Hub</h1>
|
||||
<p className="text-xl text-gray-600">
|
||||
Master the art of QR codes. Explore our expert guides on generation, tracking, security, and marketing strategies.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6">Topic Pillars</h2>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{pillarMeta.sort((a, b) => a.order - b.order).map(p => (
|
||||
<Link key={p.key} href={`/learn/${p.key}`} className="group block h-full rounded-2xl border border-gray-200 bg-white p-6 shadow-sm hover:shadow-md hover:border-blue-200 transition-all">
|
||||
<div className="text-sm font-semibold text-blue-600 uppercase tracking-wide mb-2 opacity-80 group-hover:opacity-100">Pillar</div>
|
||||
<div className="text-2xl font-bold text-gray-900 mb-2 group-hover:text-blue-700">{p.title}</div>
|
||||
<div className="text-gray-600">{p.description}</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6">Latest Guides</h2>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{topLatest.map(p => (
|
||||
<Link key={p.slug} href={`/blog/${p.slug}`} className="group block rounded-2xl border border-gray-200 bg-white p-6 shadow-sm hover:shadow-md hover:border-blue-200 transition-all">
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<div className="text-xs font-semibold px-2 py-1 rounded bg-gray-100 text-gray-600">{p.pillar?.toUpperCase() || 'GUIDE'}</div>
|
||||
<div className="text-xs text-gray-400">{p.date}</div>
|
||||
</div>
|
||||
<div className="text-xl font-bold text-gray-900 mb-2 group-hover:text-blue-700 line-clamp-2">{p.title}</div>
|
||||
<div className="text-gray-600 line-clamp-2">{p.description}</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
import type { Metadata } from 'next';
|
||||
import SeoJsonLd from '@/components/SeoJsonLd';
|
||||
import { organizationSchema, websiteSchema } from '@/lib/schema';
|
||||
import { organizationSchema, websiteSchema, softwareApplicationSchema } from '@/lib/schema';
|
||||
import HomePageClient from '@/components/marketing/HomePageClient';
|
||||
|
||||
function truncateAtWord(text: string, maxLength: number): string {
|
||||
|
|
@ -54,7 +54,7 @@ export async function generateMetadata(): Promise<Metadata> {
|
|||
export default function HomePage() {
|
||||
return (
|
||||
<>
|
||||
<SeoJsonLd data={[websiteSchema(), organizationSchema()]} />
|
||||
<SeoJsonLd data={[websiteSchema(), organizationSchema(), softwareApplicationSchema()]} />
|
||||
|
||||
{/* Server-rendered SEO content for crawlers */}
|
||||
<div className="sr-only" aria-hidden="false">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,265 @@
|
|||
'use client';
|
||||
|
||||
import React, { useState, useRef } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { QRCodeSVG } from 'qrcode.react';
|
||||
import {
|
||||
Phone,
|
||||
Download,
|
||||
Check,
|
||||
Sparkles,
|
||||
MessageCircle,
|
||||
Send
|
||||
} from 'lucide-react';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Input } from '@/components/ui/Input';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Textarea } from '@/components/ui/Textarea';
|
||||
|
||||
// Brand Colors
|
||||
const BRAND = {
|
||||
paleGrey: '#EBEBDF',
|
||||
richBlue: '#1A1265',
|
||||
richBlueLight: '#2A2275',
|
||||
};
|
||||
|
||||
// QR Color Options - WhatsApp Theme
|
||||
const QR_COLORS = [
|
||||
{ name: 'WhatsApp Grün', value: '#25D366' },
|
||||
{ name: 'Teal', value: '#128C7E' },
|
||||
{ name: 'Klassisches Schwarz', value: '#000000' },
|
||||
{ name: 'Sattes Blau', value: '#1A1265' },
|
||||
{ name: 'Lila', value: '#7C3AED' },
|
||||
{ name: 'Smaragd', value: '#10B981' },
|
||||
{ name: 'Rose', value: '#F43F5E' },
|
||||
];
|
||||
|
||||
// Frame Options
|
||||
const FRAME_OPTIONS = [
|
||||
{ id: 'none', label: 'Kein Rahmen' },
|
||||
{ id: 'scanme', label: 'Scan Mich' },
|
||||
{ id: 'chat', label: 'Chat starten' },
|
||||
{ id: 'support', label: 'Support' },
|
||||
];
|
||||
|
||||
export default function WhatsAppGeneratorDE() {
|
||||
const [phone, setPhone] = useState('');
|
||||
const [message, setMessage] = useState('');
|
||||
const [qrColor, setQrColor] = useState('#25D366');
|
||||
const [frameType, setFrameType] = useState('none');
|
||||
|
||||
const qrRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// WhatsApp URL: https://wa.me/number?text=message
|
||||
const getUrl = () => {
|
||||
const cleanPhone = phone.replace(/\D/g, ''); // Remove non-digits
|
||||
const encodedMessage = encodeURIComponent(message);
|
||||
return `https://wa.me/${cleanPhone}?text=${encodedMessage}`;
|
||||
};
|
||||
|
||||
const handleDownload = async (format: 'png' | 'svg') => {
|
||||
if (!qrRef.current) return;
|
||||
try {
|
||||
if (format === 'png') {
|
||||
const { toPng } = await import('html-to-image');
|
||||
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
|
||||
const link = document.createElement('a');
|
||||
link.download = `whatsapp-qr-code.png`;
|
||||
link.href = dataUrl;
|
||||
link.click();
|
||||
} else {
|
||||
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
|
||||
if (svgData) {
|
||||
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = `whatsapp-qr-code.svg`;
|
||||
link.click();
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Download failed', err);
|
||||
}
|
||||
};
|
||||
|
||||
const getFrameLabel = () => {
|
||||
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
|
||||
return frame?.id !== 'none' ? frame?.label : null;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
|
||||
|
||||
{/* Main Generator Card */}
|
||||
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
|
||||
<div className="grid lg:grid-cols-2">
|
||||
|
||||
{/* LEFT: Input Section */}
|
||||
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
|
||||
|
||||
{/* WhatsApp Details */}
|
||||
<div className="space-y-6">
|
||||
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
|
||||
<MessageCircle className="w-5 h-5 text-[#25D366]" />
|
||||
WhatsApp Details
|
||||
</h2>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">Telefonnummer</label>
|
||||
<Input
|
||||
placeholder="4915112345678"
|
||||
value={phone}
|
||||
onChange={(e) => setPhone(e.target.value)}
|
||||
className="h-12 text-base rounded-xl border-slate-200 focus:border-[#25D366] focus:ring-[#25D366]"
|
||||
/>
|
||||
<p className="text-xs text-slate-600 mt-2">Mit Ländervorwahl (z.B. 49 für DE). Kein '+' Symbol.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">Vorgefertigte Nachricht (Optional)</label>
|
||||
<Textarea
|
||||
placeholder="Hallo, ich habe Interesse an Ihren Dienstleistungen..."
|
||||
value={message}
|
||||
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setMessage(e.target.value)}
|
||||
className="h-24 p-4 text-base rounded-xl border-slate-200 focus:border-[#25D366] focus:ring-[#25D366] resize-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-slate-100"></div>
|
||||
|
||||
{/* Design Options */}
|
||||
<div className="space-y-6">
|
||||
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
|
||||
<Sparkles className="w-5 h-5 text-[#25D366]" />
|
||||
Design Optionen
|
||||
</h2>
|
||||
|
||||
{/* Color Picker */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Farbe</label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{QR_COLORS.map((c) => (
|
||||
<button
|
||||
key={c.name}
|
||||
onClick={() => setQrColor(c.value)}
|
||||
className={cn(
|
||||
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
|
||||
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
|
||||
)}
|
||||
style={{ backgroundColor: c.value }}
|
||||
aria-label={`Wähle Farbe ${c.name}`}
|
||||
title={c.name}
|
||||
>
|
||||
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Frame Selector */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-3">Rahmen Text</label>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
|
||||
{FRAME_OPTIONS.map((frame) => (
|
||||
<button
|
||||
key={frame.id}
|
||||
onClick={() => setFrameType(frame.id)}
|
||||
className={cn(
|
||||
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
|
||||
frameType === frame.id
|
||||
? "bg-[#25D366] text-white border-[#25D366]"
|
||||
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
|
||||
)}
|
||||
>
|
||||
{frame.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* RIGHT: Preview Section */}
|
||||
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
|
||||
|
||||
{/* QR Card with Frame */}
|
||||
<div
|
||||
ref={qrRef}
|
||||
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
|
||||
>
|
||||
{/* Frame Label */}
|
||||
{getFrameLabel() && (
|
||||
<div
|
||||
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
|
||||
style={{ backgroundColor: qrColor }}
|
||||
>
|
||||
{getFrameLabel()}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* QR Code */}
|
||||
<div className="bg-white">
|
||||
<QRCodeSVG
|
||||
value={getUrl()}
|
||||
size={240}
|
||||
level="M"
|
||||
includeMargin={false}
|
||||
fgColor={qrColor}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Info Preview */}
|
||||
<div className="mt-6 text-center max-w-[260px]">
|
||||
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2 truncate">
|
||||
<Phone className="w-4 h-4 text-slate-400 shrink-0" />
|
||||
<span className="truncate">{phone ? `+${phone}` : 'Nummer'}</span>
|
||||
</h3>
|
||||
<div className="text-xs text-slate-600 mt-1">Startet WhatsApp Chat</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Download Buttons */}
|
||||
<div className="flex items-center gap-3 mt-8">
|
||||
<Button
|
||||
onClick={() => handleDownload('png')}
|
||||
className="bg-[#25D366] hover:bg-[#128C7E] text-white shadow-lg"
|
||||
>
|
||||
<Download className="w-4 h-4 mr-2" />
|
||||
PNG Downloaden
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => handleDownload('svg')}
|
||||
variant="outline"
|
||||
className="border-slate-300 hover:bg-white"
|
||||
>
|
||||
<Download className="w-4 h-4 mr-2" />
|
||||
SVG
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-slate-600 mt-4 text-center">
|
||||
Der Scan startet sofort einen Chat mit dieser Nummer.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Upsell Banner */}
|
||||
<div className="mt-8 bg-gradient-to-r from-[#128C7E] to-[#25D366] rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
|
||||
<div className="text-white text-center sm:text-left">
|
||||
<h3 className="font-bold text-lg">WhatsApp für Business nutzen?</h3>
|
||||
<p className="text-white/80 text-sm mt-1">
|
||||
Analysieren Sie Kundenkontakte mit unseren Pro-Statistiken für dynamische QR Codes.
|
||||
</p>
|
||||
</div>
|
||||
<Link href="/signup">
|
||||
<Button className="bg-white text-[#128C7E] hover:bg-slate-100 shrink-0 shadow-lg">
|
||||
Jetzt Business-Analysen starten
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
import { MetadataRoute } from 'next';
|
||||
import { blogPostList } from '../lib/blog-data';
|
||||
import { blogPosts } from '../lib/blog-data';
|
||||
import { pillarMeta } from '../lib/pillar-data';
|
||||
import { authors } from '../lib/author-data';
|
||||
|
||||
export default function sitemap(): MetadataRoute.Sitemap {
|
||||
const baseUrl = 'https://www.qrmaster.net';
|
||||
|
|
@ -29,12 +31,19 @@ export default function sitemap(): MetadataRoute.Sitemap {
|
|||
];
|
||||
|
||||
// All blog posts
|
||||
const blogPages = blogPostList.map((post) => ({
|
||||
url: `${baseUrl}/blog/${post.slug}`,
|
||||
lastModified: post.dateModified ? new Date(post.dateModified) : new Date(),
|
||||
changeFrequency: 'monthly' as const,
|
||||
priority: 0.8,
|
||||
}));
|
||||
// Filter out future posts so Google doesn't see them
|
||||
const blogPages = blogPosts
|
||||
.filter(post => {
|
||||
const publishDate = post.datePublished ? new Date(post.datePublished) : new Date(post.date);
|
||||
return publishDate <= new Date();
|
||||
})
|
||||
.map((post) => ({
|
||||
url: `${baseUrl}/blog/${post.slug}`,
|
||||
// Use updatedAt if available, otherwise dateModified or datePublished
|
||||
lastModified: post.updatedAt ? new Date(post.updatedAt) : (post.dateModified ? new Date(post.dateModified) : new Date()),
|
||||
changeFrequency: 'monthly' as const,
|
||||
priority: 0.8,
|
||||
}));
|
||||
|
||||
const toolPages = freeTools.map((slug) => ({
|
||||
url: `${baseUrl}/tools/${slug}`,
|
||||
|
|
@ -43,6 +52,30 @@ export default function sitemap(): MetadataRoute.Sitemap {
|
|||
priority: 0.8,
|
||||
}));
|
||||
|
||||
// Learn hub and pillar pages
|
||||
const learnPages = [
|
||||
{
|
||||
url: `${baseUrl}/learn`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'weekly' as const,
|
||||
priority: 0.9,
|
||||
},
|
||||
...pillarMeta.map((pillar) => ({
|
||||
url: `${baseUrl}/learn/${pillar.key}`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'monthly' as const,
|
||||
priority: 0.8,
|
||||
})),
|
||||
];
|
||||
|
||||
// Author pages
|
||||
const authorPages = authors.map((author) => ({
|
||||
url: `${baseUrl}/authors/${author.slug}`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'monthly' as const,
|
||||
priority: 0.7,
|
||||
}));
|
||||
|
||||
return [
|
||||
{
|
||||
url: baseUrl,
|
||||
|
|
@ -92,12 +125,7 @@ export default function sitemap(): MetadataRoute.Sitemap {
|
|||
changeFrequency: 'weekly',
|
||||
priority: 0.9,
|
||||
},
|
||||
{
|
||||
url: `${baseUrl}/manage-qr-codes`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'weekly',
|
||||
priority: 0.9,
|
||||
},
|
||||
|
||||
{
|
||||
url: `${baseUrl}/pricing`,
|
||||
lastModified: new Date(),
|
||||
|
|
@ -128,18 +156,7 @@ export default function sitemap(): MetadataRoute.Sitemap {
|
|||
changeFrequency: 'weekly',
|
||||
priority: 0.8,
|
||||
},
|
||||
{
|
||||
url: `${baseUrl}/signup`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'monthly',
|
||||
priority: 0.8,
|
||||
},
|
||||
{
|
||||
url: `${baseUrl}/login`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'yearly',
|
||||
priority: 0.5,
|
||||
},
|
||||
|
||||
{
|
||||
url: `${baseUrl}/privacy`,
|
||||
lastModified: new Date(),
|
||||
|
|
@ -158,27 +175,12 @@ export default function sitemap(): MetadataRoute.Sitemap {
|
|||
changeFrequency: 'yearly',
|
||||
priority: 0.6,
|
||||
},
|
||||
{
|
||||
url: `${baseUrl}/guide/tracking-analytics`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'monthly',
|
||||
priority: 0.8,
|
||||
},
|
||||
{
|
||||
url: `${baseUrl}/guide/bulk-qr-code-generation`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'monthly',
|
||||
priority: 0.8,
|
||||
},
|
||||
{
|
||||
url: `${baseUrl}/guide/qr-code-best-practices`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'monthly',
|
||||
priority: 0.8,
|
||||
},
|
||||
|
||||
|
||||
...toolPages,
|
||||
...blogPages,
|
||||
...learnPages,
|
||||
...authorPages,
|
||||
];
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
"use client";
|
||||
|
||||
import React from 'react';
|
||||
import sanitizeHtml from 'sanitize-html';
|
||||
|
||||
type Props = { html: string };
|
||||
|
||||
export function AnswerBox({ html }: Props) {
|
||||
const cleanHtml = sanitizeHtml(html, {
|
||||
allowedTags: ['p', 'strong', 'em', 'ul', 'ol', 'li', 'a', 'br', 'code', 'pre', 'blockquote', 'h3', 'h4'],
|
||||
allowedAttributes: { 'a': ['href', 'class'], 'code': ['class'], 'pre': ['class'] },
|
||||
allowedClasses: {
|
||||
'a': ['text-primary-600', 'hover:underline'],
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<section className="rounded-xl border border-blue-100 bg-blue-50/50 p-6 my-8">
|
||||
<div className="text-sm font-semibold text-blue-800 uppercase tracking-wider mb-2">Quick Answer</div>
|
||||
<div className="prose prose-blue max-w-none text-gray-800" dangerouslySetInnerHTML={{ __html: cleanHtml }} />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
"use client";
|
||||
|
||||
import React from 'react';
|
||||
import sanitizeHtml from 'sanitize-html';
|
||||
import type { FAQItem } from "@/lib/types";
|
||||
|
||||
type Props = { items: FAQItem[]; title?: string };
|
||||
|
||||
export function FAQSection({ items, title = "Frequently Asked Questions" }: Props) {
|
||||
if (!items?.length) return null;
|
||||
|
||||
return (
|
||||
<section className="rounded-xl border border-gray-100 bg-gray-50/50 p-6 my-8">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-6">{title}</h2>
|
||||
<div className="space-y-4">
|
||||
{items.map((f) => {
|
||||
const cleanAnswer = sanitizeHtml(f.answer, {
|
||||
allowedTags: ['p', 'strong', 'em', 'ul', 'ol', 'li', 'a', 'br', 'code'],
|
||||
allowedAttributes: { 'a': ['href'] }
|
||||
});
|
||||
|
||||
return (
|
||||
<details key={f.question} className="group rounded-lg border border-gray-200 bg-white p-4 open:shadow-sm open:border-blue-200 transition-all">
|
||||
<summary className="cursor-pointer font-semibold text-gray-800 flex justify-between items-center group-open:text-blue-700">
|
||||
{f.question}
|
||||
<span className="text-gray-400 group-open:rotate-180 transition-transform">▼</span>
|
||||
</summary>
|
||||
<div className="prose max-w-none mt-3 text-gray-600 border-t border-gray-100 pt-3" dangerouslySetInnerHTML={{ __html: cleanAnswer }} />
|
||||
</details>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import React from 'react';
|
||||
|
||||
type Props = { steps: string[]; title?: string };
|
||||
|
||||
export function StepList({ steps, title = "How to do it" }: Props) {
|
||||
if (!steps?.length) return null;
|
||||
|
||||
return (
|
||||
<section className="rounded-xl border border-gray-200 bg-white p-6 my-8 shadow-sm">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-4">{title}</h2>
|
||||
<ol className="list-decimal pl-6 space-y-3">
|
||||
{steps.map((s, i) => (
|
||||
<li key={`step-${i}`} className="text-gray-700 font-medium pl-2">{s}</li>
|
||||
))}
|
||||
</ol>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
import React from 'react';
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import type { AuthorProfile } from "@/lib/types";
|
||||
|
||||
export function AuthorCard({ author }: { author: AuthorProfile }) {
|
||||
return (
|
||||
<aside className="rounded-xl border border-gray-200 bg-white p-6 my-8 flex gap-6 items-start shadow-sm">
|
||||
{author.image ? (
|
||||
<div className="relative w-16 h-16 flex-shrink-0">
|
||||
<Image
|
||||
src={author.image}
|
||||
alt={author.name}
|
||||
fill
|
||||
className="rounded-full object-cover border-2 border-white shadow-md"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold text-xl flex-shrink-0">
|
||||
{author.name.charAt(0)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="min-w-0">
|
||||
<div className="font-bold text-lg text-gray-900">
|
||||
<Link href={`/authors/${author.slug}`} className="hover:text-blue-600 transition-colors">
|
||||
{author.name}
|
||||
</Link>
|
||||
</div>
|
||||
<div className="text-sm font-medium text-blue-600 mb-2">{author.role}</div>
|
||||
<p className="text-sm text-gray-600 leading-relaxed mb-3">{author.bio}</p>
|
||||
|
||||
{!!author.sameAs?.length && (
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{author.sameAs.map((url) => {
|
||||
let label = "Website";
|
||||
if (url.includes('linkedin')) label = "LinkedIn";
|
||||
if (url.includes('github')) label = "GitHub";
|
||||
if (url.includes('twitter') || url.includes('x.com')) label = "Twitter";
|
||||
|
||||
return (
|
||||
<a key={url} href={url} target="_blank" rel="noreferrer" className="text-xs font-semibold text-gray-500 hover:text-gray-900 uppercase tracking-wide">
|
||||
{label}
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import React from 'react';
|
||||
import Link from "next/link";
|
||||
import type { BlogPost } from "@/lib/types";
|
||||
|
||||
export function RelatedPosts({ posts }: { posts: BlogPost[] }) {
|
||||
if (!posts?.length) return null;
|
||||
|
||||
return (
|
||||
<section className="rounded-xl border border-gray-100 bg-gray-50 p-6 my-8">
|
||||
<h2 className="text-lg font-bold text-gray-900 mb-4">Related Guides</h2>
|
||||
<ul className="grid gap-4 sm:grid-cols-2">
|
||||
{posts.map(p => (
|
||||
<li key={p.slug} className="group">
|
||||
<Link href={`/blog/${p.slug}`} className="block h-full p-4 rounded-lg bg-white border border-gray-200 shadow-sm hover:shadow-md hover:border-blue-300 transition-all">
|
||||
<h3 className="font-semibold text-gray-900 group-hover:text-blue-600 mb-2 line-clamp-2">
|
||||
{p.title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500 line-clamp-2">{p.description}</p>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import Link from 'next/link';
|
||||
import en from '@/i18n/en.json';
|
||||
import { Instagram, Twitter, Linkedin, Facebook } from 'lucide-react';
|
||||
|
||||
interface FooterProps {
|
||||
variant?: 'marketing' | 'dashboard';
|
||||
|
|
@ -23,6 +24,19 @@ export function Footer({ variant = 'marketing', t }: FooterProps) {
|
|||
<p className={isDashboard ? 'text-gray-500' : 'text-gray-400'}>
|
||||
{translations.tagline}
|
||||
</p>
|
||||
{!isDashboard && (
|
||||
<div className="flex space-x-4 mt-6">
|
||||
<a href="https://www.linkedin.com/in/qr-master-44b6863a2/" target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-white transition-colors">
|
||||
<Linkedin className="w-5 h-5" />
|
||||
</a>
|
||||
<a href="https://x.com/TIMO_QRMASTER" target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-white transition-colors">
|
||||
<Twitter className="w-5 h-5" />
|
||||
</a>
|
||||
<a href="https://www.instagram.com/qrmaster_net/" target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-white transition-colors">
|
||||
<Instagram className="w-5 h-5" />
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
|
@ -30,6 +44,7 @@ export function Footer({ variant = 'marketing', t }: FooterProps) {
|
|||
<ul className={`space-y-2 ${isDashboard ? 'text-gray-500' : 'text-gray-400'}`}>
|
||||
<li><Link href="/features" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>{translations.features}</Link></li>
|
||||
<li><Link href="/about" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>About</Link></li>
|
||||
<li><Link href="/authors/timo" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Timo Knuth (Author)</Link></li>
|
||||
<li><Link href="/#pricing" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>{translations.pricing}</Link></li>
|
||||
<li><Link href="/qr-code-tracking" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>QR Analytics</Link></li>
|
||||
<li><Link href="/faq" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>{translations.faq}</Link></li>
|
||||
|
|
@ -40,6 +55,7 @@ export function Footer({ variant = 'marketing', t }: FooterProps) {
|
|||
<div>
|
||||
<h3 className={`font-semibold mb-4 ${isDashboard ? 'text-gray-900' : ''}`}>{translations.resources}</h3>
|
||||
<ul className={`space-y-2 ${isDashboard ? 'text-gray-500' : 'text-gray-400'}`}>
|
||||
<li><Link href="/learn" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>{translations.learn}</Link></li>
|
||||
<li><Link href="/#pricing" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>{translations.full_pricing}</Link></li>
|
||||
<li><Link href="/faq" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>{translations.all_questions}</Link></li>
|
||||
<li><Link href="/blog" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>{translations.all_articles}</Link></li>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
"about": "Über uns",
|
||||
"contact": "Kontakt",
|
||||
"signup": "Registrieren",
|
||||
"learn": "Lernen",
|
||||
"create_qr": "QR erstellen",
|
||||
"bulk_creation": "Massen-Erstellung",
|
||||
"analytics": "Analytik",
|
||||
|
|
@ -393,6 +394,7 @@
|
|||
"full_pricing": "Alle Preise",
|
||||
"all_questions": "Alle Fragen",
|
||||
"all_articles": "Alle Artikel",
|
||||
"learn": "Lernen",
|
||||
"get_started": "Loslegen",
|
||||
"legal": "Rechtliches",
|
||||
"privacy_policy": "Datenschutzerklärung",
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
"about": "About",
|
||||
"contact": "Contact",
|
||||
"signup": "Sign Up",
|
||||
"learn": "Learn",
|
||||
"create_qr": "Create QR",
|
||||
"bulk_creation": "Bulk Creation",
|
||||
"analytics": "Analytics",
|
||||
|
|
@ -391,6 +392,7 @@
|
|||
"full_pricing": "Full Pricing",
|
||||
"all_questions": "All Questions",
|
||||
"all_articles": "All Articles",
|
||||
"learn": "Learn",
|
||||
"get_started": "Get Started",
|
||||
"legal": "Legal",
|
||||
"privacy_policy": "Privacy Policy",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
import type { AuthorProfile } from "./types";
|
||||
|
||||
export const authors: AuthorProfile[] = [
|
||||
{
|
||||
slug: "timo",
|
||||
name: "Timo Knuth",
|
||||
role: "Founder, Growth & Product Marketing",
|
||||
bio: "Building QR Master: dynamic QR management, tracking, and bulk ops for B2B teams.",
|
||||
image: "/favicon.svg",
|
||||
sameAs: [
|
||||
"https://www.linkedin.com/in/qr-master-44b6863a2/",
|
||||
"https://x.com/TIMO_QRMASTER",
|
||||
"https://www.instagram.com/qrmaster_net/"
|
||||
],
|
||||
knowsAbout: ["Dynamic QR Codes", "Tracking & Analytics", "B2B SaaS", "UTM"]
|
||||
}
|
||||
];
|
||||
3817
src/lib/blog-data.ts
3817
src/lib/blog-data.ts
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,55 @@
|
|||
import { blogPosts } from "./blog-data";
|
||||
import { authors } from "./author-data";
|
||||
import type { BlogPost, PillarKey, AuthorProfile } from "./types";
|
||||
|
||||
export function getPublishedPosts(): BlogPost[] {
|
||||
const currentDate = new Date();
|
||||
return blogPosts.filter(p => {
|
||||
if (!p.published) return false;
|
||||
const publishDate = p.datePublished ? new Date(p.datePublished) : new Date(p.date);
|
||||
return publishDate <= currentDate;
|
||||
});
|
||||
}
|
||||
|
||||
export function getPostBySlug(slug: string): BlogPost | undefined {
|
||||
return blogPosts.find(p => p.slug === slug);
|
||||
}
|
||||
|
||||
export function getPublishedPostBySlug(slug: string): BlogPost | undefined {
|
||||
const p = getPostBySlug(slug);
|
||||
return p?.published ? p : undefined;
|
||||
}
|
||||
|
||||
export function getPostsByPillar(pillar: PillarKey): BlogPost[] {
|
||||
return getPublishedPosts()
|
||||
.filter(p => p.pillar === pillar)
|
||||
.sort((a, b) => (new Date(a.datePublished).getTime() < new Date(b.datePublished).getTime() ? 1 : -1));
|
||||
}
|
||||
|
||||
export function getAuthorBySlug(slug: string): AuthorProfile | undefined {
|
||||
return authors.find(a => a.slug === slug);
|
||||
}
|
||||
|
||||
export function getPostsByAuthor(slug: string): BlogPost[] {
|
||||
return getPublishedPosts()
|
||||
.filter(p => p.authorSlug === slug)
|
||||
.sort((a, b) => (new Date(a.datePublished).getTime() < new Date(b.datePublished).getTime() ? 1 : -1));
|
||||
}
|
||||
|
||||
export function getRelatedPosts(post: BlogPost, limit = 4): BlogPost[] {
|
||||
const published = getPublishedPosts();
|
||||
|
||||
// explicit relatedSlugs first
|
||||
const explicit = (post.relatedSlugs ?? [])
|
||||
.map(s => published.find(p => p.slug === s))
|
||||
.filter((p): p is BlogPost => !!p);
|
||||
|
||||
if (explicit.length >= limit) return explicit.slice(0, limit);
|
||||
|
||||
// fallback: same pillar, not itself, newest
|
||||
const fallback = published
|
||||
.filter(p => p.slug !== post.slug && p.pillar === post.pillar)
|
||||
.slice(0, limit - explicit.length);
|
||||
|
||||
return [...explicit, ...fallback];
|
||||
}
|
||||
|
|
@ -1,14 +1,16 @@
|
|||
import axios from 'axios';
|
||||
import dotenv from 'dotenv';
|
||||
import { blogPostList } from '../lib/blog-data';
|
||||
import { blogPosts } from '../lib/blog-data';
|
||||
import { pillarMeta } from '../lib/pillar-data';
|
||||
import { authors } from '../lib/author-data';
|
||||
|
||||
dotenv.config();
|
||||
|
||||
const INDEXNOW_ENDPOINT = 'https://api.indexnow.org/indexnow';
|
||||
const HOST = 'www.qrmaster.net';
|
||||
// You need to generate a key from https://www.bing.com/indexnow and place it in your public folder
|
||||
// For now, we'll assume a key exists or is provided via env
|
||||
const KEY = process.env.INDEXNOW_KEY || 'bb6dfaacf1ed41a880281c426c54ed7c';
|
||||
// Key must be set in .env as INDEXNOW_KEY
|
||||
const KEY = process.env.INDEXNOW_KEY!;
|
||||
const KEY_LOCATION = `https://${HOST}/${KEY}.txt`;
|
||||
|
||||
export async function submitToIndexNow(urls: string[]) {
|
||||
|
|
@ -57,7 +59,7 @@ export function getAllIndexableUrls(): string[] {
|
|||
].map(slug => `${baseUrl}/tools/${slug}`);
|
||||
|
||||
// Blog posts
|
||||
const blogPages = blogPostList.map(post => `${baseUrl}/blog/${post.slug}`);
|
||||
const blogPages = blogPosts.map(post => `${baseUrl}/blog/${post.slug}`);
|
||||
|
||||
// Main pages (synced with sitemap.ts)
|
||||
const mainPages = [
|
||||
|
|
@ -82,7 +84,16 @@ export function getAllIndexableUrls(): string[] {
|
|||
`${baseUrl}/guide/qr-code-best-practices`,
|
||||
];
|
||||
|
||||
return [...mainPages, ...freeTools, ...blogPages];
|
||||
// Learn hub and pillar pages
|
||||
const learnPages = [
|
||||
`${baseUrl}/learn`,
|
||||
...pillarMeta.map(pillar => `${baseUrl}/learn/${pillar.key}`)
|
||||
];
|
||||
|
||||
// Author pages
|
||||
const authorPages = authors.map(author => `${baseUrl}/authors/${author.slug}`);
|
||||
|
||||
return [...mainPages, ...freeTools, ...blogPages, ...learnPages, ...authorPages];
|
||||
}
|
||||
|
||||
// If run directly
|
||||
|
|
|
|||
|
|
@ -0,0 +1,66 @@
|
|||
import type { PillarMeta } from "./types";
|
||||
|
||||
export const pillarMeta: PillarMeta[] = [
|
||||
{
|
||||
key: "basics",
|
||||
title: "QR Code Basics",
|
||||
description: "Foundations, best practices, and comparisons to pick the right QR setup.",
|
||||
quickAnswer: "QR code basics cover static vs dynamic, formats, sizing, and best practices for reliable scanning. Understanding these fundamentals ensures your QR codes work every time.",
|
||||
miniFaq: [
|
||||
{ question: "Static vs dynamic QR?", answer: "Dynamic lets you edit the destination and track scans; static is fixed forever." },
|
||||
{ question: "Best print format?", answer: "Vector formats like <strong>SVG</strong> or <strong>EPS</strong> are best for professional printing." }
|
||||
],
|
||||
order: 1
|
||||
},
|
||||
{
|
||||
key: "tracking",
|
||||
title: "Tracking & Analytics",
|
||||
description: "Measure scans, devices, and locations. Build ROI-ready QR campaigns.",
|
||||
quickAnswer: "Tracking turns QR codes into a measurable marketing channel. Monitor real-time scans, device types, geographic locations, and campaign attribution via UTM parameters.",
|
||||
miniFaq: [
|
||||
{ question: "What metrics can I track?", answer: "Track scan count, timestamps, device types, operating systems, geographic locations, and referrer sources in real-time." },
|
||||
{ question: "How do UTM parameters work?", answer: "Add UTM tags to track campaigns in Google Analytics. QR Master auto-generates UTM parameters for attribution tracking." },
|
||||
{ question: "Can I export analytics data?", answer: "Yes, export scan data as CSV for custom reporting and integration with your CRM or marketing tools." }
|
||||
],
|
||||
order: 2
|
||||
},
|
||||
{
|
||||
key: "use-cases",
|
||||
title: "Use Cases",
|
||||
description: "WhatsApp, Instagram, vCard, restaurants, events, and real-world playbooks.",
|
||||
quickAnswer: "Explore practical guides for specific industries and goals. From digital business cards (vCard) to restaurant menus and event check-ins, see how to deploy QR codes effectively.",
|
||||
miniFaq: [
|
||||
{ question: "Best QR code for business cards?", answer: "Use <strong>vCard QR codes</strong> to share contact info that auto-saves to phones. Include name, email, phone, company, and social links." },
|
||||
{ question: "How to use QR codes for WhatsApp?", answer: "Create a WhatsApp QR that opens a pre-filled chat. Perfect for customer support, sales inquiries, or event registration." },
|
||||
{ question: "QR codes for restaurant menus?", answer: "Dynamic menu QR codes let you update items and prices without reprinting. Add images, allergen info, and multilingual support." },
|
||||
{ question: "Event check-in with QR?", answer: "Generate unique QR tickets for each attendee. Scan at entry for instant validation and attendance tracking." }
|
||||
],
|
||||
order: 3
|
||||
},
|
||||
{
|
||||
key: "security",
|
||||
title: "Security",
|
||||
description: "Quishing prevention and safe QR rollouts.",
|
||||
quickAnswer: "Security is critical for trust. Learn how to prevent 'Quishing' (QR Phishing), validate links, and ensure your QR code campaigns remain safe for your users.",
|
||||
miniFaq: [
|
||||
{ question: "What is Quishing?", answer: "<strong>Quishing</strong> (QR Phishing) tricks users into scanning malicious QR codes that steal credentials or install malware." },
|
||||
{ question: "How to prevent QR code fraud?", answer: "Use short, branded links. Enable URL preview before redirect. Educate users to check the destination before scanning unknown codes." },
|
||||
{ question: "Are dynamic QR codes secure?", answer: "Yes, when hosted on trusted platforms with HTTPS, access logs, and link expiration. Avoid free generators with sketchy redirects." },
|
||||
{ question: "Can QR codes be hacked?", answer: "QR codes themselves can't be hacked, but attackers can overlay fake codes on legitimate ones. Use tamper-proof stickers and regular audits." }
|
||||
],
|
||||
order: 4
|
||||
},
|
||||
{
|
||||
key: "developer",
|
||||
title: "Developer",
|
||||
description: "API, bulk generation, and automation.",
|
||||
quickAnswer: "For large-scale operations, use our API or Bulk Generator. Automate QR creation, integrate with your CRM, and manage thousands of codes programmatically.",
|
||||
miniFaq: [
|
||||
{ question: "Does QR Master have an API?", answer: "Currently, we do not offer a public API. However, we are working on a developer API for future releases to support automated QR generation." },
|
||||
{ question: "How to generate QR codes in bulk?", answer: "Use our Bulk Generator tool to upload a CSV file. This feature allows you to create hundreds of QR codes at once for inventory, events, or marketing." },
|
||||
{ question: "Can I integrate with Zapier?", answer: "Direct Zapier integration is on our roadmap. For now, you can use our Bulk Generator to import data from other tools via CSV." },
|
||||
{ question: "What file formats are supported?", answer: "We support high-quality downloads in <strong>PNG</strong>, <strong>SVG</strong>, and <strong>PDF</strong>. SVG is recommended for professional printing." }
|
||||
],
|
||||
order: 5
|
||||
}
|
||||
];
|
||||
|
|
@ -1,60 +1,44 @@
|
|||
export interface BreadcrumbItem {
|
||||
name: string;
|
||||
url: string;
|
||||
}
|
||||
import type { BlogPost, AuthorProfile, PillarMeta } from "./types";
|
||||
|
||||
export interface BlogPost {
|
||||
title: string;
|
||||
description: string;
|
||||
slug: string;
|
||||
author: string;
|
||||
authorUrl: string;
|
||||
datePublished: string;
|
||||
dateModified: string;
|
||||
image: string;
|
||||
}
|
||||
const SITE_URL = "https://www.qrmaster.net";
|
||||
|
||||
export interface FAQItem {
|
||||
question: string;
|
||||
answer: string;
|
||||
}
|
||||
|
||||
export interface ProductOffer {
|
||||
name: string;
|
||||
price: string;
|
||||
priceCurrency: string;
|
||||
availability: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
export interface HowToStep {
|
||||
name: string;
|
||||
text: string;
|
||||
url?: string;
|
||||
}
|
||||
|
||||
export interface HowToTask {
|
||||
name: string;
|
||||
description: string;
|
||||
steps: HowToStep[];
|
||||
totalTime?: string;
|
||||
export function websiteSchema() {
|
||||
return {
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'WebSite',
|
||||
'@id': `${SITE_URL}/#website`,
|
||||
name: 'QR Master',
|
||||
url: SITE_URL,
|
||||
inLanguage: 'en',
|
||||
mainEntityOfPage: SITE_URL,
|
||||
publisher: {
|
||||
'@id': `${SITE_URL}/#organization`,
|
||||
},
|
||||
potentialAction: {
|
||||
'@type': 'SearchAction',
|
||||
target: {
|
||||
'@type': 'EntryPoint',
|
||||
urlTemplate: `${SITE_URL}/blog?q={search_term_string}`,
|
||||
},
|
||||
'query-input': 'required name=search_term_string',
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export function organizationSchema() {
|
||||
return {
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'Organization',
|
||||
'@id': 'https://www.qrmaster.net/#organization',
|
||||
'@id': `${SITE_URL}/#organization`,
|
||||
name: 'QR Master',
|
||||
alternateName: 'QRMaster',
|
||||
url: 'https://www.qrmaster.net',
|
||||
url: SITE_URL,
|
||||
logo: {
|
||||
'@type': 'ImageObject',
|
||||
url: 'https://www.qrmaster.net/static/og-image.png',
|
||||
url: `${SITE_URL}/static/og-image.png`,
|
||||
width: 1200,
|
||||
height: 630,
|
||||
},
|
||||
image: 'https://www.qrmaster.net/static/og-image.png',
|
||||
sameAs: [
|
||||
'https://twitter.com/qrmaster',
|
||||
],
|
||||
|
|
@ -64,139 +48,97 @@ export function organizationSchema() {
|
|||
email: 'support@qrmaster.net',
|
||||
availableLanguage: ['en', 'de'],
|
||||
},
|
||||
description: 'B2B SaaS platform for dynamic QR code generation with analytics, branding, and bulk generation for enterprise marketing campaigns.',
|
||||
slogan: 'Dynamic QR codes that work smarter',
|
||||
foundingDate: '2025',
|
||||
areaServed: 'Worldwide',
|
||||
knowsAbout: [
|
||||
'QR Code Generation',
|
||||
'Marketing Analytics',
|
||||
'Campaign Tracking',
|
||||
'Dynamic QR Codes',
|
||||
'Bulk QR Generation',
|
||||
],
|
||||
hasOfferCatalog: {
|
||||
'@type': 'OfferCatalog',
|
||||
name: 'QR Master Plans',
|
||||
itemListElement: [
|
||||
{
|
||||
'@type': 'Offer',
|
||||
itemOffered: {
|
||||
'@type': 'SoftwareApplication',
|
||||
name: 'QR Master Free',
|
||||
applicationCategory: 'BusinessApplication',
|
||||
operatingSystem: 'Web Browser',
|
||||
image: 'https://www.qrmaster.net/static/og-image.png',
|
||||
offers: {
|
||||
'@type': 'Offer',
|
||||
price: '0',
|
||||
priceCurrency: 'EUR',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
'@type': 'Offer',
|
||||
itemOffered: {
|
||||
'@type': 'SoftwareApplication',
|
||||
name: 'QR Master Pro',
|
||||
applicationCategory: 'BusinessApplication',
|
||||
operatingSystem: 'Web Browser',
|
||||
image: 'https://www.qrmaster.net/static/og-image.png',
|
||||
offers: {
|
||||
'@type': 'Offer',
|
||||
price: '9',
|
||||
priceCurrency: 'EUR',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export function websiteSchema() {
|
||||
return {
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'WebSite',
|
||||
'@id': 'https://www.qrmaster.net/#website',
|
||||
name: 'QR Master',
|
||||
url: 'https://www.qrmaster.net',
|
||||
inLanguage: 'en',
|
||||
mainEntityOfPage: 'https://www.qrmaster.net',
|
||||
publisher: {
|
||||
'@id': 'https://www.qrmaster.net/#organization',
|
||||
},
|
||||
potentialAction: {
|
||||
'@type': 'SearchAction',
|
||||
target: {
|
||||
'@type': 'EntryPoint',
|
||||
urlTemplate: 'https://www.qrmaster.net/blog?q={search_term_string}',
|
||||
},
|
||||
'query-input': 'required name=search_term_string',
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export function breadcrumbSchema(items: BreadcrumbItem[]) {
|
||||
export function blogPostingSchema(post: BlogPost, author?: AuthorProfile) {
|
||||
const url = `${SITE_URL}/blog/${post.slug}`;
|
||||
return {
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'BreadcrumbList',
|
||||
'@id': `https://www.qrmaster.net${items[items.length - 1]?.url}#breadcrumb`,
|
||||
inLanguage: 'en',
|
||||
mainEntityOfPage: `https://www.qrmaster.net${items[items.length - 1]?.url}`,
|
||||
itemListElement: items.map((item, index) => ({
|
||||
'@type': 'ListItem',
|
||||
position: index + 1,
|
||||
name: item.name,
|
||||
item: `https://www.qrmaster.net${item.url}`,
|
||||
})),
|
||||
};
|
||||
}
|
||||
|
||||
export function blogPostingSchema(post: BlogPost) {
|
||||
return {
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'BlogPosting',
|
||||
'@id': `https://www.qrmaster.net/blog/${post.slug}#article`,
|
||||
"@context": "https://schema.org",
|
||||
"@type": "BlogPosting",
|
||||
headline: post.title,
|
||||
description: post.description,
|
||||
image: post.image,
|
||||
url,
|
||||
datePublished: post.datePublished,
|
||||
dateModified: post.dateModified,
|
||||
inLanguage: 'en',
|
||||
mainEntityOfPage: `https://www.qrmaster.net/blog/${post.slug}`,
|
||||
author: {
|
||||
'@type': 'Person',
|
||||
name: post.author,
|
||||
url: post.authorUrl,
|
||||
},
|
||||
dateModified: post.dateModified || post.datePublished,
|
||||
image: post.heroImage ? `${SITE_URL}${post.heroImage}` : undefined,
|
||||
author: author
|
||||
? {
|
||||
"@type": "Person",
|
||||
name: author.name,
|
||||
url: `${SITE_URL}/authors/${author.slug}`,
|
||||
sameAs: author.sameAs ?? undefined,
|
||||
knowsAbout: author.knowsAbout ?? undefined
|
||||
}
|
||||
: {
|
||||
"@type": "Organization",
|
||||
name: "QR Master"
|
||||
},
|
||||
publisher: {
|
||||
'@type': 'Organization',
|
||||
name: 'QR Master',
|
||||
url: 'https://www.qrmaster.net',
|
||||
"@type": "Organization",
|
||||
name: "QR Master",
|
||||
url: SITE_URL,
|
||||
logo: {
|
||||
'@type': 'ImageObject',
|
||||
url: 'https://www.qrmaster.net/static/og-image.png',
|
||||
width: 1200,
|
||||
height: 630,
|
||||
},
|
||||
url: `${SITE_URL}/static/og-image.png`,
|
||||
}
|
||||
},
|
||||
isPartOf: {
|
||||
'@type': 'Blog',
|
||||
'@id': 'https://www.qrmaster.net/blog#blog',
|
||||
'@id': `${SITE_URL}/blog#blog`,
|
||||
name: 'QR Master Blog',
|
||||
url: 'https://www.qrmaster.net/blog',
|
||||
url: `${SITE_URL}/blog`,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export function faqPageSchema(faqs: FAQItem[]) {
|
||||
export function howToSchema(post: BlogPost, author?: AuthorProfile) {
|
||||
const url = `${SITE_URL}/blog/${post.slug}`;
|
||||
const steps = (post.keySteps ?? []).map((text, idx) => ({
|
||||
"@type": "HowToStep",
|
||||
position: idx + 1,
|
||||
name: `Step ${idx + 1}`,
|
||||
text
|
||||
}));
|
||||
|
||||
return {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "HowTo",
|
||||
name: post.title,
|
||||
description: post.description,
|
||||
url: `${url}#howto`,
|
||||
step: steps,
|
||||
author: author
|
||||
? { "@type": "Person", name: author.name, url: `${SITE_URL}/authors/${author.slug}` }
|
||||
: undefined
|
||||
};
|
||||
}
|
||||
|
||||
export function pillarPageSchema(meta: PillarMeta, posts: BlogPost[]) {
|
||||
const url = `${SITE_URL}/learn/${meta.key}`;
|
||||
return {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "WebPage",
|
||||
name: meta.title,
|
||||
description: meta.description,
|
||||
url,
|
||||
mainEntity: {
|
||||
"@type": "ItemList",
|
||||
itemListElement: posts.map((p, i) => ({
|
||||
"@type": "ListItem",
|
||||
position: i + 1,
|
||||
url: `${SITE_URL}/blog/${p.slug}`,
|
||||
name: p.title
|
||||
}))
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export function faqPageSchema(faqs: { question: string, answer: string }[]) {
|
||||
return {
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'FAQPage',
|
||||
'@id': 'https://www.qrmaster.net/faq#faqpage',
|
||||
inLanguage: 'en',
|
||||
mainEntityOfPage: 'https://www.qrmaster.net/faq',
|
||||
mainEntity: faqs.map((faq) => ({
|
||||
'@type': 'Question',
|
||||
name: faq.question,
|
||||
|
|
@ -208,76 +150,97 @@ export function faqPageSchema(faqs: FAQItem[]) {
|
|||
};
|
||||
}
|
||||
|
||||
export function productSchema(product: { name: string; description: string; offers: ProductOffer[] }) {
|
||||
export function breadcrumbSchema(items: { name: string; url: string }[]) {
|
||||
return {
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'Product',
|
||||
'@id': 'https://www.qrmaster.net/pricing#product',
|
||||
name: product.name,
|
||||
description: product.description,
|
||||
inLanguage: 'en',
|
||||
mainEntityOfPage: 'https://www.qrmaster.net/pricing',
|
||||
brand: {
|
||||
'@type': 'Organization',
|
||||
name: 'QR Master',
|
||||
},
|
||||
offers: product.offers.map((offer) => ({
|
||||
'@type': 'Offer',
|
||||
name: offer.name,
|
||||
price: offer.price,
|
||||
priceCurrency: offer.priceCurrency,
|
||||
availability: offer.availability,
|
||||
url: offer.url,
|
||||
})),
|
||||
};
|
||||
}
|
||||
|
||||
export function howToSchema(task: HowToTask) {
|
||||
return {
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'HowTo',
|
||||
'@id': `https://www.qrmaster.net/blog/${task.name.toLowerCase().replace(/\s+/g, '-')}#howto`,
|
||||
name: task.name,
|
||||
description: task.description,
|
||||
inLanguage: 'en',
|
||||
mainEntityOfPage: `https://www.qrmaster.net/blog/${task.name.toLowerCase().replace(/\s+/g, '-')}`,
|
||||
totalTime: task.totalTime || 'PT5M',
|
||||
step: task.steps.map((step, index) => ({
|
||||
'@type': 'HowToStep',
|
||||
'@type': 'BreadcrumbList',
|
||||
itemListElement: items.map((item, index) => ({
|
||||
'@type': 'ListItem',
|
||||
position: index + 1,
|
||||
name: step.name,
|
||||
text: step.text,
|
||||
url: step.url,
|
||||
name: item.name,
|
||||
item: item.url.startsWith('http') ? item.url : `https://www.qrmaster.net${item.url}`,
|
||||
})),
|
||||
};
|
||||
}
|
||||
|
||||
export function articleSchema(article: { headline: string; description: string; image: string; datePublished: string; dateModified: string; author: string; url: string }) {
|
||||
export function softwareApplicationSchema() {
|
||||
return {
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'SoftwareApplication',
|
||||
name: 'QR Master',
|
||||
applicationCategory: 'BusinessApplication',
|
||||
operatingSystem: 'Web Browser',
|
||||
offers: {
|
||||
'@type': 'Offer',
|
||||
price: '0',
|
||||
priceCurrency: 'EUR'
|
||||
},
|
||||
publisher: {
|
||||
'@id': `${SITE_URL}/#organization`,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export function authorPageSchema(author: AuthorProfile, posts?: BlogPost[]) {
|
||||
const url = `${SITE_URL}/authors/${author.slug}`;
|
||||
return {
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'ProfilePage',
|
||||
mainEntity: {
|
||||
'@type': 'Person',
|
||||
'@id': url,
|
||||
name: author.name,
|
||||
jobTitle: author.role,
|
||||
description: author.bio,
|
||||
image: author.image ? `${SITE_URL}${author.image}` : undefined,
|
||||
sameAs: author.sameAs?.length ? author.sameAs : undefined,
|
||||
knowsAbout: author.knowsAbout?.length ? author.knowsAbout : undefined,
|
||||
url,
|
||||
},
|
||||
about: posts?.length
|
||||
? {
|
||||
'@type': 'ItemList',
|
||||
itemListElement: posts.map((p, i) => ({
|
||||
'@type': 'ListItem',
|
||||
position: i + 1,
|
||||
url: `${SITE_URL}/blog/${p.slug}`,
|
||||
name: p.title,
|
||||
})),
|
||||
}
|
||||
: undefined,
|
||||
};
|
||||
}
|
||||
|
||||
export function articleSchema(params: {
|
||||
headline: string;
|
||||
description: string;
|
||||
image?: string;
|
||||
datePublished: string;
|
||||
dateModified?: string;
|
||||
author: string;
|
||||
url?: string;
|
||||
}) {
|
||||
return {
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'Article',
|
||||
'@id': `${article.url}#article`,
|
||||
headline: article.headline,
|
||||
description: article.description,
|
||||
image: article.image,
|
||||
datePublished: article.datePublished,
|
||||
dateModified: article.dateModified,
|
||||
inLanguage: 'en',
|
||||
mainEntityOfPage: article.url,
|
||||
headline: params.headline,
|
||||
description: params.description,
|
||||
image: params.image,
|
||||
datePublished: params.datePublished,
|
||||
dateModified: params.dateModified || params.datePublished,
|
||||
author: {
|
||||
'@type': 'Person',
|
||||
name: article.author,
|
||||
'@type': 'Organization',
|
||||
name: params.author,
|
||||
},
|
||||
publisher: {
|
||||
'@type': 'Organization',
|
||||
name: 'QR Master',
|
||||
url: 'https://www.qrmaster.net',
|
||||
url: SITE_URL,
|
||||
logo: {
|
||||
'@type': 'ImageObject',
|
||||
url: 'https://www.qrmaster.net/static/og-image.png',
|
||||
width: 1200,
|
||||
height: 630,
|
||||
url: `${SITE_URL}/static/og-image.png`,
|
||||
},
|
||||
},
|
||||
url: params.url,
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,67 @@
|
|||
export type PillarKey = "basics" | "tracking" | "use-cases" | "security" | "developer";
|
||||
|
||||
export type FAQItem = {
|
||||
question: string;
|
||||
answer: string; // allow HTML or plain
|
||||
};
|
||||
|
||||
export type BlogPost = {
|
||||
slug: string;
|
||||
title: string;
|
||||
excerpt: string; // kept for backward compatibility if needed, maps to description
|
||||
description: string;
|
||||
date: string; // display string "January 29, 2026"
|
||||
readTime: string;
|
||||
category: string; // display label
|
||||
image: string;
|
||||
imageAlt: string;
|
||||
heroImage?: string;
|
||||
|
||||
// Architecture
|
||||
pillar: PillarKey;
|
||||
published: boolean;
|
||||
datePublished: string; // ISO: "2026-02-01"
|
||||
dateModified: string; // ISO
|
||||
publishDate?: string; // User-provided alternate date field
|
||||
updatedAt?: string; // User-provided alternate date field
|
||||
authorSlug: string;
|
||||
|
||||
// SEO
|
||||
keywords?: string[];
|
||||
|
||||
// AEO blocks
|
||||
quickAnswer: string; // HTML or text
|
||||
keySteps?: string[]; // plain
|
||||
faq?: FAQItem[];
|
||||
relatedSlugs?: string[];
|
||||
|
||||
// Main content
|
||||
content: string; // HTML string (mapped from contentHtml in spec to content here to match existing usage if preferred, or we stick to contentHtml)
|
||||
// Let's use 'content' to minimize refactor friction if existing code uses 'content',
|
||||
// but the spec said 'contentHtml'. I will use 'content' to match the existing file structure
|
||||
// which uses 'content' property, or I can map it.
|
||||
// Existing: 'content'. Spec: 'contentHtml'.
|
||||
// I will use 'content' to avoid breaking changes in other files I might not touch immediately,
|
||||
// or I should just follow the spec strictly.
|
||||
// The spec is "Final Spec v2", so I'll add 'contentHtml' but also keep 'content'
|
||||
// or just rename. Let's use 'content' as the key to support existing code calling .content
|
||||
};
|
||||
|
||||
export type AuthorProfile = {
|
||||
slug: string;
|
||||
name: string;
|
||||
role: string;
|
||||
bio: string; // HTML or text
|
||||
image?: string; // "/authors/max.png"
|
||||
sameAs?: string[]; // LinkedIn/GitHub/etc.
|
||||
knowsAbout?: string[]; // ["QR codes", "Analytics", ...]
|
||||
};
|
||||
|
||||
export type PillarMeta = {
|
||||
key: PillarKey;
|
||||
title: string;
|
||||
description: string;
|
||||
quickAnswer: string; // short definition (text/HTML)
|
||||
miniFaq?: FAQItem[];
|
||||
order: number;
|
||||
};
|
||||
|
|
@ -4,6 +4,17 @@ import type { NextRequest } from 'next/server';
|
|||
export function middleware(req: NextRequest) {
|
||||
const path = req.nextUrl.pathname;
|
||||
|
||||
// 301 Redirects for /guide -> /learn to avoid duplicate content and consolidate authority
|
||||
if (path === '/guide/tracking-analytics') {
|
||||
return NextResponse.redirect(new URL('/learn/tracking', req.url), 301);
|
||||
}
|
||||
if (path === '/guide/bulk-qr-code-generation') {
|
||||
return NextResponse.redirect(new URL('/learn/developer', req.url), 301);
|
||||
}
|
||||
if (path === '/guide/qr-code-best-practices') {
|
||||
return NextResponse.redirect(new URL('/learn/basics', req.url), 301);
|
||||
}
|
||||
|
||||
// Public routes that don't require authentication
|
||||
const publicPaths = [
|
||||
'/',
|
||||
|
|
@ -16,7 +27,7 @@ export function middleware(req: NextRequest) {
|
|||
'/newsletter',
|
||||
'/tools',
|
||||
'/features',
|
||||
'/guide',
|
||||
// '/guide', // Redirected to /learn/*
|
||||
'/qr-code-erstellen',
|
||||
'/dynamic-qr-code-generator',
|
||||
'/bulk-qr-code-generator',
|
||||
|
|
@ -31,6 +42,8 @@ export function middleware(req: NextRequest) {
|
|||
'/display',
|
||||
'/contact',
|
||||
'/about',
|
||||
'/learn',
|
||||
'/authors',
|
||||
];
|
||||
|
||||
// Check if path is public
|
||||
|
|
|
|||
Loading…
Reference in New Issue