feat(seo): add a share image and source credits

README.md

@@ -90,6 +90,20 @@ The product scope is [`docs/PRODUCT.md`](docs/PRODUCT.md). The upstream API reco
 
 ---
 
+## Credits
+
+<p align="center">
+  <img src="public/share/cover.jpg" width="360" alt="Ink drawing of a train at a station, by Péchane" />
+</p>
+
+The landmark drawings are from [SVG Repo](https://www.svgrepo.com/).
+
+Lines, stations, fares, platforms, and first and last trains come from the public site of the [Delhi Metro Rail Corporation](https://delhimetrorail.com/). DETRO is not an official DMRC app.
+
+The cover image is a work by [Péchane](https://www.artmajeur.com/pechane).
+
+---
+
 <br>
 
 <div align="center">

index.html

@@ -12,6 +12,7 @@
     <meta name="robots" content="index, follow" />
     <meta name="application-name" content="DETRO" />
     <meta name="apple-mobile-web-app-title" content="DETRO" />
+    <link rel="canonical" href="https://detro.pages.dev/" />
     <meta property="og:title" content="DETRO — Delhi Metro Simple" />
     <meta
       property="og:description"
@@ -20,12 +21,21 @@
     <meta property="og:type" content="website" />
     <meta property="og:locale" content="en_IN" />
     <meta property="og:site_name" content="DETRO" />
-    <meta name="twitter:card" content="summary" />
+    <meta property="og:url" content="https://detro.pages.dev/" />
+    <meta property="og:image" content="https://detro.pages.dev/share/cover.jpg" />
+    <meta property="og:image:secure_url" content="https://detro.pages.dev/share/cover.jpg" />
+    <meta property="og:image:type" content="image/jpeg" />
+    <meta property="og:image:width" content="1440" />
+    <meta property="og:image:height" content="1939" />
+    <meta property="og:image:alt" content="Ink drawing of a train at a small station, by Péchane" />
+    <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content="DETRO — Delhi Metro Simple" />
     <meta
       name="twitter:description"
       content="DETRO plans a Delhi Metro trip. Pick two stations and see the train, where to change, and the fare. Free, ad-free, and independent of DMRC."
     />
+    <meta name="twitter:image" content="https://detro.pages.dev/share/cover.jpg" />
+    <meta name="twitter:image:alt" content="Ink drawing of a train at a small station, by Péchane" />
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
     <link rel="manifest" href="/manifest.webmanifest" />
     <script type="application/ld+json">
@@ -38,6 +48,8 @@
         "operatingSystem": "Web",
         "inLanguage": "en",
         "isAccessibleForFree": true,
+        "url": "https://detro.pages.dev/",
+        "image": "https://detro.pages.dev/share/cover.jpg",
         "description": "DETRO plans a Delhi Metro trip. Pick two stations and see the train, where to change, and the fare. Free, ad-free, and independent of DMRC.",
         "offers": {
           "@type": "Offer",

public/robots.txt

@@ -1,2 +1,4 @@
 User-agent: *
 Allow: /
+
+Sitemap: https://detro.pages.dev/sitemap.xml

public/sitemap.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://detro.pages.dev/</loc>
+  </url>
+  <url>
+    <loc>https://detro.pages.dev/map</loc>
+  </url>
+  <url>
+    <loc>https://detro.pages.dev/city</loc>
+  </url>
+  <url>
+    <loc>https://detro.pages.dev/help</loc>
+  </url>
+</urlset>

src/App.tsx

@@ -91,11 +91,16 @@ export function App() {
     const page = pageMeta(tab)
     document.title = page.title
     setMeta("description", page.description)
+    const canonical = `${window.location.origin}${pathForTab(tab)}`
+    const cover = `${window.location.origin}/share/cover.jpg`
     setMeta("og:title", page.title, true)
     setMeta("og:description", page.description, true)
+    setMeta("og:url", canonical, true)
+    setMeta("og:image", cover, true)
+    setMeta("twitter:card", "summary_large_image")
     setMeta("twitter:title", page.title)
     setMeta("twitter:description", page.description)
-    const canonical = `${window.location.origin}${pathForTab(tab)}`
+    setMeta("twitter:image", cover)
     let link = document.querySelector<HTMLLinkElement>('link[rel="canonical"]')
     if (!link) {
       link = document.createElement("link")