feat: seo

1. Added meta tags to head 2. Updated titles, descriptions 3. Added image and icon
Beraliv · Dec 27, 2024 · 442b902 · 442b902
1 parent 52bbeed
commit 442b902
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # ts-conversion
 
-Interactive website, helping understand, how to convert one type to another in TypeScript, with code examples, links to TypeScript playground and applications from popular libraries
+Interactive TypeScript tool: learn how to convert types effectively with hands-on examples, TypeScript Playground, and references to widely used libraries.
 
 Try it now: https://ts-conversion.beraliv.com
 
@@ -32,4 +32,4 @@ npm run dev -- --host
   - [ ] Accessibility-friendly (_in progress_)
 - [x] Analytics
   - [x] Added [Plausible](https://plausible.io/ts-conversion.beraliv.com)
-- [ ] SEO-friendly (_in progress_)
+- [x] SEO-friendly
diff --git a/index.html b/index.html
@@ -2,8 +2,42 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>TS conversion</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="Interactive TypeScript tool: learn how to convert types effectively with hands-on examples, TypeScript Playground, and references to widely used libraries"
+    />
+    <link rel="icon" href="/icon.jpg" />
+    <meta name="image" content="/image.png" />
+    <meta name="keywords" content="TypeScript Conversion TS" />
+    <link rel="canonical" href="https://ts-conversion.beraliv.com/" />
+    <meta property="og:site_name" content="ts-conversion.beraliv.com" />
+    <meta
+      property="og:title"
+      content="Convert one type to another in TypeScript"
+    />
+    <meta
+      property="og:description"
+      content="Interactive TypeScript tool: learn how to convert types effectively with hands-on examples, TypeScript Playground, and references to widely used libraries"
+    />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://ts-conversion.beraliv.com/" />
+    <meta property="og:image" content="/image.png" />
+    <meta property="og:image:height" content="900" />
+    <meta property="og:image:width" content="1600" />
+    <meta name="twitter:creator" content="@beraliv" />
+    <meta name="twitter:site" content="@beraliv" />
+    <meta
+      name="twitter:title"
+      content="Convert one type to another in TypeScript"
+    />
+    <meta
+      name="twitter:description"
+      content="Interactive TypeScript tool: learn how to convert types effectively with hands-on examples, TypeScript Playground, and references to widely used libraries"
+    />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta property="twitter:image" content="/image.png" />
+    <title>TS Conversion</title>
     <script
       defer
       data-domain="ts-conversion.beraliv.com"

diff --git a/public/icon.jpg b/public/icon.jpg
diff --git a/public/image.png b/public/image.png
diff --git a/src/components/Intro.tsx b/src/components/Intro.tsx
@@ -7,9 +7,9 @@ export const Intro = () => (
       <sup className={styles.ProgressData}>beta</sup>
     </h2>
     <p>
-      Interactive website, helping engineers understand, how they can convert
-      one type to another in TypeScript, with examples and links to TypeScript
-      playground.
+      Interactive TypeScript tool: learn how to transform types effectively with
+      hands-on examples, TypeScript Playground, and references to widely used
+      libraries.
     </p>
   </div>
 );
diff --git a/vite.config.ts b/vite.config.ts
@@ -4,4 +4,5 @@ import react from "@vitejs/plugin-react-swc";
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  publicDir: "public",
 });