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

GSC seo

Browse Source
This commit is contained in:
Timo Knuth
2026-05-10 23:00:06 +02:00
parent 8741edc362
commit 35e7e77f6b
14 changed files with 3810 additions and 2106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/app/(main)/(marketing)/about/page.tsx
View File

@@ -8,11 +8,11 @@ import { CheckCircle2, Shield, Users, BarChart3, Globe, Lock } from 'lucide-reac
import { ObfuscatedMailto } from '@/components/ui/ObfuscatedMailto';
export const metadata: Metadata = {
title: 'About QR Master | The Team & Mission Behind the Platform',
description: 'QR Master is built for measurable campaigns and secure QR code operations. Learn about our mission, values, and why businesses trust us.',
title: 'About QR Master | Free QR Code Generator for Businesses',
description: 'QR Master helps businesses create, track, and manage QR codes at scale — free dynamic QR codes, real analytics, and no hidden limits. Learn who we are.',
openGraph: {
title: 'About QR Master | Dynamic QR Codes & Analytics',
description: 'We help businesses create, manage, and track QR codes at scale. Transparent pricing, privacy-first, and built for reliability.',
title: 'About QR Master | Free Dynamic QR Codes & Analytics',
description: 'Free dynamic QR codes with scan analytics, custom branding, and no reprint headaches. Learn about the team and mission behind QR Master.',
url: 'https://www.qrmaster.net/about',
type: 'website',
images: ['/og-image.png'],
@@ -112,11 +112,11 @@ export default function AboutPage() {
</div>
</div>
<div className="mt-12 text-center">
<Link href="/dynamic-qr-code-generator">
<Button size="lg">Create QR Code</Button>
</Link>
</div>
<div className="mt-12 text-center">
<Link href="/dynamic-qr-code-generator">
<Button size="lg">Create QR Code</Button>
</Link>
</div>
</div>
</section>

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

File diff suppressed because it is too large Load Diff

4
src/app/(main)/(marketing)/faq/page.tsx
View File

@@ -14,9 +14,9 @@ function truncateAtWord(text: string, maxLength: number): string {
}
export async function generateMetadata(): Promise<Metadata> {
const title = truncateAtWord('QR Code FAQ: Do QR Codes Expire, Work Through Laminate, and More', 60);
const title = truncateAtWord('QR Code FAQ: Expiry, Laminate Scanning & Dynamic QR Explained', 60);
const description = truncateAtWord(
'Answers to common QR code questions: do QR codes expire, will they become obsolete, do they work through laminate, and product-specific questions about dynamic QR codes and tracking.',
'Quick answers: do QR codes expire? Do they work through laminate? What\'s the difference between static and dynamic? Get straight answers before you start creating.',
160
);

219
src/app/(main)/(marketing)/page.tsx
View File

@@ -1,93 +1,126 @@
import React from 'react';
import type { Metadata } from 'next';
import SeoJsonLd from '@/components/SeoJsonLd';
import { organizationSchema, websiteSchema, softwareApplicationSchema, reviewSchema, aggregateRatingSchema } from '@/lib/schema';
import { getFeaturedTestimonials, getAggregateRating } from '@/lib/testimonial-data';
import HomePageClient from '@/components/marketing/HomePageClient';
function truncateAtWord(text: string, maxLength: number): string {
if (text.length <= maxLength) return text;
const truncated = text.slice(0, maxLength);
const lastSpace = truncated.lastIndexOf(' ');
return lastSpace > 0 ? truncated.slice(0, lastSpace) : truncated;
}
export async function generateMetadata(): Promise<Metadata> {
const title = truncateAtWord('QR Master: Dynamic QR Generator', 60);
const description = truncateAtWord(
'Create dynamic QR codes, track scans, and scale campaigns with secure analytics. Free advanced features, bulk generation, and custom branding available.',
160
);
return {
title,
description,
keywords: ['qr generator', 'free qr code generator', 'custom qr code generator', 'qr code maker', 'online qr code generator', 'dynamic qr code', 'qr code with logo'],
alternates: {
canonical: 'https://www.qrmaster.net/',
languages: {
'x-default': 'https://www.qrmaster.net/',
en: 'https://www.qrmaster.net/',
de: 'https://www.qrmaster.net/qr-code-erstellen',
},
},
openGraph: {
title,
description,
url: 'https://www.qrmaster.net/',
type: 'website',
images: [
{
url: 'https://www.qrmaster.net/og-image.png',
width: 1200,
height: 630,
alt: 'QR Master - Dynamic QR Code Generator and Analytics Platform',
},
],
},
twitter: {
title,
description,
},
};
}
export default function HomePage() {
const featuredTestimonials = getFeaturedTestimonials();
const aggregateRating = getAggregateRating();
const reviewSchemas = featuredTestimonials.map(t => reviewSchema(t));
return (
<>
<SeoJsonLd data={[
websiteSchema(),
organizationSchema(),
softwareApplicationSchema(aggregateRating),
aggregateRatingSchema(aggregateRating),
...reviewSchemas
]} />
{/* Server-rendered SEO content for crawlers */}
<div className="sr-only" aria-hidden="false">
<p>
Create professional QR codes for your business with QR Master. Our dynamic QR code generator
lets you create trackable QR codes, edit destinations anytime, and view detailed analytics.
Perfect for restaurants, retail, events, and marketing campaigns.
</p>
<p>
Features include: Dynamic QR codes with real-time tracking, bulk QR code generation from Excel/CSV,
custom branding with colors and logos, advanced scan analytics showing device types and locations,
vCard QR codes for digital business cards, restaurant menu QR codes, and a free{' '}
<a href="/tools/barcode-generator">barcode generator</a> for EAN-13, UPC-A, and Code 128 barcodes.
</p>
<p>
Start free with 3 active dynamic QR codes and unlimited static codes. Upgrade to Pro for 50 codes
with advanced analytics, or Business for 500 codes with bulk creation and priority support.
</p>
</div>
<HomePageClient />
</>
);
}
import React from 'react';
import type { Metadata } from 'next';
import SeoJsonLd from '@/components/SeoJsonLd';
import {
organizationSchema,
websiteSchema,
softwareApplicationSchema,
reviewSchema,
aggregateRatingSchema,
} from '@/lib/schema';
import {
getFeaturedTestimonials,
getAggregateRating,
} from '@/lib/testimonial-data';
import HomePageClient from '@/components/marketing/HomePageClient';
function truncateAtWord(text: string, maxLength: number): string {
if (text.length <= maxLength) return text;
const truncated = text.slice(0, maxLength);
const lastSpace = truncated.lastIndexOf(' ');
return lastSpace > 0 ? truncated.slice(0, lastSpace) : truncated;
}
export async function generateMetadata(): Promise<Metadata> {
const title = truncateAtWord('QR Master - Free QR Code Generator', 60);
const description = truncateAtWord(
'QR Master is a free QR code generator for dynamic QR codes, scan tracking, custom branding, bulk creation, and static QR tools.',
160
);
return {
title,
description,
keywords: [
'qr generator',
'free qr code generator',
'custom qr code generator',
'qr code maker',
'online qr code generator',
'dynamic qr code',
'qr code with logo',
'barcode generator',
'free barcode generator',
],
alternates: {
canonical: 'https://www.qrmaster.net/',
languages: {
'x-default': 'https://www.qrmaster.net/',
en: 'https://www.qrmaster.net/',
de: 'https://www.qrmaster.net/qr-code-erstellen',
},
},
openGraph: {
title,
description,
url: 'https://www.qrmaster.net/',
type: 'website',
images: [
{
url: 'https://www.qrmaster.net/og-image.png',
width: 1200,
height: 630,
alt: 'QR Master - Dynamic QR Code Generator and Analytics Platform',
},
],
},
twitter: {
title,
description,
},
};
}
export default function HomePage() {
const featuredTestimonials = getFeaturedTestimonials();
const aggregateRating = getAggregateRating();
const reviewSchemas = featuredTestimonials.map((t) => reviewSchema(t));
return (
<>
<SeoJsonLd
data={[
websiteSchema(),
organizationSchema(),
softwareApplicationSchema(aggregateRating),
aggregateRatingSchema(aggregateRating),
...reviewSchemas,
]}
/>
{/* Server-rendered SEO content for crawlers */}
<div className="sr-only" aria-hidden="false">
<p>
Create professional QR codes for your business with QR Master. Our
dynamic QR code generator lets you create trackable QR codes, edit
destinations anytime, and view detailed analytics. Perfect for
restaurants, retail, events, and marketing campaigns.
</p>
<p>
Features include: Dynamic QR codes with real-time tracking, bulk QR
code generation from Excel/CSV, custom branding with colors and logos,
advanced scan analytics showing device types and locations, vCard QR
codes for digital business cards, restaurant menu QR codes, and a free{' '}
<a href="/tools/barcode-generator">barcode generator</a> for EAN-13,
UPC-A, and Code 128 barcodes.
</p>
<p>
Popular QR Master workflows include the{' '}
<a href="/dynamic-qr-code-generator">
free dynamic QR code generator
</a>
, <a href="/qr-code-tracking">QR code tracking</a>, and the{' '}
<a href="/custom-qr-code-generator">custom QR code generator</a> for
branded print campaigns.
</p>
<p>
Start free with 3 active dynamic QR codes and unlimited static codes.
Upgrade to Pro for 50 codes with advanced analytics, or Business for
500 codes with bulk creation and priority support.
</p>
</div>
<HomePageClient />
</>
);
}

1368
src/app/(main)/(marketing)/qr-code-tracking/page.tsx
View File

File diff suppressed because it is too large Load Diff

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

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

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

@@ -1,382 +1,573 @@
import React from 'react';
import type { Metadata } from 'next';
import BarcodeGeneratorClient from './BarcodeGeneratorClient';
import { BarcodeGuide } from './BarcodeGuide';
import { Barcode as BarcodeIcon, Shield, Zap, Printer, Download, Share2, Sparkles, Sliders, Check } from 'lucide-react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free Barcode Generator Online – EAN, UPC, Code 128',
},
description: 'Free online barcode generator for EAN-13, UPC-A, and Code 128 barcodes. Create scannable labels for retail, inventory, and logistics instantly. Download PNG or SVG — no signup required.',
keywords: ['barcode generator', 'online barcode maker', 'create barcode free', 'ean-13 generator', 'upc-a generator', 'code 128 generator', 'barcode creator', 'printable barcodes'],
alternates: {
canonical: 'https://www.qrmaster.net/tools/barcode-generator',
languages: {
'x-default': 'https://www.qrmaster.net/tools/barcode-generator',
en: 'https://www.qrmaster.net/tools/barcode-generator',
},
},
openGraph: {
title: 'Barcode Generator: Create EAN, UPC & Code 128',
description: 'Barcode Generator: Create professional labels instantly. Free & Secured.',
url: 'https://www.qrmaster.net/tools/barcode-generator',
siteName: 'QR Master',
locale: 'en_US',
type: 'website',
images: [{ url: '/barcode-generator-preview.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free Barcode Generator',
description: 'Create custom barcodes in seconds. Download high-quality PNG/SVG.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'Barcode Generator',
'Generate custom printable barcodes instantly for EAN, UPC, Code 128 and more.',
'/barcode-generator-preview.png',
'UtilitiesApplication'
),
{
'@type': 'WebPage',
'@id': 'https://www.qrmaster.net/tools/barcode-generator',
name: 'Free Barcode Generator Online – EAN, UPC, Code 128',
description: 'A barcode generator converts any number or text into a scannable barcode image for retail labels, inventory, and product packaging. Supports EAN-13, UPC-A, and Code 128.',
speakable: {
'@type': 'SpeakableSpecification',
cssSelector: ['.bg-blue-50', 'h1'],
},
author: {
'@type': 'Person',
name: 'Timo Knuth',
url: 'https://www.qrmaster.net/authors/timo',
},
dateModified: '2026-04-27',
},
{
'@type': 'HowTo',
name: 'How to Create a Barcode',
datePublished: '2024-06-01',
dateModified: '2026-04-27',
author: {
'@type': 'Person',
name: 'Timo Knuth',
url: 'https://www.qrmaster.net/authors/timo',
},
description: 'Create custom barcodes for products or inventory.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Enter Content',
text: 'Type or paste the numeric or alphanumeric data for your barcode.',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Select Format',
text: 'Choose the appropriate barcode type (e.g., Code 128 for general use, EAN-13 for retail).',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Customize Design',
text: 'Adjust the height and width of the barcode to fit your needs.',
},
{
'@type': 'HowToStep',
position: 4,
name: 'Toggle Text',
text: 'Decide if you want the human-readable value to appear below the barcode.',
},
{
'@type': 'HowToStep',
position: 5,
name: 'Download & Print',
text: 'Save your barcode as PNG or SVG and print it for labels or inventory.',
},
],
totalTime: 'PT20S',
},
generateFaqSchema({
'What is a Barcode Generator?': {
question: 'What is a Barcode Generator?',
answer: 'A Barcode Generator is an online tool that converts numbers or text into scannable barcode images that can be used for products, labels, and inventory systems.',
},
'Is this barcode generator free to use?': {
question: 'Is this barcode generator free to use?',
answer: 'Yes, our online barcode generator is completely free to use with no hidden costs or sign-ups required. You can generate, download, and print barcodes instantly.',
},
'Which barcode format should I use?': {
question: 'Which barcode format should I use?',
answer: 'EAN-13 is standard for retail in Europe/Global. UPC-A is standard for retail in USA/Canada. Code 128 is best for logistics and internal tracking as it supports letters and numbers.',
},
'Can I download barcodes in vector format (SVG)?': {
question: 'Can I download barcodes in vector format (SVG)?',
answer: 'Yes! We offer SVG downloads. SVG files are vector-based, meaning they can be scaled to any size without losing quality—perfect for professional product packaging.',
},
'How do I generate a barcode online?': {
question: 'How do I generate a barcode online?',
answer: 'To generate a barcode online, enter your product number or text, select the desired barcode format (such as EAN-13 or Code 128), and click the generate button. The barcode will be created instantly.',
},
'Are generated barcodes scannable?': {
question: 'Are generated barcodes scannable?',
answer: 'Yes, barcodes generated with a proper barcode generator are fully scannable. We generate standard-compliant barcodes readable by any standard optical or laser barcode scanner.',
},
'Can I use these barcodes for Amazon (EAN/UPC)?': {
question: 'Can I use these barcodes for Amazon (EAN/UPC)?',
answer: 'You can generate the image for Amazon here if you already have your EAN/UPC number. However, you cannot "create" a valid global EAN number here—you must purchase those official numbers from GS1 to sell on major platforms like Amazon.',
},
'What is the difference between a barcode and a QR code?': {
question: 'What is the difference between a barcode and a QR code?',
answer: 'A barcode stores data horizontally (1D) and is mainly used for product IDs. A QR code stores data in 2D (matrix) and can hold much more information, such as URLs, vCards, or WiFi credentials.',
},
}),
],
};
export default function BarcodeGeneratorPage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="Barcode Generator" toolSlug="barcode-generator" />
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden bg-slate-900">
<div className="absolute inset-0 opacity-10">
{/* Barcode Pattern */}
<svg className="w-full h-full" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="barcode_pattern" 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)" />
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-blue-400"></span>
</span>
Free Tool — Professional & Fast
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Free Online <span className="text-blue-400">Barcode Generator</span>
</h1>
<p className="text-lg md:text-xl text-slate-400 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
A <strong>barcode generator</strong> converts any number or text into a scannable barcode image — ready to download, print, and use on products, labels, or inventory systems.
<span className="text-white block sm:inline mt-2 sm:mt-0"> Supports EAN-13, UPC-A, and Code 128. No signup required.</span>
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Check className="w-4 h-4 text-blue-400" />
Retail Ready
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Check className="w-4 h-4 text-blue-400" />
Vector SVG Export
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Check className="w-4 h-4 text-blue-400" />
No Registration
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-blue-500/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-2 hover:-rotate-1 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent rounded-3xl" />
<div className="w-full bg-gradient-to-br from-blue-400 to-indigo-600 rounded-xl shadow-lg p-5 mb-6 relative overflow-hidden text-white">
<div className="flex justify-between items-start mb-4">
<BarcodeIcon className="w-8 h-8 opacity-80" />
<div className="bg-white/20 px-2 py-1 rounded text-xs font-bold uppercase tracking-wider">Label</div>
</div>
<div className="text-xl font-bold tracking-wider mb-1">PROD-98234</div>
<div className="text-xs opacity-70">Inventory ID</div>
</div>
<div className="w-48 h-32 bg-white rounded-xl p-4 shadow-inner relative overflow-hidden flex flex-col items-center justify-center">
<div className="w-full h-16 bg-black flex gap-1 mb-2">
{[2, 4, 1, 3, 2, 1, 4, 2, 1, 3].map((w, i) => (
<div key={i} className="bg-black flex-1" style={{ flex: w }} />
))}
</div>
<div className="text-[10px] font-mono font-bold tracking-widest uppercase">98234001A</div>
</div>
{/* Floating Badge */}
<div className="absolute -bottom-6 -right-6 bg-slate-900 border border-white/10 py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-blue-500/20 p-2 rounded-full">
<Printer className="w-5 h-5 text-blue-500" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Ready</div>
<div className="text-sm font-bold text-white">Print Instantly</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<BarcodeGeneratorClient />
</section>
{/* AI-EXTRACTABLE DEFINITION + STATS BLOCK */}
<section className="py-12 px-4 sm:px-6 lg:px-8 bg-white border-b border-slate-100">
<div className="max-w-4xl mx-auto">
<div className="bg-blue-50 border-l-4 border-blue-500 rounded-xl p-6 mb-8">
<h2 className="text-xl font-bold text-slate-900 mb-2">What is a Barcode Generator?</h2>
<p className="text-slate-700 leading-relaxed">
A <strong>barcode generator</strong> is an online tool that converts a number or text string into a scannable barcode image (EAN-13, UPC-A, or Code 128). The generated barcode can be downloaded as PNG or SVG and printed on product labels, packaging, or inventory stickers for use with any standard barcode scanner.
</p>
</div>
<div className="grid md:grid-cols-3 gap-6 mb-8">
<div className="text-center p-5 rounded-xl bg-slate-50 border border-slate-200">
<div className="text-3xl font-extrabold text-blue-600 mb-1">EAN-13</div>
<div className="text-sm font-semibold text-slate-700 mb-1">Global Retail Standard</div>
<div className="text-xs text-slate-500">Used on over 5 billion product labels worldwide (GS1, 2024)</div>
</div>
<div className="text-center p-5 rounded-xl bg-slate-50 border border-slate-200">
<div className="text-3xl font-extrabold text-blue-600 mb-1">UPC-A</div>
<div className="text-sm font-semibold text-slate-700 mb-1">North America Standard</div>
<div className="text-xs text-slate-500">Required by Amazon, Walmart, Target for product listings</div>
</div>
<div className="text-center p-5 rounded-xl bg-slate-50 border border-slate-200">
<div className="text-3xl font-extrabold text-blue-600 mb-1">Code 128</div>
<div className="text-sm font-semibold text-slate-700 mb-1">Inventory &amp; Logistics</div>
<div className="text-xs text-slate-500">Supports letters + numbers — best for internal SKU systems</div>
</div>
</div>
<div className="bg-amber-50 border border-amber-200 rounded-xl p-5">
<h3 className="font-bold text-slate-900 mb-2">Barcode vs. QR Code — When to Use Which</h3>
<div className="grid md:grid-cols-2 gap-4 text-sm text-slate-700">
<div>
<p className="font-semibold text-slate-800 mb-1">✓ Use a barcode for:</p>
<ul className="space-y-1 list-disc list-inside text-slate-600">
<li>Product SKUs and retail checkout</li>
<li>Warehouse shelf and bin labels</li>
<li>Inventory counting and stock control</li>
<li>Order fulfillment and packing verification</li>
</ul>
</div>
<div>
<p className="font-semibold text-slate-800 mb-1">✓ Use a QR code for:</p>
<ul className="space-y-1 list-disc list-inside text-slate-600">
<li>Restaurant menus and digital content</li>
<li>Marketing campaigns and landing pages</li>
<li>Review collection and customer feedback</li>
<li>Product setup guides and support pages</li>
</ul>
</div>
</div>
</div>
</div>
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How Our Barcode Generator Works
</h2>
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Sliders className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Configure</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Enter your data and select the format.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Sparkles className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Customize</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Adjust height, width and text display.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Zap className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Preview</h3>
<p className="text-slate-600 text-xs leading-relaxed">
See your barcode update in real-time.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Download className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">4. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Save as professional PNG or SVG.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Printer className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">5. Print</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Print labels directly from your browser.
</p>
</article>
</div>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* SEO GUIDE */}
<BarcodeGuide />
</div>
</>
);
}
import React from 'react';
import type { Metadata } from 'next';
import BarcodeGeneratorClient from './BarcodeGeneratorClient';
import { BarcodeGuide } from './BarcodeGuide';
import {
Barcode as BarcodeIcon,
Shield,
Zap,
Printer,
Download,
Share2,
Sparkles,
Sliders,
Check,
} from 'lucide-react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import {
generateSoftwareAppSchema,
generateFaqSchema,
} from '@/lib/schema-utils';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: {
absolute: 'Free Custom Barcode Generator - EAN, UPC, Code 128',
},
description:
'Free custom barcode generator and barcode maker for EAN-13, UPC-A, UPC barcode, and Code 128. Create scannable labels for retail and inventory, then download PNG or SVG.',
keywords: [
'barcode generator',
'custom barcode generator',
'online barcode generator',
'free online barcode generator',
'barcode maker',
'upc barcode generator',
'ean-13 generator',
'upc-a generator',
'code 128 generator',
'barcode creator',
'create barcode free',
'printable barcodes',
],
alternates: {
canonical: 'https://www.qrmaster.net/tools/barcode-generator',
languages: {
'x-default': 'https://www.qrmaster.net/tools/barcode-generator',
en: 'https://www.qrmaster.net/tools/barcode-generator',
},
},
openGraph: {
title: 'Free Custom Barcode Generator - EAN, UPC & Code 128',
description:
'Free online barcode maker for EAN-13, UPC-A, and Code 128. Create scannable custom barcodes in seconds and download PNG or SVG.',
url: 'https://www.qrmaster.net/tools/barcode-generator',
siteName: 'QR Master',
locale: 'en_US',
type: 'website',
images: [
{ url: '/barcode-generator-preview.png', width: 1200, height: 630 },
],
},
twitter: {
card: 'summary_large_image',
title: 'Free Barcode Generator',
description:
'Create custom barcodes in seconds. Download high-quality PNG/SVG.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
generateSoftwareAppSchema(
'Barcode Generator',
'Generate custom printable barcodes instantly for EAN, UPC, Code 128 and more.',
'/barcode-generator-preview.png',
'UtilitiesApplication'
),
{
'@type': 'WebPage',
'@id': 'https://www.qrmaster.net/tools/barcode-generator',
name: 'Free Custom Barcode Generator Online - EAN, UPC, Code 128',
description:
'A barcode generator converts any number or text into a scannable barcode image for retail labels, inventory, and product packaging. Supports EAN-13, UPC-A, and Code 128.',
speakable: {
'@type': 'SpeakableSpecification',
cssSelector: ['.bg-blue-50', 'h1'],
},
author: {
'@type': 'Person',
name: 'Timo Knuth',
url: 'https://www.qrmaster.net/authors/timo',
},
dateModified: '2026-05-10',
},
{
'@type': 'HowTo',
name: 'How to Create a Barcode',
datePublished: '2024-06-01',
dateModified: '2026-05-10',
author: {
'@type': 'Person',
name: 'Timo Knuth',
url: 'https://www.qrmaster.net/authors/timo',
},
description: 'Create custom barcodes for products or inventory.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Enter Content',
text: 'Type or paste the numeric or alphanumeric data for your barcode.',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Select Format',
text: 'Choose the appropriate barcode type (e.g., Code 128 for general use, EAN-13 for retail).',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Customize Design',
text: 'Adjust the height and width of the barcode to fit your needs.',
},
{
'@type': 'HowToStep',
position: 4,
name: 'Toggle Text',
text: 'Decide if you want the human-readable value to appear below the barcode.',
},
{
'@type': 'HowToStep',
position: 5,
name: 'Download & Print',
text: 'Save your barcode as PNG or SVG and print it for labels or inventory.',
},
],
totalTime: 'PT20S',
},
generateFaqSchema({
'What is a Barcode Generator?': {
question: 'What is a Barcode Generator?',
answer:
'A Barcode Generator is an online tool that converts numbers or text into scannable barcode images that can be used for products, labels, and inventory systems.',
},
'Is this barcode generator free to use?': {
question: 'Is this barcode generator free to use?',
answer:
'Yes, our online barcode generator is completely free to use with no hidden costs or sign-ups required. You can generate, download, and print barcodes instantly.',
},
'Which barcode format should I use?': {
question: 'Which barcode format should I use?',
answer:
'EAN-13 is standard for retail in Europe/Global. UPC-A is standard for retail in USA/Canada. Code 128 is best for logistics and internal tracking as it supports letters and numbers.',
},
'Can I download barcodes in vector format (SVG)?': {
question: 'Can I download barcodes in vector format (SVG)?',
answer:
'Yes! We offer SVG downloads. SVG files are vector-based, meaning they can be scaled to any size without losing quality—perfect for professional product packaging.',
},
'How do I generate a barcode online?': {
question: 'How do I generate a barcode online?',
answer:
'To generate a barcode online, enter your product number or text, select the desired barcode format (such as EAN-13 or Code 128), and click the generate button. The barcode will be created instantly.',
},
'Are generated barcodes scannable?': {
question: 'Are generated barcodes scannable?',
answer:
'Yes, barcodes generated with a proper barcode generator are fully scannable. We generate standard-compliant barcodes readable by any standard optical or laser barcode scanner.',
},
'Can I use these barcodes for Amazon (EAN/UPC)?': {
question: 'Can I use these barcodes for Amazon (EAN/UPC)?',
answer:
'You can generate the image for Amazon here if you already have your EAN/UPC number. However, you cannot "create" a valid global EAN number here—you must purchase those official numbers from GS1 to sell on major platforms like Amazon.',
},
'What is the difference between a barcode and a QR code?': {
question: 'What is the difference between a barcode and a QR code?',
answer:
'A barcode stores data horizontally (1D) and is mainly used for product IDs. A QR code stores data in 2D (matrix) and can hold much more information, such as URLs, vCards, or WiFi credentials.',
},
'What barcode format do Amazon and Walmart require?': {
question: 'What barcode format do Amazon and Walmart require?',
answer:
'Amazon and Walmart require UPC-A (12 digits) for products sold in the United States and Canada, and EAN-13 (13 digits) for products sold internationally. You must purchase official GS1-registered numbers to sell on these platforms — you cannot self-generate valid retail UPC/EAN numbers.',
},
'What is the minimum print size for a scannable barcode?': {
question: 'What is the minimum print size for a scannable barcode?',
answer:
'The GS1 standard recommends a minimum width of 25.9mm (1 inch) for EAN-13 barcodes on retail packaging. Smaller sizes increase scan failure rates. For internal inventory labels, Code 128 can be printed as narrow as 15mm wide while remaining reliably scannable with modern handheld scanners.',
},
'Can I use Code 128 for inventory management?': {
question: 'Can I use Code 128 for inventory management?',
answer:
'Yes. Code 128 is the most widely used barcode format for inventory, logistics, and warehousing because it supports both letters and numbers, has high data density, and is readable by virtually all laser and 2D scanners. It is the recommended format for internal SKU systems, warehouse bin labels, and shipping labels.',
},
'What is the difference between EAN-13 and UPC-A?': {
question: 'What is the difference between EAN-13 and UPC-A?',
answer:
'EAN-13 (13 digits) is the international retail standard used in Europe, Asia, and globally. UPC-A (12 digits) is the North American retail standard used in the US and Canada. An EAN-13 barcode starting with a 0 is actually a UPC-A code — all UPC-A codes are a subset of EAN-13. Most modern POS scanners read both formats.',
},
}),
],
};
export default function BarcodeGeneratorPage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb
toolName="Barcode Generator"
toolSlug="barcode-generator"
/>
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
{/* HERO SECTION */}
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden bg-slate-900">
<div className="absolute inset-0 opacity-10">
{/* Barcode Pattern */}
<svg
className="w-full h-full"
width="100%"
height="100%"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<pattern
id="barcode_pattern"
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)" />
</svg>
</div>
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<div className="text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-blue-400"></span>
</span>
Free Tool — Professional & Fast
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
Free Custom{' '}
<span className="text-blue-400">Barcode Generator</span>
<span className="block text-2xl md:text-3xl font-semibold text-slate-300 mt-2">
Barcode Maker for EAN, UPC & Code 128
</span>
</h1>
<p className="text-lg md:text-xl text-slate-400 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
A <strong>free custom barcode generator</strong> and{' '}
<strong>barcode maker</strong> for EAN-13, UPC-A, UPC barcodes,
and Code 128. Convert any number or text into a scannable
barcode, download PNG or SVG, print instantly, no signup
required.
</p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Check className="w-4 h-4 text-blue-400" />
Retail Ready
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Check className="w-4 h-4 text-blue-400" />
Vector SVG Export
</div>
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<Check className="w-4 h-4 text-blue-400" />
No Registration
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-blue-500/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-2 hover:-rotate-1 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent rounded-3xl" />
<div className="w-full bg-gradient-to-br from-blue-400 to-indigo-600 rounded-xl shadow-lg p-5 mb-6 relative overflow-hidden text-white">
<div className="flex justify-between items-start mb-4">
<BarcodeIcon className="w-8 h-8 opacity-80" />
<div className="bg-white/20 px-2 py-1 rounded text-xs font-bold uppercase tracking-wider">
Label
</div>
</div>
<div className="text-xl font-bold tracking-wider mb-1">
PROD-98234
</div>
<div className="text-xs opacity-70">Inventory ID</div>
</div>
<div className="w-48 h-32 bg-white rounded-xl p-4 shadow-inner relative overflow-hidden flex flex-col items-center justify-center">
<div className="w-full h-16 bg-black flex gap-1 mb-2">
{[2, 4, 1, 3, 2, 1, 4, 2, 1, 3].map((w, i) => (
<div
key={i}
className="bg-black flex-1"
style={{ flex: w }}
/>
))}
</div>
<div className="text-[10px] font-mono font-bold tracking-widest uppercase">
98234001A
</div>
</div>
{/* Floating Badge */}
<div className="absolute -bottom-6 -right-6 bg-slate-900 border border-white/10 py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<div className="bg-blue-500/20 p-2 rounded-full">
<Printer className="w-5 h-5 text-blue-500" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">
Ready
</div>
<div className="text-sm font-bold text-white">
Print Instantly
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<BarcodeGeneratorClient />
</section>
{/* AI-EXTRACTABLE DEFINITION + STATS BLOCK */}
<section className="py-12 px-4 sm:px-6 lg:px-8 bg-white border-b border-slate-100">
<div className="max-w-4xl mx-auto">
<div className="bg-blue-50 border-l-4 border-blue-500 rounded-xl p-6 mb-8">
<h2 className="text-xl font-bold text-slate-900 mb-2">
What is a Barcode Generator?
</h2>
<p className="text-slate-700 leading-relaxed">
A <strong>custom barcode generator</strong> is an online tool
that converts a number or text string into a scannable barcode
image (EAN-13, UPC-A, or Code 128). The generated barcode can be
downloaded as PNG or SVG and printed on product labels,
packaging, or inventory stickers for use with any standard
barcode scanner.
</p>
</div>
<div className="grid md:grid-cols-3 gap-6 mb-8">
<div className="text-center p-5 rounded-xl bg-slate-50 border border-slate-200">
<div className="text-3xl font-extrabold text-blue-600 mb-1">
EAN-13
</div>
<div className="text-sm font-semibold text-slate-700 mb-1">
Global Retail Standard
</div>
<div className="text-xs text-slate-500">
Used on over 5 billion product labels worldwide (GS1, 2024)
</div>
</div>
<div className="text-center p-5 rounded-xl bg-slate-50 border border-slate-200">
<div className="text-3xl font-extrabold text-blue-600 mb-1">
UPC-A
</div>
<div className="text-sm font-semibold text-slate-700 mb-1">
North America Standard
</div>
<div className="text-xs text-slate-500">
Required by Amazon, Walmart, Target for product listings
</div>
</div>
<div className="text-center p-5 rounded-xl bg-slate-50 border border-slate-200">
<div className="text-3xl font-extrabold text-blue-600 mb-1">
Code 128
</div>
<div className="text-sm font-semibold text-slate-700 mb-1">
Inventory &amp; Logistics
</div>
<div className="text-xs text-slate-500">
Supports letters + numbers — best for internal SKU systems
</div>
</div>
</div>
<div className="bg-amber-50 border border-amber-200 rounded-xl p-5">
<h3 className="font-bold text-slate-900 mb-2">
Barcode vs. QR Code — When to Use Which
</h3>
<div className="grid md:grid-cols-2 gap-4 text-sm text-slate-700">
<div>
<p className="font-semibold text-slate-800 mb-1">
✓ Use a barcode for:
</p>
<ul className="space-y-1 list-disc list-inside text-slate-600">
<li>Product SKUs and retail checkout</li>
<li>Warehouse shelf and bin labels</li>
<li>Inventory counting and stock control</li>
<li>Order fulfillment and packing verification</li>
</ul>
</div>
<div>
<p className="font-semibold text-slate-800 mb-1">
✓ Use a QR code for:
</p>
<ul className="space-y-1 list-disc list-inside text-slate-600">
<li>Restaurant menus and digital content</li>
<li>Marketing campaigns and landing pages</li>
<li>Review collection and customer feedback</li>
<li>Product setup guides and support pages</li>
</ul>
</div>
</div>
</div>
</div>
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How Our Barcode Generator Works
</h2>
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Sliders className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Configure</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Enter your data and select the format.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Sparkles className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Customize</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Adjust height, width and text display.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Zap className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Preview</h3>
<p className="text-slate-600 text-xs leading-relaxed">
See your barcode update in real-time.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Download className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">4. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Save as professional PNG or SVG.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Printer className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">5. Print</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Print labels directly from your browser.
</p>
</article>
</div>
</div>
</section>
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-slate-50 border-y border-slate-200">
<div className="max-w-5xl mx-auto">
<div className="max-w-3xl mb-10">
<p className="text-sm font-semibold text-blue-600 uppercase tracking-wider mb-3">
Custom barcode generator
</p>
<h2 className="text-3xl font-bold text-slate-900 mb-4">
Create custom barcodes for labels, inventory, and product
workflows
</h2>
<p className="text-lg text-slate-600 leading-relaxed">
Use the barcode maker when you already have a product number,
SKU, inventory ID, or internal reference and need a printable
barcode image. Choose the format, adjust the dimensions, show or
hide the text value, then export a clean PNG or SVG for labels.
</p>
</div>
<div className="grid md:grid-cols-3 gap-6">
<article className="rounded-xl border border-slate-200 bg-white p-6">
<h3 className="font-bold text-slate-900 mb-2">Retail labels</h3>
<p className="text-slate-600 text-sm leading-relaxed">
Generate EAN-13 or UPC-A barcode images for packaging and
shelf labels when you already have valid GS1-issued numbers.
</p>
</article>
<article className="rounded-xl border border-slate-200 bg-white p-6">
<h3 className="font-bold text-slate-900 mb-2">
Inventory codes
</h3>
<p className="text-slate-600 text-sm leading-relaxed">
Use Code 128 for alphanumeric SKUs, warehouse bins, assets,
and internal tracking labels that need scanner-friendly codes.
</p>
</article>
<article className="rounded-xl border border-slate-200 bg-white p-6">
<h3 className="font-bold text-slate-900 mb-2">
Printable exports
</h3>
<p className="text-slate-600 text-sm leading-relaxed">
Download SVG for crisp print layouts or PNG for fast use in
docs, product sheets, and simple label workflows.
</p>
</article>
</div>
<p className="mt-8 text-sm text-slate-600">
Need a code for a web page instead of a retail scanner? Use the{' '}
<a
href="/dynamic-qr-code-generator"
className="font-semibold text-blue-700 underline"
>
dynamic QR code generator
</a>{' '}
if the destination may change later, or the{' '}
<a
href="/qr-code-tracking"
className="font-semibold text-blue-700 underline"
>
QR code tracking
</a>{' '}
workflow when you need scan analytics.
</p>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* SEO GUIDE */}
<BarcodeGuide />
</div>
</>
);
}

