chris/beachPartyBalloons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Polish: meta/OG tags, JSON-LD, 404 pages, typo fix

Browse Source 
- Unique title + meta description on every main-site page
- OpenGraph + Twitter card tags sitewide (hero image on homepage, logo elsewhere)
- LocalBusiness JSON-LD on homepage for Google rich results
- Custom 404 page on main-site (branded, links home + contact)
- Custom not-found page on estore
- Fix typo: "Delivery avalable" → "Delivery available"

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
chris 2026-06-07 00:47:26 -04:00
parent 0d57760df1
commit 2e5f253580
9 changed files with 164 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
estore/src/app/not-found.tsx Normal file
View File

@ -0,0 +1,22 @@
import type { Metadata } from 'next'
import Link from 'next/link'
export const metadata: Metadata = { title: 'Page Not Found' }
export default function NotFound() {
return (
<section className="section" style={{ minHeight: '70vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<div className="has-text-centered">
<p style={{ fontSize: '5rem', lineHeight: 1, marginBottom: '1rem' }}>🎈</p>
<h1 className="title is-2">Page not found</h1>
<p className="subtitle is-5 has-text-grey" style={{ marginBottom: '2rem' }}>
Looks like this balloon floated away.
</p>
<div className="buttons is-centered">
<Link href="/" className="button is-info is-medium">Back to shop</Link>
<a href="https://beachpartyballoons.com/contact/" className="button is-light is-medium">Contact us</a>
</div>
</div>
</section>
)
}

33
main-site/404.html Normal file
View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Not Found — Beach Party Balloons</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Autour+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/style.css">
<script src="/nav.js" defer></script>
</head>
<body>
<div id="site-nav"></div>
<section class="section" style="min-height: 70vh; display: flex; align-items: center; justify-content: center;">
<div class="has-text-centered">
<p style="font-size: 6rem; line-height: 1; margin-bottom: 1rem;">🎈</p>
<h1 class="title is-2">Oops — page not found</h1>
<p class="subtitle is-5 has-text-grey" style="margin-bottom: 2rem;">
Looks like this balloon floated away. Let's get you back on track.
</p>
<div class="buttons is-centered">
<a class="button is-info is-medium" href="/">Back to home</a>
<a class="button is-light is-medium" href="/contact/">Contact us</a>
</div>
</div>
</section>
<div id="site-footer"></div>
<script src="/script.js"></script>
</body>
</html>

11
main-site/about/index.html
View File

@ -10,7 +10,7 @@
<link rel="manifest" href="../assets/favicon/site.webmanifest"> <link rel="manifest" href="../assets/favicon/site.webmanifest">
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beach Party Balloons</title> <title>About Us — Beach Party Balloons</title>
<link <link
rel="stylesheet" rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css"> href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
@ -42,6 +42,15 @@
margin-bottom: 3rem; margin-bottom: 3rem;
} }
</style> </style>
<meta name="description" content="Meet the team behind Beach Party Balloons in Milford, CT — your go-to shop for custom balloon decorations and arrangements for every occasion.">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Beach Party Balloons">
<meta property="og:title" content="About Us — Beach Party Balloons">
<meta property="og:description" content="Meet the team behind Beach Party Balloons in Milford, CT — your go-to shop for custom balloon decorations and arrangements for every occasion.">
<meta property="og:url" content="https://beachpartyballoons.com/about/">
<meta property="og:image" content="https://beachpartyballoons.com/assets/logo/BeachPartyBalloons-logo.webp">
<meta property="og:image:alt" content="Beach Party Balloons">
<meta name="twitter:card" content="summary_large_image">
</head> </head>
<body> <body>
<div id="site-nav"></div> <div id="site-nav"></div>

11
main-site/color/index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beach Party Balloons Color Palette Picker</title> <title>Color Palette Picker — Beach Party Balloons</title>
<script defer data-domain="beachpartyballoons.com" src="https://metrics.beachpartyballoons.com/js/script.hash.outbound-links.js"></script> <script defer data-domain="beachpartyballoons.com" src="https://metrics.beachpartyballoons.com/js/script.hash.outbound-links.js"></script>
<script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script> <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
@ -21,6 +21,15 @@
<link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon/favicon-16x16.png">
<link rel="manifest" href="../assets/favicon/site.webmanifest"> <link rel="manifest" href="../assets/favicon/site.webmanifest">
<meta name="description" content="Browse and build your perfect balloon color palette. Choose from 70+ latex colors available at Beach Party Balloons in Milford, CT.">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Beach Party Balloons">
<meta property="og:title" content="Color Palette Picker — Beach Party Balloons">
<meta property="og:description" content="Browse and build your perfect balloon color palette. Choose from 70+ latex colors available at Beach Party Balloons in Milford, CT.">
<meta property="og:url" content="https://beachpartyballoons.com/color/">
<meta property="og:image" content="https://beachpartyballoons.com/assets/logo/BeachPartyBalloons-logo.webp">
<meta property="og:image:alt" content="Beach Party Balloons">
<meta name="twitter:card" content="summary_large_image">
</head> </head>
<body> <body>

