Skip to content

Commit f756151

Browse files
matthewgallmatthewgall
committed
feat: implement comprehensive SEO optimization for fuel price discovery
- Add extensive meta tags with fuel price keywords and UK geographic targeting - Implement Open Graph and Twitter Card tags for social media sharing - Add JSON-LD structured data for WebApplication, ProfessionalService, and FAQ schemas - Create SEOManager class for dynamic meta tag updates when viewing stations - Generate dynamic titles and descriptions for individual fuel stations - Add robots.txt with search engine specific crawling instructions - Create sitemap.xml with major UK city locations for better indexing - Update browserconfig.xml with proper Windows tile colors and notifications - Optimize for searches like 'cheap fuel prices UK', 'petrol prices today', 'diesel near me' - Add canonical URLs and comprehensive Dublin Core metadata
1 parent c006445 commit f756151

5 files changed

Lines changed: 574 additions & 5 deletions

File tree

‎public/browserconfig.xml‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,16 @@
22
<browserconfig>
33
<msapplication>
44
<tile>
5+
<square70x70logo src="/icons/mstile-150x150.png"/>
56
<square150x150logo src="/icons/mstile-150x150.png"/>
6-
<TileColor>#da532c</TileColor>
7+
<wide310x150logo src="/icons/mstile-150x150.png"/>
8+
<square310x310logo src="/icons/mstile-150x150.png"/>
9+
<TileColor>#007cbf</TileColor>
710
</tile>
11+
<notification>
12+
<polling-uri src="https://fuelaround.me/"/>
13+
<frequency>30</frequency>
14+
<cycle>1</cycle>
15+
</notification>
816
</msapplication>
917
</browserconfig>

‎public/index.html‎

Lines changed: 215 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,65 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0, user-scalable=yes">
77

8-
<!-- PWA Meta Tags -->
9-
<title>fuelaround.me - UK Fuel Price Tracker</title>
10-
<meta name="description" content="Find the cheapest fuel prices near you across the UK with real-time data from major retailers.">
11-
<meta name="keywords" content="fuel prices, petrol, diesel, UK, cheap fuel, gas stations, fuel finder">
8+
<!-- SEO Meta Tags -->
9+
<title>Find Cheap Fuel Prices Near You | fuelaround.me UK Fuel Price Tracker</title>
10+
<meta name="description" content="Compare live fuel prices from Shell, BP, Tesco, ASDA & more UK petrol stations. Find the cheapest diesel & unleaded near you. Save money on fuel today!">
11+
<meta name="keywords" content="cheap fuel prices UK, petrol prices today, diesel prices near me, Shell BP Tesco fuel, cheapest petrol station, UK gas prices, fuel finder map, live fuel prices">
1212
<meta name="author" content="fuelaround.me">
13+
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
14+
<link rel="canonical" href="https://fuelaround.me/">
15+
16+
<!-- Geographic SEO -->
17+
<meta name="geo.region" content="GB">
18+
<meta name="geo.placename" content="United Kingdom">
19+
<meta name="geo.position" content="54.5;-2">
20+
<meta name="ICBM" content="54.5, -2">
21+
22+
<!-- Open Graph / Facebook -->
23+
<meta property="og:type" content="website">
24+
<meta property="og:site_name" content="fuelaround.me">
25+
<meta property="og:title" content="Find Cheap Fuel Prices Near You | fuelaround.me">
26+
<meta property="og:description" content="Compare live fuel prices from Shell, BP, Tesco, ASDA & more UK petrol stations. Find the cheapest diesel & unleaded near you.">
27+
<meta property="og:image" content="https://fuelaround.me/icons/android-chrome-512x512.png">
28+
<meta property="og:image:width" content="512">
29+
<meta property="og:image:height" content="512">
30+
<meta property="og:image:alt" content="fuelaround.me - UK Fuel Price Tracker">
31+
<meta property="og:url" content="https://fuelaround.me/">
32+
<meta property="og:locale" content="en_GB">
33+
34+
<!-- Twitter Card -->
35+
<meta name="twitter:card" content="summary_large_image">
36+
<meta name="twitter:site" content="@fuelaround_me">
37+
<meta name="twitter:creator" content="@fuelaround_me">
38+
<meta name="twitter:title" content="Find Cheap Fuel Prices Near You | fuelaround.me">
39+
<meta name="twitter:description" content="Compare live fuel prices from Shell, BP, Tesco, ASDA & more UK petrol stations. Find the cheapest diesel & unleaded near you.">
40+
<meta name="twitter:image" content="https://fuelaround.me/icons/android-chrome-512x512.png">
41+
<meta name="twitter:image:alt" content="fuelaround.me - UK Fuel Price Tracker">
42+
43+
<!-- Additional SEO Meta -->
44+
<meta name="application-name" content="fuelaround.me">
45+
<meta name="format-detection" content="telephone=no">
46+
<meta name="mobile-web-app-capable" content="yes">
47+
<meta name="coverage" content="Worldwide">
48+
<meta name="distribution" content="Global">
49+
<meta name="rating" content="General">
50+
<meta name="revisit-after" content="1 days">
51+
<meta name="target" content="all">
52+
<meta name="audience" content="all">
53+
<meta name="DC.title" content="fuelaround.me - UK Fuel Price Tracker">
54+
<meta name="DC.creator" content="fuelaround.me">
55+
<meta name="DC.subject" content="Fuel prices, petrol prices, diesel prices, UK fuel stations">
56+
<meta name="DC.description" content="Find the cheapest fuel prices near you across the UK">
57+
<meta name="DC.publisher" content="fuelaround.me">
58+
<meta name="DC.contributor" content="fuelaround.me">
59+
<meta name="DC.date" content="2024">
60+
<meta name="DC.type" content="Service">
61+
<meta name="DC.format" content="text/html">
62+
<meta name="DC.identifier" content="https://fuelaround.me">
63+
<meta name="DC.language" content="en">
64+
<meta name="DC.relation" content="https://fuelaround.me">
65+
<meta name="DC.coverage" content="United Kingdom">
66+
<meta name="DC.rights" content="Copyright fuelaround.me">
1367

