fix: add a proper 1200x630 social preview card
Some checks are pending
Deploy to GitHub Pages / deploy (push) Waiting to run

This commit is contained in:
SkateSpots 2026-11-01 21:29:39 +07:00
parent 11171b37da
commit c352986e70
5 changed files with 11 additions and 5 deletions

View file

@ -62,16 +62,22 @@
<!-- Open Graph --> <!-- Open Graph -->
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:site_name" content="SkateSpots">
<meta property="og:title" content="SkateSpots - Decentralized Skate Map & Community"> <meta property="og:title" content="SkateSpots - Decentralized Skate Map & Community">
<meta property="og:description" content="Discover skate spots, find coaches, join events, and connect with the skateboarding community on Nostr."> <meta property="og:description" content="Discover skate spots, find coaches, join events, and connect with the skateboarding community on Nostr.">
<meta property="og:image" content="https://skate-spots.org/images/icon-1024.png"> <meta property="og:image" content="https://skate-spots.org/images/og-card.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="SkateSpots — decentralized skate map, crews, events and gear">
<meta property="og:url" content="https://skate-spots.org"> <meta property="og:url" content="https://skate-spots.org">
<!-- Twitter Card --> <!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="SkateSpots - Decentralized Skate Map"> <meta name="twitter:title" content="SkateSpots - Decentralized Skate Map">
<meta name="twitter:description" content="Discover skate spots, find coaches, join events on Nostr."> <meta name="twitter:description" content="Discover skate spots, find coaches, join events on Nostr.">
<meta name="twitter:image" content="https://skate-spots.org/images/icon-1024.png"> <meta name="twitter:image" content="https://skate-spots.org/images/og-card.png">
<meta name="twitter:image:alt" content="SkateSpots — decentralized skate map, crews, events and gear">
<!-- Leaflet CSS is self-hosted (imported in main.tsx) — no unpkg/CDN. --> <!-- Leaflet CSS is self-hosted (imported in main.tsx) — no unpkg/CDN. -->
<!-- Warm up the connections used on almost every visit: our relay + media. --> <!-- Warm up the connections used on almost every visit: our relay + media. -->

BIN
public/images/og-card.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 779 KiB

View file

@ -16,7 +16,7 @@ export default function DonatePage() {
description: t('seoUi.donateDesc'), description: t('seoUi.donateDesc'),
ogTitle: 'Support SkateSpots', ogTitle: 'Support SkateSpots',
ogDescription: 'Keep the map free, ad-free and open-source.', ogDescription: 'Keep the map free, ad-free and open-source.',
ogImage: 'https://skate-spots.org/images/icon-1024.png', ogImage: 'https://skate-spots.org/images/og-card.png',
}); });
return ( return (

View file

@ -95,7 +95,7 @@ export default function EventDetailPage() {
// og:image must be an absolute URL. Fall back to the site social card when the // og:image must be an absolute URL. Fall back to the site social card when the
// event has no cover so shared links never render blank. // event has no cover so shared links never render blank.
const ogImage = event?.image || 'https://skate-spots.org/images/icon-1024.png'; const ogImage = event?.image || 'https://skate-spots.org/images/og-card.png';
// Compose a punchy share description: date + location, then the blurb. // Compose a punchy share description: date + location, then the blurb.
const shareDescription = (() => { const shareDescription = (() => {

View file

@ -742,7 +742,7 @@ export default function SupportersPage() {
description: t('seoUi.supportersDesc'), description: t('seoUi.supportersDesc'),
ogTitle: 'Supporters — SkateSpots', ogTitle: 'Supporters — SkateSpots',
ogDescription: 'Built by skaters, funded by skaters. Back the map on Angor or zap it.', ogDescription: 'Built by skaters, funded by skaters. Back the map on Angor or zap it.',
ogImage: 'https://skate-spots.org/images/icon-1024.png', ogImage: 'https://skate-spots.org/images/og-card.png',
}); });
return ( return (