12
main-site/contact/index.html
View File

@ -9,14 +9,22 @@
<link rel="manifest" href="../assets/favicon/site.webmanifest"> <link rel="manifest" href="../assets/favicon/site.webmanifest">
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Beach Party Balloons - Your go-to shop for stunning balloon decorations, walk-in arrangements, and deliveries in CT."> <title>Contact Us — Beach Party Balloons</title>
<title>Beach Party Balloons</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Autour+One&family=Mogra&family=Rubik+Glitch&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Autour+One&family=Mogra&family=Rubik+Glitch&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../style.css"> <link rel="stylesheet" href="../style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="/nav.js" defer></script> <script src="/nav.js" defer></script>
<meta name="description" content="Get in touch with Beach Party Balloons in Milford, CT. Send a message, upload inspiration photos, and we'll plan your perfect balloon arrangement.">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Beach Party Balloons">
<meta property="og:title" content="Contact Us — Beach Party Balloons">
<meta property="og:description" content="Get in touch with Beach Party Balloons in Milford, CT. Send a message, upload inspiration photos, and we'll plan your perfect balloon arrangement.">
<meta property="og:url" content="https://beachpartyballoons.com/contact/">
<meta property="og:image" content="https://beachpartyballoons.com/assets/logo/BeachPartyBalloons-logo.webp">
<meta property="og:image:alt" content="Beach Party Balloons">
<meta name="twitter:card" content="summary_large_image">
</head> </head>
<body> <body>
<div id="site-nav"></div> <div id="site-nav"></div>

12
main-site/faq/index.html
View File

@ -9,8 +9,7 @@
<link rel="manifest" href="../assets/favicon/site.webmanifest"> <link rel="manifest" href="../assets/favicon/site.webmanifest">
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Beach Party Balloons - Your go-to shop for stunning balloon decorations, walk-in arrangements, and deliveries in CT."> <title>FAQ — Beach Party Balloons</title>
<title>Beach Party Balloons</title>
<link <link
rel="stylesheet" rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css"> href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
@ -58,6 +57,15 @@
color: #2c3e50; color: #2c3e50;
} }
</style> </style>
<meta name="description" content="Answers to common questions about Beach Party Balloons — delivery, walk-ins, custom orders, latex colors, pricing, and more.">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Beach Party Balloons">
<meta property="og:title" content="FAQ — Beach Party Balloons">
<meta property="og:description" content="Answers to common questions about Beach Party Balloons — delivery, walk-ins, custom orders, latex colors, pricing, and more.">
<meta property="og:url" content="https://beachpartyballoons.com/faq/">
<meta property="og:image" content="https://beachpartyballoons.com/assets/logo/BeachPartyBalloons-logo.webp">
<meta property="og:image:alt" content="Beach Party Balloons">
<meta name="twitter:card" content="summary_large_image">
</head> </head>
<body> <body>
<div id="site-nav"></div> <div id="site-nav"></div>

12
main-site/gallery/index.html
View File

@ -9,8 +9,7 @@
<link rel="manifest" href="../assets/favicon/site.webmanifest"> <link rel="manifest" href="../assets/favicon/site.webmanifest">
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Beach Party Balloons - Photo Gallery"> <title>Gallery — Beach Party Balloons</title>
<title>Beach Party Balloons - Gallery</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Autour+One&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Autour+One&display=swap" rel="stylesheet">
@ -18,6 +17,15 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="gallery.css"> <link rel="stylesheet" href="gallery.css">
<script src="/nav.js" defer></script> <script src="/nav.js" defer></script>
<meta name="description" content="Browse our gallery of balloon arches, columns, centerpieces, and custom installations by Beach Party Balloons in Milford, CT.">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Beach Party Balloons">
<meta property="og:title" content="Gallery — Beach Party Balloons">
<meta property="og:description" content="Browse our gallery of balloon arches, columns, centerpieces, and custom installations by Beach Party Balloons in Milford, CT.">
<meta property="og:url" content="https://beachpartyballoons.com/gallery/">
<meta property="og:image" content="https://beachpartyballoons.com/assets/logo/BeachPartyBalloons-logo.webp">
<meta property="og:image:alt" content="Beach Party Balloons">
<meta name="twitter:card" content="summary_large_image">
</head> </head>
<body> <body>
<div id="site-nav"></div> <div id="site-nav"></div>