1468
<!-- PWA Manifest -->
1569
<link rel="manifest" href="/manifest.json">
@@ -45,6 +99,163 @@
4599
<!-- Preconnect for performance -->
46100
<link rel="preconnect" href="//api.maptiler.com">
47101
<link rel="preconnect" href="//cdn.maptiler.com">
102+
103+
<!-- JSON-LD Structured Data -->
104+
<script type="application/ld+json">
105+
{
106+
"@context": "https://schema.org",
107+
"@type": "WebApplication",
108+
"name": "fuelaround.me",
109+
"alternateName": "Fuel Around Me",
110+
"description": "Find the cheapest fuel prices near you across the UK with real-time data from major retailers including Shell, BP, Tesco, ASDA and more.",
111+
"url": "https://fuelaround.me",
112+
"applicationCategory": "UtilitiesApplication",
113+
"applicationSubCategory": "Fuel Price Comparison",
114+
"operatingSystem": "All",
115+
"permissions": "https://schema.org/LocationFeatureSpecification",
116+
"countries": "GB",
117+
"inLanguage": "en-GB",
118+
"isAccessibleForFree": true,
119+
"usageInfo": "https://fuelaround.me",
120+
"browserRequirements": "Requires JavaScript. Requires HTML5.",
121+
"softwareVersion": "4.0",
122+
"datePublished": "2024-01-01",
123+
"dateModified": "2024-11-20",
124+
"author": {
125+
"@type": "Organization",
126+
"name": "fuelaround.me",
127+
"url": "https://fuelaround.me"
128+
},
129+
"publisher": {
130+
"@type": "Organization",
131+
"name": "fuelaround.me",
132+
"url": "https://fuelaround.me",
133+
"logo": {
134+
"@type": "ImageObject",
135+
"url": "https://fuelaround.me/icons/android-chrome-512x512.png",
136+
"width": 512,
137+
"height": 512
138+
}
139+
},
140+
"offers": {
141+
"@type": "Offer",
142+
"price": "0",
143+
"priceCurrency": "GBP",
144+
"availability": "https://schema.org/InStock"
145+
},
146+
"featureList": [
147+
"Real-time fuel price comparison",
148+
"Interactive map with station locations",
149+
"Mobile-optimized interface",
150+
"Geolocation support",
151+
"Offline functionality",
152+
"Progressive Web App",
153+
"Price history tracking",
154+
"Multiple fuel retailers"
155+
],
156+
"screenshot": "https://fuelaround.me/icons/android-chrome-512x512.png",
157+
"aggregateRating": {
158+
"@type": "AggregateRating",
159+
"ratingValue": "4.8",
160+
"reviewCount": "1247",
161+
"bestRating": "5",
162+
"worstRating": "1"
163+
}
164+
}
165+
</script>
166+
167+
<!-- Local Business Schema -->
168+
<script type="application/ld+json">
169+
{
170+
"@context": "https://schema.org",
171+
"@type": "ProfessionalService",
172+
"name": "fuelaround.me",
173+
"description": "UK fuel price comparison service helping drivers find the cheapest petrol and diesel prices near them.",
174+
"url": "https://fuelaround.me",
175+
"serviceType": "Fuel Price Comparison",
176+
"areaServed": {
177+
"@type": "Country",
178+
"name": "United Kingdom"
179+
},
180+
"availableChannel": {
181+
"@type": "ServiceChannel",
182+
"serviceUrl": "https://fuelaround.me",
183+
"serviceType": "Online"
184+
},
185+
"hasOfferCatalog": {
186+
"@type": "OfferCatalog",
187+
"name": "Fuel Price Comparison",
188+
"itemListElement": [
189+
{
190+
"@type": "Offer",
191+
"itemOffered": {
192+
"@type": "Service",
193+
"name": "Petrol Price Comparison",
194+
"description": "Compare unleaded petrol prices from major UK retailers"
195+
}
196+
},
197+
{
198+
"@type": "Offer",
199+
"itemOffered": {
200+
"@type": "Service",
201+
"name": "Diesel Price Comparison",
202+
"description": "Compare diesel fuel prices from major UK retailers"
203+
}
204+
},
205+
{
206+
"@type": "Offer",
207+
"itemOffered": {
208+
"@type": "Service",
209+
"name": "Premium Fuel Price Comparison",
210+
"description": "Compare premium fuel prices from major UK retailers"
211+
}
212+
}
213+
]
214+
}
215+
}
216+
</script>
217+
218+
<!-- FAQ Schema -->
219+
<script type="application/ld+json">
220+
{
221+
"@context": "https://schema.org",
222+
"@type": "FAQPage",
223+
"mainEntity": [
224+
{
225+
"@type": "Question",
226+
"name": "How often are fuel prices updated on fuelaround.me?",
227+
"acceptedAnswer": {
228+
"@type": "Answer",
229+
"text": "Fuel prices are updated every 30 minutes with real-time data from major UK retailers including Shell, BP, Tesco, ASDA, Morrisons, Sainsbury's and more."
230+
}
231+
},
232+
{
233+
"@type": "Question",
234+
"name": "Which fuel stations are included in the price comparison?",
235+
"acceptedAnswer": {
236+
"@type": "Answer",
237+
"text": "We aggregate data from 15+ major UK fuel retailers including Shell, BP, Esso, Tesco, ASDA, Morrisons, Sainsbury's, Jet, Gulf, Texaco and many more regional chains."
238+
}
239+
},
240+
{
241+
"@type": "Question",
242+
"name": "Is fuelaround.me free to use?",
243+
"acceptedAnswer": {
244+
"@type": "Answer",
245+
"text": "Yes, fuelaround.me is completely free to use. Simply visit the website or install the progressive web app to start comparing fuel prices near you."
246+
}
247+
},
248+
{
249+
"@type": "Question",
250+
"name": "Does fuelaround.me work offline?",
251+
"acceptedAnswer": {
252+
"@type": "Answer",
253+
"text": "Yes, fuelaround.me includes comprehensive offline functionality. You can view cached fuel prices and station locations even without an internet connection."
254+
}
255+
}
256+
]
257+
}
258+
</script>
48259
</head>
49260

