From 5e87f52e5e22d8c234e1ad5d3dec2aa73759d733 Mon Sep 17 00:00:00 2001 From: Michael DiLeo Date: Sun, 28 Sep 2025 18:00:58 +0000 Subject: [PATCH] seo (#17) SEO implementation, adds a structured data response and robots.txt, fixes page structure, adds meta tags, add elements to UI for better SEO as well. Reviewed-on: http://source.michaeldileo.org/michael_dileo/Keyboard-Vagabond-Web/pulls/17 Co-authored-by: Michael DiLeo Co-committed-by: Michael DiLeo --- minify-build.js | 6 +- nginx.conf | 6 ++ public/about.html | 10 +-- public/index.html | 125 ++++++++++++++++++++++++++++------- public/robots.txt | 22 ++++++ public/site-styles/style.css | 109 ++++++++++++++++++++++++++++++ public/sitemap.xml | 15 +++++ public/structured-data.json | 64 ++++++++++++++++++ 8 files changed, 327 insertions(+), 30 deletions(-) create mode 100644 public/robots.txt create mode 100644 public/sitemap.xml create mode 100644 public/structured-data.json diff --git a/minify-build.js b/minify-build.js index cd7b0a8..40d06b6 100644 --- a/minify-build.js +++ b/minify-build.js @@ -35,10 +35,12 @@ async function createOptimizedBuild() { const purgeResults = await new PurgeCSS().purge({ content: [ 'public/index.html', - 'public/about.html' + 'public/about.html', + 'public/robots.txt', + 'public/sitemap.xml', ], css: [ - 'public/css/pico.jade.css' + 'public/css/pico.jade.css', // 'public/css/pico.colors.min.css' ], safelist: { diff --git a/nginx.conf b/nginx.conf index c4e798a..41757a0 100644 --- a/nginx.conf +++ b/nginx.conf @@ -16,6 +16,7 @@ http { include /etc/nginx/mime.types; default_type application/octet-stream; + charset utf-8; access_log /dev/stdout; error_log /dev/stderr; @@ -56,6 +57,11 @@ http { # add_header Pragma "no-cache"; # add_header Expires "0"; } + + location ~* \.json$ { + expires 1d; + add_header Cache-Control "public, must-revalidate"; + } location /health { access_log off; diff --git a/public/about.html b/public/about.html index 7946c33..93265f9 100644 --- a/public/about.html +++ b/public/about.html @@ -65,12 +65,12 @@ Your data is yours and you can download it at any time through the apps. The servers are run in a cluster with data redundancy across nodes + nightly and weekly backups to offline storage.

Should shutdown happen - - There will be a 3 month announcement in advance, in accordance with the Mastodon Server Covenant.

+ There will be a 3 month announcement in advance, in accordance with the Mastodon Server Covenant.

Funding - Keyboard Mastodon is currently funded by the admin, for a cost of ~$40 - $45 per month. Donations may be opened in the future, but have not been set up at this time.

-

The Dirty Technicals

+

The Dirty Technicals

If you're not a mega-nerd, turn back now.

I warned you.

Keyboard Vagabond is run on a 3 node Kubernetes cluster running on 3x Arm VPSs hosted by NetCup in Amsterdam. I chose Amsterdam because I thought that Europe would be more centrally located for people who are traveling the world.

@@ -79,7 +79,7 @@

The Specs

Servers
-
3x 10 ARM vCPUs, 16GB Ram, 500GB (~50GB for Talos and the rest for Longhorn) storage running Talos and Kubernetespan.
+
3x 10 ARM vCPUs, 16GB Ram, 500GB (~50GB for Talos and the rest for Longhorn) storage running Talos and Kubernetespan.
Storage
Longhorn ensures that there are at least 2 copies across the nodes.
Backups and Content
@@ -87,7 +87,7 @@
CDN
CloudFlare provides CDN and special rules have been set up to be sure that as much as possible is cached.
Security
-
Ports are closed off to the world and secured with CloudFlare tunnels and TailScale as the only means of access outside of website access.
+
Ports are closed off to the world and secured with CloudFlare tunnels and secure VPN as the only means of access outside of website access.
Observability and Logging
OpenObserve dashboards and log aggregation.
Domain
@@ -113,7 +113,7 @@ diff --git a/public/index.html b/public/index.html index 02ffc8b..1c32cf4 100644 --- a/public/index.html +++ b/public/index.html @@ -5,9 +5,44 @@ + + + Keyboard Vagabond - Fediverse for Digital Nomads + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - Keyboard Vagabond @@ -52,29 +87,58 @@ - +
-

We welcome you to this space to connect with others, share information, create memories, and help each other - to travel responsibly and considerately as we explore the world.

-

<mascot here? :D > - mascot intro and why it was chosen -

-

Here, you are a member, not just a user - We want to create community in this space, being - respectful of each other as well as the places go and the people we see. This space is what we make of it. -

-

What you'll find here

-

Keyboard Vagabond hosts the various fediverse alternatives to big tech and participates in the network. - Available to you is:

+
+

About Keyboard Vagabond

+

We welcome you to this space to connect with others, share information, create memories, and help each other + to travel responsibly and considerately as we explore the world.

+

Here, you are a member, not just a user - We want to create community in this space, being + respectful of each other as well as the places we go and the people we see. This space is what we make of it. +

+
+ +
+

Our Fediverse Services

+

Keyboard Vagabond hosts various fediverse alternatives to big tech and participates in the network. + Available to you are:

+ + +
+

Quick Access to All Services

+
+ + Mastodon - Social Media + + + Piefed - Community Forum + + + Pixelfed - Photo Sharing + + + Bookwyrm - Book Reviews + + + Write Freely - Blogging + + + Picsur - Image Hosting + +
+
+ +

Detailed Service Information

    -
  • Piefed - Similar to and compatible +
  • Piefed - An alternative to Reddit and similar to and compatible with Lemmy, but with extra features for topics and communities. - Both are an alternative to Reddit. See more at join-lemmy.org and + See more at join-lemmy.org and join.piefed.social.
  • Pixelfed - Like old instagram, where you can share your photos, albums, and create stories. See more at pixelfed.org.
    • @@ -109,7 +173,7 @@ The rest of the applications are accessible on the websites and can be added to your homescreen.
    Signing in - you'll search the server that you want to join, such as mastodon.social or mastodon.keyboardvagabond.com, or use the provided default instances.

    -

    What is the Fediverse

    +

    What is the Fediverse

    The fediverse is a collection of big-tech alternative social media that all communicate with each other using the same protocol, called ActivityPub. This means that not only can different “instances,” such as this community, participate with discussions on other servers, but also with the different applications. You can @@ -119,12 +183,12 @@ make a video on PeerTube (Youtube alternative) and discuss on Mastodon. Your Write Freely blog posts will, if you enable it, be visible on Mastodon and people can follow your blog account.

    Check out this amazing four minute video by Elena Rossini. You can follow her - on Mastodon by searching @_elena@mastodon.social.

    + on Mastodon by searching @_elena@mastodon.social.

    + loading="lazy" alt="video link to Introducing the Fediverse: a New Era of Social Media">

    Getting started in the Fediverse

    The best way to see what's available in the fediverse is to start off on a larger instance, which will be @@ -190,7 +254,22 @@

-
+
+
+
+ +

Keyboard Vagabond - A fediverse community for digital nomads, remote workers, and travel enthusiasts.

+ Connect with us across the fediverse:
+ +

© 2025 Keyboard Vagabond. Part of the decentralized fediverse network.

+
+
diff --git a/public/robots.txt b/public/robots.txt new file mode 100644 index 0000000..50ef6d2 --- /dev/null +++ b/public/robots.txt @@ -0,0 +1,22 @@ +User-agent: * +Allow: / + +# Sitemap location +Sitemap: https://www.keyboardvagabond.com/sitemap.xml + +# Disallow crawling of fediverse subdomains to focus on main site +Disallow: /mastodon/ +Disallow: /piefed/ +Disallow: /pixelfed/ +Disallow: /bookwyrm/ +Disallow: /blog/ +Disallow: /picsur/ + +# Allow important pages +Allow: /about.html +Allow: /css/ +Allow: /scripts/ +Allow: /site-styles/ + +# Crawl delay to be respectful +Crawl-delay: 1 diff --git a/public/site-styles/style.css b/public/site-styles/style.css index 0fd8488..48a8432 100644 --- a/public/site-styles/style.css +++ b/public/site-styles/style.css @@ -327,4 +327,113 @@ .mobile-nav li { position: relative; } +} + +/* Services Summary Styling */ +.services-summary { + background: var(--pico-muted-color); + background: rgba(var(--pico-muted-color-rgb, 0, 0, 0), 0.05); + border: 1px solid var(--pico-muted-border-color); + border-radius: var(--pico-border-radius); + padding: var(--pico-spacing); + margin: var(--pico-typography-spacing-vertical) 0; +} + +.services-summary h3 { + margin-top: 0; + margin-bottom: var(--pico-typography-spacing-vertical); + color: var(--pico-primary); +} + +.service-links { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: calc(var(--pico-spacing) * 0.75); + margin: 0; +} + +.service-link { + display: block; + padding: calc(var(--pico-spacing) * 0.75); + background: var(--pico-background-color); + border: 1px solid var(--pico-muted-border-color); + border-radius: var(--pico-border-radius); + text-decoration: none; + color: var(--pico-color); + transition: all 0.2s ease; + text-align: center; +} + +.service-link:hover { + background: var(--pico-primary); + color: var(--pico-primary-inverse); + border-color: var(--pico-primary); + transform: translateY(-2px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.service-link strong { + display: block; + font-size: 1.1em; + margin-bottom: calc(var(--pico-spacing) * 0.25); +} + +/* Screen reader only class */ +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +/* Responsive service links */ +@media (max-width: 768px) { + .service-links { + grid-template-columns: 1fr; + gap: calc(var(--pico-spacing) * 0.5); + } + + .service-link { + padding: calc(var(--pico-spacing) * 0.5); + } +} + +footer ul { + display: flex; + flex-wrap: wrap; + gap: calc(var(--pico-spacing) * 0.5); + list-style: none; + padding: 0; + margin: 0; + align-items: center; +} + +footer li { + margin: 0; + display: flex; + align-items: center; +} + +footer li:not(:last-child)::after { + content: "|"; + margin: 0 calc(var(--pico-spacing) * 0.5); + color: var(--pico-muted-color); + font-weight: normal; +} + +@media (max-width: 480px) { + footer ul { + flex-direction: column; + align-items: center; + gap: calc(var(--pico-spacing) * 0.5); + } + + footer li:not(:last-child)::after { + content: none; /* Remove delimiters on mobile */ + } } \ No newline at end of file diff --git a/public/sitemap.xml b/public/sitemap.xml new file mode 100644 index 0000000..6568bbf --- /dev/null +++ b/public/sitemap.xml @@ -0,0 +1,15 @@ + + + + https://www.keyboardvagabond.com/ + 2024-12-19 + monthly + 1.0 + + + https://www.keyboardvagabond.com/about.html + 2024-12-19 + monthly + 0.8 + + diff --git a/public/structured-data.json b/public/structured-data.json new file mode 100644 index 0000000..b41d6c4 --- /dev/null +++ b/public/structured-data.json @@ -0,0 +1,64 @@ +{ + "@context": "https://schema.org", + "@type": "Organization", + "name": "Keyboard Vagabond", + "url": "https://www.keyboardvagabond.com", + "logo": "https://picsur.keyboardvagabond.com/i/076a5b88-20d3-426e-ad7f-f24a68d3fa70.jpg?width=400", + "description": "A fediverse community for digital nomads, remote workers, and travel enthusiasts offering multiple social media alternatives including Mastodon, Piefed, Pixelfed, Bookwyrm, and Write Freely.", + "sameAs": [ + "https://mastodon.keyboardvagabond.com", + "https://piefed.keyboardvagabond.com", + "https://pixelfed.keyboardvagabond.com", + "https://bookwyrm.keyboardvagabond.com", + "https://blog.keyboardvagabond.com" + ], + "foundingDate": "2025", + "areaServed": "Global", + "knowsAbout": ["Fediverse", "Digital Nomadism", "Remote Work", "Travel", "Social Media Alternatives"], + "hasOfferCatalog": { + "@type": "OfferCatalog", + "name": "Fediverse Services", + "itemListElement": [ + { + "@type": "Offer", + "itemOffered": { + "@type": "Service", + "name": "Mastodon", + "description": "Decentralized social media alternative to Twitter" + } + }, + { + "@type": "Offer", + "itemOffered": { + "@type": "Service", + "name": "Piefed", + "description": "Community forum alternative to Reddit with enhanced features" + } + }, + { + "@type": "Offer", + "itemOffered": { + "@type": "Service", + "name": "Pixelfed", + "description": "Photo sharing platform alternative to Instagram" + } + }, + { + "@type": "Offer", + "itemOffered": { + "@type": "Service", + "name": "Bookwyrm", + "description": "Book discussion and review platform" + } + }, + { + "@type": "Offer", + "itemOffered": { + "@type": "Service", + "name": "Write Freely", + "description": "Minimalist federated blogging platform" + } + } + ] + } +} \ No newline at end of file