feat(resources): improve SEO

src/components/SEO/index.tsx

@@ -8,6 +8,7 @@ interface ISEOProps {
   readonly meta?: any[]
   readonly keywords?: string[]
   readonly title: string
+  readonly subCategory?: string | null
 }
 
 export const SEO: FC<ISEOProps> = ({
@@ -16,6 +17,7 @@ export const SEO: FC<ISEOProps> = ({
   meta = [],
   keywords = [],
   title,
+  subCategory,
 }) => {
   const { site } = useStaticQuery(
     graphql`
@@ -38,7 +40,7 @@ export const SEO: FC<ISEOProps> = ({
       htmlAttributes={{
         lang,
       }}
-      title={title}
+      title={subCategory ? `${title} - ${subCategory}` : title}
       titleTemplate={`%s | ${site.siteMetadata.title}`}
       meta={[
         {

src/templates/languageHome.tsx

@@ -6,9 +6,11 @@ import { ResourcesList } from "../components/ResourcesList"
 import { SEO } from "../components/SEO"
 import { PageContent } from "../components/PageContent"
 import { Footer } from "../components/Footer"
+import useSidebar from "../hooks/useSidebar"
 
 // @todo maybe find alternative type for data
 const LanguageHome: FC<any> = ({ data, pageContext }) => {
+  const { current: language } = useSidebar()
   const { relativePath } = data.file
   const { html, excerpt, fields, frontmatter, timeToRead } = data.file.post
 
@@ -18,7 +20,11 @@ const LanguageHome: FC<any> = ({ data, pageContext }) => {
 
   return (
     <Fragment>
-      <SEO title={frontmatter.title} description={excerpt} />
+      <SEO
+        title={frontmatter.title}
+        subCategory={language}
+        description={excerpt}
+      />
       <Header
         relativePath={relativePath}
         basePath="/resources"

src/templates/languagePost.tsx

@@ -7,10 +7,12 @@ import { Header } from "../components/Header"
 import { Markdown } from "../components/Markdown"
 import { PageContent } from "../components/PageContent"
 import { SEO } from "../components/SEO"
+import useSidebar from "../hooks/useSidebar"
 import { buildToc } from "../utils"
 
 // @todo maybe find alternative type for data
 const LanguagePost: FC<any> = ({ data }) => {
+  const { current: language } = useSidebar()
   const { relativePath } = data.file
   const {
     html,
@@ -31,7 +33,11 @@ const LanguagePost: FC<any> = ({ data }) => {
 
   return (
     <Fragment>
-      <SEO title={frontmatter.title} description={excerpt} />
+      <SEO
+        title={frontmatter.title}
+        subCategory={language}
+        description={excerpt}
+      />
       <Header
         relativePath={relativePath}
         basePath="/resources"