Add SEO (#19)

ailabtelkom · Oct 7, 2020 · 41e1744 · 41e1744
1 parent 7e38161
commit 41e1744
Show file tree

Hide file tree

Showing 12 changed files with 132 additions and 66 deletions.
diff --git a/data/siteConfig.js b/data/siteConfig.js
@@ -2,4 +2,5 @@ export default {
   title: "Artificial Intelligence Laboratory",
   desc:
     "AI Lab is a research laboratory under the Intelligence, Computing and Multimedia (ICM) research group. We stand in the Informatics Faculty at Telkom University.",
+  url: "https://ailabtelkom.github.io",
 };
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "next-compose-plugins": "^2.2.0",
     "next-mdx-remote": "^1.0.0",
     "next-optimized-images": "^2.6.2",
+    "next-seo": "^4.11.0",
     "nprogress": "^0.2.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

diff --git a/pages/_app.js b/pages/_app.js
@@ -9,20 +9,46 @@ import "nprogress/nprogress.css";
 import "../assets/css/style.css";
 import Navbar from "../components/Navbar";
 import siteConfig from "../data/siteConfig";
+import { DefaultSeo } from "next-seo";
 
 NProgress.configure({ showSpinner: false });
 Router.events.on("routeChangeStart", () => NProgress.start());
 Router.events.on("routeChangeComplete", () => NProgress.done());
 Router.events.on("routeChangeError", () => NProgress.done());
 
-function CustomApp({ Component, pageProps }) {
+function CustomApp({ Component, pageProps, router }) {
   const color = useColorModeValue("yellow", "red");
   return (
     <ChakraProvider resetCSS>
       <Head>
-        <title>{siteConfig.title}</title>
         <link rel="icon" href="/img/favicon.ico" />
       </Head>
+      <DefaultSeo
+        description={siteConfig.desc}
+        title="Welcome"
+        titleTemplate={`%s · ${siteConfig.title}`}
+        canonical={siteConfig.url + (router.asPath || "")}
+        openGraph={{
+          title: siteConfig.title,
+          description: siteConfig.desc,
+          type: "website",
+          site_name: siteConfig.title,
+          images: [
+            {
+              url: `${siteConfig.url}/img/og.jpg`,
+              width: 1024,
+              height: 512,
+              alt: siteConfig.title,
+            },
+            {
+              url: `${siteConfig.url}/img/og.png`,
+              width: 1024,
+              height: 512,
+              alt: siteConfig.title,
+            },
+          ],
+        }}
+      />
       <Stack minH="100vh" w="full" spacing={0}>
         <Navbar />
         <Box flexGrow={1} _selection={{ color }}>

diff --git a/pages/about.jsx b/pages/about.jsx
@@ -15,6 +15,7 @@ import Link from "../components/Link";
 import { FaGithub, FaInstagram, FaLinkedin } from "react-icons/fa";
 import activities from "../data/activities";
 import teams from "../data/aslab";
+import { NextSeo } from "next-seo";
 const about = () => {
   const MotionBox = motion.custom(Box);
   const bgColor = useColorModeValue("white", "gray.700");
@@ -38,6 +39,10 @@ const about = () => {
 
   return (
     <React.Fragment>
+      <NextSeo
+        title="About"
+        description="About Artificial Intelligence Laboratory Telkom University"
+      />
       <MotionBox
         initial="start"
         animate="end"

diff --git a/pages/playground/index.jsx b/pages/playground/index.jsx
@@ -9,6 +9,7 @@ import {
   Button,
 } from "@chakra-ui/core";
 import { motion } from "framer-motion";
+import { NextSeo } from "next-seo";
 import React from "react";
 import { FaArrowRight, FaBook } from "react-icons/fa";
 import playgrounds from "../../data/playground";
@@ -34,76 +35,84 @@ const index = () => {
   };
 
   return (
-    <MotionBox
-      exit={{ opacity: 0, transition: { duration: 0.1 } }}
-      initial="start"
-      animate="end"
-      exit="exit"
-      variants={containerVariant}
-      transition={{ delay: 0.1 }}
-      maxW={[null, null, "2xl", "5xl"]}
-      m="auto"
-      my="40px"
-      px={{ default: 6, md: 0 }}
-    >
-      <Stack pt={{ default: "1em", lg: "2em" }}>
-        <Heading fontSize={{ default: "2xl", lg: "3xl" }}>
-          Hey, are you curious about "What AI Looks like" IRL?
-        </Heading>
-        <Text mb="6">We have something for you to play with 😁</Text>
-        <Grid templateColumns={["repeat(1, 1fr)", "repeat(3, 1fr)"]} gap={6}>
-          {playgrounds.map((data, index) => {
-            return (
-              <MotionBox key={index} variants={itemVariant} borderWidth="1px">
-                <Link isExternal={data.isExternal} href={data.url}>
-                  <Image
-                    width="350px"
-                    height="200px"
-                    fit="cover"
-                    src={data.image}
-                    fallbackSrc={data.fallbackImg}
-                    alt={data.name}
-                  />
-                </Link>
-                <Box p={2}>
-                  <Link
-                    isExternal={data.isExternal}
-                    href={data.url}
-                    fontWeight="bold"
-                    fontSize={20}
-                    mt={2}
-                  >
-                    {data.name}
+    <React.Fragment>
+      <NextSeo
+        title="Playground"
+        description={`Hey, are you curious about "What AI Looks like" IRL?
+We have something for you to play with 😁`}
+      />
+
+      <MotionBox
+        exit={{ opacity: 0, transition: { duration: 0.1 } }}
+        initial="start"
+        animate="end"
+        exit="exit"
+        variants={containerVariant}
+        transition={{ delay: 0.1 }}
+        maxW={[null, null, "2xl", "5xl"]}
+        m="auto"
+        my="40px"
+        px={{ default: 6, md: 0 }}
+      >
+        <Stack pt={{ default: "1em", lg: "2em" }}>
+          <Heading fontSize={{ default: "2xl", lg: "3xl" }}>
+            Hey, are you curious about "What AI Looks like" IRL?
+          </Heading>
+          <Text mb="6">We have something for you to play with 😁</Text>
+          <Grid templateColumns={["repeat(1, 1fr)", "repeat(3, 1fr)"]} gap={6}>
+            {playgrounds.map((data, index) => {
+              return (
+                <MotionBox key={index} variants={itemVariant} borderWidth="1px">
+                  <Link isExternal={data.isExternal} href={data.url}>
+                    <Image
+                      width="350px"
+                      height="200px"
+                      fit="cover"
+                      src={data.image}
+                      fallbackSrc={data.fallbackImg}
+                      alt={data.name}
+                    />
                   </Link>
-                  <Text>{data.desc}</Text>
-                  <Stack mt={4} direction="row">
-                    <Button
-                      as={Link}
+                  <Box p={2}>
+                    <Link
+                      isExternal={data.isExternal}
                       href={data.url}
-                      colorScheme="yellow"
-                      size="sm"
-                      leftIcon={<FaArrowRight />}
+                      fontWeight="bold"
+                      fontSize={20}
+                      mt={2}
                     >
-                      Visit
-                    </Button>
-                    {data.detail && (
+                      {data.name}
+                    </Link>
+                    <Text>{data.desc}</Text>
+                    <Stack mt={4} direction="row">
                       <Button
                         as={Link}
-                        href={data.detail}
+                        href={data.url}
+                        colorScheme="yellow"
                         size="sm"
-                        leftIcon={<FaBook />}
+                        leftIcon={<FaArrowRight />}
                       >
-                        Details
+                        Visit
                       </Button>
-                    )}
-                  </Stack>
-                </Box>
-              </MotionBox>
-            );
-          })}
-        </Grid>
-      </Stack>
-    </MotionBox>
+                      {data.detail && (
+                        <Button
+                          as={Link}
+                          href={data.detail}
+                          size="sm"
+                          leftIcon={<FaBook />}
+                        >
+                          Details
+                        </Button>
+                      )}
+                    </Stack>
+                  </Box>
+                </MotionBox>
+              );
+            })}
+          </Grid>
+        </Stack>
+      </MotionBox>
+    </React.Fragment>
   );
 };
 

diff --git a/pages/playground/posenet.jsx b/pages/playground/posenet.jsx
@@ -1,8 +1,13 @@
+import { NextSeo } from "next-seo";
 import React from "react";
 
 const posenet = () => {
   return (
     <div>
+      <NextSeo
+        title="Posenet"
+        description={`PoseNet is a vision model that can be used to estimate the pose of a person in an image or video by estimating where key body joints are.`}
+      />
       <iframe
         className="full"
         src="https://storage.googleapis.com/tfjs-models/demos/posenet/camera.html"
@@ -16,7 +21,7 @@ const posenet = () => {
           height: 90vh;
         }
         @media screen and (max-width: 800px) {
-          .full{
+          .full {
             width: 100vw;
           }
         }

diff --git a/pages/research.jsx b/pages/research.jsx
@@ -3,6 +3,7 @@ import { motion } from "framer-motion";
 import { Box, Heading, Text } from "@chakra-ui/core";
 import Link from "../components/Link";
 import data from "../data/research";
+import { NextSeo } from "next-seo";
 const research = () => {
   const MotionBox = motion.custom(Box);
   const containerVariant = {
@@ -28,8 +29,9 @@ const research = () => {
       py="50px"
     >
       <Box px={{ default: 6, md: 0 }}>
+        <NextSeo title="Research" description="Past resesearch by our member" />
         <Heading mt="2" fontSize={{ default: "2xl", lg: "3xl" }}>
-          Reasearch
+          Research
         </Heading>
         <Text>Past resesearch by our member</Text>
         <Box overflow="auto" mt="6">

diff --git a/pages/resources/image.jsx b/pages/resources/image.jsx
@@ -4,6 +4,7 @@ import { getCvData } from "../../utils/resourceHooks";
 import Markdown from "react-markdown";
 import { contentRenderer } from "../../utils/renderer";
 import { FaGithub } from "react-icons/fa";
+import { NextSeo } from "next-seo";
 const cv = () => {
   const { data, isLoading } = getCvData();
   const { colorMode } = useColorMode();
@@ -15,6 +16,10 @@ const cv = () => {
       m="auto"
       px={{ default: 6, md: 0 }}
     >
+      <NextSeo
+        title="CV Resources"
+        description="Data resources Computer Vision. This was made for student, researcher, who else that was doing a research or anything about Image Processing and Computer Vision."
+      />
       {isLoading ? (
         <Spinner />
       ) : (

diff --git a/pages/resources/index.jsx b/pages/resources/index.jsx
@@ -2,13 +2,15 @@ import { useEffect } from "react";
 import { useRouter } from "next/router";
 import Link from "../../components/Link";
 import { Code, Box } from "@chakra-ui/core";
+import { NextSeo } from "next-seo";
 const index = () => {
   const router = useRouter();
   useEffect(() => {
     router.push("/resources/nlp");
   }, []);
   return (
     <Box pt="80px" px={{ default: 6, md: 0 }}>
+      <NextSeo title="Resources" />
       <Link href="/resources/nlp" route>
         Redirecting to <Code>/resources/nlp</Code>
       </Link>

diff --git a/pages/resources/nlp.jsx b/pages/resources/nlp.jsx
@@ -4,6 +4,7 @@ import { getNlpData } from "../../utils/resourceHooks";
 import Markdown from "react-markdown";
 import { contentRenderer } from "../../utils/renderer";
 import { FaGithub } from "react-icons/fa";
+import { NextSeo } from "next-seo";
 const nlp = () => {
   const { data, isLoading } = getNlpData();
   const { colorMode } = useColorMode();
@@ -15,6 +16,10 @@ const nlp = () => {
       m="auto"
       px={{ default: 6, md: 0 }}
     >
+      <NextSeo
+        title="Bahasa Indonesia NLP Resources"
+        description="Kumpulan resource untuk Pemrosesan bahasa alami Bahasa Indonesia. Repository ini dibuat untuk membantu Researcher/Mahasiswa yang sedang membuat tugas akhir atau penelitian tentang pemrosesan bahasa alami yang menggunakan Bahasa Indonesia."
+      />
       {isLoading ? (
         <Spinner />
       ) : (

diff --git a/public/img/og.jpg b/public/img/og.jpg
diff --git a/yarn.lock b/yarn.lock
@@ -6457,6 +6457,11 @@ next-optimized-images@^2.6.2:
     raw-loader "^2.0.0"
     url-loader "^1.1.2"
 
+next-seo@^4.11.0:
+  version "4.11.0"
+  resolved "https://registry.yarnpkg.com/next-seo/-/next-seo-4.11.0.tgz#b4f160414b49e6e3dc7791df25e29b50550ebb67"
+  integrity sha512-JrrGA+wD20ArI5jTqbLE2jipmA5VCCcjBlb1ZI2lKktd7lCXNs/IIvwkNfJPPK0vFp/ewwylA6kO5CyX2fflig==
+
 next-tick@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"