126
src/app/(main)/tools/page.tsx
View File

@@ -1,53 +1,73 @@
import React from 'react';
import type { Metadata } from 'next';
import { FreeToolsGrid } from '@/components/marketing/FreeToolsGrid';
export const metadata: Metadata = {
title: 'Free QR Code Tools | URL, vCard, WiFi & More | QR Master',
description: 'Access our complete collection of free QR code generators. Create codes for URLs, WiFi, plain text, vCards, and more. No signup required for static codes.',
alternates: {
canonical: 'https://www.qrmaster.net/tools',
},
openGraph: {
title: 'Free QR Code Tools Collection',
description: 'All your QR code needs in one place. Free forever static codes.',
url: 'https://www.qrmaster.net/tools',
siteName: 'QR Master',
type: 'website',
},
};
export default function ToolsHubPage() {
return (
<div className="min-h-screen bg-slate-50 pt-20">
<section className="bg-white py-20 px-4 border-b border-slate-200">
<div className="container mx-auto text-center max-w-4xl">
<span className="inline-block px-4 py-1.5 rounded-full bg-indigo-50 text-indigo-700 font-semibold text-sm mb-6">
100% Free Forever
</span>
<h1 className="text-4xl md:text-6xl font-extrabold text-slate-900 mb-6 tracking-tight">
Free QR Code Tools
</h1>
<p className="text-xl text-slate-600 mb-8 leading-relaxed max-w-2xl mx-auto">
Generate static QR codes for any purpose. No credit card, no expiration, no hidden fees.
</p>
</div>
</section>
<div className="py-12">
<FreeToolsGrid />
</div>
<section className="py-20 px-4">
<div className="container mx-auto max-w-3xl text-center">
<h2 className="text-2xl font-bold text-slate-900 mb-4">Why are these tools free?</h2>
<p className="text-slate-600 mb-8">
We believe basic QR codes should be accessible to everyone. Our static QR codes encode your data directly into the image,
meaning we don't need to host tracking servers for them. That's why they are free forever.
If you need tracking and editability, check out our Dynamic QR Codes.
</p>
</div>
</section>
</div>
);
}
import React from 'react';
import type { Metadata } from 'next';
import { FreeToolsGrid } from '@/components/marketing/FreeToolsGrid';
export const metadata: Metadata = {
title: 'Free QR Code Tools | URL, vCard, WiFi & More | QR Master',
description:
'Access free QR code tools for URLs, WiFi, vCards, barcodes, and more. Use QR Master for static codes, dynamic QR codes, and QR code tracking.',
alternates: {
canonical: 'https://www.qrmaster.net/tools',
},
openGraph: {
title: 'Free QR Code Tools Collection',
description:
'All your QR code needs in one place. Free forever static codes.',
url: 'https://www.qrmaster.net/tools',
siteName: 'QR Master',
type: 'website',
},
};
export default function ToolsHubPage() {
return (
<div className="min-h-screen bg-slate-50 pt-20">
<section className="bg-white py-20 px-4 border-b border-slate-200">
<div className="container mx-auto text-center max-w-4xl">
<span className="inline-block px-4 py-1.5 rounded-full bg-indigo-50 text-indigo-700 font-semibold text-sm mb-6">
100% Free Forever
</span>
<h1 className="text-4xl md:text-6xl font-extrabold text-slate-900 mb-6 tracking-tight">
Free QR Code Tools
</h1>
<p className="text-xl text-slate-600 mb-8 leading-relaxed max-w-2xl mx-auto">
Generate static QR codes for any purpose. No credit card, no
expiration, no hidden fees.
</p>
</div>
</section>
<div className="py-12">
<FreeToolsGrid />
</div>
<section className="py-20 px-4">
<div className="container mx-auto max-w-3xl text-center">
<h2 className="text-2xl font-bold text-slate-900 mb-4">
Why are these tools free?
</h2>
<p className="text-slate-600 mb-8">
We believe basic QR codes should be accessible to everyone. Our
static QR codes encode your data directly into the image, meaning we
don't need to host tracking servers for them. That's why they are
free forever. If you need tracking and editability, use our{' '}
<a
href="/dynamic-qr-code-generator"
className="font-semibold text-indigo-700 underline"
>
dynamic QR code generator
</a>{' '}
or learn how{' '}
<a
href="/qr-code-tracking"
className="font-semibold text-indigo-700 underline"
>
QR code tracking
</a>{' '}
works.
</p>
</div>
</section>
</div>
);
}