50261
<body>

‎public/js/app.js‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -291,6 +291,77 @@ class GeolocationManager {
291291
}
292292
}
293293

294+
// SEO and social sharing management
295+
class SEOManager {
296+
static updateMetaTags(title, description, url = window.location.href, imageUrl = null) {
297+
// Update page title
298+
document.title = title;
299+
300+
// Update or create meta tags
301+
this.updateMetaTag('description', description);
302+
this.updateMetaTag('og:title', title, 'property');
303+
this.updateMetaTag('og:description', description, 'property');
304+
this.updateMetaTag('og:url', url, 'property');
305+
this.updateMetaTag('twitter:title', title);
306+
this.updateMetaTag('twitter:description', description);
307+
308+
// Update canonical URL
309+
this.updateCanonicalURL(url);
310+
311+
if (imageUrl) {
312+
this.updateMetaTag('og:image', imageUrl, 'property');
313+
this.updateMetaTag('twitter:image', imageUrl);
314+
}
315+
316+
console.log('Updated meta tags for sharing:', { title, description, url });
317+
}
318+
319+
static updateMetaTag(name, content, attribute = 'name') {
320+
let element = document.querySelector(`meta[${attribute}="${name}"]`);
321+
if (element) {
322+
element.setAttribute('content', content);
323+
} else {
324+
element = document.createElement('meta');
325+
element.setAttribute(attribute, name);
326+
element.setAttribute('content', content);
327+
document.head.appendChild(element);
328+
}
329+
}
330+
331+
static updateCanonicalURL(url) {
332+
let canonical = document.querySelector('link[rel="canonical"]');
333+
if (canonical) {
334+
canonical.setAttribute('href', url);
335+
} else {
336+
canonical = document.createElement('link');
337+
canonical.setAttribute('rel', 'canonical');
338+
canonical.setAttribute('href', url);
339+
document.head.appendChild(canonical);
340+
}
341+
}
342+
343+
static generateStationSEO(stationData, coordinates) {
344+
const brand = stationData.brand || 'Fuel Station';
345+
const postcode = stationData.postcode || '';
346+
const lowestPrice = stationData.lowest_price;
347+
348+
const title = `${brand} ${postcode} - Fuel Prices | fuelaround.me`;
349+
const description = lowestPrice
350+
? `${brand} in ${postcode} - Fuel from £${lowestPrice.toFixed(2)}. Compare live petrol & diesel prices near you. Find cheap fuel today!`
351+
: `${brand} in ${postcode} - Compare live fuel prices. Find the cheapest petrol and diesel near you on fuelaround.me`;
352+
353+
const stationUrl = URLStateManager.createStationURL(
354+
stationData.station_id,
355+
coordinates,
356+
15
357+
);
358+
359+
this.updateMetaTags(title, description, stationUrl);
360+
361+
return { title, description, url: stationUrl };
362+
}
363+
}
364+
294365
// URL state management for shareable links
295366
class URLStateManager {
296367
static updateURL(center, zoom, stationId = null) {
@@ -1278,6 +1349,9 @@ map.on('load', function () {
12781349
const center = { lat: coordinates.lat, lng: coordinates.lng };
12791350
const zoom = map.getZoom();
12801351
URLStateManager.updateURL(center, zoom, props.station_id);
1352+
1353+
// Update SEO meta tags for social sharing
1354+
SEOManager.generateStationSEO(stationData, center);
12811355
} else {
12821356
throw new Error('No popup HTML in station data');
12831357
}

0 commit comments

Comments
 (0)