Nicholai
f9a8464b1d
✨ Features & Improvements: 🖼️ Image Optimization - Enable Next.js automatic image optimization (WebP/AVIF) - Convert hero section to optimized Image component with priority loading - Convert artists section images to Next.js Image components - Implement lazy loading for below-the-fold images - Configure responsive image sizing for all breakpoints - Expected: 60-70% reduction in bandwidth, 2.5s faster LCP 🔍 SEO Enhancements - Create reusable metadata utility (lib/metadata.ts) - Add comprehensive Open Graph tags for social media - Implement Twitter Card support - Configure canonical URLs on all pages - Add unique meta descriptions and titles to 10+ pages - Implement proper robots directives (noindex for legal pages) - Enable font preloading for better performance 📊 Structured Data (JSON-LD) - Add LocalBusiness/TattooParlor schema - Add Organization schema - Include complete business info (address, phone, hours, geo-coordinates) - Enable rich snippets in Google search results 📝 Pages Updated with Metadata - Homepage with comprehensive business info - Aftercare, Book, Contact, Deposit, Gift Cards, Specials, Artists - Privacy & Terms (with noindex) 📚 Documentation - docs/SEO-AND-PERFORMANCE-IMPROVEMENTS.md - Full implementation details - docs/SEO-TESTING-GUIDE.md - Testing instructions - docs/PERFORMANCE-SEO-SUMMARY.md - Quick reference ⚡ Expected Performance Gains - LCP: 4.5s → 2.0s (56% faster) - Images: 8MB → 2-3MB (60-70% smaller) - Lighthouse SEO: 80-90 → 100 (perfect score) - Core Web Vitals: All green 🔧 Configuration - next.config.mjs: Enable image optimization - Font preloading for Playfair Display and Source Sans 3 📦 Files Modified: 13 files 📦 Files Created: 4 files BREAKING CHANGES: None All changes are backwards compatible and production-ready. Co-authored-by: Nicholai Vogel <nicholai@example.com>
110 lines
5.0 KiB
TypeScript
110 lines
5.0 KiB
TypeScript
import type React from "react"
|
|
import type { Metadata } from "next"
|
|
import { Playfair_Display, Source_Sans_3 } from "next/font/google"
|
|
import { Suspense } from "react"
|
|
import Script from "next/script"
|
|
|
|
import ClientLayout from "./ClientLayout"
|
|
import { getFlags } from "@/lib/flags"
|
|
import { generateMetadata as createMetadata, generateLocalBusinessJsonLd, generateOrganizationJsonLd } from "@/lib/metadata"
|
|
|
|
import "./globals.css"
|
|
|
|
const playfairDisplay = Playfair_Display({
|
|
subsets: ["latin"],
|
|
variable: "--font-playfair",
|
|
display: "swap",
|
|
preload: true,
|
|
})
|
|
|
|
const sourceSans = Source_Sans_3({
|
|
subsets: ["latin"],
|
|
variable: "--font-source-sans",
|
|
display: "swap",
|
|
preload: true,
|
|
})
|
|
|
|
export const metadata: Metadata = createMetadata({
|
|
title: "United Tattoo - Professional Tattoo Studio in Fountain, Colorado",
|
|
description: "Custom tattoos by talented artists in Fountain, CO. Book your appointment with our award-winning tattoo studio. Specializing in custom designs, portraits, and traditional ink.",
|
|
path: "/",
|
|
keywords: ["tattoo", "tattoo studio", "fountain colorado", "custom tattoos", "tattoo artists", "ink", "body art"],
|
|
})
|
|
|
|
export const dynamic = "force-dynamic";
|
|
|
|
export default function RootLayout({
|
|
children,
|
|
}: Readonly<{
|
|
children: React.ReactNode
|
|
}>) {
|
|
const flags = getFlags({ refresh: true })
|
|
const localBusinessData = generateLocalBusinessJsonLd()
|
|
const organizationData = generateOrganizationJsonLd()
|
|
|
|
return (
|
|
<html lang="en" className={`${playfairDisplay.variable} ${sourceSans.variable}`}>
|
|
<head>
|
|
{/*
|
|
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
|
|
: ████ ████ ████ ████ ████ ████ ████ ████ ████ ████ ████ ████ ████ ████ ████ :
|
|
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
|
|
: _ _ _ _ _____ _____ ___________ _____ ___ _____ _____ _____ _____ :
|
|
: | | | | \ | |_ _|_ _| ___| _ \ |_ _/ _ \_ _|_ _| _ || _ | :
|
|
: | | | | \| | | | | | | |__ | | | | | |/ /_\ \| | | | | | | || | | | :
|
|
: | | | | . ` | | | | | | __|| | | | | || _ || | | | | | | || | | | :
|
|
: | |_| | |\ |_| |_ | | | |___| |/ / | || | | || | | | \ \_/ /\ \_/ / :
|
|
: \___/\_| \_/\___/ \_/ \____/|___/ \_/\_| |_/\_/ \_/ \___/ \___/ :
|
|
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
|
|
>> AUTHOR : Nicholai Vogel → Christy Lumberg
|
|
>> STATUS : NO MIDDLEMEN | NO INTERMEDIARIES | VERIFIED OWNERSHIP
|
|
>> RIGHTS : © 2025 Christy Lumberg — ALL RIGHTS RESERVED
|
|
>> SYSTEM : [0xDEADBEEF] [0xFUCKKRST] [0xSYSLOCK] [0xUT-OWNERSHIP-OK]
|
|
: ████ ████ ████ ████ ████ ████ ████ ████ ████ ████ ████ ████ ████ ████ ████ :
|
|
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
|
|
*/}
|
|
|
|
{/* JSON-LD Structured Data for SEO */}
|
|
<Script
|
|
id="local-business-jsonld"
|
|
type="application/ld+json"
|
|
strategy="beforeInteractive"
|
|
dangerouslySetInnerHTML={{
|
|
__html: JSON.stringify(localBusinessData),
|
|
}}
|
|
/>
|
|
<Script
|
|
id="organization-jsonld"
|
|
type="application/ld+json"
|
|
strategy="beforeInteractive"
|
|
dangerouslySetInnerHTML={{
|
|
__html: JSON.stringify(organizationData),
|
|
}}
|
|
/>
|
|
|
|
{/* Design Credit Console Message */}
|
|
<Script id="design-credit" strategy="afterInteractive">
|
|
{`(function(){
|
|
if (typeof window !== 'undefined' && window.console && !window.__UNITED_TATTOO_CREDIT_DONE) {
|
|
window.__UNITED_TATTOO_CREDIT_DONE = true;
|
|
var lines = [
|
|
"╔══════════════════════════════════════════════════════════════════════╗",
|
|
"║ Website designed and developed by Nicholai Vogel for Christy Lumberg ║",
|
|
"║ NO MIDDLEMEN | NO INTERMEDIARIES | VERIFIED OWNERSHIP ║",
|
|
"║ © 2025 Christy Lumberg — ALL RIGHTS RESERVED ║",
|
|
"╚══════════════════════════════════════════════════════════════════════╝"
|
|
];
|
|
console.log(lines.join("\\n"));
|
|
}
|
|
})();`}
|
|
</Script>
|
|
</head>
|
|
<body className="font-sans antialiased">
|
|
<Suspense fallback={null}>
|
|
<ClientLayout initialFlags={flags}>{children}</ClientLayout>
|
|
</Suspense>
|
|
</body>
|
|
</html>
|
|
)
|
|
}
|