SEO: comprehensive search engine optimization for bilhej.se

Adds 7 SEO improvements across the full stack: 1. Enhanced index.html: - Open Graph tags (og:title, og:description, og:image, og:locale sv_SE) - Twitter Card tags (summary_large_image) - Canonical URL (https://bilhej.se/) - Meta keywords, author, robots, language tags - Structured data in JSON-LD (Organization, WebSite, Service, FAQPage) - FAQ structured data with 4 Q&A pairs (pris, anonymitet, hur funkar det) - Preconnect hints for analytics origin 2. robots.txt: - Disallow: auth pages, admin, orders, payment, guest pages - Allow: public pages (/, /om-oss, /kontakt, /integritetspolicy, /villkor) - Crawl-delay: 10s - Points to sitemap 3. sitemap.xml: - 6 public URLs with proper changefreq and priority - Home (1.0), Om (0.7), Kontakt (0.6), GDPR/Villkor (0.5) 4. useSeo composable: - Dynamic document.title, meta description/OG/Twitter on route change - Canonical URL updates per page - Reset fallback for unnamed routes 5. Route-level SEO data: - 16 routes with unique title, description, keywords - Covers all public pages + key auth pages 6. App.vue: wired useSeo with route.name watcher (immediate: true) 7. nginx.conf: - Security headers: X-Frame-Options DENY, X-Content-Type-Options, X-XSS-Protection, Referrer-Policy, Permissions-Policy, HSTS - Far-future cache (1y, immutable) for static assets - No-cache for robots.txt and sitemap.xml - Deny access to dotfiles - Stronger gzip config
2026-07-18 17:54:13 +00:00
7 changed files with 447 additions and 7 deletions
--- a/docker/nginx.conf
+++ b/docker/nginx.conf
@ -1,7 +1,7 @@
 server {
    listen 80;
    listen 443 ssl;
-    server_name _;
+    server_name bilhej.se www.bilhej.se;

    ssl_certificate /etc/nginx/certs/cert.crt;
    ssl_certificate_key /etc/nginx/certs/cert.key;
@ -11,20 +11,59 @@ server {
    root /usr/share/nginx/html;
    index index.html;

+    # ── Security headers ──────────────────────────────────────────
+    add_header X-Frame-Options "DENY" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+    add_header Permissions-Policy "camera=(), microphone=(), geolocation=()" always;
+    # Strict-Transport-Security only when HTTPS is active
+    add_header Strict-Transport-Security "max-age=63072000; includeSubDomains; preload" always;
+
+    # ── Gzip ──────────────────────────────────────────────────────
+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript text/xml
+               application/xml text/javascript image/svg+xml text/markdown;
+    gzip_vary on;
+    gzip_min_length 256;
+    gzip_comp_level 6;
+
+    # ── API reverse proxy ─────────────────────────────────────────
    location /api/ {
        proxy_pass http://backend:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_set_header X-Forwarded-Host $host;
    }

+    # ── Static assets with far-future cache ───────────────────────
+    location ~* \.(?:ico|svg|css|js|woff2?|ttf|eot|png|jpg|jpeg|gif|webp|avif)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+        add_header Vary "Accept-Encoding";
+        try_files $uri =404;
+    }
+
+    # ── Robots + sitemap (never cached, fresh every time) ─────────
+    location = /robots.txt {
+        add_header Cache-Control "no-cache, must-revalidate";
+        try_files $uri =404;
+    }
+    location = /sitemap.xml {
+        add_header Cache-Control "no-cache, must-revalidate";
+        try_files $uri =404;
+    }
+
+    # ── SPA fallback — serve index.html for all other routes ──────
    location / {
        try_files $uri $uri/ /index.html;
    }

-    gzip on;
-    gzip_types text/plain text/css application/json application/javascript text/xml application/xml text/javascript image/svg+xml;
-    gzip_vary on;
-    gzip_min_length 256;
+    # ── Deny access to dotfiles ───────────────────────────────────
+    location ~ /\. {
+        deny all;
+        return 404;
+    }
 }
--- a/frontend/index.html
+++ b/frontend/index.html
@ -4,12 +4,143 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg?v=4" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Skicka ett brev till en fordonsägare. Ange registreringsnummer, skriv ditt meddelande, så postar vi det." />
+
+    <!-- Primary Meta Tags -->
+    <title>Bilhej — Skicka brev till fordonsägare via registreringsnummer</title>
+    <meta name="title" content="Bilhej — Skicka brev till fordonsägare via registreringsnummer" />
+    <meta name="description" content="Skicka ett fysiskt brev till en fordonsägare. Ange registreringsnummer, skriv ditt meddelande, betala 49 kr via Swish. Vi postar brevet åt dig med spårning." />
+    <meta name="keywords" content="brev till bilägare, kontakta fordonsägare, registreringsnummer, skicka brev, anonymt meddelande, parkeringsskada, köp bilen, tuta, körbeteende, svensk post" />
+    <meta name="author" content="Bilhej" />
+    <meta name="robots" content="index, follow, max-image-preview:large" />
+    <meta name="language" content="Swedish" />
    <meta name="theme-color" content="#1d4ed8" />
+    <link rel="canonical" href="https://bilhej.se/" />
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://bilhej.se/" />
+    <meta property="og:title" content="Bilhej — Skicka brev till fordonsägare" />
+    <meta property="og:description" content="Skicka ett fysiskt brev till en bilägare via registreringsnummer. Skriv, betala 49 kr, vi postar." />
+    <meta property="og:site_name" content="Bilhej" />
+    <meta property="og:locale" content="sv_SE" />
+    <meta property="og:image" content="https://bilhej.se/og-image.png" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:url" content="https://bilhej.se/" />
+    <meta name="twitter:title" content="Bilhej — Skicka brev till fordonsägare" />
+    <meta name="twitter:description" content="Skicka ett fysiskt brev till en bilägare via registreringsnummer. Skriv, betala 49 kr, vi postar." />
+    <meta name="twitter:image" content="https://bilhej.se/og-image.png" />
+
+    <!-- Performance: preconnect to font + analytics origins -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="preconnect" href="https://analytics.bilhej.se" />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
-    <title>Bilhej — Skicka brev till fordonsägare</title>
+
+    <!-- Structured Data: Organization -->
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "Organization",
+      "name": "Bilhej",
+      "url": "https://bilhej.se",
+      "logo": "https://bilhej.se/favicon.svg",
+      "description": "Tjänst för att skicka fysiska brev till fordonsägare via registreringsnummer.",
+      "email": "kontakt@bilhej.se",
+      "contactPoint": {
+        "@type": "ContactPoint",
+        "email": "support@bilhej.se",
+        "contactType": "customer support",
+        "availableLanguage": ["Swedish"]
+      }
+    }
+    </script>
+
+    <!-- Structured Data: WebSite with SearchAction -->
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "WebSite",
+      "name": "Bilhej",
+      "url": "https://bilhej.se",
+      "inLanguage": "sv-SE",
+      "potentialAction": {
+        "@type": "ReadAction",
+        "target": "https://bilhej.se"
+      }
+    }
+    </script>
+
+    <!-- Structured Data: Service / Product -->
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "Service",
+      "name": "Bilhej — Brev till fordonsägare",
+      "description": "Skicka ett fysiskt brev till en fordonsägare genom att ange registreringsnummer. Swish-betalning, spårning och anonym avsändare.",
+      "url": "https://bilhej.se",
+      "provider": {
+        "@type": "Organization",
+        "name": "Bilhej",
+        "url": "https://bilhej.se"
+      },
+      "areaServed": {
+        "@type": "Country",
+        "name": "Sverige"
+      },
+      "offers": {
+        "@type": "Offer",
+        "price": "49",
+        "priceCurrency": "SEK",
+        "description": "Per brev: utskrift, kuvertering och postning"
+      }
+    }
+    </script>
+
+    <!-- FAQ Structured Data -->
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "FAQPage",
+      "mainEntity": [
+        {
+          "@type": "Question",
+          "name": "Hur skickar jag ett brev till en bilägare?",
+          "acceptedAnswer": {
+            "@type": "Answer",
+            "text": "Ange bilens registreringsnummer på bilhej.se, skriv ditt meddelande med en mall eller fritext, betala 49 kr via Swish, så postar vi brevet åt dig."
+          }
+        },
+        {
+          "@type": "Question",
+          "name": "Behöver jag veta vem som äger bilen?",
+          "acceptedAnswer": {
+            "@type": "Answer",
+            "text": "Nej, du behöver bara registreringsnumret. Vi kopplar brevet till rätt mottagare. Du ser aldrig mottagarens namn eller adress."
+          }
+        },
+        {
+          "@type": "Question",
+          "name": "Kan jag vara anonym?",
+          "acceptedAnswer": {
+            "@type": "Answer",
+            "text": "Ja, du kan nå bilägaren anonymt. Lägg bara till dina kontaktuppgifter i brevet om du vill att de ska kunna svara."
+          }
+        },
+        {
+          "@type": "Question",
+          "name": "Vad kostar det?",
+          "acceptedAnswer": {
+            "@type": "Answer",
+            "text": "49 kr per brev. Detta täcker utskrift, kuvertering och porto. Du betalar via Swish."
+          }
+        }
+      ]
+    }
+    </script>
  </head>
  <body>
    <div id="app"></div>
