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

SEO + Stripe

Browse Source
This commit is contained in:
Timo Knuth
2026-04-27 17:10:30 +02:00
parent 11159eb02b
commit c4fac0f726
16 changed files with 2530 additions and 1425 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.gitignore vendored
View File

@@ -48,8 +48,14 @@ docker-compose.override.yml
logs logs
*.log *.log
# project-specific
Leads/
marketing/
output/
remotion/
# local dev script # local dev script
dev-server.js dev-server.js
.gstack/ .gstack/
.env.meta .env.meta

17
Dockerfile
View File

@@ -51,17 +51,18 @@ ENV NEXT_TELEMETRY_DISABLED=1
RUN addgroup --system --gid 1001 nodejs RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs RUN adduser --system --uid 1001 nextjs
COPY --from=builder /app/node_modules ./node_modules COPY --from=builder --chown=nextjs:nodejs /app/node_modules ./node_modules
COPY --from=builder /app/prisma ./prisma COPY --from=builder --chown=nextjs:nodejs /app/prisma ./prisma
COPY --from=builder /app/.next/standalone ./ COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
COPY --from=builder /app/public ./public COPY --from=builder --chown=nextjs:nodejs /app/public ./public
COPY --from=builder /app/docker/entrypoint.sh ./docker/entrypoint.sh COPY --from=builder --chown=nextjs:nodejs /app/docker/entrypoint.sh ./docker/entrypoint.sh
RUN chmod +x ./docker/entrypoint.sh RUN chmod +x ./docker/entrypoint.sh
# --- NEU: Ordner erstellen und Rechte an den nextjs User geben --- # Next writes ISR/prerender artifacts under .next/server/app at runtime.
RUN mkdir -p /app/.next/cache && chown nextjs:nodejs /app/.next/cache RUN mkdir -p /app/.next/cache /app/.next/server/app \
&& chown -R nextjs:nodejs /app/.next
USER nextjs USER nextjs

21
memory/project_summary.md Normal file
View File

@@ -0,0 +1,21 @@
# QR Master Project Summary
## TikTok Growth Positioning
QR Master should be positioned as control after print, not as another generic QR code generator.
Core message:
> A printed QR code is only useful if the destination can change, the scans can be measured, and the business does not need to reprint.
Best early TikTok angles from the supplied account analysis:
- Reprint pain after a link changes.
- Static QR code risks.
- Restaurant QR menu problems.
- Event and flyer changes.
- Business card QR workflows.
- QR scan analytics for print campaigns.
TikTok content should lead with a concrete business mistake or relatable QR frustration, then connect the fix to dynamic QR codes and QR Master.

421
scripts/scrape-us-qrmaster-leads.mjs Normal file
View File

