feat: seo (#29)

* feat: seo * feat: seo -> shorter description * feat: next-sitemap * fix: knip, sitemap config, gitignore * fix: delete public/sitemap.xml * fix: delete public/sitemap-0.xml
Solvro · Sep 4, 2024 · 4c815d8 · 4c815d8
1 parent b3d3c54
commit 4c815d8
Show file tree

Hide file tree

Showing 23 changed files with 405 additions and 131 deletions.
diff --git a/.gitignore b/.gitignore
@@ -35,3 +35,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# seo/public
+**/sitemap*.xml
diff --git a/knip.ts b/knip.ts
@@ -1,7 +1,7 @@
 import type { KnipConfig } from "knip";
 
 const config = {
-  ignore: ["src/components/ui/**"],
+  ignore: ["src/components/ui/**", "next-sitemap.config.js"],
   // sharp is used in nextjs image optimization
   ignoreDependencies: ["sharp", "@radix-ui/*"],
 } satisfies KnipConfig;

diff --git a/next-sitemap.config.js b/next-sitemap.config.js
@@ -0,0 +1,4 @@
+module.exports = {
+  siteUrl: "https://planer.solvro.pl",
+  generateRobotsTxt: true,
+};
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
+    "postbuild": "next-sitemap",
     "start": "next start",
     "lint": "next lint",
     "lint:fix": "next lint --fix",
@@ -29,6 +30,7 @@
     "jotai": "^2.9.3",
     "lucide-react": "^0.426.0",
     "next": "14.2.3",
+    "next-sitemap": "^4.2.3",
     "oauth-1.0a": "^2.2.6",
     "react": "^18",
     "react-dom": "^18",

diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/browserconfig.xml b/public/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/mstile-150x150.png b/public/mstile-150x150.png
diff --git a/public/og_image.png b/public/og_image.png
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,9 @@
+# *
+User-agent: *
+Allow: /
+
+# Host
+Host: https://planer.solvro.pl
+
+# Sitemaps
+Sitemap: https://planer.solvro.pl/sitemap.xml
diff --git a/public/safari-pinned-tab.svg b/public/safari-pinned-tab.svg
diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -0,0 +1,19 @@
+{
+  "name": "Planer",
+  "short_name": "Planer",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
diff --git a/src/components/SEO.tsx b/src/components/SEO.tsx
@@ -0,0 +1,68 @@
+import Head from "next/head";
+import React from "react";
+
+export const Seo = ({
+  pageTitle,
+  pageDescription,
+  pageImage,
+  pageUrl,
+}: {
+  pageTitle?: string;
+  pageDescription?: string;
+  pageImage?: string;
+  pageUrl?: string;
+}) => (
+  <Head>
+    <title>
+      {typeof pageTitle === "string"
+        ? `${pageTitle}`
+        : `Planer - utwórz swój plan zajęć na PWR!`}
+    </title>
+    <meta httpEquiv="x-ua-compatible" content="ie=edge" />
+    <meta
+      name="description"
+      content={
+        pageDescription ??
+        "Planer to strona stworzona z myślą o studentach PWR, którzy pragną w prosty i intuicyjny sposób zarządzać swoimi zapisami na kursy (za darmo!)."
+      }
+    />
+    <meta name="robots" content="index, follow" />
+    <meta
+      name="keywords"
+      content="planer, zapisy, zapisynapwr, zapisownik, usos, nauka, Solvro, pwr, wrocław, politechnika"
+    />
+
+    <meta
+      property="og:title"
+      content={pageTitle ?? "Planer - utwórz swój plan zajęć na PWR!"}
+    />
+    <meta
+      property="og:description"
+      content={
+        pageDescription ??
+        "Planer to strona stworzona z myślą o studentach PWR, którzy pragną w prosty i intuicyjny sposób zarządzać swoimi zapisami na kursy (za darmo!)."
+      }
+    />
+    <meta property="og:image" content={pageImage ?? "/og_image.png"} />
+    <meta property="og:url" content={pageUrl ?? "https://planer.solvro.pl/"} />
+    <meta property="og:type" content="website" />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta
+      name="twitter:title"
+      content="Planer - utwórz swój plan zajęć na PWR!"
+    />
+    <meta name="twitter:description" content="https://planer.solvro.pl/" />
+    <meta name="twitter:image" content="/og_image.png" />
+
+    <meta name="msapplication-TileColor" content="#da532c" />
+    <meta name="theme-color" content="#ffffff" />
+
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="manifest" href="/site.webmanifest" />
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
+    <link rel="canonical" href="https://planer.solvro.pl/" />
+  </Head>
+);
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,8 +1,10 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import type { AppProps } from "next/app";
 import { Space_Grotesk } from "next/font/google";
+import Head from "next/head";
 import Script from "next/script";
 
+import { Seo } from "@/components/SEO";
 import { cn } from "@/lib/utils";
 import "@/styles/globals.css";
 import type { UmamiTracker } from "@/types/umami";
@@ -20,6 +22,12 @@ declare global {
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <QueryClientProvider client={queryClient}>
+      <Head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <Seo />
       <Script
         defer={true}
         src="https://analytics.solvro.pl/script.js"