22
src/app/sitemap.ts
View File

@@ -34,14 +34,20 @@ export default function sitemap(): MetadataRoute.Sitemap {
// All blog posts
// Filter out future posts so Google doesn't see them
const blogPages = blogPosts
.filter(post => {
const publishDate = post.datePublished ? new Date(post.datePublished) : new Date(post.date);
.filter((post) => {
const publishDate = post.datePublished
? new Date(post.datePublished)
: new Date(post.date);
return publishDate <= new Date();
})
.map((post) => ({
url: `${baseUrl}/blog/${post.slug}`,
// Use updatedAt if available, otherwise dateModified or datePublished
lastModified: post.updatedAt ? new Date(post.updatedAt) : (post.dateModified ? new Date(post.dateModified) : new Date()),
lastModified: post.updatedAt
? new Date(post.updatedAt)
: post.dateModified
? new Date(post.dateModified)
: new Date(),
changeFrequency: 'monthly' as const,
priority: 0.8,
}));
@@ -51,7 +57,7 @@ export default function sitemap(): MetadataRoute.Sitemap {
};
const toolLastModified: Record<string, Date> = {
'barcode-generator': new Date('2026-04-27'),
'barcode-generator': new Date('2026-05-10'),
'vcard-qr-code': new Date('2026-04-27'),
'instagram-qr-code': new Date('2026-04-27'),
'wifi-qr-code': new Date('2026-04-27'),
@@ -60,7 +66,8 @@ export default function sitemap(): MetadataRoute.Sitemap {
const toolPages = freeTools.map((slug) => ({
url: `${baseUrl}/tools/${slug}`,
lastModified: toolLastModified[slug] ?? new Date('2026-01-01'),
changeFrequency: slug === 'barcode-generator' ? 'weekly' as const : 'monthly' as const,
changeFrequency:
slug === 'barcode-generator' ? ('weekly' as const) : ('monthly' as const),
priority: highPriorityTools[slug] ?? 0.8,
}));
@@ -197,7 +204,7 @@ export default function sitemap(): MetadataRoute.Sitemap {
},
{
url: `${baseUrl}/qr-code-tracking`,
lastModified: new Date(),
lastModified: new Date('2026-05-10'),
changeFrequency: 'monthly',
priority: 0.9,
},
@@ -215,7 +222,7 @@ export default function sitemap(): MetadataRoute.Sitemap {
},
{
url: `${baseUrl}/dynamic-qr-code-generator`,
lastModified: new Date('2026-04-27'),
lastModified: new Date('2026-05-10'),
changeFrequency: 'weekly',
priority: 0.95,
},
@@ -300,7 +307,6 @@ export default function sitemap(): MetadataRoute.Sitemap {
priority: 0.7,
},
...toolPages,
...blogPages,
...learnPages,