enhance seo (#5617)

- add "robots.txt"
- add structured data snippet
- avoid prefetch failure for non-existing pages

website/gatsby-config.js

@@ -20,6 +20,7 @@ module.exports = {
     `gatsby-plugin-graphql-codegen`,
     `gatsby-plugin-styled-components`,
     `gatsby-plugin-react-helmet`,
+    `gatsby-plugin-robots-txt`,
     `gatsby-plugin-tsconfig-paths`,
     `gatsby-remark-reading-time`,
     {

website/package.json

@@ -40,8 +40,9 @@
     "gatsby-plugin-react-helmet": "^4.6.0",
     "gatsby-plugin-react-redux": "^1.1.0-0",
     "gatsby-plugin-react-svg": "^3.0.1",
+    "gatsby-plugin-robots-txt": "^1.8.0",
     "gatsby-plugin-sharp": "^3.6.0",
-    "gatsby-plugin-sitemap": "^4.2.0",
+    "gatsby-plugin-sitemap": "^6.3.1",
     "gatsby-plugin-styled-components": "^4.6.0",
     "gatsby-plugin-tsconfig-paths": "^1.0.5",
     "gatsby-plugin-web-font-loader": "^1.0.4",

website/src/components/layout/header.tsx

@@ -410,7 +410,7 @@ const ProductsNavItem: FC<ProductsNavItemProps> = ({ firstBlogPost }) => {
 
   return (
     <NavItemContainer {...navHandlers}>
-      <NavLink to="/products" {...linkHandlers}>
+      <NavLink to="/products" prefetch={false} {...linkHandlers}>
         Products
         <IconContainer size={10}>
           <ArrowDownSvg />
@@ -504,7 +504,7 @@ const DeveloperNavItem: FC<DeveloperNavItemProps> = ({ products, tools }) => {
 
   return (
     <NavItemContainer {...navHandlers}>
-      <NavLink to="/docs" {...linkHandlers}>
+      <NavLink to="/docs" prefetch={false} {...linkHandlers}>
         Developers
         <IconContainer size={10}>
           <ArrowDownSvg />
@@ -558,7 +558,7 @@ const ServicesNavItem: FC = () => {
 
   return (
     <NavItemContainer {...navHandlers}>
-      <NavLink to="/services" {...linkHandlers}>
+      <NavLink to="/services" prefetch={false} {...linkHandlers}>
         Services
         <IconContainer size={10}>
           <ArrowDownSvg />

website/src/components/misc/link.tsx

@@ -2,22 +2,27 @@ import { GatsbyLinkProps, Link as GatsbyLink } from "gatsby";
 import { OutboundLink } from "gatsby-plugin-google-analytics";
 import React, { FC } from "react";
 
-export const Link: FC<GatsbyLinkProps<unknown>> = ({
+export const Link: FC<GatsbyLinkProps<unknown> & { prefetch?: false }> = ({
   activeClassName,
   partiallyActive,
   to,
   ref,
+  prefetch = true,
   ...rest
 }) => {
   const internal = /^\/(?!\/)/.test(to);
 
   return internal ? (
-    <GatsbyLink
-      to={to}
-      activeClassName={activeClassName}
-      partiallyActive={partiallyActive}
-      {...rest}
-    />
+    prefetch ? (
+      <GatsbyLink
+        to={to}
+        activeClassName={activeClassName}
+        partiallyActive={partiallyActive}
+        {...rest}
+      />
+    ) : (
+      <a href={to} {...rest} />
+    )
   ) : (
     <OutboundLink
       href={to}

website/src/components/misc/seo.tsx

@@ -33,6 +33,7 @@ export const SEO: FC<SEOProps> = ({
           siteMetadata {
             title
             description
+            company
             author
             siteUrl
           }
@@ -49,11 +50,14 @@ export const SEO: FC<SEOProps> = ({
     `
   );
 
+  const metaSiteUrl = site.siteMetadata.siteUrl;
   const metaAuthor = `@${site.siteMetadata.author}`;
+  const metaCompany = site.siteMetadata.company;
   const metaDescription = description || site.siteMetadata.description;
-  const metaImageUrl = `${site.siteMetadata.siteUrl}${
+  const metaImageUrl = `${metaSiteUrl}${
     imageUrl ?? image?.childImageSharp!.gatsbyImageData!.images.fallback.src
   }`;
+  const metaType = isArticle ? "article" : "website";
 
   return (
     <Helmet
@@ -69,7 +73,7 @@ export const SEO: FC<SEOProps> = ({
         },
         {
           property: `og:url`,
-          content: site.siteMetadata.siteUrl,
+          content: metaSiteUrl,
         },
         {
           property: `og:title`,
@@ -81,7 +85,7 @@ export const SEO: FC<SEOProps> = ({
         },
         {
           property: `og:type`,
-          content: !!isArticle ? `article` : `website`,
+          content: metaType,
         },
         {
           property: `og:image`,
@@ -109,7 +113,26 @@ export const SEO: FC<SEOProps> = ({
         },
         ...meta!,
       ]}
-    />
+    >
+      <script type="application/ld+json">
+        {JSON.stringify({
+          "@context": "https://schema.org/",
+          "@type": metaType,
+          "@id": metaSiteUrl,
+          headline: title,
+          description: metaDescription,
+          author: {
+            "@type": "Organization",
+            name: metaCompany,
+            contactPoint: {
+              "@type": "ContactPoint",
+              email: "mailto:contact@chillicream.com",
+              contactType: "Customer Support",
+            },
+          },
+        })}
+      </script>
+    </Helmet>
   );
 };