@@ -0,0 +1,421 @@
import fs from 'node:fs/promises';
import path from 'node:path';
const OUTPUT_DIR = path.resolve(process.cwd(), 'output', 'outreach');
const TARGET_PER_NICHE = Number(process.env.LEADS_PER_NICHE || 200);
const CONCURRENCY = Number(process.env.LEAD_FETCH_CONCURRENCY || 8);
const OVERPASS_DELAY_MS = Number(process.env.OVERPASS_DELAY_MS || 20000);
const OVERPASS_429_DELAY_MS = Number(process.env.OVERPASS_429_DELAY_MS || 90000);
const OVERPASS_MAX_ATTEMPTS = Number(process.env.OVERPASS_MAX_ATTEMPTS || 6);
const OVERPASS_URLS = [
'https://overpass-api.de/api/interpreter',
];
const metros = [
['New York', 'NY', 40.7128, -74.006],
['Los Angeles', 'CA', 34.0522, -118.2437],
['Chicago', 'IL', 41.8781, -87.6298],
['Houston', 'TX', 29.7604, -95.3698],
['Phoenix', 'AZ', 33.4484, -112.074],
['Philadelphia', 'PA', 39.9526, -75.1652],
['San Antonio', 'TX', 29.4241, -98.4936],
['San Diego', 'CA', 32.7157, -117.1611],
['Dallas', 'TX', 32.7767, -96.797],
['San Jose', 'CA', 37.3382, -121.8863],
['Austin', 'TX', 30.2672, -97.7431],
['Jacksonville', 'FL', 30.3322, -81.6557],
['Fort Worth', 'TX', 32.7555, -97.3308],
['Columbus', 'OH', 39.9612, -82.9988],
['Charlotte', 'NC', 35.2271, -80.8431],
['San Francisco', 'CA', 37.7749, -122.4194],
['Seattle', 'WA', 47.6062, -122.3321],
['Denver', 'CO', 39.7392, -104.9903],
['Miami', 'FL', 25.7617, -80.1918],
['Nashville', 'TN', 36.1627, -86.7816],
];
const niches = [
{
id: 'photographers',
label: 'Photographers',
targetUseCase: 'portfolio, booking, print cards, event galleries',
queries: [
['craft', 'photographer'],
['shop', 'photo_studio'],
['shop', 'photo'],
],
},
{
id: 'restaurants',
label: 'Restaurants',
targetUseCase: 'menu QR codes, table tents, review QR codes, coupons',
queries: [
['amenity', 'restaurant'],
['amenity', 'cafe'],
],
},
{
id: 'real_estate',
label: 'Real Estate',
targetUseCase: 'yard signs, flyers, open houses, property sheets',
queries: [
['office', 'estate_agent'],
],
},
{
id: 'events_venues',
label: 'Events & Venues',
targetUseCase: 'tickets, schedules, check-in, feedback and post-event links',
queries: [
['amenity', 'events_venue'],
['amenity', 'theatre'],
['amenity', 'conference_centre'],
['tourism', 'attraction'],
],
},
{
id: 'wellness_beauty',
label: 'Wellness & Beauty',
targetUseCase: 'booking links, price lists, reviews, loyalty offers',
queries: [
['shop', 'beauty'],
['shop', 'hairdresser'],
['leisure', 'fitness_centre'],
['amenity', 'spa'],
],
},
];
function sleep(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
function csvEscape(value) {
const text = String(value ?? '');
if (/[",\n\r]/.test(text)) {
return `"${text.replaceAll('"', '""')}"`;
}
return text;
}
function normalizeWebsite(raw) {
if (!raw) return '';
let value = String(raw).trim();
if (!value) return '';
if (value.startsWith('mailto:') || value.includes('@') && !value.includes('/')) return '';
if (!/^https?:\/\//i.test(value)) value = `https://${value}`;
try {
const url = new URL(value);
if (!url.hostname.includes('.')) return '';
url.hash = '';
return url.toString().replace(/\/$/, '');
} catch {
return '';
}
}
function getTag(tags, names) {
for (const name of names) {
if (tags?.[name]) return tags[name];
}
return '';
}
function buildOverpassQuery(niche, metro, offset) {
const [, , lat, lon] = metro;
const radius = 25000 + offset * 10000;
const clauses = niche.queries.flatMap(([key, value]) => [
`nwr(around:${radius},${lat},${lon})["${key}"="${value}"]["website"];`,
`nwr(around:${radius},${lat},${lon})["${key}"="${value}"]["contact:website"];`,
`nwr(around:${radius},${lat},${lon})["${key}"="${value}"]["email"];`,
`nwr(around:${radius},${lat},${lon})["${key}"="${value}"]["contact:email"];`,
]).join('\n');
return `[out:json][timeout:45];
(
${clauses}
);
out tags center ${Math.min(TARGET_PER_NICHE * 2, 500)};`;
}
async function fetchOverpass(query, attempt = 0) {
const endpoint = OVERPASS_URLS[attempt % OVERPASS_URLS.length];
const controller = new AbortController();
const timer = setTimeout(() => controller.abort(), 90000);
try {
const response = await fetch(endpoint, {
method: 'POST',
headers: { 'content-type': 'application/x-www-form-urlencoded;charset=UTF-8' },
body: new URLSearchParams({ data: query }),
signal: controller.signal,
});
if (!response.ok) {
if (response.status === 429 && attempt < OVERPASS_MAX_ATTEMPTS) {
const waitMs = OVERPASS_429_DELAY_MS + attempt * 30000;
console.warn(`Overpass rate limited; waiting ${Math.round(waitMs / 1000)}s before retry ${attempt + 1}/${OVERPASS_MAX_ATTEMPTS}`);
await sleep(waitMs);
return fetchOverpass(query, attempt + 1);
}
if (attempt < OVERPASS_MAX_ATTEMPTS) {
await sleep(5000 * (attempt + 1));
return fetchOverpass(query, attempt + 1);
}
throw new Error(`Overpass ${response.status} ${response.statusText}`);
}
return response.json();
} catch (error) {
if (attempt < OVERPASS_MAX_ATTEMPTS) {
await sleep(5000 * (attempt + 1));
return fetchOverpass(query, attempt + 1);
}
throw error;
} finally {
clearTimeout(timer);
}
}
function elementToLead(element, niche, metro) {
const tags = element.tags || {};
const website = normalizeWebsite(getTag(tags, ['contact:website', 'website', 'url']));
const email = getTag(tags, ['contact:email', 'email']);
const phone = getTag(tags, ['contact:phone', 'phone']);
const street = [tags['addr:housenumber'], tags['addr:street']].filter(Boolean).join(' ');
const city = tags['addr:city'] || metro[0];
const state = tags['addr:state'] || metro[1];
return {
niche: niche.id,
niche_label: niche.label,
company: tags.name || '',
website,
email,
phone,
city,
state,
country: 'US',
street,
source: 'OpenStreetMap Overpass',
source_id: `${element.type}/${element.id}`,
source_url: `https://www.openstreetmap.org/${element.type}/${element.id}`,
personalization_signal: '',
qr_use_case: niche.targetUseCase,
lead_score: 0,
email_source: email ? 'osm' : '',
opt_out_required: 'yes',
};
}
function visibleTextEmails(text) {
const normalized = text
.replaceAll('[at]', '@')
.replaceAll('(at)', '@')
.replaceAll(' at ', '@')
.replaceAll('[dot]', '.')
.replaceAll('(dot)', '.')
.replaceAll(' dot ', '.');
const matches = normalized.match(/[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g) || [];
return [...new Set(matches.map((email) => email.toLowerCase()))]
.filter((email) => !email.endsWith('.png') && !email.endsWith('.jpg') && !email.includes('example.com'))
.filter((email) => !email.includes('wixpress.com') && !email.includes('sentry.io'));
}
function extractContactLinks(html, baseUrl) {
const links = [];
const regex = /href=["']([^"']+)["']/gi;
let match;
while ((match = regex.exec(html))) {
const href = match[1];
if (/^(mailto:|tel:)/i.test(href)) continue;
if (!/(contact|about|team|booking|book|wedding|private-events|catering|visit|location)/i.test(href)) continue;
try {
const url = new URL(href, baseUrl);
if (url.hostname === new URL(baseUrl).hostname) {
url.hash = '';
links.push(url.toString());
}
} catch {
// Ignore malformed links.
}
}
return [...new Set(links)].slice(0, 3);
}
async function fetchText(url) {
const controller = new AbortController();
const timer = setTimeout(() => controller.abort(), 10000);
try {
const response = await fetch(url, {
headers: {
'user-agent': 'QR Master lead research bot (+https://qrmaster.net/contact)',
accept: 'text/html,application/xhtml+xml',
},
signal: controller.signal,
redirect: 'follow',
});
if (!response.ok) return '';
const contentType = response.headers.get('content-type') || '';
if (!contentType.includes('text/html')) return '';
return await response.text();
} catch {
return '';
} finally {
clearTimeout(timer);
}
}
async function enrichLead(lead) {
if (!lead.website || lead.email) {
return scoreLead(lead);
}
const homepage = await fetchText(lead.website);
const emails = visibleTextEmails(homepage);
const contactLinks = extractContactLinks(homepage, lead.website);
for (const link of contactLinks) {
if (emails.length > 0) break;
const html = await fetchText(link);
emails.push(...visibleTextEmails(html));
}
const uniqueEmails = [...new Set(emails)];
if (uniqueEmails.length > 0) {
lead.email = uniqueEmails[0];
lead.email_source = 'website';
}
return scoreLead(lead);
}
function scoreLead(lead) {
let score = 30;
if (lead.website) score += 20;
if (lead.email) score += 30;
if (lead.phone) score += 5;
if (!/(gmail|yahoo|hotmail|outlook|icloud)\.com$/i.test(lead.email || '')) score += lead.email ? 10 : 0;
if (lead.niche === 'real_estate' || lead.niche === 'restaurants') score += 5;
const signalByNiche = {
photographers: `${lead.company} can use dynamic QR codes on print cards, gallery cards, event handouts, and portfolio links.`,
restaurants: `${lead.company} can use dynamic QR codes for menus, table tents, reviews, coupons, and seasonal specials.`,
real_estate: `${lead.company} can use dynamic QR codes on yard signs, flyers, property sheets, and open house material.`,
events_venues: `${lead.company} can use dynamic QR codes for schedules, ticketing, venue maps, check-in, and post-event feedback.`,
wellness_beauty: `${lead.company} can use dynamic QR codes for booking pages, service menus, price lists, reviews, and loyalty offers.`,
};
lead.lead_score = Math.min(score, 100);
lead.personalization_signal = signalByNiche[lead.niche] || '';
return lead;
}
async function mapLimit(items, limit, mapper) {
const results = [];
let index = 0;
async function worker() {
while (index < items.length) {
const current = index++;
results[current] = await mapper(items[current], current);
}
}
await Promise.all(Array.from({ length: Math.min(limit, items.length) }, worker));
return results;
}
async function collectNiche(niche) {
const leadsByKey = new Map();
for (let pass = 0; pass < 2 && leadsByKey.size < TARGET_PER_NICHE * 2; pass++) {
for (const metro of metros) {
if (leadsByKey.size >= TARGET_PER_NICHE * 2) break;
const query = buildOverpassQuery(niche, metro, pass);
try {
const data = await fetchOverpass(query);
for (const element of data.elements || []) {
const lead = elementToLead(element, niche, metro);
if (!lead.company) continue;
if (!lead.website && !lead.email) continue;
const key = lead.website || `${lead.company}|${lead.city}|${lead.state}`.toLowerCase();
if (!leadsByKey.has(key)) leadsByKey.set(key, lead);
}
} catch (error) {
console.warn(`[${niche.id}] ${metro[0]} skipped: ${error.message}`);
}
await sleep(OVERPASS_DELAY_MS);
}
}
const rawLeads = [...leadsByKey.values()].slice(0, TARGET_PER_NICHE * 2);
console.log(`[${niche.id}] collected ${rawLeads.length}; enriching...`);
const enriched = await mapLimit(rawLeads, CONCURRENCY, enrichLead);
return enriched
.filter((lead) => lead.website || lead.email)
.sort((a, b) => b.lead_score - a.lead_score)
.slice(0, TARGET_PER_NICHE);
}
function toCsv(leads) {
const headers = [
'niche',
'niche_label',
'company',
'website',
'email',
'email_source',
'phone',
'city',
'state',
'country',
'street',
'lead_score',
'qr_use_case',
'personalization_signal',
'source',
'source_id',
'source_url',
'opt_out_required',
];
return [
headers.join(','),
...leads.map((lead) => headers.map((header) => csvEscape(lead[header])).join(',')),
].join('\n');
}
async function main() {
await fs.mkdir(OUTPUT_DIR, { recursive: true });
const allLeads = [];
for (const niche of niches) {
const leads = await collectNiche(niche);
allLeads.push(...leads);
const dated = new Date().toISOString().slice(0, 10);
await fs.writeFile(path.join(OUTPUT_DIR, `qrmaster-us-leads-${niche.id}-${dated}.csv`), toCsv(leads), 'utf8');
await fs.writeFile(path.join(OUTPUT_DIR, `qrmaster-us-leads-${niche.id}-${dated}.json`), JSON.stringify(leads, null, 2), 'utf8');
console.log(`[${niche.id}] kept ${leads.length}`);
}
const byKey = new Map();
for (const lead of allLeads) {
const key = lead.email || lead.website || `${lead.company}|${lead.city}|${lead.state}`.toLowerCase();
if (!byKey.has(key)) byKey.set(key, lead);
}
const deduped = [...byKey.values()].sort((a, b) => b.lead_score - a.lead_score);
const dated = new Date().toISOString().slice(0, 10);
const csvPath = path.join(OUTPUT_DIR, `qrmaster-us-leads-${dated}.csv`);
const jsonPath = path.join(OUTPUT_DIR, `qrmaster-us-leads-${dated}.json`);
await fs.writeFile(csvPath, toCsv(deduped), 'utf8');
await fs.writeFile(jsonPath, JSON.stringify(deduped, null, 2), 'utf8');
const summary = niches.map((niche) => {
const leads = deduped.filter((lead) => lead.niche === niche.id);
const withEmail = leads.filter((lead) => lead.email).length;
return `${niche.label}: ${leads.length} leads, ${withEmail} emails`;
}).join('\n');
console.log(`\nWrote ${deduped.length} leads`);
console.log(csvPath);
console.log(jsonPath);
console.log(summary);
}
main().catch((error) => {
console.error(error);
process.exitCode = 1;
});

2
src/app/(main)/(marketing)/dynamic-qr-code-generator/page.tsx
View File

@@ -277,7 +277,7 @@ const howToSchema = {
'@id': 'https://www.qrmaster.net/dynamic-qr-code-generator#howto', '@id': 'https://www.qrmaster.net/dynamic-qr-code-generator#howto',
name: 'How to create a dynamic QR code', name: 'How to create a dynamic QR code',
datePublished: '2024-01-01', datePublished: '2024-01-01',
dateModified: '2025-06-01', dateModified: '2026-04-27',
author: { author: {
'@type': 'Person', '@type': 'Person',
name: 'Timo Knuth', name: 'Timo Knuth',

2
src/app/(main)/(marketing)/tools/barcode-generator/BarcodeGuide.tsx
View File

@@ -18,7 +18,7 @@ export function BarcodeGuide() {
</h2> </h2>
</div> </div>
<p className="text-xs text-slate-400 mb-8 not-prose"> <p className="text-xs text-slate-400 mb-8 not-prose">
By <strong className="text-slate-600">Timo Knuth</strong>, QR Master · Last updated: June 2025 · GS1-verified content By <strong className="text-slate-600">Timo Knuth</strong>, QR Master · Last updated: April 2026 · GS1-verified content
</p> </p>
<p className="lead text-xl text-slate-600"> <p className="lead text-xl text-slate-600">

2
src/app/(main)/(marketing)/tools/barcode-generator/page.tsx
View File

@@ -56,7 +56,7 @@ const jsonLd = {
'@type': 'HowTo', '@type': 'HowTo',
name: 'How to Create a Barcode', name: 'How to Create a Barcode',
datePublished: '2024-06-01', datePublished: '2024-06-01',
dateModified: '2025-06-01', dateModified: '2026-04-27',
author: { author: {
'@type': 'Person', '@type': 'Person',
name: 'Timo Knuth', name: 'Timo Knuth',

2
src/app/(main)/(marketing)/tools/google-review-qr-code/page.tsx
View File

@@ -50,7 +50,7 @@ const jsonLd = {
'@type': 'HowTo', '@type': 'HowTo',
name: 'How to Create a Google Review QR Code', name: 'How to Create a Google Review QR Code',
datePublished: '2024-01-01', datePublished: '2024-01-01',
dateModified: '2025-06-01', dateModified: '2026-04-27',
author: { author: {
'@type': 'Person', '@type': 'Person',
name: 'Timo Knuth', name: 'Timo Knuth',

794
src/app/(main)/(marketing)/tools/instagram-qr-code/page.tsx
View File

@@ -1,397 +1,397 @@
import React from 'react'; import React from 'react';
import type { Metadata } from 'next'; import type { Metadata } from 'next';
import InstagramGenerator from './InstagramGenerator'; import InstagramGenerator from './InstagramGenerator';
import { Instagram, Shield, Zap, Smartphone, Camera, Heart, Download, Share2, TrendingUp } from 'lucide-react'; import { Instagram, Shield, Zap, Smartphone, Camera, Heart, Download, Share2, TrendingUp } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react'; import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema'; import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools'; import { RelatedTools } from '@/components/marketing/RelatedTools';
import { GrowthLinksSection } from '@/components/marketing/GrowthLinksSection'; import { GrowthLinksSection } from '@/components/marketing/GrowthLinksSection';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils'; import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata // SEO Optimized Metadata
export const metadata: Metadata = { export const metadata: Metadata = {
title: { title: {
absolute: 'Free Instagram QR Code Generator | Get More Followers | QR Master', absolute: 'Free Instagram QR Code Generator | Get More Followers | QR Master',
}, },
description: 'Create a free Instagram QR code for your profile. Scanners follow you instantly — no app login required. Customizable & downloadable in seconds.', description: 'Create a free Instagram QR code for your profile. Scanners follow you instantly — no app login required. Customizable & downloadable in seconds.',
keywords: ['instagram qr code', 'insta qr generator', 'ig nametag generator', 'instagram follow qr', 'social media qr code', 'qr code for instagram', 'instagram profile qr code', 'insta qr code', 'instagram nametag generator'], keywords: ['instagram qr code', 'insta qr generator', 'ig nametag generator', 'instagram follow qr', 'social media qr code', 'qr code for instagram', 'instagram profile qr code', 'insta qr code', 'instagram nametag generator'],
alternates: { alternates: {
canonical: 'https://www.qrmaster.net/tools/instagram-qr-code', canonical: 'https://www.qrmaster.net/tools/instagram-qr-code',
languages: { languages: {
'x-default': 'https://www.qrmaster.net/tools/instagram-qr-code', 'x-default': 'https://www.qrmaster.net/tools/instagram-qr-code',
en: 'https://www.qrmaster.net/tools/instagram-qr-code', en: 'https://www.qrmaster.net/tools/instagram-qr-code',
}, },
}, },
openGraph: { openGraph: {
title: 'Free Instagram QR Code Generator | QR Master', title: 'Free Instagram QR Code Generator | QR Master',
description: 'Generate QR codes to grow your Instagram following. Instant app redirect.', description: 'Generate QR codes to grow your Instagram following. Instant app redirect.',
type: 'website', type: 'website',
url: 'https://www.qrmaster.net/tools/instagram-qr-code', url: 'https://www.qrmaster.net/tools/instagram-qr-code',
images: [{ url: '/og-instagram-generator.png', width: 1200, height: 630 }], images: [{ url: '/og-instagram-generator.png', width: 1200, height: 630 }],
}, },
twitter: { twitter: {
card: 'summary_large_image', card: 'summary_large_image',
title: 'Free Instagram QR Code Generator', title: 'Free Instagram QR Code Generator',
description: 'Create QR codes for Instagram. Boost your followers.', description: 'Create QR codes for Instagram. Boost your followers.',
}, },
robots: { robots: {
index: true, index: true,
follow: true, follow: true,
}, },
}; };
// JSON-LD Structured Data // JSON-LD Structured Data
const jsonLd = { const jsonLd = {
'@context': 'https://schema.org', '@context': 'https://schema.org',
'@graph': [ '@graph': [
generateSoftwareAppSchema( generateSoftwareAppSchema(
'Instagram QR Code Generator', 'Instagram QR Code Generator',
'Generate QR codes that direct users to an Instagram profile or post.', 'Generate QR codes that direct users to an Instagram profile or post.',
'/og-instagram-generator.png' '/og-instagram-generator.png'
), ),
{ {
'@type': 'HowTo', '@type': 'HowTo',
name: 'How to Create an Instagram QR Code', name: 'How to Create an Instagram QR Code',
description: 'Create a QR code that opens an Instagram profile.', description: 'Create a QR code that opens an Instagram profile.',
datePublished: '2024-01-01', datePublished: '2024-01-01',
dateModified: '2025-06-01', dateModified: '2026-04-27',
author: { author: {
'@type': 'Person', '@type': 'Person',
name: 'Timo Knuth', name: 'Timo Knuth',
url: 'https://www.qrmaster.net/authors/timo', url: 'https://www.qrmaster.net/authors/timo',
}, },
step: [ step: [
{ {
'@type': 'HowToStep', '@type': 'HowToStep',
position: 1, position: 1,
name: 'Enter Username', name: 'Enter Username',
text: 'Type your Instagram handle (e.g. @yourbrand) or paste your profile link.', text: 'Type your Instagram handle (e.g. @yourbrand) or paste your profile link.',
}, },
{ {
'@type': 'HowToStep', '@type': 'HowToStep',
position: 2, position: 2,
name: 'Customize', name: 'Customize',
text: 'Choose a gradient color that matches the Instagram vibe or your own brand.', text: 'Choose a gradient color that matches the Instagram vibe or your own brand.',
}, },
{ {
'@type': 'HowToStep', '@type': 'HowToStep',
position: 3, position: 3,
name: 'Download', name: 'Download',
text: 'Save the QR code image.', text: 'Save the QR code image.',
}, },
{ {
'@type': 'HowToStep', '@type': 'HowToStep',
position: 4, position: 4,
name: 'Test', name: 'Test',
text: 'Scan the code to ensure it opens the correct profile.', text: 'Scan the code to ensure it opens the correct profile.',
}, },
{ {
'@type': 'HowToStep', '@type': 'HowToStep',
position: 5, position: 5,
name: 'Share', name: 'Share',
text: 'Put it on your packaging, business cards, or storefront.', text: 'Put it on your packaging, business cards, or storefront.',
}, },
], ],
totalTime: 'PT30S', totalTime: 'PT30S',
}, },
generateFaqSchema({ generateFaqSchema({
'Is this an Instagram Nametag?': { 'Is this an Instagram Nametag?': {
question: 'Is this an Instagram Nametag?', question: 'Is this an Instagram Nametag?',
answer: 'It works similarly! While Instagram has its own internal "Nametag" or "QR Code" feature, our generator allows you to create a standard QR code that is more customizable and can be tracked with our Dynamic plans.', answer: 'It works similarly! While Instagram has its own internal "Nametag" or "QR Code" feature, our generator allows you to create a standard QR code that is more customizable and can be tracked with our Dynamic plans.',
}, },
'Does it open the Instagram app?': { 'Does it open the Instagram app?': {
question: 'Does it open the Instagram app?', question: 'Does it open the Instagram app?',
answer: 'Yes. When scanned on a mobile device with Instagram installed, it will deep-link directly to the profile in the app.', answer: 'Yes. When scanned on a mobile device with Instagram installed, it will deep-link directly to the profile in the app.',
}, },
'Can I link to a specific photo or reel?': { 'Can I link to a specific photo or reel?': {
question: 'Can I link to a specific photo or reel?', question: 'Can I link to a specific photo or reel?',
answer: 'Yes! Instead of your username, just paste the full link to the specific post or reel.', answer: 'Yes! Instead of your username, just paste the full link to the specific post or reel.',
}, },
'Is it free?': { 'Is it free?': {
question: 'Is it free?', question: 'Is it free?',
answer: 'Yes, generating this QR code is 100% free.', answer: 'Yes, generating this QR code is 100% free.',
}, },
'Can I track scans?': { 'Can I track scans?': {
question: 'Can I track scans?', question: 'Can I track scans?',
answer: 'Not with this static tool. If you need scan analytics, consider using our Dynamic QR Code solution.', answer: 'Not with this static tool. If you need scan analytics, consider using our Dynamic QR Code solution.',
}, },
}), }),
], ],
}; };
export default function InstagramQRCodePage() { export default function InstagramQRCodePage() {
return ( return (
<> <>
<script <script
type="application/ld+json" type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/> />
<ToolBreadcrumb toolName="Instagram QR Code Generator" toolSlug="instagram-qr-code" /> <ToolBreadcrumb toolName="Instagram QR Code Generator" toolSlug="instagram-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}> <div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */} {/* 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 bg-gradient-to-br from-[#833AB4] via-[#FD1D1D] to-[#FCA145]"> <section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden bg-gradient-to-br from-[#833AB4] via-[#FD1D1D] to-[#FCA145]">
<div className="absolute inset-0 opacity-10"> <div className="absolute inset-0 opacity-10">
<svg className="w-full h-full" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none"> <svg className="w-full h-full" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
<circle cx="0" cy="0" r="40" fill="white" fillOpacity="0.1" /> <circle cx="0" cy="0" r="40" fill="white" fillOpacity="0.1" />
<circle cx="100" cy="100" r="50" fill="white" fillOpacity="0.1" /> <circle cx="100" cy="100" r="50" fill="white" fillOpacity="0.1" />
</svg> </svg>
</div> </div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10"> <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="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"> <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="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-pink-300 opacity-75"></span> <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-pink-300 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-pink-300"></span> <span className="relative inline-flex rounded-full h-2 w-2 bg-pink-300"></span>
</span> </span>
Free Tool — No Signup Required Free Tool — No Signup Required
</div> </div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6"> <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Instagram QR Code Generator<br className="hidden lg:block" /> Instagram QR Code Generator<br className="hidden lg:block" />
<span className="text-white drop-shadow-md">— Boost Your Following</span> <span className="text-white drop-shadow-md">— Boost Your Following</span>
</h1> </h1>
<p className="text-lg md:text-xl text-pink-50 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed"> <p className="text-lg md:text-xl text-pink-50 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Connect physically to digitally. Let customers scan to follow your Instagram profile instantly. Connect physically to digitally. Let customers scan to follow your Instagram profile instantly.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Grow your brand effortlessly.</strong> <strong className="text-white block sm:inline mt-2 sm:mt-0"> Grow your brand effortlessly.</strong>
</p> </p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80"> <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/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm"> <div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Heart className="w-4 h-4 text-pink-200" /> <Heart className="w-4 h-4 text-pink-200" />
More Likes More Likes
</div> </div>
<div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm"> <div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Zap className="w-4 h-4 text-yellow-200" /> <Zap className="w-4 h-4 text-yellow-200" />
Instant Follow Instant Follow
</div> </div>
<div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm"> <div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Smartphone className="w-4 h-4 text-white" /> <Smartphone className="w-4 h-4 text-white" />
App Deep Link App Deep Link
</div> </div>
</div> </div>
</div> </div>
{/* Visual Abstract */} {/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]"> <div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-white/10 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" /> <div className="absolute w-[500px] h-[500px] bg-white/10 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-3 hover:rotate-0 transition-all duration-700 group"> <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-3 hover:rotate-0 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" /> <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />
<div className="w-full bg-white rounded-xl shadow-lg p-4 mb-6 relative overflow-hidden flex flex-col items-center"> <div className="w-full bg-white rounded-xl shadow-lg p-4 mb-6 relative overflow-hidden flex flex-col items-center">
<div className="w-16 h-16 rounded-full p-[2px] bg-gradient-to-tr from-[#FCA145] via-[#FD1D1D] to-[#833AB4] mb-2"> <div className="w-16 h-16 rounded-full p-[2px] bg-gradient-to-tr from-[#FCA145] via-[#FD1D1D] to-[#833AB4] mb-2">
<div className="w-full h-full rounded-full bg-white p-1"> <div className="w-full h-full rounded-full bg-white p-1">
<div className="w-full h-full rounded-full bg-slate-200" /> <div className="w-full h-full rounded-full bg-slate-200" />
</div> </div>
</div> </div>
<div className="text-sm font-bold text-slate-900">@yourbrand</div> <div className="text-sm font-bold text-slate-900">@yourbrand</div>
</div> </div>
<div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner relative overflow-hidden flex items-center justify-center"> <div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#E1306C" level="Q" /> <QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#E1306C" level="Q" />
</div> </div>
{/* Floating Badge */} {/* Floating Badge */}
<div className="absolute -bottom-6 -left-6 bg-white py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300"> <div className="absolute -bottom-6 -left-6 bg-white py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-gradient-to-tr from-[#FCA145] to-[#E1306C] p-2 rounded-full text-white"> <div className="bg-gradient-to-tr from-[#FCA145] to-[#E1306C] p-2 rounded-full text-white">
<Camera className="w-5 h-5" /> <Camera className="w-5 h-5" />
</div> </div>
<div className="text-left"> <div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Profile</div> <div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Profile</div>
<div className="text-sm font-bold text-slate-900">Following</div> <div className="text-sm font-bold text-slate-900">Following</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
{/* GENERATOR SECTION */} {/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8"> <section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<InstagramGenerator /> <InstagramGenerator />
</section> </section>
{/* HOW IT WORKS */} {/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white"> <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12"> <h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How Instagram QR Codes Work How Instagram QR Codes Work
</h2> </h2>
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8"> <div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
<article className="text-center"> <article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#E1306C]/10 flex items-center justify-center mx-auto mb-4"> <div className="w-14 h-14 rounded-2xl bg-[#E1306C]/10 flex items-center justify-center mx-auto mb-4">
<Instagram className="w-7 h-7 text-[#E1306C]" /> <Instagram className="w-7 h-7 text-[#E1306C]" />
</div> </div>
<h3 className="font-bold text-slate-900 mb-2">1. Username</h3> <h3 className="font-bold text-slate-900 mb-2">1. Username</h3>
<p className="text-slate-600 text-sm"> <p className="text-slate-600 text-sm">
Enter your Instagram handle. No need to login or connect your account. Enter your Instagram handle. No need to login or connect your account.
</p> </p>
</article> </article>
<article className="text-center"> <article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#E1306C]/10 flex items-center justify-center mx-auto mb-4"> <div className="w-14 h-14 rounded-2xl bg-[#E1306C]/10 flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-7 h-7 text-[#E1306C]" /> <Smartphone className="w-7 h-7 text-[#E1306C]" />
</div> </div>
<h3 className="font-bold text-slate-900 mb-2">2. Print</h3> <h3 className="font-bold text-slate-900 mb-2">2. Print</h3>
<p className="text-slate-600 text-sm"> <p className="text-slate-600 text-sm">
Add the QR code to your packaging, business cards, or table tents. Add the QR code to your packaging, business cards, or table tents.
</p> </p>
</article> </article>
<article className="text-center"> <article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#E1306C]/10 flex items-center justify-center mx-auto mb-4"> <div className="w-12 h-12 rounded-2xl bg-[#E1306C]/10 flex items-center justify-center mx-auto mb-4">
<Download className="w-6 h-6 text-[#E1306C]" /> <Download className="w-6 h-6 text-[#E1306C]" />
</div> </div>
<h3 className="font-bold text-slate-900 mb-2">3. Download</h3> <h3 className="font-bold text-slate-900 mb-2">3. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed"> <p className="text-slate-600 text-xs leading-relaxed">
Save your custom QR code. Save your custom QR code.
</p> </p>
</article> </article>
<article className="text-center"> <article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#E1306C]/10 flex items-center justify-center mx-auto mb-4"> <div className="w-12 h-12 rounded-2xl bg-[#E1306C]/10 flex items-center justify-center mx-auto mb-4">
<Heart className="w-6 h-6 text-[#E1306C]" /> <Heart className="w-6 h-6 text-[#E1306C]" />
</div> </div>
<h3 className="font-bold text-slate-900 mb-2">4. Scan</h3> <h3 className="font-bold text-slate-900 mb-2">4. Scan</h3>
<p className="text-slate-600 text-xs leading-relaxed"> <p className="text-slate-600 text-xs leading-relaxed">
Fans scan to instantly visit your profile. Fans scan to instantly visit your profile.
</p> </p>
</article> </article>
<article className="text-center"> <article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#E1306C]/10 flex items-center justify-center mx-auto mb-4"> <div className="w-12 h-12 rounded-2xl bg-[#E1306C]/10 flex items-center justify-center mx-auto mb-4">
<Share2 className="w-6 h-6 text-[#E1306C]" /> <Share2 className="w-6 h-6 text-[#E1306C]" />
</div> </div>
<h3 className="font-bold text-slate-900 mb-2">5. Grow</h3> <h3 className="font-bold text-slate-900 mb-2">5. Grow</h3>
<p className="text-slate-600 text-xs leading-relaxed"> <p className="text-slate-600 text-xs leading-relaxed">
Convert offline traffic into followers. Convert offline traffic into followers.
</p> </p>
</article> </article>
</div> </div>
</div> </div>
</section> </section>
{/* STATS SECTION */} {/* STATS SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-[#833AB4]/5 via-[#FD1D1D]/5 to-[#FCA145]/5"> <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-[#833AB4]/5 via-[#FD1D1D]/5 to-[#FCA145]/5">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<div className="text-center mb-10"> <div className="text-center mb-10">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#E1306C]/10 text-[#E1306C] text-sm font-semibold mb-4"> <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#E1306C]/10 text-[#E1306C] text-sm font-semibold mb-4">
<TrendingUp className="w-4 h-4" /> <TrendingUp className="w-4 h-4" />
Why Instagram QR Codes Work Why Instagram QR Codes Work
</div> </div>
<h2 className="text-3xl font-bold text-slate-900 mb-3">The Numbers Behind the Strategy</h2> <h2 className="text-3xl font-bold text-slate-900 mb-3">The Numbers Behind the Strategy</h2>
<p className="text-slate-500 text-sm max-w-xl mx-auto">Independent research on Instagram reach and QR code effectiveness.</p> <p className="text-slate-500 text-sm max-w-xl mx-auto">Independent research on Instagram reach and QR code effectiveness.</p>
</div> </div>
<div className="grid md:grid-cols-2 gap-6"> <div className="grid md:grid-cols-2 gap-6">
<div className="bg-white rounded-2xl p-7 shadow-sm border border-slate-100"> <div className="bg-white rounded-2xl p-7 shadow-sm border border-slate-100">
<div className="text-4xl font-extrabold text-[#E1306C] mb-2">2 Billion</div> <div className="text-4xl font-extrabold text-[#E1306C] mb-2">2 Billion</div>
<div className="font-semibold text-slate-800 mb-1">Monthly Active Users on Instagram</div> <div className="font-semibold text-slate-800 mb-1">Monthly Active Users on Instagram</div>
<p className="text-slate-500 text-sm">Instagram has over 2 billion monthly active users globally, making it one of the largest social platforms for brand discovery. A single well-placed QR code taps directly into that audience.</p> <p className="text-slate-500 text-sm">Instagram has over 2 billion monthly active users globally, making it one of the largest social platforms for brand discovery. A single well-placed QR code taps directly into that audience.</p>
<div className="mt-4 text-xs text-slate-400">Source: Meta, Instagram Press (2023)</div> <div className="mt-4 text-xs text-slate-400">Source: Meta, Instagram Press (2023)</div>
</div> </div>
<div className="bg-white rounded-2xl p-7 shadow-sm border border-slate-100"> <div className="bg-white rounded-2xl p-7 shadow-sm border border-slate-100">
<div className="text-4xl font-extrabold text-[#833AB4] mb-2">83%</div> <div className="text-4xl font-extrabold text-[#833AB4] mb-2">83%</div>
<div className="font-semibold text-slate-800 mb-1">of Instagram Users Discover New Brands There</div> <div className="font-semibold text-slate-800 mb-1">of Instagram Users Discover New Brands There</div>
<p className="text-slate-500 text-sm">83% of Instagram users say they discover new products and brands on the platform. An Instagram QR code on your packaging or storefront converts that discovery moment offline → online.</p> <p className="text-slate-500 text-sm">83% of Instagram users say they discover new products and brands on the platform. An Instagram QR code on your packaging or storefront converts that discovery moment offline → online.</p>
<div className="mt-4 text-xs text-slate-400">Source: Facebook for Business / Instagram Business (2019)</div> <div className="mt-4 text-xs text-slate-400">Source: Facebook for Business / Instagram Business (2019)</div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<RelatedTools /> <RelatedTools />
<GrowthLinksSection <GrowthLinksSection
eyebrow="Grow Your Social Presence" eyebrow="Grow Your Social Presence"
title="More Tools to Build Your Brand Online" title="More Tools to Build Your Brand Online"
description="Combine your Instagram QR code with other social and marketing tools from QR Master." description="Combine your Instagram QR code with other social and marketing tools from QR Master."
pageType="use_case" pageType="use_case"
cluster="social-media" cluster="social-media"
useCase="instagram-qr-code" useCase="instagram-qr-code"
links={[ links={[
{ {
href: '/tools/whatsapp-qr-code', href: '/tools/whatsapp-qr-code',
title: 'WhatsApp QR Code', title: 'WhatsApp QR Code',
description: 'Let customers message you instantly — no number sharing required.', description: 'Let customers message you instantly — no number sharing required.',
ctaLabel: 'Create WhatsApp QR', ctaLabel: 'Create WhatsApp QR',
}, },
{ {
href: '/tools/vcard-qr-code', href: '/tools/vcard-qr-code',
title: 'Digital Business Card', title: 'Digital Business Card',
description: 'Turn your vCard into a scannable QR code with all your contact details.', description: 'Turn your vCard into a scannable QR code with all your contact details.',
ctaLabel: 'Create vCard QR', ctaLabel: 'Create vCard QR',
}, },
{ {
href: '/dynamic-qr-code-generator', href: '/dynamic-qr-code-generator',
title: 'Dynamic QR Codes', title: 'Dynamic QR Codes',
description: 'Track how many people scan your Instagram QR code — by day, device, and city.', description: 'Track how many people scan your Instagram QR code — by day, device, and city.',
ctaLabel: 'Try Dynamic QR', ctaLabel: 'Try Dynamic QR',
}, },
]} ]}
/> />
{/* FAQ SECTION */} {/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}> <section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto"> <div className="max-w-3xl mx-auto">
<p className="text-center text-xs text-slate-400 mb-8"> <p className="text-center text-xs text-slate-400 mb-8">
By <a href="/authors/timo" className="underline hover:text-slate-600">Timo Knuth</a> · Last updated: June 2025 By <a href="/authors/timo" className="underline hover:text-slate-600">Timo Knuth</a> · Last updated: June 2025
</p> </p>
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4"> <h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions Frequently Asked Questions
</h2> </h2>
<p className="text-slate-600 text-center mb-10"> <p className="text-slate-600 text-center mb-10">
Common questions about Instagram QR codes. Common questions about Instagram QR codes.
</p> </p>
<div className="space-y-4"> <div className="space-y-4">
<FaqItem <FaqItem
question="Does this work for private accounts?" question="Does this work for private accounts?"
answer="Yes, the link will take users to your profile. If your account is private, they will still have to request to follow you." answer="Yes, the link will take users to your profile. If your account is private, they will still have to request to follow you."
/> />
<FaqItem <FaqItem
question="Can I link to a Story?" question="Can I link to a Story?"
answer="Yes, but Stories expire after 24 hours (unless saved as a Highlight). Linking to a Highlight or your main Profile is usually better for printed materials." answer="Yes, but Stories expire after 24 hours (unless saved as a Highlight). Linking to a Highlight or your main Profile is usually better for printed materials."
/> />
<FaqItem <FaqItem
question="Can I customize the frame?" question="Can I customize the frame?"
answer="Yes, we offer several frame options like 'Follow Us' or 'Scan Me' to encourage action." answer="Yes, we offer several frame options like 'Follow Us' or 'Scan Me' to encourage action."
/> />
<FaqItem <FaqItem
question="Does it expire?" question="Does it expire?"
answer="No. The QR code will work as long as your Instagram username remains the same." answer="No. The QR code will work as long as your Instagram username remains the same."
/> />
<FaqItem <FaqItem
question="Can I track scans?" question="Can I track scans?"
answer="Not with this static tool. If you need scan analytics, consider using our Dynamic QR Code solution." answer="Not with this static tool. If you need scan analytics, consider using our Dynamic QR Code solution."
/> />
</div> </div>
</div> </div>
</section> </section>
</div> </div>
</> </>
); );
} }
function FaqItem({ question, answer }: { question: string; answer: string }) { function FaqItem({ question, answer }: { question: string; answer: string }) {
return ( return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden"> <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"> <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} {question}
<span className="transition group-open:rotate-180 text-slate-400"> <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"> <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" /> <path d="M6 9l6 6 6-6" />
</svg> </svg>
</span> </span>
</summary> </summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm"> <div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer} {answer}
</div> </div>
</details> </details>
); );
} }

746
src/app/(main)/(marketing)/tools/vcard-qr-code/page.tsx
View File

@@ -1,373 +1,373 @@
import React from 'react'; import React from 'react';
import type { Metadata } from 'next'; import type { Metadata } from 'next';
import VCardGenerator from './VCardGenerator'; import VCardGenerator from './VCardGenerator';
import { User, Shield, Zap, Smartphone, Contact, Share2, Check, UserPlus, TrendingUp } from 'lucide-react'; import { User, Shield, Zap, Smartphone, Contact, Share2, Check, UserPlus, TrendingUp } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react'; import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema'; import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools'; import { RelatedTools } from '@/components/marketing/RelatedTools';
import { GrowthLinksSection } from '@/components/marketing/GrowthLinksSection'; import { GrowthLinksSection } from '@/components/marketing/GrowthLinksSection';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils'; import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata // SEO Optimized Metadata
export const metadata: Metadata = { export const metadata: Metadata = {
title: { title: {
absolute: 'Free vCard QR Code Generator | QR Master', absolute: 'Free vCard QR Code Generator | QR Master',
}, },
description: 'Create a vCard QR code for your business card. Share contact details instantly — customers scan and save with one tap. Free, no signup required.', description: 'Create a vCard QR code for your business card. Share contact details instantly — customers scan and save with one tap. Free, no signup required.',
keywords: ['vcard qr code', 'business card qr code', 'contact qr generator', 'digital business card', 'add to contacts qr', 'visitenkarte qr code', 'digitale visitenkarte erstellen', 'kontakt qr code', 'elektronische visitenkarte', 'vcard erstellen kostenlos'], keywords: ['vcard qr code', 'business card qr code', 'contact qr generator', 'digital business card', 'add to contacts qr', 'visitenkarte qr code', 'digitale visitenkarte erstellen', 'kontakt qr code', 'elektronische visitenkarte', 'vcard erstellen kostenlos'],
alternates: { alternates: {
canonical: 'https://www.qrmaster.net/tools/vcard-qr-code', canonical: 'https://www.qrmaster.net/tools/vcard-qr-code',
languages: { languages: {
'x-default': 'https://www.qrmaster.net/tools/vcard-qr-code', 'x-default': 'https://www.qrmaster.net/tools/vcard-qr-code',
en: 'https://www.qrmaster.net/tools/vcard-qr-code', en: 'https://www.qrmaster.net/tools/vcard-qr-code',
}, },
}, },
openGraph: { openGraph: {
title: 'Free vCard QR Code Generator | QR Master', title: 'Free vCard QR Code Generator | QR Master',
description: 'Turn your contact info into a QR code. The modern way to share your business card.', description: 'Turn your contact info into a QR code. The modern way to share your business card.',
type: 'website', type: 'website',
url: 'https://www.qrmaster.net/tools/vcard-qr-code', url: 'https://www.qrmaster.net/tools/vcard-qr-code',
images: [{ url: '/og-vcard-generator.png', width: 1200, height: 630 }], images: [{ url: '/og-vcard-generator.png', width: 1200, height: 630 }],
}, },
twitter: { twitter: {
card: 'summary_large_image', card: 'summary_large_image',
title: 'Free vCard QR Code Generator', title: 'Free vCard QR Code Generator',
description: 'Create QR codes for contact sharing. Instant and free.', description: 'Create QR codes for contact sharing. Instant and free.',
}, },
robots: { robots: {
index: true, index: true,
follow: true, follow: true,
}, },
}; };
// JSON-LD Structured Data // JSON-LD Structured Data
const jsonLd = { const jsonLd = {
'@context': 'https://schema.org', '@context': 'https://schema.org',
'@graph': [ '@graph': [
generateSoftwareAppSchema( generateSoftwareAppSchema(
'vCard QR Code Generator', 'vCard QR Code Generator',
'Generate vCard (VCF) QR codes for business cards. Scanners can save contact info instantly.', 'Generate vCard (VCF) QR codes for business cards. Scanners can save contact info instantly.',
'/og-vcard-generator.png' '/og-vcard-generator.png'
), ),
{ {
'@type': 'HowTo', '@type': 'HowTo',
name: 'How to Create a vCard QR Code', name: 'How to Create a vCard QR Code',
datePublished: '2024-01-01', datePublished: '2024-01-01',
dateModified: '2025-06-01', dateModified: '2026-04-27',
author: { author: {
'@type': 'Person', '@type': 'Person',
name: 'Timo Knuth', name: 'Timo Knuth',
url: 'https://www.qrmaster.net/authors/timo', url: 'https://www.qrmaster.net/authors/timo',
}, },
description: 'Create a QR code that saves your contact details.', description: 'Create a QR code that saves your contact details.',
step: [ step: [
{ {
'@type': 'HowToStep', '@type': 'HowToStep',
position: 1, position: 1,
name: 'Enter Details', name: 'Enter Details',
text: 'Fill in your Name, Phone, Email, Company, and Address.', text: 'Fill in your Name, Phone, Email, Company, and Address.',
}, },
{ {
'@type': 'HowToStep', '@type': 'HowToStep',
position: 2, position: 2,
name: 'Customize', name: 'Customize',
text: 'Select a color that matches your brand and add a frame.', text: 'Select a color that matches your brand and add a frame.',
}, },
{ {
'@type': 'HowToStep', '@type': 'HowToStep',
position: 3, position: 3,
name: 'Download', name: 'Download',
text: 'Download the QR code image and place it on your physical business card.', text: 'Download the QR code image and place it on your physical business card.',
}, },
], ],
totalTime: 'PT1M', totalTime: 'PT1M',
}, },
generateFaqSchema({ generateFaqSchema({
'How does a vCard QR code work?': { 'How does a vCard QR code work?': {
question: 'How does a vCard QR code work?', question: 'How does a vCard QR code work?',
answer: 'A vCard QR code contains your contact information in a standardized format (VCF). When scanned, the phone recognizes it as a contact card and prompts the user to "Save Contact" to their address book.', answer: 'A vCard QR code contains your contact information in a standardized format (VCF). When scanned, the phone recognizes it as a contact card and prompts the user to "Save Contact" to their address book.',
}, },
'Is there a limit to how much info I can add?': { 'Is there a limit to how much info I can add?': {
question: 'Is there a limit to how much info I can add?', question: 'Is there a limit to how much info I can add?',
answer: 'Static QR codes hold data directly in the pattern. The more data you add (long addresses, bio), the denser and harder to scan the QR code becomes. We recommend sticking to essential contact info for static codes.', answer: 'Static QR codes hold data directly in the pattern. The more data you add (long addresses, bio), the denser and harder to scan the QR code becomes. We recommend sticking to essential contact info for static codes.',
}, },
'Can I update my info later?': { 'Can I update my info later?': {
question: 'Can I update my info later?', question: 'Can I update my info later?',
answer: 'No. This is a static vCard QR code. Once created, the info cannot be changed. If you move jobs or change numbers, you must print a new code. For editable cards, use our Dynamic vCard Plus.', answer: 'No. This is a static vCard QR code. Once created, the info cannot be changed. If you move jobs or change numbers, you must print a new code. For editable cards, use our Dynamic vCard Plus.',
}, },
'Does it work on iPhone and Android?': { 'Does it work on iPhone and Android?': {
question: 'Does it work on iPhone and Android?', question: 'Does it work on iPhone and Android?',
answer: 'Yes. Both iOS (Camera app) and Android (Camera or Google Lens) natively support vCard QR codes and correctly import the contact data.', answer: 'Yes. Both iOS (Camera app) and Android (Camera or Google Lens) natively support vCard QR codes and correctly import the contact data.',
}, },
}), }),
], ],
}; };
export default function VCardQRCodePage() { export default function VCardQRCodePage() {
return ( return (
<> <>
<script <script
type="application/ld+json" type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/> />
<ToolBreadcrumb toolName="vCard QR Code Generator" toolSlug="vcard-qr-code" /> <ToolBreadcrumb toolName="vCard QR Code Generator" toolSlug="vcard-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}> <div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */} {/* 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: '#9F1239' }}> <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: '#9F1239' }}>
<div className="absolute inset-0 opacity-10"> <div className="absolute inset-0 opacity-10">
<svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none"> <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)" /> <path d="M0 100 C 20 0 50 0 100 100 Z" fill="url(#grad1)" />
<defs> <defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style={{ stopColor: 'white', stopOpacity: 1 }} /> <stop offset="0%" style={{ stopColor: 'white', stopOpacity: 1 }} />
<stop offset="100%" style={{ stopColor: 'white', stopOpacity: 0 }} /> <stop offset="100%" style={{ stopColor: 'white', stopOpacity: 0 }} />
</linearGradient> </linearGradient>
</defs> </defs>
</svg> </svg>
</div> </div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10"> <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="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"> <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="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-400 opacity-75"></span> <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-rose-400"></span> <span className="relative inline-flex rounded-full h-2 w-2 bg-rose-400"></span>
</span> </span>
Free Tool — No Signup Required Free Tool — No Signup Required
</div> </div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6"> <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
The Modern Way to <br className="hidden lg:block" /> The Modern Way to <br className="hidden lg:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-rose-300 to-pink-300">Share Your Contact</span> <span className="text-transparent bg-clip-text bg-gradient-to-r from-rose-300 to-pink-300">Share Your Contact</span>
</h1> </h1>
<p className="text-lg md:text-xl text-indigo-100 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed"> <p className="text-lg md:text-xl text-indigo-100 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Create a scannable Digital Business Card. One scan saves your name, phone, email, and address instantly. Create a scannable Digital Business Card. One scan saves your name, phone, email, and address instantly.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Free & Professional.</strong> <strong className="text-white block sm:inline mt-2 sm:mt-0"> Free & Professional.</strong>
</p> </p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80"> <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"> <div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<UserPlus className="w-4 h-4 text-rose-300" /> <UserPlus className="w-4 h-4 text-rose-300" />
Instant Save Instant Save
</div> </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"> <div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Share2 className="w-4 h-4 text-amber-400" /> <Share2 className="w-4 h-4 text-amber-400" />
Easy Share Easy Share
</div> </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"> <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-purple-400" /> <Shield className="w-4 h-4 text-purple-400" />
No Data Stored No Data Stored
</div> </div>
</div> </div>
</div> </div>
{/* Visual Abstract */} {/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]"> <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="absolute w-[500px] h-[500px] bg-indigo-500/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<div className="relative w-96 h-60 bg-white/10 backdrop-blur-2xl border border-white/30 rounded-2xl shadow-2xl p-6 transform rotate-6 hover:rotate-3 transition-all duration-700 group"> <div className="relative w-96 h-60 bg-white/10 backdrop-blur-2xl border border-white/30 rounded-2xl shadow-2xl p-6 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" /> <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent" />
<div className="flex justify-between items-start relative z-10"> <div className="flex justify-between items-start relative z-10">
<div className="space-y-4"> <div className="space-y-4">
<div className="w-16 h-16 rounded-full bg-white/20 border-2 border-white/30 flex items-center justify-center"> <div className="w-16 h-16 rounded-full bg-white/20 border-2 border-white/30 flex items-center justify-center">
<Contact className="w-8 h-8 text-white" /> <Contact className="w-8 h-8 text-white" />
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<div className="h-4 w-32 bg-white/90 rounded-sm" /> <div className="h-4 w-32 bg-white/90 rounded-sm" />
<div className="h-3 w-20 bg-emerald-400/90 rounded-sm" /> <div className="h-3 w-20 bg-emerald-400/90 rounded-sm" />
</div> </div>
</div> </div>
<div className="w-24 h-24 bg-white rounded-lg p-1.5 shadow-lg"> <div className="w-24 h-24 bg-white rounded-lg p-1.5 shadow-lg">
<QRCodeSVG value="https://www.qrmaster.net" size={84} fgColor="#1A1265" /> <QRCodeSVG value="https://www.qrmaster.net" size={84} fgColor="#1A1265" />
</div> </div>
</div> </div>
<div className="absolute bottom-6 left-6 space-y-2 z-10"> <div className="absolute bottom-6 left-6 space-y-2 z-10">
<div className="h-2 w-48 bg-white/40 rounded-full" /> <div className="h-2 w-48 bg-white/40 rounded-full" />
<div className="h-2 w-40 bg-white/30 rounded-full" /> <div className="h-2 w-40 bg-white/30 rounded-full" />
</div> </div>
{/* Floating Badge */} {/* Floating Badge */}
<div className="absolute -bottom-4 -left-4 bg-white py-2 px-4 rounded-lg shadow-xl flex items-center gap-2 transform scale-90"> <div className="absolute -bottom-4 -left-4 bg-white py-2 px-4 rounded-lg shadow-xl flex items-center gap-2 transform scale-90">
<div className="bg-emerald-100 p-1.5 rounded-full"> <div className="bg-emerald-100 p-1.5 rounded-full">
<Check className="w-3 h-3 text-emerald-600" /> <Check className="w-3 h-3 text-emerald-600" />
</div> </div>
<span className="text-xs font-bold text-slate-900">Saved to Contacts</span> <span className="text-xs font-bold text-slate-900">Saved to Contacts</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
{/* GENERATOR SECTION */} {/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8"> <section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<VCardGenerator /> <VCardGenerator />
</section> </section>
{/* HOW IT WORKS */} {/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white"> <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12"> <h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How vCard QR Codes Work How vCard QR Codes Work
</h2> </h2>
<div className="grid md:grid-cols-3 gap-8"> <div className="grid md:grid-cols-3 gap-8">
<article className="text-center"> <article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4"> <div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Contact className="w-7 h-7 text-[#1A1265]" /> <Contact className="w-7 h-7 text-[#1A1265]" />
</div> </div>
<h3 className="font-bold text-slate-900 mb-2">1. Enter Details</h3> <h3 className="font-bold text-slate-900 mb-2">1. Enter Details</h3>
<p className="text-slate-600 text-sm"> <p className="text-slate-600 text-sm">
Fill in your professional contact information. Only add what you want to share. Fill in your professional contact information. Only add what you want to share.
</p> </p>
</article> </article>
<article className="text-center"> <article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4"> <div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-7 h-7 text-[#1A1265]" /> <Smartphone className="w-7 h-7 text-[#1A1265]" />
</div> </div>
<h3 className="font-bold text-slate-900 mb-2">2. Scan</h3> <h3 className="font-bold text-slate-900 mb-2">2. Scan</h3>
<p className="text-slate-600 text-sm"> <p className="text-slate-600 text-sm">
A potential client or partner scans your card with their phone camera. A potential client or partner scans your card with their phone camera.
</p> </p>
</article> </article>
<article className="text-center"> <article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4"> <div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<UserPlus className="w-7 h-7 text-[#1A1265]" /> <UserPlus className="w-7 h-7 text-[#1A1265]" />
</div> </div>
<h3 className="font-bold text-slate-900 mb-2">3. Save</h3> <h3 className="font-bold text-slate-900 mb-2">3. Save</h3>
<p className="text-slate-600 text-sm"> <p className="text-slate-600 text-sm">
They tap "Create New Contact" to save your details instantly. No typing errors. They tap "Create New Contact" to save your details instantly. No typing errors.
</p> </p>
</article> </article>
</div> </div>
</div> </div>
</section> </section>
{/* WHY DIGITAL BUSINESS CARDS — STATISTICS */} {/* WHY DIGITAL BUSINESS CARDS — STATISTICS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white"> <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<div className="flex items-center gap-2 mb-3"> <div className="flex items-center gap-2 mb-3">
<TrendingUp className="w-5 h-5 text-rose-500" /> <TrendingUp className="w-5 h-5 text-rose-500" />
<span className="text-sm font-semibold text-rose-600 uppercase tracking-wider">Research-backed</span> <span className="text-sm font-semibold text-rose-600 uppercase tracking-wider">Research-backed</span>
</div> </div>
<h2 className="text-3xl font-bold text-slate-900 mb-4"> <h2 className="text-3xl font-bold text-slate-900 mb-4">
Why Digital Contact Sharing Outperforms Paper Cards Why Digital Contact Sharing Outperforms Paper Cards
</h2> </h2>
<p className="text-slate-600 mb-10 max-w-2xl"> <p className="text-slate-600 mb-10 max-w-2xl">
A <strong>vCard QR code</strong> solves the single biggest problem with traditional business cards: they get discarded before anyone saves your details. A <strong>vCard QR code</strong> solves the single biggest problem with traditional business cards: they get discarded before anyone saves your details.
</p> </p>
<div className="grid md:grid-cols-2 gap-6 mb-8"> <div className="grid md:grid-cols-2 gap-6 mb-8">
<div className="bg-rose-50 border border-rose-100 rounded-2xl p-6"> <div className="bg-rose-50 border border-rose-100 rounded-2xl p-6">
<div className="text-4xl font-extrabold text-rose-600 mb-2">88%</div> <div className="text-4xl font-extrabold text-rose-600 mb-2">88%</div>
<p className="text-slate-700 text-sm leading-relaxed mb-3"> <p className="text-slate-700 text-sm leading-relaxed mb-3">
of traditional paper business cards are thrown away within a week of being handed out. A vCard QR code on your card saves contact details instantly — no manual typing, no lost connections. of traditional paper business cards are thrown away within a week of being handed out. A vCard QR code on your card saves contact details instantly — no manual typing, no lost connections.
</p> </p>
<p className="text-xs text-slate-500"> <p className="text-xs text-slate-500">
Source: <a href="https://www.adobe.com/express/learn/blog/business-card-statistics" target="_blank" rel="noopener noreferrer" className="underline hover:text-slate-700">Adobe Business Research</a> Source: <a href="https://www.adobe.com/express/learn/blog/business-card-statistics" target="_blank" rel="noopener noreferrer" className="underline hover:text-slate-700">Adobe Business Research</a>
</p> </p>
</div> </div>
<div className="bg-orange-50 border border-orange-100 rounded-2xl p-6"> <div className="bg-orange-50 border border-orange-100 rounded-2xl p-6">
<div className="text-4xl font-extrabold text-orange-600 mb-2">1-tap save</div> <div className="text-4xl font-extrabold text-orange-600 mb-2">1-tap save</div>
<p className="text-slate-700 text-sm leading-relaxed mb-3"> <p className="text-slate-700 text-sm leading-relaxed mb-3">
Instead of asking someone to manually type your name, phone, and email — a vCard QR code transfers all contact fields (name, phone, email, company, URL) directly into their phone's address book with a single scan. Instead of asking someone to manually type your name, phone, and email — a vCard QR code transfers all contact fields (name, phone, email, company, URL) directly into their phone's address book with a single scan.
</p> </p>
<p className="text-xs text-slate-500"> <p className="text-xs text-slate-500">
vCard 3.0 / VCF format — supported natively by iOS and Android vCard 3.0 / VCF format — supported natively by iOS and Android
</p> </p>
</div> </div>
</div> </div>
<p className="text-xs text-slate-400 italic"> <p className="text-xs text-slate-400 italic">
By Timo Knuth, QR Master · Last updated: June 2025 · Based on independent academic and industry research By Timo Knuth, QR Master · Last updated: June 2025 · Based on independent academic and industry research
</p> </p>
</div> </div>
</section> </section>
{/* GROWTH LINKS */} {/* GROWTH LINKS */}
<GrowthLinksSection <GrowthLinksSection
eyebrow="Level up your QR strategy" eyebrow="Level up your QR strategy"
title="More ways to use QR codes for your brand" title="More ways to use QR codes for your brand"
description="A vCard QR code is a great start. Add custom design, tracking, and dynamic destinations to get the most out of every print." description="A vCard QR code is a great start. Add custom design, tracking, and dynamic destinations to get the most out of every print."
links={[ links={[
{ {
href: '/custom-qr-code-generator', href: '/custom-qr-code-generator',
title: 'Custom QR Code Generator', title: 'Custom QR Code Generator',
description: 'Add your logo, brand colors, and a custom frame to your QR codes.', description: 'Add your logo, brand colors, and a custom frame to your QR codes.',
ctaLabel: 'Custom QR with logo', ctaLabel: 'Custom QR with logo',
}, },
{ {
href: '/dynamic-qr-code-generator', href: '/dynamic-qr-code-generator',
title: 'Dynamic QR Code Generator', title: 'Dynamic QR Code Generator',
description: 'Update your contact destination after printing. No new QR code needed.', description: 'Update your contact destination after printing. No new QR code needed.',
ctaLabel: 'Dynamic QR with tracking', ctaLabel: 'Dynamic QR with tracking',
}, },
]} ]}
pageType="commercial" pageType="commercial"
cluster="vcard-qr" cluster="vcard-qr"
/> />
{/* RELATED TOOLS */} {/* RELATED TOOLS */}
<RelatedTools /> <RelatedTools />
{/* FAQ SECTION */} {/* FAQ SECTION */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}> <section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto"> <div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4"> <h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions Frequently Asked Questions
</h2> </h2>
<p className="text-slate-600 text-center mb-10"> <p className="text-slate-600 text-center mb-10">
Common questions about vCard QR codes. Common questions about vCard QR codes.
</p> </p>
<div className="space-y-4"> <div className="space-y-4">
<FaqItem <FaqItem
question="Can I add a profile picture?" question="Can I add a profile picture?"
answer="Not on a static vCard QR code. Static codes store data in the pixels, so adding an image would make the code too complex to scan. For profile pictures, social links, and rich media, use our Dynamic vCard Plus solution." answer="Not on a static vCard QR code. Static codes store data in the pixels, so adding an image would make the code too complex to scan. For profile pictures, social links, and rich media, use our Dynamic vCard Plus solution."
/> />
<FaqItem <FaqItem
question="How long does the QR code last?" question="How long does the QR code last?"
answer="Forever. Static vCard QR codes do not expire because the data is embedded directly in the image." answer="Forever. Static vCard QR codes do not expire because the data is embedded directly in the image."
/> />
<FaqItem <FaqItem
question="What information is required?" question="What information is required?"
answer="Nothing is strictly required, but we recommend at least a First Name and either a Phone Number or Email so the contact is useful." answer="Nothing is strictly required, but we recommend at least a First Name and either a Phone Number or Email so the contact is useful."
/> />
<FaqItem <FaqItem
question="Is my data safe?" question="Is my data safe?"
answer="Yes. This tool operates 100% in your browser. We do not store, see, or optimize your contact data. It goes directly from your input to the QR code." answer="Yes. This tool operates 100% in your browser. We do not store, see, or optimize your contact data. It goes directly from your input to the QR code."
/> />
</div> </div>
</div> </div>
</section> </section>
</div> </div>
</> </>
); );
} }
function FaqItem({ question, answer }: { question: string; answer: string }) { function FaqItem({ question, answer }: { question: string; answer: string }) {
return ( return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden"> <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"> <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} {question}
<span className="transition group-open:rotate-180 text-slate-400"> <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"> <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" /> <path d="M6 9l6 6 6-6" />
</svg> </svg>
</span> </span>
</summary> </summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm"> <div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer} {answer}
</div> </div>
</details> </details>
); );
} }

788
src/app/(main)/(marketing)/tools/wifi-qr-code/page.tsx
View File

@@ -1,394 +1,394 @@
import React from 'react'; import React from 'react';
import type { Metadata } from 'next'; import type { Metadata } from 'next';
import WiFiGenerator from './WiFiGenerator'; import WiFiGenerator from './WiFiGenerator';
import { Wifi, Shield, Zap, Smartphone, Lock, QrCode, Download, Share2, TrendingUp } from 'lucide-react'; import { Wifi, Shield, Zap, Smartphone, Lock, QrCode, Download, Share2, TrendingUp } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react'; import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema'; import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools'; import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils'; import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata // SEO Optimized Metadata
export const metadata: Metadata = { export const metadata: Metadata = {
title: { title: {
absolute: 'Free WiFi QR Code Generator | WLAN QR Code | QR Master', absolute: 'Free WiFi QR Code Generator | WLAN QR Code | QR Master',
}, },
description: 'Create a WiFi QR code in seconds. Erstelle kostenlos deinen WLAN QR Code ohne Passwort-Eingabe. Guests scan to connect instantly. 100% Secure & Free.', description: 'Create a WiFi QR code in seconds. Erstelle kostenlos deinen WLAN QR Code ohne Passwort-Eingabe. Guests scan to connect instantly. 100% Secure & Free.',
keywords: ['wifi qr code', 'qr code generator', 'wifi qr code generator', 'share wifi', 'wifi password qr', 'guest wifi', 'wlan qr code', 'wlan qr code erstellen', 'wifi passwort qr code', 'wlan zugang teilen', 'wifi qr code kostenlos'], keywords: ['wifi qr code', 'qr code generator', 'wifi qr code generator', 'share wifi', 'wifi password qr', 'guest wifi', 'wlan qr code', 'wlan qr code erstellen', 'wifi passwort qr code', 'wlan zugang teilen', 'wifi qr code kostenlos'],
alternates: { alternates: {
canonical: 'https://www.qrmaster.net/tools/wifi-qr-code', canonical: 'https://www.qrmaster.net/tools/wifi-qr-code',
languages: { languages: {
'x-default': 'https://www.qrmaster.net/tools/wifi-qr-code', 'x-default': 'https://www.qrmaster.net/tools/wifi-qr-code',
en: 'https://www.qrmaster.net/tools/wifi-qr-code', en: 'https://www.qrmaster.net/tools/wifi-qr-code',
}, },
}, },
openGraph: { openGraph: {
title: 'Free WiFi QR Code Generator | QR Master', title: 'Free WiFi QR Code Generator | QR Master',
description: 'Share your WiFi without sharing your password. Guests scan the QR code to connect instantly.', description: 'Share your WiFi without sharing your password. Guests scan the QR code to connect instantly.',
type: 'website', type: 'website',
url: 'https://www.qrmaster.net/tools/wifi-qr-code', url: 'https://www.qrmaster.net/tools/wifi-qr-code',
images: [{ url: '/og-wifi-generator.png', width: 1200, height: 630 }], images: [{ url: '/og-wifi-generator.png', width: 1200, height: 630 }],
}, },
twitter: { twitter: {
card: 'summary_large_image', card: 'summary_large_image',
title: 'Free WiFi QR Code Generator', title: 'Free WiFi QR Code Generator',
description: 'Share WiFi instantly with a QR code. No typing passwords.', description: 'Share WiFi instantly with a QR code. No typing passwords.',
}, },
robots: { robots: {
index: true, index: true,
follow: true, follow: true,
}, },
}; };
// JSON-LD Structured Data // JSON-LD Structured Data
const jsonLd = { const jsonLd = {
'@context': 'https://schema.org', '@context': 'https://schema.org',
'@graph': [ '@graph': [
// SoftwareApplication Schema // SoftwareApplication Schema
generateSoftwareAppSchema( generateSoftwareAppSchema(
'WiFi QR Code Generator', 'WiFi QR Code Generator',
'Generate QR codes for WiFi networks. Guests scan to connect without typing passwords.', 'Generate QR codes for WiFi networks. Guests scan to connect without typing passwords.',
'/og-wifi-generator.png' '/og-wifi-generator.png'
), ),
// HowTo Schema for Featured Snippets // HowTo Schema for Featured Snippets
{ {
'@type': 'HowTo', '@type': 'HowTo',
name: 'How to Create a WiFi QR Code', name: 'How to Create a WiFi QR Code',
datePublished: '2024-01-01', datePublished: '2024-01-01',
dateModified: '2025-06-01', dateModified: '2026-04-27',
author: { author: {
'@type': 'Person', '@type': 'Person',
name: 'Timo Knuth', name: 'Timo Knuth',
url: 'https://www.qrmaster.net/authors/timo', url: 'https://www.qrmaster.net/authors/timo',
}, },
description: 'Create a QR code that connects devices to your WiFi network automatically.', description: 'Create a QR code that connects devices to your WiFi network automatically.',
step: [ step: [
{ {
'@type': 'HowToStep', '@type': 'HowToStep',
position: 1, position: 1,
name: 'Enter Network Name', name: 'Enter Network Name',
text: 'Type your WiFi network name (SSID) in the Network Name field.', text: 'Type your WiFi network name (SSID) in the Network Name field.',
}, },
{ {
'@type': 'HowToStep', '@type': 'HowToStep',
position: 2, position: 2,
name: 'Enter Password', name: 'Enter Password',
text: 'Enter your WiFi password. This is processed locally and never sent to any server.', text: 'Enter your WiFi password. This is processed locally and never sent to any server.',
}, },
{ {
'@type': 'HowToStep', '@type': 'HowToStep',
position: 3, position: 3,
name: 'Select Security Type', name: 'Select Security Type',
text: 'Choose WPA/WPA2 (most common), WEP, or No Password for open networks.', text: 'Choose WPA/WPA2 (most common), WEP, or No Password for open networks.',
}, },
{ {
'@type': 'HowToStep', '@type': 'HowToStep',
position: 4, position: 4,
name: 'Download QR Code', name: 'Download QR Code',
text: 'Click Download PNG or SVG to save your QR code. Print it or share digitally.', text: 'Click Download PNG or SVG to save your QR code. Print it or share digitally.',
}, },
{ {
'@type': 'HowToStep', '@type': 'HowToStep',
position: 5, position: 5,
name: 'Connect', name: 'Connect',
text: 'Print the code. Guests can scan it to join your network instantly.', text: 'Print the code. Guests can scan it to join your network instantly.',
}, },
], ],
totalTime: 'PT1M', totalTime: 'PT1M',
}, },
// FAQPage Schema // FAQPage Schema
generateFaqSchema({ generateFaqSchema({
'Is it safe to enter my WiFi password?': { 'Is it safe to enter my WiFi password?': {
question: 'Is it safe to enter my WiFi password?', question: 'Is it safe to enter my WiFi password?',
answer: 'Yes, completely safe. This tool processes everything in your browser (client-side). Your password never leaves your device and is not sent to any server.', answer: 'Yes, completely safe. This tool processes everything in your browser (client-side). Your password never leaves your device and is not sent to any server.',
}, },
'Do WiFi QR codes work on iPhone and Android?': { 'Do WiFi QR codes work on iPhone and Android?': {
question: 'Do WiFi QR codes work on iPhone and Android?', question: 'Do WiFi QR codes work on iPhone and Android?',
answer: 'Yes. Both iOS (11+) and Android devices can scan WiFi QR codes using their built-in camera app. No additional apps required.', answer: 'Yes. Both iOS (11+) and Android devices can scan WiFi QR codes using their built-in camera app. No additional apps required.',
}, },
'What happens if I change my WiFi password?': { 'What happens if I change my WiFi password?': {
question: 'What happens if I change my WiFi password?', question: 'What happens if I change my WiFi password?',
answer: 'If you change your WiFi password, the old QR code will stop working. You\'ll need to generate a new QR code with the updated credentials.For frequently changing passwords, consider using dynamic QR codes.', answer: 'If you change your WiFi password, the old QR code will stop working. You\'ll need to generate a new QR code with the updated credentials.For frequently changing passwords, consider using dynamic QR codes.',
}, },
'Can I customize the QR code design?': { 'Can I customize the QR code design?': {
question: 'Can I customize the QR code design?', question: 'Can I customize the QR code design?',
answer: 'Yes. You can change the QR code color and add frame labels like "Scan Me" or "WiFi" to make it more recognizable and user-friendly.', answer: 'Yes. You can change the QR code color and add frame labels like "Scan Me" or "WiFi" to make it more recognizable and user-friendly.',
}, },
'Does it work for hidden networks?': { 'Does it work for hidden networks?': {
question: 'Does it work for hidden networks?', question: 'Does it work for hidden networks?',
answer: 'Yes, just check the "Hidden Network" box if your SSID is hidden. The QR code contains the standard WiFi string configuration.', answer: 'Yes, just check the "Hidden Network" box if your SSID is hidden. The QR code contains the standard WiFi string configuration.',
}, },
}), }),
], ],
}; };
export default function WiFiQRCodePage() { export default function WiFiQRCodePage() {
return ( return (
<> <>
{/* JSON-LD Script */} {/* JSON-LD Script */}
<script <script
type="application/ld+json" type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/> />
<ToolBreadcrumb toolName="WiFi QR Code Generator" toolSlug="wifi-qr-code" /> <ToolBreadcrumb toolName="WiFi QR Code Generator" toolSlug="wifi-qr-code" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}> <div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */} {/* 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' }}> <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' }}>
{/* Background Pattern */} {/* Background Pattern */}
<div className="absolute inset-0 opacity-10"> <div className="absolute inset-0 opacity-10">
<svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none"> <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)" /> <path d="M0 100 C 20 0 50 0 100 100 Z" fill="url(#grad1)" />
<defs> <defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style={{ stopColor: 'white', stopOpacity: 1 }} /> <stop offset="0%" style={{ stopColor: 'white', stopOpacity: 1 }} />
<stop offset="100%" style={{ stopColor: 'white', stopOpacity: 0 }} /> <stop offset="100%" style={{ stopColor: 'white', stopOpacity: 0 }} />
</linearGradient> </linearGradient>
</defs> </defs>
</svg> </svg>
</div> </div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10"> <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
{/* Left: Text Content */} {/* Left: Text Content */}
<div className="text-center lg:text-left"> <div className="text-center lg:text-left">
{/* Badge */} {/* Badge */}
<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"> <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="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="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 className="relative inline-flex rounded-full h-2 w-2 bg-emerald-400"></span>
</span> </span>
Free Tool — No Signup Required Free Tool — No Signup Required
</div> </div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6"> <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
The Safest Way to <br className="hidden lg:block" /> The Safest Way to <br className="hidden lg:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-cyan-400">Share Your WiFi</span> <span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-cyan-400">Share Your WiFi</span>
</h1> </h1>
<p className="text-lg md:text-xl text-indigo-100 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed"> <p className="text-lg md:text-xl text-indigo-100 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Generate a secure QR code in seconds. No more spelling out complicated passwords. Generate a secure QR code in seconds. No more spelling out complicated passwords.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> 100% Client-Side & Private.</strong> <strong className="text-white block sm:inline mt-2 sm:mt-0"> 100% Client-Side & Private.</strong>
</p> </p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80"> <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"> <div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
<Lock className="w-4 h-4 text-emerald-400" /> <Lock className="w-4 h-4 text-emerald-400" />
No Server Uploads No Server Uploads
</div> </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"> <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" /> <Zap className="w-4 h-4 text-amber-400" />
Instant Connect Instant Connect
</div> </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"> <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" /> <Smartphone className="w-4 h-4 text-purple-400" />
iOS & Android iOS & Android
</div> </div>
</div> </div>
</div> </div>
{/* Right: Visual Abstract Composition */} {/* Right: Visual Abstract Composition */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]"> <div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
{/* Decorative Glow */} {/* Decorative Glow */}
<div className="absolute w-[500px] h-[500px] bg-indigo-500/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" /> <div className="absolute w-[500px] h-[500px] bg-indigo-500/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
{/* Floating Glass Card */} {/* Floating Glass Card */}
<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="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="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />
{/* Mock QR */} {/* Mock QR */}
<div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner mb-6 relative overflow-hidden flex items-center justify-center"> <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" /> <QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#0f172a" level="Q" />
{/* Scan Line */} {/* Scan Line */}
<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 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>
<div className="w-full space-y-3"> <div className="w-full space-y-3">
<div className="h-2 w-32 bg-white/20 rounded-full mx-auto" /> <div className="h-2 w-32 bg-white/20 rounded-full mx-auto" />
<div className="h-2 w-20 bg-white/10 rounded-full mx-auto" /> <div className="h-2 w-20 bg-white/10 rounded-full mx-auto" />
</div> </div>
{/* Floating Badge */} {/* Floating Badge */}
<div className="absolute -bottom-6 -left-6 bg-white py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300"> <div className="absolute -bottom-6 -left-6 bg-white py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-emerald-100 p-2 rounded-full"> <div className="bg-emerald-100 p-2 rounded-full">
<Wifi className="w-5 h-5 text-emerald-600" /> <Wifi className="w-5 h-5 text-emerald-600" />
</div> </div>
<div className="text-left"> <div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Status</div> <div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Status</div>
<div className="text-sm font-bold text-slate-900">Connected</div> <div className="text-sm font-bold text-slate-900">Connected</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
{/* GENERATOR SECTION */} {/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8"> <section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<WiFiGenerator /> <WiFiGenerator />
</section> </section>
{/* HOW IT WORKS - AEO/GEO Content */} {/* HOW IT WORKS - AEO/GEO Content */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white"> <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12"> <h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How WiFi QR Codes Work How WiFi QR Codes Work
</h2> </h2>
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8"> <div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
<article className="text-center"> <article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4"> <div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Wifi className="w-6 h-6 text-[#1A1265]" /> <Wifi className="w-6 h-6 text-[#1A1265]" />
</div> </div>
<h3 className="font-bold text-slate-900 mb-2">1. Network</h3> <h3 className="font-bold text-slate-900 mb-2">1. Network</h3>
<p className="text-slate-600 text-xs leading-relaxed"> <p className="text-slate-600 text-xs leading-relaxed">
Enter your WiFi SSID and password. Enter your WiFi SSID and password.
</p> </p>
</article> </article>
<article className="text-center"> <article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4"> <div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
<Shield className="w-6 h-6 text-[#1A1265]" /> <Shield className="w-6 h-6 text-[#1A1265]" />
</div> </div>
<h3 className="font-bold text-slate-900 mb-2">2. Security</h3> <h3 className="font-bold text-slate-900 mb-2">2. Security</h3>
<p className="text-slate-600 text-xs leading-relaxed"> <p className="text-slate-600 text-xs leading-relaxed">
Select WPA/WPA2 encryption. Select WPA/WPA2 encryption.
</p> </p>
</article> </article>
<article className="text-center"> <article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4"> <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]" /> <Zap className="w-6 h-6 text-[#1A1265]" />
</div> </div>
<h3 className="font-bold text-slate-900 mb-2">3. Style</h3> <h3 className="font-bold text-slate-900 mb-2">3. Style</h3>
<p className="text-slate-600 text-xs leading-relaxed"> <p className="text-slate-600 text-xs leading-relaxed">
Customize colors and add a frame. Customize colors and add a frame.
</p> </p>
</article> </article>
<article className="text-center"> <article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4"> <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]" /> <Download className="w-6 h-6 text-[#1A1265]" />
</div> </div>
<h3 className="font-bold text-slate-900 mb-2">4. Download</h3> <h3 className="font-bold text-slate-900 mb-2">4. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed"> <p className="text-slate-600 text-xs leading-relaxed">
Get your high-quality QR image. Get your high-quality QR image.
</p> </p>
</article> </article>
<article className="text-center"> <article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4"> <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]" /> <Smartphone className="w-6 h-6 text-[#1A1265]" />
</div> </div>
<h3 className="font-bold text-slate-900 mb-2">5. Connect</h3> <h3 className="font-bold text-slate-900 mb-2">5. Connect</h3>
<p className="text-slate-600 text-xs leading-relaxed"> <p className="text-slate-600 text-xs leading-relaxed">
Print it out. Guests scan to join! Print it out. Guests scan to join!
</p> </p>
</article> </article>
</div> </div>
</div> </div>
</section> </section>
{/* WHY WIFI QR CODES MATTER — STATISTICS */} {/* WHY WIFI QR CODES MATTER — STATISTICS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white"> <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<div className="flex items-center gap-2 mb-3"> <div className="flex items-center gap-2 mb-3">
<TrendingUp className="w-5 h-5 text-emerald-500" /> <TrendingUp className="w-5 h-5 text-emerald-500" />
<span className="text-sm font-semibold text-emerald-600 uppercase tracking-wider">Research-backed</span> <span className="text-sm font-semibold text-emerald-600 uppercase tracking-wider">Research-backed</span>
</div> </div>
<h2 className="text-3xl font-bold text-slate-900 mb-4"> <h2 className="text-3xl font-bold text-slate-900 mb-4">
Why WiFi QR Codes Improve Customer Experience Why WiFi QR Codes Improve Customer Experience
</h2> </h2>
<p className="text-slate-600 mb-10 max-w-2xl"> <p className="text-slate-600 mb-10 max-w-2xl">
A <strong>WiFi QR code</strong> eliminates the single biggest friction point between your guest and your network — manual password entry. A <strong>WiFi QR code</strong> eliminates the single biggest friction point between your guest and your network — manual password entry.
</p> </p>
<div className="grid md:grid-cols-2 gap-6 mb-8"> <div className="grid md:grid-cols-2 gap-6 mb-8">
<div className="bg-emerald-50 border border-emerald-100 rounded-2xl p-6"> <div className="bg-emerald-50 border border-emerald-100 rounded-2xl p-6">
<div className="text-3xl font-extrabold text-emerald-600 mb-2">#1 Amenity</div> <div className="text-3xl font-extrabold text-emerald-600 mb-2">#1 Amenity</div>
<p className="text-slate-700 text-sm leading-relaxed mb-3"> <p className="text-slate-700 text-sm leading-relaxed mb-3">
Free WiFi is rated the most important hotel amenity by guests — ahead of breakfast, parking, and loyalty points. Instant, frictionless access directly impacts satisfaction scores and repeat bookings. Free WiFi is rated the most important hotel amenity by guests — ahead of breakfast, parking, and loyalty points. Instant, frictionless access directly impacts satisfaction scores and repeat bookings.
</p> </p>
<p className="text-xs text-slate-500"> <p className="text-xs text-slate-500">
Source: <a href="https://www.jdpower.com/business/travel-hospitality/hotel-guest-satisfaction-study" target="_blank" rel="noopener noreferrer" className="underline hover:text-slate-700">J.D. Power Hotel Guest Satisfaction Study</a> Source: <a href="https://www.jdpower.com/business/travel-hospitality/hotel-guest-satisfaction-study" target="_blank" rel="noopener noreferrer" className="underline hover:text-slate-700">J.D. Power Hotel Guest Satisfaction Study</a>
</p> </p>
</div> </div>
<div className="bg-blue-50 border border-blue-100 rounded-2xl p-6"> <div className="bg-blue-50 border border-blue-100 rounded-2xl p-6">
<div className="text-3xl font-extrabold text-blue-600 mb-2">Effort = Loyalty</div> <div className="text-3xl font-extrabold text-blue-600 mb-2">Effort = Loyalty</div>
<p className="text-slate-700 text-sm leading-relaxed mb-3"> <p className="text-slate-700 text-sm leading-relaxed mb-3">
Reducing customer effort — like eliminating manual password entry — is the single strongest predictor of customer loyalty. The lower the effort, the higher the repeat visit rate and positive word-of-mouth. Reducing customer effort — like eliminating manual password entry — is the single strongest predictor of customer loyalty. The lower the effort, the higher the repeat visit rate and positive word-of-mouth.
</p> </p>
<p className="text-xs text-slate-500"> <p className="text-xs text-slate-500">
Source: <a href="https://hbr.org/2010/07/stop-trying-to-delight-your-customers" target="_blank" rel="noopener noreferrer" className="underline hover:text-slate-700">Harvard Business Review — "Stop Trying to Delight Your Customers"</a> (Customer Effort Score research) Source: <a href="https://hbr.org/2010/07/stop-trying-to-delight-your-customers" target="_blank" rel="noopener noreferrer" className="underline hover:text-slate-700">Harvard Business Review — "Stop Trying to Delight Your Customers"</a> (Customer Effort Score research)
</p> </p>
</div> </div>
</div> </div>
<p className="text-xs text-slate-400 italic"> <p className="text-xs text-slate-400 italic">
By Timo Knuth, QR Master · Last updated: June 2025 · Based on independent academic and industry research By Timo Knuth, QR Master · Last updated: June 2025 · Based on independent academic and industry research
</p> </p>
</div> </div>
</section> </section>
{/* RELATED TOOLS */} {/* RELATED TOOLS */}
<RelatedTools /> <RelatedTools />
{/* FAQ SECTION - Featured Snippet Optimized */} {/* FAQ SECTION - Featured Snippet Optimized */}
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}> <section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
<div className="max-w-3xl mx-auto"> <div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4"> <h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
Frequently Asked Questions Frequently Asked Questions
</h2> </h2>
<p className="text-slate-600 text-center mb-10"> <p className="text-slate-600 text-center mb-10">
Everything you need to know about WiFi QR codes. Everything you need to know about WiFi QR codes.
</p> </p>
<div className="space-y-4"> <div className="space-y-4">
<FaqItem <FaqItem
question="Is it safe to enter my WiFi password here?" question="Is it safe to enter my WiFi password here?"
answer="Yes, completely safe. This tool uses client-side processing, meaning your WiFi password never leaves your device. It's processed locally in your browser to generate the QR code—no data is sent to any server." answer="Yes, completely safe. This tool uses client-side processing, meaning your WiFi password never leaves your device. It's processed locally in your browser to generate the QR code—no data is sent to any server."
/> />
<FaqItem <FaqItem
question="Do WiFi QR codes work on iPhone and Android?" question="Do WiFi QR codes work on iPhone and Android?"
answer="Yes. iOS 11 and later, as well as all modern Android devices, can scan WiFi QR codes using the built-in camera app. Simply point the camera at the QR code and tap the notification to connect." answer="Yes. iOS 11 and later, as well as all modern Android devices, can scan WiFi QR codes using the built-in camera app. Simply point the camera at the QR code and tap the notification to connect."
/> />
<FaqItem <FaqItem
question="What happens if I change my WiFi password?" question="What happens if I change my WiFi password?"
answer="If you change your WiFi password, the old QR code will stop working. You'll need to generate a new QR code with the updated credentials. For frequently changing passwords, consider using dynamic QR codes." answer="If you change your WiFi password, the old QR code will stop working. You'll need to generate a new QR code with the updated credentials. For frequently changing passwords, consider using dynamic QR codes."
/> />
<FaqItem <FaqItem
question="Can I customize the QR code design?" question="Can I customize the QR code design?"
answer="Yes. You can change the foreground color of the QR code and add frame labels such as 'Scan Me', 'WiFi', or 'Connect' to make your QR code more recognizable and user-friendly." answer="Yes. You can change the foreground color of the QR code and add frame labels such as 'Scan Me', 'WiFi', or 'Connect' to make your QR code more recognizable and user-friendly."
/> />
<FaqItem <FaqItem
question="Does it work for hidden networks?" question="Does it work for hidden networks?"
answer="Yes, just check the 'Hidden Network' box if your SSID is hidden. The QR code contains the standard WiFi string configuration." answer="Yes, just check the 'Hidden Network' box if your SSID is hidden. The QR code contains the standard WiFi string configuration."
/> />
</div> </div>
</div> </div>
</section> </section>
</div> </div>
</> </>
); );
} }
// FAQ Item Component // FAQ Item Component
function FaqItem({ question, answer }: { question: string; answer: string }) { function FaqItem({ question, answer }: { question: string; answer: string }) {
return ( return (
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden"> <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"> <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} {question}
<span className="transition group-open:rotate-180 text-slate-400"> <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"> <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" /> <path d="M6 9l6 6 6-6" />
</svg> </svg>
</span> </span>
</summary> </summary>
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm"> <div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
{answer} {answer}
</div> </div>
</details> </details>
); );
} }

452
src/app/(marketing-de)/barcode-generator/page.tsx Normal file
View File

@@ -0,0 +1,452 @@
import React from 'react';
import type { Metadata } from 'next';
import SeoJsonLd from '@/components/SeoJsonLd';
import { organizationSchema, websiteSchema } from '@/lib/schema';
import {
generateFaqSchema,
generateSoftwareAppSchema,
} from '@/lib/schema-utils';
import { FreeToolsGrid } from '@/components/marketing/FreeToolsGrid';
import de from '@/i18n/de.json';
import { FAQ } from '@/components/marketing/FAQ';
import { ScrollToTop } from '@/components/ui/ScrollToTop';
import {
Barcode as BarcodeIcon,
Check,
Shield,
Zap,
Printer,
Download,
} from 'lucide-react';
export const metadata: Metadata = {
title: {
absolute: 'Barcode Generator Kostenlos – EAN, UPC, Code 128 Online',
},
description:
'Erstellen Sie Barcodes kostenlos online: EAN-13, UPC-A und Code 128. Sofort druckfertig. Für Einzelhandel, Lager und Logistik. Keine Anmeldung erforderlich.',
keywords: [
'barcode generator',
'barcode generator kostenlos',
'ean-13 generator',
'upc-a generator',
'code 128 generator',
'barcode erstellen',
'barcode online erstellen',
'strichcode generator',
'barcode für amazon erstellen',
'ean barcode generator',
'produktbarcode erstellen',
'lagerverwaltung barcode',
'barcode drucken',
],
alternates: {
canonical: 'https://www.qrmaster.net/barcode-generator',
languages: {
'x-default': 'https://www.qrmaster.net/tools/barcode-generator',
en: 'https://www.qrmaster.net/tools/barcode-generator',
de: 'https://www.qrmaster.net/barcode-generator',
},
},
openGraph: {
title: 'Barcode Generator – Kostenlos EAN, UPC & Code 128 erstellen',
description:
'Barcode Generator: Erstellen Sie professionelle Barcodes für Einzelhandel, Lager und Logistik. Kostenlos, ohne Anmeldung. Sofort druckfertig.',
url: 'https://www.qrmaster.net/barcode-generator',
locale: 'de_DE',
type: 'website',
images: [
{
url: 'https://www.qrmaster.net/barcode-generator-preview.png',
width: 1200,
height: 630,
},
],
},
twitter: {
card: 'summary_large_image',
title: 'Barcode Generator – Kostenlos Online erstellen',
description:
'EAN-13, UPC-A und Code 128 Barcodes kostenlos erstellen. Sofort druckfertig.',
},
robots: {
index: true,
follow: true,
},
};
const faqQuestions = {
'Was ist ein Barcode Generator?': {
question: 'Was ist ein Barcode Generator?',
answer:
'Ein Barcode Generator ist ein Online-Tool, das Zahlen oder Texte in scannbare Barcode-Bilder umwandelt. Diese können für Produkte, Etiketten und Inventarsysteme verwendet werden.',
},
'Ist der Barcode Generator kostenlos?': {
question: 'Ist der Barcode Generator kostenlos?',
answer:
'Ja, unser Barcode Generator ist vollständig kostenlos nutzbar. Sie können Barcodes ohne Anmeldung generieren, herunterladen und drucken.',
},
'Welches Barcode-Format brauche ich?': {
question: 'Welches Barcode-Format brauche ich?',
answer:
'EAN-13 ist der Standard für Einzelhandel in Europa und weltweit. UPC-A wird hauptsächlich in den USA und Kanada verwendet. Code 128 eignet sich am besten für Logistik und interne Verfolgung, da er Buchstaben und Zahlen unterstützt.',
},
'Kann ich Barcodes als Vektorgrafik (SVG) herunterladen?': {
question: 'Kann ich Barcodes als Vektorgrafik (SVG) herunterladen?',
answer:
'Ja! SVG-Dateien sind vektorbasiert und können ohne Qualitätsverlust auf jede Größe skaliert werden. Perfekt für professionelle Produktverpackungen und Etiketten.',
},
'Wie erstelle ich einen Barcode online?': {
question: 'Wie erstelle ich einen Barcode online?',
answer:
'Geben Sie Ihre Produktnummer oder Ihren Text ein, wählen Sie das gewünschte Barcode-Format (z.B. EAN-13 oder Code 128) und der Barcode wird sofort erstellt. Dann können Sie ihn als PNG oder SVG herunterladen.',
},
'Sind die erstellten Barcodes scannbar?': {
question: 'Sind die erstellten Barcodes scannbar?',
answer:
'Ja, wir generieren standardkonforme Barcodes, die von jedem handelsüblichen Barcode-Scanner gelesen werden können, einschließlich Smartphone-Kamera-Apps.',
},
'Kann ich diese Barcodes für Amazon verwenden?': {
question: 'Kann ich diese Barcodes für Amazon verwenden?',
answer:
'Sie können hier das Barcode-Bild erstellen, wenn Sie bereits eine gültige EAN/UPC-Nummer haben. Offizielle GS1-Registrierungsnummern erhalten Sie jedoch nur direkt bei GS1, um Produkte auf Amazon oder in großen Einzelhandelssystemen zu listen.',
},
'Was ist der Unterschied zwischen Barcode und QR-Code?': {
question: 'Was ist der Unterschied zwischen Barcode und QR-Code?',
answer:
'Ein Barcode speichert Daten horizontal (1D) und wird hauptsächlich für Produktkennungen verwendet. Ein QR-Code speichert Daten in 2D (Matrix) und kann viel mehr Informationen enthalten, wie URLs, Kontaktdaten oder WLAN-Zugangsdaten.',
},
'Kann ich mehrere Barcodes gleichzeitig erstellen?': {
question: 'Kann ich mehrere Barcodes gleichzeitig erstellen?',
answer:
'Ja, mit einem PRO-Account können Sie mehrere Barcodes gleichzeitig generieren. Dies ist ideal für große Produktmengen oder Lagerverwaltung.',
},
'Was ist eine Prüfziffer bei Barcodes?': {
question: 'Was ist eine Prüfziffer bei Barcodes?',
answer:
'Die Prüfziffer ist die letzte Ziffer in einem Barcode, die mathematisch aus den anderen Ziffern berechnet wird. Sie stellt sicher, dass der Barcode korrekt gescannt wird, selbst wenn er leicht beschädigt oder verkratzt ist.',
},
};
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'Barcode Generator',
'Erstellen Sie druckfertige Barcodes für EAN, UPC, Code 128 und weitere Formate. Kostenlos und ohne Anmeldung.',
'/barcode-generator-preview.png',
'UtilitiesApplication'
),
generateFaqSchema(faqQuestions),
],
};
export default function BarcodeGeneratorDEPage() {
const t = de;
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
{/* SEO Content für Suchmaschinen */}
<div className="sr-only" aria-hidden="false">
<p>
QR Masters kostenloser Barcode Generator ermöglicht es Ihnen,
professionelle Barcodes für Produkte, Etiketten und Inventarsysteme zu
erstellen. Unterstützt EAN-13 für europäischen Einzelhandel, UPC-A für
US-Markt und Code 128 für Logistik und interne Verwendung. Alle
Barcodes sind standardkonform und sofort druckfertig.
</p>
<p>
Unser Barcode Generator funktioniert vollständig im Browser. Keine
Software-Installation erforderlich. Exportieren Sie Ihre Barcodes als
PNG für den sofortigen Druck oder als SVG für professionelle
Verpackungsdesigns. Perfekt für kleine Unternehmen, Online-Händler und
Lagerverwaltung.
</p>
</div>
{/* Hero Section */}
<section className="relative bg-gradient-to-b from-slate-900 to-slate-800 text-white py-16 md:py-24">
<div className="absolute inset-0 opacity-10">
<svg className="w-full h-full" width="100%" height="100%">
<defs>
<pattern
id="barcode_pattern_de"
width="60"
height="60"
patternUnits="userSpaceOnUse"
>
<path
d="M5 0 V 60 M15 0 V 60 M20 0 V 60 M35 0 V 60 M40 0 V 60 M55 0 V 60"
stroke="white"
strokeWidth="2"
strokeOpacity="0.5"
/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#barcode_pattern_de)" />
</svg>
</div>
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl relative z-10">
<div className="max-w-3xl mx-auto text-center">
<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">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-blue-400"></span>
</span>
Kostenloses Tool – Professionell & Schnell
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight mb-6">
Kostenloser{' '}
<span className="text-blue-400">Barcode Generator</span>
</h1>
<p className="text-lg md:text-xl text-slate-300 mb-8 leading-relaxed">
Erstellen Sie professionelle Barcodes in Sekunden. Für{' '}
<strong className="text-white">
Einzelhandel, Lager und Logistik
</strong>
. Unterstützt EAN-13, UPC-A und Code 128. Keine Anmeldung
erforderlich.
</p>
<div className="flex flex-wrap justify-center gap-4 text-sm font-medium">
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10">
<Check className="w-4 h-4 text-blue-400" />
Einzelhandel-fähig
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10">
<Check className="w-4 h-4 text-blue-400" />
SVG-Export
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10">
<Check className="w-4 h-4 text-blue-400" />
Ohne Anmeldung
</div>
</div>
</div>
</div>
</section>
{/* Generator Section */}
<section className="py-12 px-4 bg-slate-100">
<div className="container mx-auto max-w-7xl">
<div className="text-center mb-6">
<h2 className="text-2xl font-bold mb-2">Barcode jetzt erstellen</h2>
<p className="text-muted-foreground">
Geben Sie Ihre Daten ein und laden Sie den Barcode herunter
</p>
</div>
<div className="bg-white rounded-3xl shadow-xl overflow-hidden border border-slate-200">
<div className="bg-slate-900 px-6 py-3 flex items-center gap-2">
<div className="flex gap-1.5">
<div className="w-3 h-3 rounded-full bg-red-500"></div>
<div className="w-3 h-3 rounded-full bg-yellow-500"></div>
<div className="w-3 h-3 rounded-full bg-green-500"></div>
</div>
<span className="text-white/60 text-sm ml-2">
qrmaster.net/tools/barcode-generator
</span>
</div>
<iframe
src="https://www.qrmaster.net/tools/barcode-generator"
className="w-full h-[650px] border-0"
title="Barcode Generator"
/>
</div>
<div className="text-center mt-6">
<a
href="https://www.qrmaster.net/tools/barcode-generator"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-slate-900 transition-colors"
>
<span>Vollbild öffnen</span>
<svg
className="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
/>
</svg>
</a>
</div>
</div>
</section>
{/* Barcode Types Info */}
<section className="py-16 px-4 bg-white">
<div className="container mx-auto max-w-7xl">
<h2 className="text-3xl font-bold text-center mb-12">
Barcode-Formate im Überblick
</h2>
<div className="grid md:grid-cols-3 gap-8">
<div className="p-6 border rounded-xl">
<div className="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-4">
<BarcodeIcon className="w-6 h-6 text-blue-600" />
</div>
<h3 className="font-bold text-lg mb-2">EAN-13</h3>
<p className="text-sm text-muted-foreground mb-3">
Internationaler Standard für Einzelhandel. 13 Ziffern, weltweit
anerkannt.
</p>
<div className="text-xs text-muted-foreground">
<strong>Einsatz:</strong> Produkte in Europa & global
</div>
</div>
<div className="p-6 border rounded-xl">
<div className="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mb-4">
<BarcodeIcon className="w-6 h-6 text-green-600" />
</div>
<h3 className="font-bold text-lg mb-2">UPC-A</h3>
<p className="text-sm text-muted-foreground mb-3">
Amerikanischer Standard. 12 Ziffern, hauptsächlich in
Nordamerika.
</p>
<div className="text-xs text-muted-foreground">
<strong>Einsatz:</strong> USA & Kanada Einzelhandel
</div>
</div>
<div className="p-6 border rounded-xl">
<div className="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center mb-4">
<BarcodeIcon className="w-6 h-6 text-purple-600" />
</div>
<h3 className="font-bold text-lg mb-2">Code 128</h3>
<p className="text-sm text-muted-foreground mb-3">
Flexible Lösung für Logistik. Alphanumerisch, hohe Datendichte.
</p>
<div className="text-xs text-muted-foreground">
<strong>Einsatz:</strong> Versand, Lager, Inventar
</div>
</div>
</div>
</div>
</section>
{/* How It Works */}
<section className="py-16 px-4 bg-slate-50">
<div className="container mx-auto max-w-7xl">
<h2 className="text-3xl font-bold text-center mb-12">
So funktioniert unser Barcode Generator
</h2>
<div className="grid md:grid-cols-5 gap-8">
<div className="text-center">
<div className="w-12 h-12 bg-slate-900 text-white rounded-full flex items-center justify-center mx-auto mb-4 font-bold">
1
</div>
<h3 className="font-bold mb-2">Daten eingeben</h3>
<p className="text-sm text-muted-foreground">
Geben Sie Ihre Produktnummer oder Text ein.
</p>
</div>
<div className="text-center">
<div className="w-12 h-12 bg-slate-900 text-white rounded-full flex items-center justify-center mx-auto mb-4 font-bold">
2
</div>
<h3 className="font-bold mb-2">Format wählen</h3>
<p className="text-sm text-muted-foreground">
EAN-13, UPC-A oder Code 128 auswählen.
</p>
</div>
<div className="text-center">
<div className="w-12 h-12 bg-slate-900 text-white rounded-full flex items-center justify-center mx-auto mb-4 font-bold">
3
</div>
<h3 className="font-bold mb-2">Vorschau</h3>
<p className="text-sm text-muted-foreground">
Barcode wird in Echtzeit aktualisiert.
</p>
</div>
<div className="text-center">
<div className="w-12 h-12 bg-slate-900 text-white rounded-full flex items-center justify-center mx-auto mb-4 font-bold">
4
</div>
<h3 className="font-bold mb-2">Herunterladen</h3>
<p className="text-sm text-muted-foreground">
Als PNG oder SVG speichern.
</p>
</div>
<div className="text-center">
<div className="w-12 h-12 bg-slate-900 text-white rounded-full flex items-center justify-center mx-auto mb-4 font-bold">
5
</div>
<h3 className="font-bold mb-2">Drucken</h3>
<p className="text-sm text-muted-foreground">
Sofort auf Etiketten drucken.
</p>
</div>
</div>
</div>
</section>
{/* Use Cases */}
<section className="py-16 px-4 bg-white">
<div className="container mx-auto max-w-7xl">
<h2 className="text-3xl font-bold text-center mb-4">
Für wen ist unser Barcode Generator geeignet?
</h2>
<p className="text-center text-muted-foreground mb-12 max-w-2xl mx-auto">
Ob Kleinunternehmer, Online-Händler oder Lagerverwaltung – unser
Tool unterstützt Sie bei allen Barcode-Bedarfen.
</p>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div className="p-6 bg-slate-50 rounded-xl">
<Printer className="w-8 h-8 text-blue-600 mb-3" />
<h3 className="font-bold mb-2">Einzelhandel</h3>
<p className="text-sm text-muted-foreground">
EAN-13 Barcodes für Produktetiketten im stationären Handel.
</p>
</div>
<div className="p-6 bg-slate-50 rounded-xl">
<Shield className="w-8 h-8 text-green-600 mb-3" />
<h3 className="font-bold mb-2">E-Commerce</h3>
<p className="text-sm text-muted-foreground">
UPC/EAN für Amazon, eBay und andere Marktplätze.
</p>
</div>
<div className="p-6 bg-slate-50 rounded-xl">
<Zap className="w-8 h-8 text-orange-600 mb-3" />
<h3 className="font-bold mb-2">Lager & Logistik</h3>
<p className="text-sm text-muted-foreground">
Code 128 für interne Bestandsverfolgung und Versand.
</p>
</div>
<div className="p-6 bg-slate-50 rounded-xl">
<Download className="w-8 h-8 text-purple-600 mb-3" />
<h3 className="font-bold mb-2">Druckerei</h3>
<p className="text-sm text-muted-foreground">
SVG-Export für professionelle Verpackungsdesigns.
</p>
</div>
</div>
</div>
</section>
{/* FAQ Section */}
<FAQ
t={{
faq: { title: 'Häufig gestellte Fragen', questions: faqQuestions },
}}
/>
{/* Free Tools Grid */}
<FreeToolsGrid />
{/* Scroll to Top */}
<ScrollToTop />
</>
);
}

470
src/app/(marketing-de)/qr-code-erstellen/page.tsx
View File

@@ -1,154 +1,316 @@
import React from 'react'; import React from 'react';
import type { Metadata } from 'next'; import type { Metadata } from 'next';
import SeoJsonLd from '@/components/SeoJsonLd'; import SeoJsonLd from '@/components/SeoJsonLd';
import { organizationSchema, websiteSchema } from '@/lib/schema'; import { organizationSchema, websiteSchema } from '@/lib/schema';
import { generateFaqSchema } from '@/lib/schema-utils'; import { generateFaqSchema } from '@/lib/schema-utils';
import { Hero } from '@/components/marketing/Hero'; import { Hero } from '@/components/marketing/Hero';
import { InstantGenerator } from '@/components/marketing/InstantGenerator'; import { InstantGenerator } from '@/components/marketing/InstantGenerator';
import { StaticVsDynamic } from '@/components/marketing/StaticVsDynamic'; import { StaticVsDynamic } from '@/components/marketing/StaticVsDynamic';
import { Features } from '@/components/marketing/Features'; import { Features } from '@/components/marketing/Features';
import { Pricing } from '@/components/marketing/Pricing'; import { Pricing } from '@/components/marketing/Pricing';
import { FAQ } from '@/components/marketing/FAQ'; import { FAQ } from '@/components/marketing/FAQ';
import { ScrollToTop } from '@/components/ui/ScrollToTop'; import { ScrollToTop } from '@/components/ui/ScrollToTop';
import { FreeToolsGrid } from '@/components/marketing/FreeToolsGrid'; import { FreeToolsGrid } from '@/components/marketing/FreeToolsGrid';
import de from '@/i18n/de.json'; import de from '@/i18n/de.json';
import { AnswerFirstBlock } from '@/components/marketing/AnswerFirstBlock'; import { AnswerFirstBlock } from '@/components/marketing/AnswerFirstBlock';
function truncateAtWord(text: string, maxLength: number): string { function truncateAtWord(text: string, maxLength: number): string {
if (text.length <= maxLength) return text; if (text.length <= maxLength) return text;
const truncated = text.slice(0, maxLength); const truncated = text.slice(0, maxLength);
const lastSpace = truncated.lastIndexOf(' '); const lastSpace = truncated.lastIndexOf(' ');
return lastSpace > 0 ? truncated.slice(0, lastSpace) : truncated; return lastSpace > 0 ? truncated.slice(0, lastSpace) : truncated;
} }
export async function generateMetadata(): Promise<Metadata> { export async function generateMetadata(): Promise<Metadata> {
const title = 'QR Code Erstellen – Kostenlos | QR Master'; const title = 'QR Code Erstellen – Kostenlos | QR Master';
const description = 'Erstellen Sie QR Codes kostenlos in Sekunden. Dynamische QR-Codes für Feedback, PDF und mehr. Mit Tracking, Branding und Massen-Erstellung.'; const description =
'Erstellen Sie QR Codes kostenlos in Sekunden. Dynamische QR-Codes für Feedback, PDF und mehr. Mit Tracking, Branding und Massen-Erstellung.';
return {
title: { return {
absolute: title title: {
}, absolute: title,
description, },
keywords: [ description,
'qr code erstellen', keywords: [
'qr code generator', 'qr code erstellen',
'qr code kostenlos', 'qr code generator',
'qr-code-generatoren', 'qr code kostenlos',
'qr codes erstellen', 'qr-code-generatoren',
'qr code erstellen kostenlos', 'qr codes erstellen',
'dynamischer qr code', 'qr code erstellen kostenlos',
'qr code mit logo', 'dynamischer qr code',
'feedback qr code', 'qr code mit logo',
'pdf qr code', 'feedback qr code',
'coupon qr code', 'pdf qr code',
'app store qr code' 'coupon qr code',
], 'app store qr code',
alternates: { 'qr code generator online',
canonical: 'https://www.qrmaster.net/qr-code-erstellen', 'qr code erstellen ohne anmeldung',
languages: { 'qr code für speisekarte erstellen',
'x-default': 'https://www.qrmaster.net/', 'qr code erstellen free',
en: 'https://www.qrmaster.net/', 'online qr code generator kostenlos',
de: 'https://www.qrmaster.net/qr-code-erstellen', 'qr code für restaurant erstellen',
}, 'qr code für flyer erstellen',
}, 'qr code für visitenkarte erstellen',
openGraph: { ],
title: 'QR Code Erstellen – Kostenlos & Sofort | QR Master', alternates: {
description: 'Erstellen Sie QR Codes kostenlos in Sekunden. Mit Tracking, Branding und Massen-Erstellung.', canonical: 'https://www.qrmaster.net/qr-code-erstellen',
url: 'https://www.qrmaster.net/qr-code-erstellen', languages: {
type: 'website', 'x-default': 'https://www.qrmaster.net/',
locale: 'de_DE', en: 'https://www.qrmaster.net/',
images: [ de: 'https://www.qrmaster.net/qr-code-erstellen',
{ },
url: 'https://www.qrmaster.net/og-image.png', },
width: 1200, openGraph: {
height: 630, title: 'QR Code Erstellen – Kostenlos & Sofort | QR Master',
alt: 'QR Code Erstellen - Kostenlos & Sofort', description:
}, 'Erstellen Sie QR Codes kostenlos in Sekunden. Mit Tracking, Branding und Massen-Erstellung.',
], url: 'https://www.qrmaster.net/qr-code-erstellen',
}, type: 'website',
twitter: { locale: 'de_DE',
title: 'QR Code Erstellen – Kostenlos | QR Master', images: [
description: 'QR Codes erstellen in Sekunden. Kostenlos, mit Tracking und individuellem Branding.', {
}, url: 'https://www.qrmaster.net/og-image.png',
}; width: 1200,
} height: 630,
alt: 'QR Code Erstellen - Kostenlos & Sofort',
export default function QRCodeErstellenPage() { },
// Use German translations ],
const t = de; },
twitter: {
return ( title: 'QR Code Erstellen – Kostenlos | QR Master',
<> description:
<SeoJsonLd data={[organizationSchema(), websiteSchema(), generateFaqSchema(t.faq.questions)]} /> 'QR Codes erstellen in Sekunden. Kostenlos, mit Tracking und individuellem Branding.',
},
};
}
{/* Server-rendered SEO content for crawlers - GERMAN */}
<div className="sr-only" aria-hidden="false"> export default function QRCodeErstellenPage() {
<p> // Use German translations
Erstellen Sie professionelle QR Codes für Ihr Unternehmen mit QR Master. Unser dynamischer QR Code Generator const t = de;
ermöglicht es Ihnen, trackbare QR Codes für Feedback, PDF-Dateien, Coupons und App Stores zu erstellen, Ziel-URLs jederzeit zu ändern und detaillierte Statistiken einzusehen.
Perfekt für Restaurants, Einzelhandel, Events und Marketing-Kampagnen. return (
</p> <>
<p> <SeoJsonLd
Funktionen: Dynamische QR Codes mit Echtzeit-Tracking, Massen-QR-Code-Erstellung aus Excel/CSV, data={[
individuelles Branding mit Farben und Logos, erweiterte Scan-Statistiken mit Gerätetypen und Standorten, organizationSchema(),
vCard QR Codes für digitale Visitenkarten und QR Codes für Restaurant-Speisekarten. websiteSchema(),
</p> generateFaqSchema(t.faq.questions),
<p> ]}
Starten Sie kostenlos mit 3 aktiven dynamischen QR Codes (8 Typen verfügbar) und unbegrenzten statischen Codes. Upgrade auf Pro für 50 Codes />
mit erweiterten Statistiken, oder Business für 500 Codes mit Massen-Erstellung und Prioritäts-Support.
</p> {/* Server-rendered SEO content for crawlers - GERMAN */}
</div> <div className="sr-only" aria-hidden="false">
<p>
<Hero t={t} /> Erstellen Sie professionelle QR Codes für Ihr Unternehmen mit QR
Master. Unser dynamischer QR Code Generator ermöglicht es Ihnen,
{/* Answer First Block (SEO/AEO) - German */} trackbare QR Codes für Feedback, PDF-Dateien, Coupons und App Stores
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl"> zu erstellen, Ziel-URLs jederzeit zu ändern und detaillierte
<AnswerFirstBlock Statistiken einzusehen. Perfekt für Restaurants, Einzelhandel, Events
whatIsIt="Ein QR-Code (Quick Response Code) ist ein zweidimensionaler Barcode, der von Smartphones gescannt werden kann, um sofort auf Informationen wie Webseiten, Kontaktdaten oder Speisekarten zuzugreifen. Mit QR Master erstellen Sie dynamische Codes, die Sie nachträglich ändern und statistisch auswerten können." und Marketing-Kampagnen.
whenToUse={[ </p>
"Wenn Sie Printmaterialien (Flyer, Plakate) drucken und den Link später ändern möchten", <p>
"Wenn Sie wissen wollen, wie oft und wo Ihr Code gescannt wurde", Funktionen: Dynamische QR Codes mit Echtzeit-Tracking,
"Wenn Sie professionelles Branding mit eigenem Logo benötigen" Massen-QR-Code-Erstellung aus Excel/CSV, individuelles Branding mit
]} Farben und Logos, erweiterte Scan-Statistiken mit Gerätetypen und
comparison={{ Standorten, vCard QR Codes für digitale Visitenkarten und QR Codes für
leftTitle: "Statisch", Restaurant-Speisekarten.
rightTitle: "Dynamisch", </p>
items: [ <p>
{ label: "Inhalt änderbar", value: true, text: "Nein" }, Starten Sie kostenlos mit 3 aktiven dynamischen QR Codes (8 Typen
{ label: "Scan-Statistik", value: true, text: "Nein" }, verfügbar) und unbegrenzten statischen Codes. Upgrade auf Pro für 50
{ label: "Druckqualität", value: true, text: "Hoch" } Codes mit erweiterten Statistiken, oder Business für 500 Codes mit
] Massen-Erstellung und Prioritäts-Support.
}} </p>
howTo={{ </div>
steps: [
"Kostenlos bei QR Master anmelden", <Hero t={t} />
"Ziel-URL eingeben und QR-Code Design anpassen",
"Code herunterladen, testen und drucken. Der Inhalt ist jederzeit änderbar." {/* SEO Content: QR-Code-Typen und Anwendungen */}
] <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl py-12">
}} <h2 className="text-3xl font-bold text-center mb-8">
/> Beliebte QR-Code-Typen für deutsche Unternehmen
</div> </h2>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
{/* Main Interaction: Generator */} <div className="p-6 border rounded-lg">
<InstantGenerator t={t} /> <h3 className="font-semibold text-lg mb-2">Speisekarten QR-Code</h3>
<p className="text-sm text-muted-foreground">
{/* Free Tools Grid */} Ideal für Restaurants, Cafés und Bars. Gäste scannen den Code und
<FreeToolsGrid /> sehen Ihre Speisekarte digital auf dem Handy –无需接触实物菜单。
</p>
<StaticVsDynamic t={t} /> </div>
<Features t={t} /> <div className="p-6 border rounded-lg">
<h3 className="font-semibold text-lg mb-2">Feedback QR-Code</h3>
{/* Pricing Section */} <p className="text-sm text-muted-foreground">
<Pricing t={t} /> Sammeln Sie Kundenfeedback direkt nach dem Besuch. Perfekt für
Hotels, Zahnarztpraxen und Dienstleister.
{/* FAQ Section */} </p>
<FAQ t={t} /> </div>
<div className="p-6 border rounded-lg">
{/* Scroll to Top Button */} <h3 className="font-semibold text-lg mb-2">Coupon QR-Code</h3>
<ScrollToTop /> <p className="text-sm text-muted-foreground">
</> Erstellen Sie einlösbare Coupons mit Zeitlimit. Steigern Sie die
); Kundentreue in Ihrem Einzelhandel oder Onlineshop.
} </p>
</div>
<div className="p-6 border rounded-lg">
<h3 className="font-semibold text-lg mb-2">vCard QR-Code</h3>
<p className="text-sm text-muted-foreground">
Digitale Visitenkarte: Kontaktdaten werden mit einem Scan ins
Adressbuch übertragen. Für Vertrieb und Networking.
</p>
</div>
<div className="p-6 border rounded-lg">
<h3 className="font-semibold text-lg mb-2">PDF QR-Code</h3>
<p className="text-sm text-muted-foreground">
Verteilen Sie PDFs wie Speisekarten, Preislisten oder Anleitungen.
Ändern Sie den Inhalt jederzeit ohne Neudruck.
</p>
</div>
<div className="p-6 border rounded-lg">
<h3 className="font-semibold text-lg mb-2">WiFi QR-Code</h3>
<p className="text-sm text-muted-foreground">
Gäste verbinden sich automatisch mit Ihrem WLAN. Für Hotels,
Coworking Spaces und Gastronomie.
</p>
</div>
</div>
</div>
{/* SEO Content: Branchen-Anwendungen */}
<div className="bg-slate-50 py-12">
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
<h2 className="text-3xl font-bold text-center mb-8">
QR-Codes nutzen: Für jede Branche
</h2>
<div className="space-y-6">
<div className="flex flex-col md:flex-row gap-4 items-start">
<div className="md:w-1/3 font-semibold">
Restaurants & Gastronomie
</div>
<div className="md:w-2/3 text-sm text-muted-foreground">
Digitale Speisekarten statt Papier, Bestellsysteme über QR-Code,
Feedback-Schleifen nach dem Besuch. Spart Druckkosten und
reduziert Kontaktpunkte.
</div>
</div>
<div className="flex flex-col md:flex-row gap-4 items-start">
<div className="md:w-1/3 font-semibold">Einzelhandel</div>
<div className="md:w-2/3 text-sm text-muted-foreground">
Produktinformationen per QR-Code, Coupons und Aktionen,
Cross-Selling zu Ihrem Onlineshop, Abfrage von
Produktbewertungen.
</div>
</div>
<div className="flex flex-col md:flex-row gap-4 items-start">
<div className="md:w-1/3 font-semibold">Events & Messen</div>
<div className="md:w-2/3 text-sm text-muted-foreground">
Digitale Visitenkarten, Event-Flyer mit Programm-QR-Code,
Feedback nach Vorträgen, Social-Media-Verbindungen.
</div>
</div>
<div className="flex flex-col md:flex-row gap-4 items-start">
<div className="md:w-1/3 font-semibold">
Hotels & Ferienwohnungen
</div>
<div className="md:w-2/3 text-sm text-muted-foreground">
Check-in über QR-Code, WLAN-Zugang ohne Passwort, digitale
Hausordnung, lokale Empfehlungen und Concierge-Service.
</div>
</div>
<div className="flex flex-col md:flex-row gap-4 items-start">
<div className="md:w-1/3 font-semibold">
Dienstleister & Agenturen
</div>
<div className="md:w-2/3 text-sm text-muted-foreground">
vCards für Vertriebsteams, Projekt-Updates per PDF-QR-Code,
Bewertungsanfragen nach Projektabschluss.
</div>
</div>
</div>
</div>
</div>
{/* SEO Content: Tipps für höhere Scan-Raten */}
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl py-12">
<h2 className="text-3xl font-bold text-center mb-8">
Tipps für mehr QR-Code-Scans
</h2>
<div className="grid md:grid-cols-2 gap-8">
<div>
<h3 className="font-semibold mb-3">Design optimieren</h3>
<ul className="space-y-2 text-sm text-muted-foreground">
<li>• Hoher Kontrast: Dunkler Code auf hellem Hintergrund</li>
<li>• Ausreichende Größe: Mindestens 2x2 cm, besser 3x3 cm</li>
<li>
• Eigenes Logo einbinden für Vertrauen und Wiedererkennung
</li>
<li>• Farben Ihrer Marke verwenden (Logo-Bereich)</li>
</ul>
</div>
<div>
<h3 className="font-semibold mb-3">Placement verbessern</h3>
<ul className="space-y-2 text-sm text-muted-foreground">
<li>
• Augenhöhe: QR-Codes auf Tischhöhe oder Wandhöhe platzieren
</li>
<li>• Ausreichend Weißraum um den Code herum</li>
<li>• In der Nähe des Call-to-Action: "Scannen Sie hier"</li>
<li>• Mehrfach platzieren: Eingang, Theke, Tische, Kasse</li>
</ul>
</div>
</div>
<p className="text-center text-sm text-muted-foreground mt-6">
<strong>Tipp:</strong> Testen Sie Ihren QR-Code vor dem Druck mit
mindestens 3 verschiedenen Smartphone-Modellen.
</p>
</div>
{/* Answer First Block (SEO/AEO) - German */}
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
<AnswerFirstBlock
whatIsIt="Ein QR-Code (Quick Response Code) ist ein zweidimensionaler Barcode, der von Smartphones gescannt werden kann, um sofort auf Informationen wie Webseiten, Kontaktdaten oder Speisekarten zuzugreifen. Mit QR Master erstellen Sie dynamische Codes, die Sie nachträglich ändern und statistisch auswerten können."
whenToUse={[
'Wenn Sie Printmaterialien (Flyer, Plakate) drucken und den Link später ändern möchten',
'Wenn Sie wissen wollen, wie oft und wo Ihr Code gescannt wurde',
'Wenn Sie professionelles Branding mit eigenem Logo benötigen',
]}
comparison={{
leftTitle: 'Statisch',
rightTitle: 'Dynamisch',
items: [
{ label: 'Inhalt änderbar', value: true, text: 'Nein' },
{ label: 'Scan-Statistik', value: true, text: 'Nein' },
{ label: 'Druckqualität', value: true, text: 'Hoch' },
],
}}
howTo={{
steps: [
'Kostenlos bei QR Master anmelden',
'Ziel-URL eingeben und QR-Code Design anpassen',
'Code herunterladen, testen und drucken. Der Inhalt ist jederzeit änderbar.',
],
}}
/>
</div>
{/* Main Interaction: Generator */}
<InstantGenerator t={t} />
{/* Free Tools Grid */}
<FreeToolsGrid />
<StaticVsDynamic t={t} />
<Features t={t} />
{/* Pricing Section */}
<Pricing t={t} />
{/* FAQ Section */}
<FAQ t={t} />
{/* Scroll to Top Button */}
<ScrollToTop />
</>
);
}

207
src/components/marketing/FAQ.tsx
View File

@@ -1,92 +1,115 @@
'use client'; 'use client';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion'; import { motion, AnimatePresence } from 'framer-motion';
import { Card } from '@/components/ui/Card'; import { Card } from '@/components/ui/Card';
interface FAQProps { interface FAQProps {
t: any; // i18n translation function t: any;
} }
export const FAQ: React.FC<FAQProps> = ({ t }) => { export const FAQ: React.FC<FAQProps> = ({ t }) => {
const [openIndex, setOpenIndex] = useState<number | null>(null); const [openIndex, setOpenIndex] = useState<number | null>(null);
const questions = [ const defaultQuestions = [
'account', 'account',
'static_vs_dynamic', 'static_vs_dynamic',
'forever', 'forever',
'file_type', 'file_type',
'analytics', 'analytics',
]; ];
return ( const questions = t?.faq?.questions
<section id="faq" className="py-16 bg-gray-50"> ? Array.isArray(t.faq.questions)
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl"> ? t.faq.questions
<motion.div : Object.keys(t.faq.questions).length > 5
initial={{ opacity: 0, y: 20 }} ? Object.keys(t.faq.questions).slice(0, 12)
whileInView={{ opacity: 1, y: 0 }} : defaultQuestions
viewport={{ once: true }} : defaultQuestions;
transition={{ duration: 0.5 }}
className="text-center mb-12" return (
> <section id="faq" className="py-16 bg-gray-50">
<h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4"> <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
{t.faq.title} <motion.div
</h2> initial={{ opacity: 0, y: 20 }}
</motion.div> whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
<div className="max-w-3xl mx-auto space-y-4"> transition={{ duration: 0.5 }}
{questions.map((key, index) => ( className="text-center mb-12"
<motion.div >
key={key} <h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
initial={{ opacity: 0, x: -20 }} {t.faq.title}
whileInView={{ opacity: 1, x: 0 }} </h2>
viewport={{ once: true }} </motion.div>
transition={{ duration: 0.5, delay: index * 0.1 }}
> <div className="max-w-3xl mx-auto space-y-4">
<Card className="cursor-pointer border-gray-200 hover:border-gray-300 transition-colors" onClick={() => setOpenIndex(openIndex === index ? null : index)}> {questions.map((key: string, index: number) => (
<div className="p-6"> <motion.div
<div className="flex items-center justify-between"> key={key}
<h3 className="text-lg font-semibold text-gray-900"> initial={{ opacity: 0, x: -20 }}
{t.faq.questions[key].question} whileInView={{ opacity: 1, x: 0 }}
</h3> viewport={{ once: true }}
<svg transition={{ duration: 0.5, delay: index * 0.1 }}
className={`w-5 h-5 text-gray-500 transition-transform duration-300 ${openIndex === index ? 'rotate-180' : ''}`} >
fill="none" <Card
stroke="currentColor" className="cursor-pointer border-gray-200 hover:border-gray-300 transition-colors"
viewBox="0 0 24 24" onClick={() => setOpenIndex(openIndex === index ? null : index)}
aria-hidden="true" >
> <div className="p-6">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /> <div className="flex items-center justify-between">
</svg> <h3 className="text-lg font-semibold text-gray-900">
</div> {t.faq.questions[key]?.question ||
t.faq.questions[key]?.question ||
<AnimatePresence> key}
{openIndex === index && ( </h3>
<motion.div <svg
initial={{ height: 0, opacity: 0, marginTop: 0 }} className={`w-5 h-5 text-gray-500 transition-transform duration-300 ${openIndex === index ? 'rotate-180' : ''}`}
animate={{ height: 'auto', opacity: 1, marginTop: 16 }} fill="none"
exit={{ height: 0, opacity: 0, marginTop: 0 }} stroke="currentColor"
transition={{ duration: 0.3 }} viewBox="0 0 24 24"
className="overflow-hidden" aria-hidden="true"
> >
<div className="text-gray-600"> <path
{t.faq.questions[key].answer} strokeLinecap="round"
</div> strokeLinejoin="round"
</motion.div> strokeWidth={2}
)} d="M19 9l-7 7-7-7"
</AnimatePresence> />
</div> </svg>
</Card> </div>
</motion.div>
))} <AnimatePresence>
</div> {openIndex === index && (
<motion.div
<div className="text-center mt-8"> initial={{ height: 0, opacity: 0, marginTop: 0 }}
<a href="/faq" className="text-primary-600 hover:text-primary-700 font-medium"> animate={{ height: 'auto', opacity: 1, marginTop: 16 }}
View All Questions → exit={{ height: 0, opacity: 0, marginTop: 0 }}
</a> transition={{ duration: 0.3 }}
</div> className="overflow-hidden"
</div> >
</section> <div className="text-gray-600">
); {t.faq.questions[key]?.answer ||
}; t.faq.questions[key]?.answer ||
''}
</div>
</motion.div>
)}
</AnimatePresence>
</div>
</Card>
</motion.div>
))}
</div>
<div className="text-center mt-8">
<a
href="/faq"
className="text-primary-600 hover:text-primary-700 font-medium"
>
View All Questions →
</a>
</div>
</div>
</section>
);
};

20
src/i18n/de.json
View File

@@ -227,6 +227,26 @@
"bulk": { "bulk": {
"question": "Kann ich Codes in großen Mengen mit meinen eigenen Daten erstellen?", "question": "Kann ich Codes in großen Mengen mit meinen eigenen Daten erstellen?",
"answer": "Ja, Sie können CSV- oder Excel-Dateien hochladen, um mehrere QR-Codes auf einmal mit individueller Datenzuordnung zu erstellen." "answer": "Ja, Sie können CSV- oder Excel-Dateien hochladen, um mehrere QR-Codes auf einmal mit individueller Datenzuordnung zu erstellen."
},
"no_account": {
"question": "Kann ich QR-Codes auch ohne Anmeldung erstellen?",
"answer": "Ja, Sie können unbegrenzt statische QR-Codes ohne Registrierung erstellen. Diese sind sofort einsatzbereit und funktionieren für immer. Für dynamische QR-Codes mit Tracking und Bearbeitung ist ein kostenloses Konto erforderlich."
},
"restaurant_menu": {
"question": "Kann ich eine digitale Speisekarte per QR-Code erstellen?",
"answer": "Ja, mit dem PDF-QR-Code können Sie Ihre Speisekarte als digitale Version erstellen. Gäste scannen den Code und sehen die Speisekarte auf ihrem Handy. Änderungen an der Karte sind ohne Neudruck möglich."
},
"scan_rate": {
"question": "Was beeinflusst die Scan-Rate meines QR-Codes?",
"answer": "Die Scan-Rate hängt von mehreren Faktoren ab: Platzierung (auf Augenhöhe), Größe (mindestens 2x2 cm), Kontrast (dunkel auf hell), Call-to-Action ('Scannen Sie hier') und Vorhandensein Ihres Logos für Vertrauen."
},
"branding": {
"question": "Kann ich meinen QR-Code mit meinem Logo branden?",
"answer": "Ja, ab dem Pro-Plan können Sie Ihre QR-Codes mit Ihrem Firmenlogo, individuellen Farben und Stilen anpassen. Dies erhöht die Vertrauenswürdigkeit und Wiedererkennung."
},
"data_security": {
"question": "Sind meine QR-Code-Daten in Deutschland sicher?",
"answer": "Wir hosten auf europäischen Servern und folgen der DSGVO. Scan-Daten werden anonymisiert gespeichert. Wir geben keine persönlichen Daten an Dritte weiter."
} }
} }
}, },

3
src/lib/schema-utils.ts
View File

@@ -29,9 +29,8 @@ export function generateSoftwareAppSchema(
price: '0', price: '0',
priceCurrency: 'USD', priceCurrency: 'USD',
availability: 'https://schema.org/InStock', availability: 'https://schema.org/InStock',
priceValidUntil: '2026-12-31', priceValidUntil: '2027-12-31',
}, },
description, description,
}; };
} }