feat: basic seo

ricardocasares · Nov 1, 2020 · adbfd89 · adbfd89
1 parent 429c5fd
commit adbfd89
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "debounce": "^1.2.0",
     "gqless": "^1.0.0-alpha.31",
     "next": "^10.0.0",
+    "next-seo": "^4.15.0",
     "next-themes": "^0.0.8",
     "random-gradient": "^0.0.2",
     "react": "^17.0.0",

diff --git a/src/config/seo.ts b/src/config/seo.ts
@@ -0,0 +1,15 @@
+export default {
+  title: "Radio Bemba",
+  description: "All the radios you love",
+  openGraph: {
+    type: "website",
+    locale: "en",
+    url: "https://bemba.app/",
+    site_name: "Radio Bemba",
+  },
+  twitter: {
+    handle: "@AppBemba",
+    site: "@AppBemba",
+    cardType: "summary_large_image",
+  },
+};
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,23 +1,22 @@
 import { AppProps } from "next/app";
+import { DefaultSeo } from "next-seo";
 import { Global } from "@emotion/core";
 import { Providers } from "@/lib/providers";
-import { styles } from "@/css/global";
 import { Layout } from "@/components/Layout";
 import { Header } from "@/components/Header";
 import { Scrollable } from "@/components/Scrollable";
 import { Player } from "@/components/Player";
-import Head from "next/head";
+import { styles } from "@/css/global";
+import SEO from "@/config/seo";
 
-export function App({ Component, pageProps }: AppProps) {
+export function BembaApp({ Component, pageProps }: AppProps) {
   return (
     <Providers>
       <Global styles={styles} />
-      <Head>
-        <title>Radio Bemba</title>
-      </Head>
       <Layout>
         <Header />
         <Scrollable>
+          <DefaultSeo {...SEO} />
           <Component {...pageProps} />
         </Scrollable>
         <Player />
@@ -26,4 +25,4 @@ export function App({ Component, pageProps }: AppProps) {
   );
 }
 
-export default App;
+export default BembaApp;
diff --git a/src/pages/favorites.tsx b/src/pages/favorites.tsx
@@ -1,3 +1,4 @@
+import { NextSeo } from "next-seo";
 import { Box } from "@/components/Box";
 import { Heading } from "@/components/Typography";
 import { StationCardFavs } from "@/components/StationCardList";
@@ -10,6 +11,7 @@ export const Search = () => {
 
   return (
     <Box p={["var(--sz3)"]}>
+      <NextSeo description="Your favorite radios around the world" />
       <Heading as="h3">{t.favorites.title}</Heading>
       <StationCardFavs uuids={favs} />
     </Box>

diff --git a/src/pages/search.tsx b/src/pages/search.tsx
@@ -1,3 +1,4 @@
+import { NextSeo } from "next-seo";
 import debounce from "debounce";
 import {
   useState,
@@ -7,7 +8,6 @@ import {
   KeyboardEventHandler,
 } from "react";
 import { Box } from "@/components/Box";
-import { Heading } from "@/components/Typography";
 import { SearchInput } from "@/components/SearchInput";
 import { StationCardList } from "@/components/StationCardList";
 import { useTranslation } from "@/lib/hooks/useTranslation";
@@ -32,6 +32,7 @@ export const Search = () => {
 
   return (
     <Box p={["var(--sz3)"]}>
+      <NextSeo description="Search radios around the world" />
       <SearchInput
         ref={input}
         type="search"

diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx
@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { NextSeo } from "next-seo";
 import { useTheme } from "next-themes";
 import { Box } from "@/components/Box";
 import { Stack } from "@/components/Stack";
@@ -16,8 +17,9 @@ export const Settings = () => {
 
   return (
     <Box p={["var(--sz3)"]}>
-      <Heading as="h3">{t.settings.title}</Heading>
+      <NextSeo description="Customize your experience" />
 
+      <Heading as="h3">{t.settings.title}</Heading>
       <Heading as="h4" muted>
         {t.settings.color}
       </Heading>

diff --git a/yarn.lock b/yarn.lock
@@ -5187,6 +5187,11 @@ neo-async@^2.5.0, neo-async@^2.6.1, neo-async@^2.6.2:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
+next-seo@^4.15.0:
+  version "4.15.0"
+  resolved "https://registry.yarnpkg.com/next-seo/-/next-seo-4.15.0.tgz#f8dae6d53d45f3d082fb478920088b8e11e75d19"
+  integrity sha512-EOOGOMfN4xeCEM19HxbqQCRhPUNkbhHX6d/f1GyBY/CayyBLmbUCuLBD+QX4PpQb7zj0tShlwm/u6sbrW7o7jw==
+
 next-themes@^0.0.8:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.0.8.tgz#2a1748317085afbc2509e2c32bd04af4f0f6cb7d"