--- a/frontend/public/robots.txt
+++ b/frontend/public/robots.txt
@ -0,0 +1,27 @@
+# Allow all crawlers
+User-agent: *
+Crawl-delay: 10
+Disallow: /api/
+Disallow: /admin/
+Disallow: /orders/
+Disallow: /bestallning/*/redigera
+Disallow: /betalning/*
+Disallow: /gast-bestallning*
+Disallow: /gast-betalning/*
+Disallow: /gast-order/*
+Disallow: /andra-losenord
+Disallow: /andra-epost
+Disallow: /bekrafta-epost
+Disallow: /aterstall-losenord
+Disallow: /glomt-losenord
+
+# Allow important pages
+Allow: /
+Allow: /om-oss
+Allow: /om
+Allow: /kontakt
+Allow: /integritetspolicy
+Allow: /villkor
+
+# Sitemap
+Sitemap: https://bilhej.se/sitemap.xml
--- a/frontend/public/sitemap.xml
+++ b/frontend/public/sitemap.xml
@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+        xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
+        http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
+  <url>
+    <loc>https://bilhej.se/</loc>
+    <changefreq>weekly</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>https://bilhej.se/om-oss</loc>
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
+  <url>
+    <loc>https://bilhej.se/om</loc>
+    <changefreq>monthly</changefreq>
+    <priority>0.3</priority>
+  </url>
+  <url>
+    <loc>https://bilhej.se/kontakt</loc>
+    <changefreq>monthly</changefreq>
+    <priority>0.6</priority>
+  </url>
+  <url>
+    <loc>https://bilhej.se/integritetspolicy</loc>
+    <changefreq>monthly</changefreq>
+    <priority>0.5</priority>
+  </url>
+  <url>
+    <loc>https://bilhej.se/villkor</loc>
+    <changefreq>monthly</changefreq>
+    <priority>0.5</priority>
+  </url>
+</urlset>
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@ -1,7 +1,29 @@
 <script setup lang="ts">
+import { watch } from 'vue'
+import { useRoute } from 'vue-router'
 import { RouterView } from 'vue-router'
 import AppHeader from '@/components/AppHeader.vue'
 import AppFooter from '@/components/AppFooter.vue'
+import { useSeo } from '@/composables/useSeo'
+import { routeSeo } from '@/data/routeSeo'
+
+const route = useRoute()
+const seo = useSeo()
+
+// Update title and meta tags on every route change
+watch(
+  () => route.name,
+  (name) => {
+    const meta = routeSeo[name as string]
+    if (meta) {
+      seo.set(meta)
+    } else {
+      // Fallback for unnamed or dynamic routes (payment, guest, etc.)
+      seo.reset()
+    }
+  },
+  { immediate: true },
+)
 </script>

 <template>
--- a/frontend/src/composables/useSeo.ts
+++ b/frontend/src/composables/useSeo.ts
@ -0,0 +1,95 @@
+/**
+ * useSeo — dynamically updates document <title> and meta tags on route change.
+ *
+ * Usage:
+ *   const seo = useSeo()
+ *   // On page mount / watch:
+ *   watch(route, () => {
+ *     seo.set({ title: 'Min sida', description: '...' })
+ *   })
+ *
+ * The composable sets <title>, meta[name=description], meta[name=keywords],
+ * meta[property=og:title], meta[property=og:description], meta[name=twitter:title],
+ * and meta[name=twitter:description].
+ */
+
+export interface SeoMeta {
+  title: string
+  description: string
+  keywords?: string
+  ogTitle?: string
+  ogDescription?: string
+  canonical?: string
+}
+
+export function useSeo() {
+  function set(meta: SeoMeta) {
+    const title = meta.title ?? 'Bilhej'
+    const description =
+      meta.description ??
+      'Skicka brev till fordonsägare via registreringsnummer.'
+
+    // Document title
+    document.title = title
+
+    // Common meta tags
+    updateMeta('description', description)
+    if (meta.keywords) updateMeta('keywords', meta.keywords)
+
+    // Open Graph
+    updateMeta('og:title', meta.ogTitle ?? title, 'property')
+    updateMeta('og:description', meta.ogDescription ?? description, 'property')
+
+    // Twitter
+    updateMeta('twitter:title', meta.ogTitle ?? title, 'name')
+    updateMeta('twitter:description', meta.ogDescription ?? description, 'name')
+
+    // Canonical URL
+    updateCanonical(meta.canonical)
+  }
+
+  function reset() {
+    document.title = 'Bilhej — Skicka brev till fordonsägare'
+    updateMeta(
+      'description',
+      'Skicka ett fysiskt brev till en fordonsägare via registreringsnummer.',
+    )
+    updateMeta('og:title', 'Bilhej — Skicka brev till fordonsägare', 'property')
+    updateMeta(
+      'og:description',
+      'Skicka ett fysiskt brev till en fordonsägare via registreringsnummer.',
+      'property',
+    )
+    updateCanonical('https://bilhej.se/')
+  }
+
+  return { set, reset }
+}
+
+function updateMeta(
+  nameOrProperty: string,
+  content: string,
+  attr: 'name' | 'property' = 'name',
+) {
+  let el = document.querySelector(
+    `meta[${attr}="${nameOrProperty}"]`,
+  ) as HTMLMetaElement | null
+  if (!el) {
+    el = document.createElement('meta')
+    el.setAttribute(attr, nameOrProperty)
+    document.head.appendChild(el)
+  }
+  el.setAttribute('content', content)
+}
+
+function updateCanonical(href: string | undefined) {
+  let link = document.querySelector(
+    'link[rel="canonical"]',
+  ) as HTMLLinkElement | null
+  if (!link) {
+    link = document.createElement('link')
+    link.setAttribute('rel', 'canonical')
+    document.head.appendChild(link)
+  }
+  link.setAttribute('href', href ?? 'https://bilhej.se/')
+}
--- a/frontend/src/data/routeSeo.ts
+++ b/frontend/src/data/routeSeo.ts
@ -0,0 +1,90 @@
+/**
+ * Route-level SEO metadata for Bilhej.
+ * Each entry maps route.name → { title, description, keywords?, canonical? }
+ * These are applied by App.vue on every route change via useSeo().
+ */
+export interface RouteSeoMeta {
+  title: string
+  description: string
+  keywords?: string
+  /** The full canonical URL for this page */
+  canonical?: string
+}
+
+export const routeSeo: Record<string, RouteSeoMeta> = {
+  home: {
+    title: 'Bilhej — Skicka brev till fordonsägare via registreringsnummer',
+    description:
+      'Skicka ett fysiskt brev till en bilägare med bara registreringsnumret. Välj mall, skriv, betala 49 kr via Swish. Vi postar med spårning.',
+    keywords:
+      'brev till bilägare, kontakta fordonsägare, parkeringsskada, köp bil, skicka brev, registreringsnummer brev',
+  },
+  about: {
+    title: 'Om Bilhej — Skicka fysiska brev till fordonsägare online',
+    description:
+      'Bilhej gör det enkelt att nå en bilägare med ett fysiskt brev. Skriv meddelandet, vi sköter utskick och post. Anonymt eller med dina uppgifter.',
+    keywords: 'om bilhej, hur fungerar bilhej, skicka brev till bilägare',
+  },
+  contact: {
+    title: 'Kontakt — Bilhej support, klagomål och allmänna frågor',
+    description:
+      'Kontakta Bilhej via e-post. Support för beställningar och betalning, allmän kontakt och klagomål.',
+    keywords: 'bilhej kontakt, support bilhej, klagomål',
+  },
+  privacy: {
+    title: 'Integritetspolicy — Bilhej | Personuppgifter och GDPR',
+    description:
+      'Läs om hur Bilhej hanterar personuppgifter: vad vi samlar in, varför, hur länge och dina rättigheter enligt GDPR.',
+    keywords: 'integritetspolicy bilhej, gdpr, personuppgifter brev',
+  },
+  terms: {
+    title: 'Användarvillkor — Bilhej | Villkor för brevtjänsten',
+    description:
+      'Villkor för att använda Bilhej. Regler för brev till fordonsägare, betalning, ansvar och reklamation.',
+    keywords: 'användarvillkor bilhej, köpvillkor, brevtjänst villkor',
+  },
+  register: {
+    title: 'Registrera konto — Bilhej | Skapa konto för beställningar',
+    description:
+      'Skapa ett konto på Bilhej för att följa dina beställningar, se historik och hantera dina brev.',
+  },
+  login: {
+    title: 'Logga in — Bilhej | Dina brev till fordonsägare',
+    description:
+      'Logga in på Bilhej för att se dina beställningar, status och spårning.',
+  },
+  'forgot-password': {
+    title: 'Glömt lösenord — Bilhej | Återställ lösenord',
+    description:
+      'Återställ ditt lösenord på Bilhej. Få en återställningslänk via e-post.',
+  },
+  'guest-checkout': {
+    title: 'Gästbeställning — Bilhej | Skicka brev utan konto',
+    description:
+      'Skicka ett brev till en fordonsägare utan att skapa konto. Ange registreringsnummer, skriv meddelande, betala via Swish.',
+    keywords: 'gästbeställning bilhej, utan konto, snabb beställning',
+  },
+  compose: {
+    title: 'Skriv brev — Bilhej | Komponera meddelande till fordonsägare',
+    description:
+      'Skriv ditt brev till bilägaren. Välj mall för köp, komplimang, parkeringsskada eller tips, eller skriv fritt.',
+  },
+  orders: {
+    title: 'Mina beställningar — Bilhej | Följ dina brev',
+    description:
+      'Se dina tidigare och pågående beställningar. Följ status och spårning för brev du skickat.',
+  },
+  'change-password': {
+    title: 'Byt lösenord — Bilhej | Kontoinställningar',
+    description: 'Byt lösenord på ditt Bilhej-konto.',
+  },
+  'change-email': {
+    title: 'Byt e-postadress — Bilhej | Kontoinställningar',
+    description: 'Byt e-postadress på ditt Bilhej-konto.',
+  },
+  admin: {
+    title: 'Admin — Bilhej | Administrationspanel',
+    description:
+      'Administration av Bilhej — hantera beställningar och användare.',
+  },
+}