From 720914eee926672a2daa35f1ce57d7be826759d8 Mon Sep 17 00:00:00 2001
From: Adeeb Shihadeh <adeebshihadeh@gmail.com>
Date: Wed, 17 Jun 2026 09:45:23 -0700
Subject: [PATCH] set titles for socials

---
 src/app.html                                     |  5 -----
 src/lib/components/PageHead.svelte               | 15 +++++++++++++++
 src/routes/+layout.svelte                        | 11 +++++++++++
 src/routes/jobs/+page.js                         |  7 +++++++
 src/routes/jobs/+page.svelte                     |  8 --------
 src/routes/shop/[product]/+page.js               |  3 ++-
 src/routes/shop/[product]/+page.svelte           |  4 ----
 src/routes/shop/comma-four-trade-in/+page.js     |  5 +++++
 src/routes/shop/comma-four-trade-in/+page.svelte |  4 ----
 9 files changed, 40 insertions(+), 22 deletions(-)
 create mode 100644 src/lib/components/PageHead.svelte
 create mode 100644 src/routes/jobs/+page.js
 create mode 100644 src/routes/shop/comma-four-trade-in/+page.js

diff --git a/src/app.html b/src/app.html
index 7902ce85..21bfe795 100644
--- a/src/app.html
+++ b/src/app.html
@@ -48,8 +48,6 @@
     <script src="//code.tidio.co/9o9hpvuj5fqc7gu1vhialdrpp7buweu2.js" async></script>
     -->
 
-    <title>comma.ai — make driving chill</title>
-
     <!-- Google SEO -->
     <script type="application/ld+json">
     {
@@ -67,8 +65,6 @@
 
     <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website" />
-    <meta property="og:url" content="https://comma.ai/" />
-    <meta property="og:title" content="comma.ai — make driving chill" />
     <meta property="og:description" content="An AI upgrade for your car" />
     <meta property="og:image" content="https://comma.ai/og-comma-four.png" />
     <meta property="og:image:width" content="1200" />
@@ -77,7 +73,6 @@
     <!-- Twitter -->
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:site" content="@comma_ai" />
-    <meta name="twitter:title" content="comma.ai — make driving chill" />
     <meta name="twitter:description" content="An AI upgrade for your car" />
     <meta name="twitter:image" content="https://comma.ai/og-comma-four.png" />
     <meta name="twitter:image:alt" content="comma four" />
diff --git a/src/lib/components/PageHead.svelte b/src/lib/components/PageHead.svelte
new file mode 100644
index 00000000..bf3a2bbf
--- /dev/null
+++ b/src/lib/components/PageHead.svelte
@@ -0,0 +1,15 @@
+<script>
+  export let title;
+  export let description = undefined;
+</script>
+
+<svelte:head>
+  <title>{title}</title>
+  <meta property="og:title" content={title} />
+  <meta name="twitter:title" content={title} />
+  {#if description}
+    <meta name="description" content={description} />
+    <meta property="og:description" content={description} />
+    <meta name="twitter:description" content={description} />
+  {/if}
+</svelte:head>
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 3ea9258e..7a405e3f 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -35,6 +35,11 @@
   import { onMount } from "svelte";
   import { page } from "$app/stores";
 
+  import PageHead from "$lib/components/PageHead.svelte";
+
+  const DEFAULT_TITLE = "comma.ai — make driving chill";
+  const SITE_ORIGIN = "https://comma.ai";
+
   let loading = false;
 
   async function openCart() {
@@ -83,7 +88,13 @@
   printConsoleBanner();
 </script>
 
+<PageHead
+  title={$page.data?.pageTitle ?? DEFAULT_TITLE}
+  description={$page.data?.pageDescription}
+/>
+
 <svelte:head>
+  <meta property="og:url" content="{SITE_ORIGIN}{$page.url.pathname}" />
   <link
     rel="preload"
     href={MonumentExtendedBlack}
diff --git a/src/routes/jobs/+page.js b/src/routes/jobs/+page.js
new file mode 100644
index 00000000..b177f9b6
--- /dev/null
+++ b/src/routes/jobs/+page.js
@@ -0,0 +1,7 @@
+export function load() {
+  return {
+    pageTitle: "Jobs - comma",
+    pageDescription:
+      "At comma.ai, we are solving self-driving cars while delivering shippable intermediaries.",
+  };
+}
\ No newline at end of file
diff --git a/src/routes/jobs/+page.svelte b/src/routes/jobs/+page.svelte
index 0677b4d4..3afc27be 100644
--- a/src/routes/jobs/+page.svelte
+++ b/src/routes/jobs/+page.svelte
@@ -332,14 +332,6 @@
   }
 </script>
 
-<svelte:head>
-  <title>Jobs - comma</title>
-  <meta
-    name="description"
-    content="At comma.ai, we are solving self-driving cars while delivering shippable intermediaries."
-  />
-</svelte:head>
-
 <div class="jobs-page light">
   <section class="jobs-hero" aria-labelledby="jobs-title">
     <div class="container">
diff --git a/src/routes/shop/[product]/+page.js b/src/routes/shop/[product]/+page.js
index 5e74c9c0..21f7f282 100644
--- a/src/routes/shop/[product]/+page.js
+++ b/src/routes/shop/[product]/+page.js
@@ -50,7 +50,8 @@ export async function load({ url, params }) {
           ...productInfo,
           images: resolvedImages
         },
-        descriptionComponent
+        descriptionComponent,
+        pageTitle: `${product.title} — comma shop`,
       };
     }
     throw error(404, {
diff --git a/src/routes/shop/[product]/+page.svelte b/src/routes/shop/[product]/+page.svelte
index d27ee91e..0a4198e4 100644
--- a/src/routes/shop/[product]/+page.svelte
+++ b/src/routes/shop/[product]/+page.svelte
@@ -6,10 +6,6 @@
   $: ({ product, descriptionComponent } = data);
 </script>
 
-<svelte:head>
-  <title>{product.title} — comma shop</title>
-</svelte:head>
-
 <section class="light" id="product-item">
   <div class="container">
     {#if descriptionComponent}
diff --git a/src/routes/shop/comma-four-trade-in/+page.js b/src/routes/shop/comma-four-trade-in/+page.js
new file mode 100644
index 00000000..fb1518ce
--- /dev/null
+++ b/src/routes/shop/comma-four-trade-in/+page.js
@@ -0,0 +1,5 @@
+export function load() {
+  return {
+    pageTitle: "comma four trade-in — comma shop",
+  };
+}
\ No newline at end of file
diff --git a/src/routes/shop/comma-four-trade-in/+page.svelte b/src/routes/shop/comma-four-trade-in/+page.svelte
index afb00675..ae83c445 100644
--- a/src/routes/shop/comma-four-trade-in/+page.svelte
+++ b/src/routes/shop/comma-four-trade-in/+page.svelte
@@ -1,10 +1,6 @@
 <script>
 </script>
 
-<svelte:head>
-  <title>comma four trade-in — comma shop</title>
-</svelte:head>
-
 <section class="light" id="trade-in">
   <div class="container">
     <h1>comma four trade-in</h1>