olemd/forskjeller.naiv.no
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Legg til OpenGraph og Twitter Card meta-tags på alle sider

Browse source 
Gir fine forhåndsvisninger ved deling av lenker til forskjeller.naiv.no.
Foreløpig uten og:image.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ole-Morten Duesund 2026-03-13 13:58:21 +01:00
commit d3d1103495
6 changed files with 39 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

4
CLAUDE.md
View file

@ -29,6 +29,10 @@ Each calculator directory contains two files following the same pattern:
**External dependencies** (loaded via CDN, no install needed): Chart.js 4.4.1, Google Fonts (Fraunces + DM Sans). **External dependencies** (loaded via CDN, no install needed): Chart.js 4.4.1, Google Fonts (Fraunces + DM Sans).
### OpenGraph
All pages must include OG meta tags (`og:type`, `og:locale`, `og:site_name`, `og:title`, `og:description`, `og:url`) and `twitter:card`. No `og:image` for now. Base URL: `https://forskjeller.naiv.no/`.
### Key Design Decisions ### Key Design Decisions
- Color palette: Blue (#1a4a8a) = A, Red (#c0392b) = B, Purple (#4a3a8a) = gap - Color palette: Blue (#1a4a8a) = A, Red (#c0392b) = B, Purple (#4a3a8a) = gap

7
public/arv/index.html
View file

@ -4,6 +4,13 @@
<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>Arvens forsprang — interaktiv kalkulator</title> <title>Arvens forsprang — interaktiv kalkulator</title>
<meta property="og:type" content="website">
<meta property="og:locale" content="nb_NO">
<meta property="og:site_name" content="Forskjeller">
<meta property="og:title" content="Arvens forsprang">
<meta property="og:description" content="Lik innsats, ulikt utgangspunkt — arvet formue vokser eksponentielt.">
<meta property="og:url" content="https://forskjeller.naiv.no/arv/">
<meta name="twitter:card" content="summary">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;1,9..144,300&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;1,9..144,300&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../style.css"> <link rel="stylesheet" href="../style.css">

7
public/bolig/index.html
View file

@ -4,6 +4,13 @@
<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>Boligforskjellen vokser — interaktiv kalkulator</title> <title>Boligforskjellen vokser — interaktiv kalkulator</title>
<meta property="og:type" content="website">
<meta property="og:locale" content="nb_NO">
<meta property="og:site_name" content="Forskjeller">
<meta property="og:title" content="Boligforskjellen forsterkes">
<meta property="og:description" content="Lik prisvekst, men belåningen forsterker gapet i egenkapital dramatisk.">
<meta property="og:url" content="https://forskjeller.naiv.no/bolig/">
<meta name="twitter:card" content="summary">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;1,9..144,300&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;1,9..144,300&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../style.css"> <link rel="stylesheet" href="../style.css">

7
public/index.html
View file

@ -4,6 +4,13 @@
<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>Forskjeller — interaktive visualiseringer</title> <title>Forskjeller — interaktive visualiseringer</title>
<meta property="og:type" content="website">
<meta property="og:locale" content="nb_NO">
<meta property="og:site_name" content="Forskjeller">
<meta property="og:title" content="Forskjeller">
<meta property="og:description" content="Interaktive visualiseringer som viser hvordan små forskjeller vokser over tid.">
<meta property="og:url" content="https://forskjeller.naiv.no/">
<meta name="twitter:card" content="summary">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;1,9..144,300&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;1,9..144,300&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
<style> <style>

7
public/lonn/index.html
View file

@ -4,6 +4,13 @@
<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>Lønnsforskjellen vokser — interaktiv kalkulator</title> <title>Lønnsforskjellen vokser — interaktiv kalkulator</title>
<meta property="og:type" content="website">
<meta property="og:locale" content="nb_NO">
<meta property="og:site_name" content="Forskjeller">
<meta property="og:title" content="Lønnsforskjellen vokser">
<meta property="og:description" content="Prosentvise lønnstillegg ser rettferdige ut — men gjør de rike rikere.">
<meta property="og:url" content="https://forskjeller.naiv.no/lonn/">
<meta name="twitter:card" content="summary">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;1,9..144,300&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;1,9..144,300&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../style.css"> <link rel="stylesheet" href="../style.css">

7
public/sparing/index.html
View file

@ -4,6 +4,13 @@
<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>Rentes rente — interaktiv kalkulator</title> <title>Rentes rente — interaktiv kalkulator</title>
<meta property="og:type" content="website">
<meta property="og:locale" content="nb_NO">
<meta property="og:site_name" content="Forskjeller">
<meta property="og:title" content="Rentes rente forsterker">
<meta property="og:description" content="Noen få prosentpoeng i avkastning skaper enorme forskjeller over tid.">
<meta property="og:url" content="https://forskjeller.naiv.no/sparing/">
<meta name="twitter:card" content="summary">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;1,9..144,300&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;1,9..144,300&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../style.css"> <link rel="stylesheet" href="../style.css">