310 lines
17 KiB
TypeScript
310 lines
17 KiB
TypeScript
import React from 'react';
|
|
import type { Metadata } from 'next';
|
|
import URLGenerator from './URLGenerator';
|
|
import { Link as LinkIcon, Shield, Zap, Smartphone, Globe, BarChart } from 'lucide-react';
|
|
import { QRCodeSVG } from 'qrcode.react';
|
|
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
|
|
|
|
// SEO Optimized Metadata
|
|
export const metadata: Metadata = {
|
|
title: {
|
|
absolute: 'Free URL QR Code Generator | Link to Any Website | QR Master',
|
|
},
|
|
description: 'Create a QR code for your website. Erstelle kostenlos einen QR Code für deine Webseite. Static and free forever. Link zu jeder URL.',
|
|
keywords: ['url qr code', 'website qr code', 'link qr generator', 'free qr code generator', 'url to qr', 'qr code erstellen', 'link qr code erstellen', 'website qr code generator', 'kostenlos qr code erstellen', 'url zu qr code', 'webseite verlinken qr'],
|
|
alternates: {
|
|
canonical: 'https://www.qrmaster.net/tools/url-qr-code',
|
|
},
|
|
openGraph: {
|
|
title: 'Free URL QR Code Generator | QR Master',
|
|
description: 'Turn any URL into a QR code. Share websites instantly.',
|
|
type: 'website',
|
|
url: 'https://www.qrmaster.net/tools/url-qr-code',
|
|
images: [{ url: '/og-url-generator.png', width: 1200, height: 630 }],
|
|
},
|
|
twitter: {
|
|
card: 'summary_large_image',
|
|
title: 'Free URL QR Code Generator',
|
|
description: 'Create QR codes for any link. Instant and free.',
|
|
},
|
|
robots: {
|
|
index: true,
|
|
follow: true,
|
|
},
|
|
};
|
|
|
|
// JSON-LD Structured Data
|
|
const jsonLd = {
|
|
'@context': 'https://schema.org',
|
|
'@graph': [
|
|
{
|
|
'@type': 'SoftwareApplication',
|
|
name: 'URL QR Code Generator',
|
|
applicationCategory: 'UtilitiesApplication',
|
|
operatingSystem: 'Web Browser',
|
|
offers: {
|
|
'@type': 'Offer',
|
|
price: '0',
|
|
priceCurrency: 'USD',
|
|
},
|
|
aggregateRating: {
|
|
'@type': 'AggregateRating',
|
|
ratingValue: '4.9',
|
|
ratingCount: '3100',
|
|
},
|
|
description: 'Generate QR codes for URLs and websites. Direct linking, no redirects.',
|
|
},
|
|
{
|
|
'@type': 'HowTo',
|
|
name: 'How to Create a URL QR Code',
|
|
description: 'Turn a website link into a scannable QR code.',
|
|
step: [
|
|
{
|
|
'@type': 'HowToStep',
|
|
position: 1,
|
|
name: 'Enter URL',
|
|
text: 'Copy and paste your website address (e.g., https://example.com).',
|
|
},
|
|
{
|
|
'@type': 'HowToStep',
|
|
position: 2,
|
|
name: 'Customize',
|
|
text: 'Select a color and add a call-to-action frame like "Scan Me".',
|
|
},
|
|
{
|
|
'@type': 'HowToStep',
|
|
position: 3,
|
|
name: 'Download',
|
|
text: 'Save your QR code as a PNG or SVG image.',
|
|
},
|
|
],
|
|
totalTime: 'PT20S',
|
|
},
|
|
{
|
|
'@type': 'FAQPage',
|
|
mainEntity: [
|
|
{
|
|
'@type': 'Question',
|
|
name: 'Do these QR codes expire?',
|
|
acceptedAnswer: {
|
|
'@type': 'Answer',
|
|
text: 'No. These are static QR codes. They directly encode your URL and will work forever as long as your website is online.',
|
|
},
|
|
},
|
|
{
|
|
'@type': 'Question',
|
|
name: 'Can I track how many people scan it?',
|
|
acceptedAnswer: {
|
|
'@type': 'Answer',
|
|
text: 'No, static QR codes cannot be tracked. If you need scan usage analytics (location, device, time), you should use our Dynamic QR Code generator.',
|
|
},
|
|
},
|
|
{
|
|
'@type': 'Question',
|
|
name: 'Can I change the destination URL later?',
|
|
acceptedAnswer: {
|
|
'@type': 'Answer',
|
|
text: 'No. Once a static QR code is printed, it cannot be changed. If you change your website URL, you will need to print a new code. Use Dynamic QR Codes if you need flexibility.',
|
|
},
|
|
},
|
|
{
|
|
'@type': 'Question',
|
|
name: 'Is there a scan limit?',
|
|
acceptedAnswer: {
|
|
'@type': 'Answer',
|
|
text: 'No. There are zero limits on how many times your QR code can be scanned.',
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
};
|
|
|
|
export default function URLQRCodePage() {
|
|
return (
|
|
<>
|
|
<script
|
|
type="application/ld+json"
|
|
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
|
|
/>
|
|
<ToolBreadcrumb toolName="URL QR Code Generator" toolSlug="url-qr-code" />
|
|
|
|
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
|
|
|
|
{/* HERO SECTION */}
|
|
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden" style={{ backgroundColor: '#1A1265' }}>
|
|
<div className="absolute inset-0 opacity-10">
|
|
<svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
|
|
<path d="M0 100 C 20 0 50 0 100 100 Z" fill="url(#grad1)" />
|
|
<defs>
|
|
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" style={{ stopColor: 'white', stopOpacity: 1 }} />
|
|
<stop offset="100%" style={{ stopColor: 'white', stopOpacity: 0 }} />
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
|
|
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
|
|
<div className="text-center lg:text-left">
|
|
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
|
|
<span className="flex h-2 w-2 relative">
|
|
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
|
|
<span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-400"></span>
|
|
</span>
|
|
Free Tool — No Signup Required
|
|
</div>
|
|
|
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
|
|
Link to Any Website with <br className="hidden lg:block" />
|
|
<span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-cyan-400">Instant QR Codes</span>
|
|
</h1>
|
|
|
|
<p className="text-lg md:text-xl text-indigo-100 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
|
|
Create a QR code for your website, portfolio, or menu.
|
|
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Free forever. No expirations.</strong>
|
|
</p>
|
|
|
|
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
|
|
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
|
|
<Globe className="w-4 h-4 text-emerald-400" />
|
|
Universal Links
|
|
</div>
|
|
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
|
|
<Zap className="w-4 h-4 text-amber-400" />
|
|
Instant Redirect
|
|
</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">
|
|
<Shield className="w-4 h-4 text-purple-400" />
|
|
Direct Encoding
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Visual Abstract */}
|
|
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
|
|
<div className="absolute w-[500px] h-[500px] bg-indigo-500/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
|
|
|
|
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform -rotate-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="w-48 h-48 bg-white rounded-xl p-2 shadow-inner mb-6 relative overflow-hidden flex items-center justify-center">
|
|
<QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#0f172a" level="Q" />
|
|
</div>
|
|
|
|
<div className="w-full bg-white/10 rounded-xl p-4 backdrop-blur-sm border border-white/10">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-8 h-8 rounded-full bg-indigo-500/20 flex items-center justify-center">
|
|
<LinkIcon className="w-4 h-4 text-indigo-300" />
|
|
</div>
|
|
<div className="space-y-1 w-full">
|
|
<div className="h-1.5 w-3/4 bg-white/30 rounded-full" />
|
|
<div className="h-1.5 w-1/2 bg-white/20 rounded-full" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* GENERATOR SECTION */}
|
|
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
|
|
<URLGenerator />
|
|
</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 URL QR Codes Work
|
|
</h2>
|
|
|
|
<div className="grid md:grid-cols-3 gap-8">
|
|
<article className="text-center">
|
|
<div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
|
|
<LinkIcon className="w-7 h-7 text-[#1A1265]" />
|
|
</div>
|
|
<h3 className="font-bold text-slate-900 mb-2">1. Paste Link</h3>
|
|
<p className="text-slate-600 text-sm">
|
|
Copy the URL of the webpage you want to link to and paste it into the generator.
|
|
</p>
|
|
</article>
|
|
|
|
<article className="text-center">
|
|
<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]" />
|
|
</div>
|
|
<h3 className="font-bold text-slate-900 mb-2">2. Scan</h3>
|
|
<p className="text-slate-600 text-sm">
|
|
Users scan the code and a notification appears to open the link in their browser.
|
|
</p>
|
|
</article>
|
|
|
|
<article className="text-center">
|
|
<div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
|
|
<Globe className="w-7 h-7 text-[#1A1265]" />
|
|
</div>
|
|
<h3 className="font-bold text-slate-900 mb-2">3. Visit</h3>
|
|
<p className="text-slate-600 text-sm">
|
|
They are instantly directed to your website, restaurant menu, or social profile.
|
|
</p>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* FAQ SECTION */}
|
|
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
|
|
<div className="max-w-3xl mx-auto">
|
|
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
|
|
Frequently Asked Questions
|
|
</h2>
|
|
<p className="text-slate-600 text-center mb-10">
|
|
Common questions about URL QR codes.
|
|
</p>
|
|
|
|
<div className="space-y-4">
|
|
<FaqItem
|
|
question="Do these QR codes expire?"
|
|
answer="No. Static URL QR codes do not expire. They contain the direct link to your website. As long as your website is active, the QR code will work."
|
|
/>
|
|
<FaqItem
|
|
question="Can I track scans?"
|
|
answer="No, static QR codes cannot be tracked. If you need analytics to see who is scanning your code and from where, you need a Dynamic QR Code."
|
|
/>
|
|
<FaqItem
|
|
question="What happens if I change my website URL?"
|
|
answer="If you change your URL, this static QR code will no longer work (unless you set up a redirect on your own server). With a Dynamic QR Code, you can update the destination URL anytime without reprinting the code."
|
|
/>
|
|
<FaqItem
|
|
question="Are there ads on the QR code?"
|
|
answer="No. We do not insert ads before redirecting users. The scan goes directly to your URL."
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function FaqItem({ question, answer }: { question: string; answer: string }) {
|
|
return (
|
|
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
|
|
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
|
|
{question}
|
|
<span className="transition group-open:rotate-180 text-slate-400">
|
|
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
|
|
<path d="M6 9l6 6 6-6" />
|
|
</svg>
|
|
</span>
|
|
</summary>
|
|
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
|
|
{answer}
|
|
</div>
|
|
</details>
|
|
);
|
|
}
|