57
main-site/index.html
View File

@ -9,8 +9,7 @@
<link rel="manifest" href="assets/favicon/site.webmanifest"> <link rel="manifest" href="assets/favicon/site.webmanifest">
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Beach Party Balloons - Your go-to shop for stunning balloon decorations, walk-in arrangements, and deliveries in CT"> <title>Beach Party Balloons — Milford, CT</title>
<title>Beach Party Balloons</title>
<link <link
rel="stylesheet" rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css"> href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
@ -19,6 +18,58 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="/nav.js" defer></script> <script src="/nav.js" defer></script>
<meta name="description" content="Balloon decorations, walk-in arrangements & delivery in Milford, CT. Custom designs for birthdays, weddings, corporate events & more. Walk-ins welcome!">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Beach Party Balloons">
<meta property="og:title" content="Beach Party Balloons — Milford, CT">
<meta property="og:description" content="Balloon decorations, walk-in arrangements & delivery in Milford, CT. Custom designs for birthdays, weddings, corporate events & more. Walk-ins welcome!">
<meta property="og:url" content="https://beachpartyballoons.com/">
<meta property="og:image" content="https://beachpartyballoons.com/assets/pics/classic/hero.webp">
<meta property="og:image:alt" content="Beach Party Balloons">
<meta name="twitter:card" content="summary_large_image">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": "Beach Party Balloons",
"image": "https://beachpartyballoons.com/assets/logo/BeachPartyBalloons-logo.webp",
"url": "https://beachpartyballoons.com",
"telephone": "+12032835626",
"priceRange": "$$",
"address": {
"@type": "PostalAddress",
"streetAddress": "554 Boston Post Road",
"addressLocality": "Milford",
"addressRegion": "CT",
"postalCode": "06460",
"addressCountry": "US"
},
"geo": {
"@type": "GeoCoordinates",
"latitude": 41.2305385,
"longitude": -73.0657635
},
"openingHoursSpecification": [
{
"@type": "OpeningHoursSpecification",
"dayOfWeek": ["Tuesday","Wednesday","Thursday","Friday"],
"opens": "10:00",
"closes": "17:00"
},
{
"@type": "OpeningHoursSpecification",
"dayOfWeek": ["Saturday"],
"opens": "09:00",
"closes": "15:00"
}
],
"sameAs": [
"https://www.facebook.com/beachpartyballoons",
"https://www.instagram.com/beachpartyballoons/",
"https://bsky.app/profile/beachpartyballoons.bsky.social"
]
}
</script>
</head> </head>
<body> <body>
<div id="site-nav"></div> <div id="site-nav"></div>
@ -58,7 +109,7 @@
<div class="container is-justify-content-center padding"> <div class="container is-justify-content-center padding">
<img src="assets/pics/organic/img2.webp" alt="Image 1" > <img src="assets/pics/organic/img2.webp" alt="Image 1" >
</div> </div>
<p class="is-size-5 has-text-centered">Delivery avalable!</p> <p class="is-size-5 has-text-centered">Delivery available!</p>
<p class="is-size-5 has-text-centered"> Have your balloons delivered! Our delivery staff will make sure your order arrives safe and sound!</p> <p class="is-size-5 has-text-centered"> Have your balloons delivered! Our delivery staff will make sure your order arrives safe and sound!</p>
<div class="container is-justify-content-center padding"> <div class="container is-justify-content-center padding">

5
main-site/server.js
View File

@ -231,6 +231,11 @@ app.use('/build', express.static(path.join(__dirname, 'public/build'), staticCac
// Serve static files from the root directory (handles all other GET requests) // Serve static files from the root directory (handles all other GET requests)
app.use(express.static(path.join(__dirname), staticCacheOptions)); app.use(express.static(path.join(__dirname), staticCacheOptions));
// 404 — must come after static middleware
app.use((req, res) => {
res.status(404).sendFile(path.join(__dirname, '404.html'));
});
app.listen(port, () => { app.listen(port, () => {
console.log(`Server listening at http://localhost:${port}`); console.log(`Server listening at http://localhost:${port}`);
if (process.env.NODE_ENV !== 'production') { if (process.env.NODE_ENV !== 'production') {