Merge pull request #159 from forbole/seo-improvements

feat: seo improvements in titles and loading times

src/api/posts/index.ts

@@ -64,12 +64,12 @@ export const getSinglePost = async (slug: string) => {
 };
 
 /** Get all post tags */
-export const getTags = async () => {
+export const getTags = async (limit = "15") => {
   try {
     return await api.tags.browse({
-      order: "count.posts DESC",
-      limit: "15",
       include: "count.posts",
+      limit,
+      order: "count.posts DESC",
     });
   } catch (err) {
     // eslint-disable-next-line no-console

src/components/Carousel/index.tsx

@@ -104,10 +104,12 @@ const Carousel = ({ personList }: CarouselProps) => {
         <Arrow
           className={["c-next", styles.arrowRight].join(" ")}
           direction={Direction.Right}
+          role="button"
         />
         <Arrow
           className={["c-prev", styles.arrowLeft].join(" ")}
           direction={Direction.Left}
+          role="button"
         />
       </Box>
     </BoxCSS>

src/components/Intro_panel/index.tsx

@@ -13,6 +13,7 @@ type Props = {
   imageAlt?: string;
   imageHref: StaticImageData | string;
   img_not_response?: boolean;
+  level?: number;
   title?: string;
 };
 
@@ -24,6 +25,7 @@ const IntroPanel = ({
   imageAlt,
   imageHref,
   img_not_response,
+  level,
   title,
 }: Props) => {
   const theme = useTheme();
@@ -66,6 +68,7 @@ const IntroPanel = ({
                 fontSize: "18px",
               },
             }}
+            variant={level ? (`h${level}` as "h1") : undefined}
           >
             {title}
           </Typography>
@@ -87,6 +90,7 @@ const IntroPanel = ({
               fontWeight: "400",
               color: "#2A1A6A",
             }}
+            variant={level ? (`h${level + 1}` as "h1") : undefined}
           >
             {desc}
           </Typography>

src/components/arrow/index.tsx

@@ -15,9 +15,10 @@ type Props = {
   className: string;
   sx?: SxProps<Theme>;
   direction?: Direction;
+  role?: string;
 };
 
-export default function Arraw({ className, sx, direction }: Props) {
+export default function Arraw({ className, sx, direction, role }: Props) {
   const theme = useTheme();
   const [rotate, setRotate] = useState(0);
 
@@ -42,6 +43,7 @@ export default function Arraw({ className, sx, direction }: Props) {
   return (
     <Box
       className={className}
+      role={role}
       sx={{
         "userSelect": "none",
         "display": "flex",

src/components/layout/index.tsx

@@ -22,6 +22,7 @@ type Props = {
   footer?: boolean;
   image?: string;
   keywords?: string[];
+  noIndex?: boolean;
   redBgFooter?: boolean;
   skipLocale?: boolean;
   title?: string;
@@ -37,6 +38,7 @@ const Layout = ({
   footer,
   image,
   keywords = [],
+  noIndex,
   redBgFooter,
   skipLocale,
   title = "Forbole",
@@ -99,6 +101,7 @@ const Layout = ({
         {!!(url === "https://staging.forbole.com") && (
           <meta content="noindex" name="googlebot" />
         )}
+        {!!noIndex && <meta content="noindex" name="robots" />}
         <meta content={description || t("description")} name="description" />
         <meta content={formattedKeyworks.join(", ")} name="keywords" />
         <meta

src/components/section/index.tsx

@@ -26,9 +26,15 @@ const Section = ({
   title_large_trans,
 }: Props) => (
   <Stack className={styles.wrapper} {...(maxWidth && { style: { maxWidth } })}>
-    {title && <Typography className={styles.title}>{title}</Typography>}
+    {title && (
+      <Typography className={styles.title} variant="h2">
+        {title}
+      </Typography>
+    )}
     {title_large && (
-      <Typography className={styles.titleLarge}>{title_large}</Typography>
+      <Typography className={styles.titleLarge} variant="h2">
+        {title_large}
+      </Typography>
     )}
 
     {title_large_trans && (
@@ -41,7 +47,11 @@ const Section = ({
       />
     )}
 
-    {desc && <Typography className={styles.desc}>{desc}</Typography>}
+    {desc && (
+      <Typography className={styles.desc} variant="h3">
+        {desc}
+      </Typography>
+    )}
   </Stack>
 );
 

src/pages/tag/[tag]/[page].tsx

@@ -0,0 +1,72 @@
+import { getPosts, getTags } from "@src/api/posts";
+import { getPostsByTag } from "@src/api/tags";
+import Post from "@src/models/post";
+import Tag from "@src/models/tag";
+import TagTitlePosts from "@src/screens/tag";
+import { removeInternalTags } from "@src/utils/remove_internal_tags";
+
+const TagDetailsPage = (props: any) => <TagTitlePosts {...props} />;
+
+export async function getServerSideProps(context: { query: any }) {
+  let formattedPost: any = [];
+  let formattedSidePosts = [];
+  let formattedTags: Tag[] = [];
+  let meta = {};
+  let error = false;
+
+  try {
+    const { query } = context;
+    const fetchQuery: any = {};
+
+    if (query.page === "1") {
+      return {
+        redirect: {
+          destination: `/tag/${query.tag}`,
+          permanent: true,
+        },
+      };
+    }
+
+    if (query.page) {
+      fetchQuery.page = query.page;
+    }
+
+    if (query.tag) {
+      fetchQuery.tag = query.tag;
+    }
+
+    const [tags, posts, sidePosts] = await Promise.all([
+      getTags(),
+      getPostsByTag(fetchQuery),
+      getPosts({
+        limit: 10,
+      }),
+    ]);
+
+    formattedSidePosts = sidePosts.map((post: any) => Post.fromJson(post, {}));
+    formattedTags = removeInternalTags(tags).map((tag) => Tag.fromJson(tag));
+    meta = posts?.meta;
+
+    formattedPost = posts.map((y: any) => Post.fromJson(y, {}));
+
+    formattedPost.tags = posts.map((x: { tags: any[] }) =>
+      removeInternalTags(x.tags),
+    );
+  } catch (err) {
+    error = true;
+    // eslint-disable-next-line no-console
+    console.log(error, "error");
+  }
+
+  return {
+    props: {
+      post: JSON.parse(JSON.stringify(formattedPost)),
+      tags: JSON.parse(JSON.stringify(formattedTags)),
+      sidePosts: JSON.parse(JSON.stringify(formattedSidePosts)),
+      meta: JSON.parse(JSON.stringify(meta)),
+      error,
+    },
+  };
+}
+
+export default TagDetailsPage;

src/pages/tag/[tag]/index.tsx

@@ -1,29 +1,47 @@
+import type { GetStaticPaths, GetStaticProps } from "next";
+
 import { getPosts, getTags } from "@src/api/posts";
 import { getPostsByTag } from "@src/api/tags";
 import Post from "@src/models/post";
 import Tag from "@src/models/tag";
 import TagTitlePosts from "@src/screens/tag";
+import { locales } from "@src/utils/i18next";
 import { removeInternalTags } from "@src/utils/remove_internal_tags";
 
 const TagDetailsPage = (props: any) => <TagTitlePosts {...props} />;
 
-export async function getServerSideProps(context: { query: any }) {
+export const getStaticPaths: GetStaticPaths = async () => {
+  const tags = await getTags("1000");
+
+  const paths = locales
+    .map((locale) =>
+      tags.map((tag: any) => ({
+        locale,
+        params: {
+          tag: tag.slug,
+        },
+      })),
+    )
+    .flat();
+
+  return { paths, fallback: "blocking" };
+};
+
+export const getStaticProps: GetStaticProps<any, { tag: string }> = async (
+  context,
+) => {
   let formattedPost: any = [];
   let formattedSidePosts = [];
   let formattedTags: Tag[] = [];
   let meta = {};
   let error = false;
 
   try {
-    const { query } = context;
+    const { params } = context;
     const fetchQuery: any = {};
 
-    if (query.page) {
-      fetchQuery.page = query.page;
-    }
-
-    if (query.tag) {
-      fetchQuery.tag = query.tag;
+    if (params?.tag) {
+      fetchQuery.tag = params.tag;
     }
 
     const [tags, posts, sidePosts] = await Promise.all([
@@ -58,6 +76,6 @@ export async function getServerSideProps(context: { query: any }) {
       error,
     },
   };
-}
+};
 
 export default TagDetailsPage;

src/screens/Infrastructure/index.tsx

@@ -7,7 +7,7 @@ import {
   useTheme,
 } from "@mui/material";
 import useTranslation from "next-translate/useTranslation";
-import { useRouter } from "next/router";
+import Link from "next/link";
 import type { SyntheticEvent } from "react";
 import { useMemo, useRef, useState } from "react";
 
@@ -42,8 +42,6 @@ const Infrastructure = () => {
     noSsr: true,
   });
 
-  const router = useRouter();
-
   const personList = useMemo(() => {
     if (onlyLargeScreen) {
       return [
@@ -166,12 +164,11 @@ const Infrastructure = () => {
               title={t("section_1st_title")}
               title_large_trans={t("section_1st_large_title")}
             />
-            <CtaButton
-              className={style.mobile}
-              onClick={() => router.push("/staking")}
-            >
-              {t("see_more_networks")}
-            </CtaButton>
+            <Link href="/staking">
+              <CtaButton className={style.mobile}>
+                {t("see_more_networks")}
+              </CtaButton>
+            </Link>
             <Grid
               columnSpacing={{
                 mobile: theme.spacing(2),
@@ -187,31 +184,32 @@ const Infrastructure = () => {
                 <IntroPanel
                   desc={t("grid_1st_desc")}
                   imageHref={require("/public/validator_infastructure/[email protected]")}
+                  level={2}
                   title={t("grid_1st_title")}
                 />
               </Grid>
               <Grid item laptop={4} mobile={12} tablet={6}>
                 <IntroPanel
                   desc={t("grid_2nd_desc")}
                   imageHref={require("/public/validator_infastructure/[email protected]")}
+                  level={2}
                   title={t("grid_2nd_title")}
                 />
               </Grid>
               <Grid item laptop={4} mobile={12} tablet={6}>
                 <IntroPanel
                   desc={t("grid_3rd_desc")}
                   imageHref={require("/public/validator_infastructure/[email protected]")}
+                  level={2}
                   title={t("grid_3rd_title")}
                 />
               </Grid>
             </Grid>
-
-            <CtaButton
-              className={style.desktop}
-              onClick={() => router.push("/staking")}
-            >
-              {t("see_more_networks")}
-            </CtaButton>
+            <Link href="/staking">
+              <CtaButton className={style.desktop}>
+                {t("see_more_networks")}
+              </CtaButton>
+            </Link>
           </Stack>
 
           <Stack
@@ -313,13 +311,9 @@ const Infrastructure = () => {
               title={t("section_3rd_title")}
               title_large_trans={t("section_3rd_large_title")}
             />
-            <CtaButton
-              onClick={() => {
-                router.push("/staking");
-              }}
-            >
-              {t("stake_now")}
-            </CtaButton>
+            <Link href="/staking">
+              <CtaButton>{t("stake_now")}</CtaButton>
+            </Link>
           </Stack>
           <Stack>
             <NoSSR>