tknuth/QR-master
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

SEO: Fix structured data validation errors, delete static sitemap, and update indexing scripts

Browse Source
This commit is contained in:
Timo Knuth
2026-01-23 23:10:22 +01:00
parent f3637fc2fe
commit eef4855c1b
147 changed files with 24590 additions and 27027 deletions
Download Patch File Download Diff File Expand all files Collapse all files

324
src/app/(main)/(marketing)/tools/text-qr-code/page.tsx Normal file
View File

@@ -0,0 +1,324 @@
import React from 'react';
import type { Metadata } from 'next';
import TextGenerator from './TextGenerator';
import { Type, Shield, Zap, Smartphone, FileText, QrCode, Download, Share2 } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free Text QR Code Generator | Text zu QR Code | QR Master',
},
description: 'Create a QR code for any plain text message. Erstelle einen Text QR Code kostenlos. Works offline & 100% private. Nachricht als QR Code teilen.',
keywords: ['text qr code', 'qr code text generator', 'message to qr code', 'offline qr code', 'text qr generator', 'free qr code', 'text zu qr code', 'qr code text erstellen', 'nachricht in qr code', 'textnachricht qr code', 'geheimnachricht qr code'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/text-qr-code',
},
openGraph: {
title: 'Free Text QR Code Generator | QR Master',
description: 'Turn any text into a QR code instantly. No signup required. 100% text privacy.',
type: 'website',
url: 'https://www.qrmaster.net/tools/text-qr-code',
images: [{ url: '/og-text-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free Text QR Code Generator',
description: 'Create QR codes for text. Instant, free, and private.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'Text QR Code Generator',
'Generate QR codes for plain text messages. Works offline once generated. No data collection.',
'/og-text-generator.png'
),
{
'@type': 'HowTo',
name: 'How to Create a Text QR Code',
description: 'Turn any plain text into a scannable QR code.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Enter Content',
text: 'Type or paste your text message into the input field.',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Customize Design',
text: 'Choose a color and add a frame label like "Scan Me" or "Read".',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Download QR Code',
text: 'Download your high-quality QR code in PNG or SVG format.',
},
{
'@type': 'HowToStep',
position: 4,
name: 'Test',
text: 'Scan the code to ensure the text appears correctly.',
},
{
'@type': 'HowToStep',
position: 5,
name: 'Share',
text: 'Print it or display it where you want people to read the message.',
},
],
totalTime: 'PT30S',
},
generateFaqSchema({
'Is there a character limit?': {
question: 'Is there a character limit?',
answer: 'Yes, we recommend keeping it under 300 characters for optimal scanning. While QR codes can hold more, more text makes the code denser and harder to scan.',
},
'Do I need internet to scan a Text QR code?': {
question: 'Do I need internet to scan a Text QR code?',
answer: 'No. Text QR codes work completely offline. The text content is embedded directly into the QR code pattern.',
},
'Is my text private?': {
question: 'Is my text private?',
answer: 'Yes. This generator runs 100% in your browser. We do not store or see the text you type.',
},
'How do I scan a text QR code?': {
question: 'How do I scan a text QR code?',
answer: 'Open your phone camera or a QR scanner app and point it at the code. The text will appear on your screen automatically.',
},
'Can I edit the text later?': {
question: 'Can I edit the text later?',
answer: 'No, this is a static QR code. The text is permanent. If you need to change it, you must create a new QR code.',
},
}),
],
};
export default function TextQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="Text QR Code Generator" toolSlug="text-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden" style={{ backgroundColor: '#1A1265' }}>
<div className="absolute inset-0 opacity-10">
<svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 C 20 0 50 0 100 100 Z" fill="url(#grad1)" />
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style={{ stopColor: 'white', stopOpacity: 1 }} />
<stop offset="100%" style={{ stopColor: 'white', stopOpacity: 0 }} />
</linearGradient>
</defs>
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-400"></span>
</span>
Free Tool — No Signup Required
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Turn Text content into <br className="hidden lg:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-cyan-400">Scannable QR Codes</span>
</h1>
<p className="text-lg md:text-xl text-indigo-100 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Share notes, codes, keys, or messages instantly. Scan to read without internet.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> 100% Private.</strong>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Shield className="w-4 h-4 text-emerald-400" />
No Data Storage
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Zap className="w-4 h-4 text-amber-400" />
Instant Create
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Smartphone className="w-4 h-4 text-purple-400" />
Offline Readable
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-indigo-500/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform rotate-6 hover:rotate-3 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />
<div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner mb-6 relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#0f172a" level="Q" />
<div className="absolute top-1/2 left-0 w-full h-1 bg-emerald-500 shadow-[0_0_20px_rgba(16,185,129,1)] animate-pulse" />
</div>
<div className="w-full bg-white/10 rounded-xl p-4 backdrop-blur-sm border border-white/10">
<div className="flex items-center gap-3">
<div className="w-8 h-8 rounded-full bg-indigo-500/20 flex items-center justify-center">
<FileText className="w-4 h-4 text-indigo-300" />
</div>
<div className="space-y-1">
<div className="h-1.5 w-20 bg-white/30 rounded-full" />
<div className="h-1.5 w-12 bg-white/20 rounded-full" />
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<TextGenerator />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How Text QR Codes Work
</h2>
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Type className="w-7 h-7 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Enter Text</h3>
<p className="text-slate-600 text-sm">
Type your message, code, or note. It is instantly encoded into the QR pattern.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Zap className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Customize</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Choose a color and add a call-to-action frame.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Download className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Get your ready-to-use QR code.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">4. Test</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Point camera to read text.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Share2 className="w-6 h-6 text-[#1A1265]" />
</div>
<h3 className="font-bold text-slate-900 mb-2">5. Share</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Pass information instantly.
</p>
</article>
</div>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions
</h2>
<p className="text-slate-600 text-center mb-10">
Common questions about Text QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="How do I scan a text QR code?"
answer="Open your phone camera or a QR scanner app and point it at the code. The text will appear on your screen automatically."
/>
<FaqItem
question="Is there a character limit?"
answer="We recommend keeping it under 300 characters for the best scanning experience. Theoretically, QR codes can hold up to 4,296 characters, but the code becomes very complex and harder to scan with standard phone cameras."
/>
<FaqItem
question="Do I need internet to scan a Text QR code?"
answer="No. Text QR codes are 'static' codes, meaning the data is encoded directly into the image pattern. You can scan and read them completely offline, making them perfect for remote locations or secure environments."
/>
<FaqItem
question="Is my text private?"
answer="Yes. We prioritize your privacy. The generation process happens entirely in your browser using JavaScript. Your text data is never sent to our servers or stored anywhere."
/>
<FaqItem
question="Can I change the text after printing?"
answer="No. Static QR codes are permanent. If you need to change the text later, you must generate a new QR code. For editable content, you would need a Dynamic QR Code (which we also offer)."
/>
</div>
</div>
</section>
</div>
</>
);
}
function FaqItem({ question, answer }: { question: string; answer: string }) {
return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
{question}
<span className="transition group-open:rotate-180 text-slate-400">
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
<path d="M6 9l6 6 6-6" />
</svg>
</span>
</summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer}
</div>
</details>
);
}