improve SEO meta tags on index and [slug] pages

janosh · Jul 12, 2022 · abb5152 · abb5152
1 parent 7b2b762
commit abb5152
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 19 deletions.
diff --git a/src/app.css b/src/app.css
@@ -3,7 +3,7 @@
 }
 body {
   background: var(--page-bg);
-  padding: 4em;
+  padding: 2vw 6vw;
   font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
   margin: auto;
   color: #eee;

diff --git a/src/app.html b/src/app.html
@@ -1,15 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>Periodic Table</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
     <meta name="author" content="Janosh Riebesell" />
+    <meta name="description" content="Interactive periodic table of elements" />
+
+    <meta name="og:card" content="summary" />
+    <meta name="og:site" content="@@jrib_" />
+    <meta name="og:creator" content="@jrib_" />
     <meta
-      name="description"
-      content="Periodic table of elements written in Svelte"
+      property="og:image"
+      content="https://github.com/raw/janosh/periodic-table/main/static/2022-06-01-screenshot.png"
     />
-
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <meta property="og:image:alt" content="Interactive Periodic Table" />
 
     <link rel="icon" href="/favicon.svg" />
     <link rel="stylesheet" href="/prism-vsc-dark-plus.css" />
@@ -18,15 +22,6 @@
   </head>
 
   <body>
-    <svg style="display: none">
-      <!-- https://primer.style/octicons/link-16 -->
-      <symbol id="octicon-link" fill="currentColor">
-        <path
-          d="M7.775 3.275a.75.75 0 0 0 1.06 1.06l1.25-1.25a2 2 0 1 1 2.83 2.83l-2.5 2.5a2 2 0 0 1-2.83 0 .75.75 0 0 0-1.06 1.06 3.5 3.5 0 0 0 4.95 0l2.5-2.5a3.5 3.5 0 0 0-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 0 1 0-2.83l2.5-2.5a2 2 0 0 1 2.83 0 .75.75 0 0 0 1.06-1.06 3.5 3.5 0 0 0-4.95 0l-2.5 2.5a3.5 3.5 0 0 0 4.95 4.95l1.25-1.25a.75.75 0 0 0-1.06-1.06l-1.25 1.25a2 2 0 0 1-2.83 0z"
-        />
-      </symbol>
-    </svg>
-
     <div>%sveltekit.body%</div>
   </body>
 </html>
diff --git a/src/routes/[slug].svelte b/src/routes/[slug].svelte
@@ -20,18 +20,29 @@
 
   // set atomic radius as initial heatmap
   const initial_heatmap = Object.keys(heatmap_labels)[1] as keyof ChemicalElement
+
+  $: head_title = `${element.name} | Periodic Table`
 </script>
 
+<svelte:head>
+  <title>{head_title}</title>
+  <meta property="og:title" content={head_title} />
+</svelte:head>
+
 <h1>{element.name}</h1>
 <h2>{element.category}</h2>
 
 <PropertySelect selected={[initial_heatmap]} />
 
-<main>
+<section>
   <ElementPhoto style="border-radius: 4pt;" />
 
   <ScatterPlot />
-</main>
+</section>
+
+{#if element.summary}
+  <p class="description">{@html element.summary}</p>
+{/if}
 
 <div class="properties">
   {#each key_vals as [label, value]}
@@ -52,12 +63,18 @@
     font-weight: lighter;
     opacity: 0.7;
   }
-  main {
+  section {
     margin: 2em 0;
     display: grid;
     gap: 2em;
     grid-template-columns: 1fr 2fr;
   }
+  p.description {
+    text-align: center;
+    opacity: 0.9;
+    margin: 3em auto;
+    max-width: 50em;
+  }
   div.properties {
     display: grid;
     grid-gap: 3em;

diff --git a/src/routes/index.svelte b/src/routes/index.svelte
@@ -12,6 +12,11 @@
   let auto_rotate: 'x' | 'y' | 'both' | 'none' = `none`
 </script>
 
+<svelte:head>
+  <title>Periodic Table</title>
+  <meta property="og:title" content="Periodic Table" />
+</svelte:head>
+
 <svelte:window bind:innerWidth={windowWidth} />
 
 <h1>Periodic Table of Elements</h1>