Feat/seo improvements INTER-306 (#92)

* feat: add HSTS header * feat: add sitemap * feat: use fingerprinthub for sitemap for now * feat: add seo component * feat: rename to seo component * chore: fix meta url * chore: improve card accessibility * chore: add use case seo
fingerprintjs · Oct 9, 2023 · 4ccaa14 · 4ccaa14
1 parent a41c3b9
commit 4ccaa14
Show file tree

Hide file tree

Showing 9 changed files with 134 additions and 5 deletions.
diff --git a/next.config.js b/next.config.js
@@ -13,4 +13,17 @@ module.exports = {
     includePaths: [path.join(__dirname, 'src/styles')],
     prependData: `@import "common.scss";`,
   },
+  async headers() {
+    return [
+      {
+        source: '/(.*)',
+        headers: [
+          {
+            key: 'Strict-Transport-Security',
+            value: 'max-age=63072000; includeSubDomains; preload',
+          },
+        ],
+      },
+    ];
+  },
 };
diff --git a/public/fingerprintDefaultMetaImage.png b/public/fingerprintDefaultMetaImage.png
diff --git a/src/client/components/common/UseCaseWrapper/UseCaseWrapper.tsx b/src/client/components/common/UseCaseWrapper/UseCaseWrapper.tsx
@@ -11,6 +11,7 @@ import RestartIcon from '../../../img/restart.svg';
 import { useReset } from '../../../hooks/useReset/useReset';
 import classNames from 'classnames';
 import { RestartHint } from './RestartHint';
+import { SEO } from '../seo';
 
 type UseCaseWrapperProps = {
   useCase: Partial<UseCase>;
@@ -36,6 +37,7 @@ export const UseCaseWrapper: FunctionComponent<UseCaseWrapperProps> = ({
 
   return (
     <>
+      <SEO title={useCase.titleMeta} description={useCase.descriptionMeta} path={useCase.url} />
       {embed && shouldDisplayResetButton && (
         <Tooltip title="Click Restart to remove all information obtained from this browser. This will reenable some scenarios for you if you were locked out of a specific action.">
           <div

diff --git a/src/client/components/common/content.tsx b/src/client/components/common/content.tsx
@@ -10,11 +10,15 @@ import ScrapingIcon from '../../img/scrapingIcon.svg';
 import { ReactNode } from 'react';
 import { RestartHint, RestartHintProps } from './UseCaseWrapper/RestartHint';
 
+export const PRODUCTION_URL = 'https://fingerprinthub.com';
+
 export type UseCase = {
   title: string;
+  titleMeta: string;
   url: string;
   description?: React.ReactNode;
   descriptionHomepage?: readonly React.ReactNode[];
+  descriptionMeta: string;
   articleUrl?: string;
   doNotMentionResetButton?: boolean;
   instructions: readonly (ReactNode | ((props: RestartHintProps) => ReactNode))[];
@@ -29,6 +33,7 @@ export type UseCase = {
 export const USE_CASES = {
   couponFraud: {
     title: 'Coupon Fraud',
+    titleMeta: 'Fingerprint Use Cases | Coupon Promo Fraud and Abuse Live Demo',
     url: '/coupon-fraud',
     iconSvg: CouponFraudIcon,
     descriptionHomepage: [
@@ -43,6 +48,8 @@ export const USE_CASES = {
     ],
     description:
       'Use the demo below to see how Fingerprint can help identify fraudsters who repeatedly use the same coupon under different scenarios to gain unauthorized benefits.',
+    descriptionMeta:
+      'See in real-time how Fingerprint can stop and prevent coupon promotional abuse. Try out our coupon fraud demo and learn how we safeguard your promotions.',
     articleUrl: 'https://fingerprint.com/use-cases/coupon-promo-abuse/',
     instructions: [
       <>
@@ -73,6 +80,7 @@ export const USE_CASES = {
   },
   credentialStuffing: {
     title: 'Credential Stuffing',
+    titleMeta: 'Fingerprint Use Cases | Credential Stuffing Live Demo',
     url: '/credential-stuffing',
     articleUrl: 'https://fingerprint.com/use-cases/credential-stuffing/',
     instructions: [
@@ -110,6 +118,8 @@ export const USE_CASES = {
         </p>
       </>
     ),
+    descriptionMeta:
+      'See in real-time how Fingerprint can stop credential stuffing preventing unauthorized account access before it happens. Try out our live demo to learn how.',
     moreResources: [
       {
         type: 'Use case tutorial',
@@ -125,6 +135,7 @@ export const USE_CASES = {
   },
   loanRisk: {
     title: 'Loan Risk',
+    titleMeta: 'Fingerprint Use Cases | Loan Fraud Live Demo',
     url: '/loan-risk',
     iconSvg: LoanRiskIcon,
     descriptionHomepage: [
@@ -138,6 +149,8 @@ export const USE_CASES = {
     ],
     description:
       'Use this demo to see how Fingerprint allows you to collect high-quality, low-risk loan applications from your anonymous visitors. Prevent fraudsters and rejected applicants from submitting multiple inconsistent applications.',
+    descriptionMeta:
+      'See in real-time how Fingerprint can stop and prevent fraudsters and rejected applicants from submitting multiple inconsistent applications. Try out our live demo to learn how.',
     instructions: [
       <>Pick some values in the form and submit your loan application.</>,
       <>
@@ -161,6 +174,7 @@ export const USE_CASES = {
   },
   paymentFraud: {
     title: 'Payment Fraud',
+    titleMeta: 'Fingerprint Use Cases | Payment Fraud Live Demo',
     url: '/payment-fraud',
     articleUrl: 'https://fingerprint.com/use-cases/payment-fraud/',
     iconSvg: PaymentFraudIcon,
@@ -173,6 +187,8 @@ export const USE_CASES = {
     ],
     description:
       'Use the demo to see how Fingerprint can protect your transactions from card cracking attempts, stolen credit cards, and reduce chargebacks.',
+    descriptionMeta:
+      'See in real-time how Fingerprint can stop and prevent online payment fraud. Try out our live demo to see how Fingerprint can protect your transactions from card cracking attempts, stolen credit cards, and reduce chargebacks.',
     doNotMentionResetButton: true,
     instructions: [
       <>Change the pre-filled card details to simulate testing stolen credit cards.</>,
@@ -209,6 +225,7 @@ export const USE_CASES = {
   },
   paywall: {
     title: 'Paywall',
+    titleMeta: 'Fingerprint Use Cases | Content Paywall Live Demo',
     url: '/paywall',
     iconSvg: PaywallIcon,
     descriptionHomepage: [
@@ -220,6 +237,8 @@ export const USE_CASES = {
     ],
     description:
       'Use the demo below to see how Fingerprint protects your content from users trying to circumvent your paywall. ',
+    descriptionMeta:
+      'See in real-time how Fingerprint can stop and prevent content paywall evasion. Try out our live demo to see how Fingerprint protects your content from users trying to circumvent your paywall.',
     instructions: [
       <>Browse the articles below and open a few of them.</>,
       <>You will hit a paywall when opening your third article.</>,
@@ -235,6 +254,7 @@ export const USE_CASES = {
   },
   personalization: {
     title: 'Personalization',
+    titleMeta: 'Fingerprint Use Cases | eCommerce Personalization Live Demo',
     url: '/personalization',
     articleUrl: 'https://fingerprint.com/use-cases/personalization/',
     iconSvg: PersonalizationIcon,
@@ -260,6 +280,8 @@ export const USE_CASES = {
         </p>
       </>
     ),
+    descriptionMeta:
+      'See in real-time how Fingerprint can help you provide your visitors a tailored experience without having to create an account. Try out our live demo to see how user personalization works with Fingerprint.',
     instructions: [
       <>Search for new products.</>,
       <>Add some items to your cart.</>,
@@ -278,6 +300,7 @@ export const USE_CASES = {
   },
   webScraping: {
     title: 'Web Scraping Prevention',
+    titleMeta: 'Fingerprint Use Cases | Content Scraping Prevention Live Demo',
     url: '/web-scraping',
     articleUrl: 'https://fingerprint.com/use-cases/web-scraping-prevention/',
     iconSvg: ScrapingIcon,
@@ -309,6 +332,8 @@ export const USE_CASES = {
         </p>
       </>
     ),
+    descriptionMeta:
+      'See in real-time how Fingerprint can stop and prevent content scraping bots. Try out our live demo to see how Fingerprint’s bot detection identifies and blocks malicious bots, and prevents unauthorized data extraction.',
     doNotMentionResetButton: true,
     instructions: [
       <>Use a normal browser and search for flights.</>,
@@ -346,7 +371,10 @@ export const USE_CASES = {
   },
 } as const satisfies Record<string, UseCase>;
 
-export const PLAYGROUND_METADATA: Pick<UseCase, 'title' | 'url' | 'descriptionHomepage' | 'iconSvg'> = {
+export const PLAYGROUND_METADATA: Pick<
+  UseCase,
+  'title' | 'url' | 'descriptionHomepage' | 'iconSvg' | 'titleMeta' | 'descriptionMeta'
+> = {
   title: 'Smart Signals',
   url: '/playground',
   iconSvg: SmartSignalsIcon,
@@ -357,6 +385,8 @@ export const PLAYGROUND_METADATA: Pick<UseCase, 'title' | 'url' | 'descriptionHo
       VPN detection, browser tampering detection, IP blocklist matching, and more.
     </p>,
   ],
+  titleMeta: 'Fingerprint Use Cases | Smart Signals Playground',
+  descriptionMeta: 'Analyze your browser with Fingerprint Pro and see all the available signals.',
 };
 
 export const USE_CASES_ARRAY = Object.values(USE_CASES);

diff --git a/src/client/components/common/seo.tsx b/src/client/components/common/seo.tsx
@@ -0,0 +1,35 @@
+import Head from 'next/head';
+import { FunctionComponent } from 'react';
+import { PRODUCTION_URL } from './content';
+
+type HeadSEOProps = {
+  title: string;
+  description: string;
+  image?: string;
+  path?: string;
+};
+
+export const SEO: FunctionComponent<HeadSEOProps> = ({ title, description, image, path }) => {
+  const metaImage = image ?? `${PRODUCTION_URL}/fingerprintDefaultMetaImage.png`;
+  const metaUrl = `${PRODUCTION_URL}${path ?? ''}`;
+  return (
+    <Head>
+      <title>{title}</title>
+      <meta name="description" content={description} />
+      <meta name="image" content={metaImage} />
+
+      <meta property="og:type" content="website" />
+      <meta property="og:title" content={title} />
+      <meta property="og:description" content={description} />
+      <meta property="og:site_name" content="Fingerprint Use Cases" />
+      <meta property="og:image" content={metaImage} />
+      <meta property="og:url" content={metaUrl} />
+
+      <meta name="twitter:title" content={title} />
+      <meta name="twitter:description" content={description} />
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:image" content={metaImage} />
+      <meta name="twitter:url" content={metaUrl} />
+    </Head>
+  );
+};
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
@@ -66,6 +66,7 @@
   border: 1px solid v('gray-box-stroke');
   overflow: hidden;
   color: unset;
+  cursor: pointer;
 
   @include shadowMedium();
   @include transition((box-shadow, border));
@@ -91,6 +92,7 @@
     font-weight: 600;
     line-height: 130%;
     margin-bottom: rem(8px);
+    display: block;
   }
 
   .useCaseDescription {

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -7,10 +7,18 @@ import LinkArrow from '../client/img/externalLinkArrow.svg';
 import Image from 'next/image';
 import { TEST_IDS } from '../client/e2eTestIDs';
 import { Fragment } from 'react';
+import { SEO } from '../client/components/common/seo';
+import { useRouter } from 'next/router';
 
 export default function Index() {
+  const router = useRouter();
   return (
     <>
+      <SEO
+        title="Fingerprint Use Cases | Discover Device Intelligence Use Cases"
+        description={`Explore an extensive range of use cases supported by Fingerprint, and learn how to successfully implement it for your 
+        business with practical guidance and a comprehensive demo.`}
+      />
       <Container size="large" className={styles.hero}>
         <h1 className={styles.title}>Fingerprint use cases</h1>
         <div className={styles.intro}>
@@ -27,12 +35,12 @@ export default function Index() {
       </Container>
       <div className={styles.useCaseGrid}>
         {HOMEPAGE_CARDS.map((card) => (
-          <Link className={styles.useCaseCard} href={card.url} key={card.url}>
+          <div className={styles.useCaseCard} key={card.url} onClick={() => router.push(card.url)}>
             <div>
               <Image src={card.iconSvg} alt="" className={styles.useCaseIcon} />
-              <h3 className={styles.useCaseTitle} data-test={TEST_IDS.homepageCard.useCaseTitle}>
+              <Link className={styles.useCaseTitle} data-test={TEST_IDS.homepageCard.useCaseTitle} href={card.url}>
                 {card.title}
-              </h3>
+              </Link>
               <div className={styles.useCaseDescription}>
                 {card.descriptionHomepage.map((line, i) => (
                   <Fragment key={i}>{line}</Fragment>
@@ -45,7 +53,7 @@ export default function Index() {
                 <Image src={LinkArrow} alt="" />
               </span>
             </div>
-          </Link>
+          </div>
         ))}
       </div>
     </>

diff --git a/src/pages/playground/index.tsx b/src/pages/playground/index.tsx
@@ -29,6 +29,7 @@ import { usePlaygroundSignals } from '../../client/components/playground/usePlay
 import { getLocationName } from '../../shared/utils/getLocationName';
 import { PLAYGROUND_TAG } from '../../client/components/playground/playgroundTags';
 import { CustomPageProps } from '../_app';
+import { PLAYGROUND_METADATA } from '../../client/components/common/content';
 
 // Map cannot be server-side rendered
 const Map = dynamic(() => import('../../client/components/playground/Map'), { ssr: false });
@@ -404,6 +405,7 @@ export default function PlaygroundPage({ embed }: CustomPageProps) {
   return (
     <UseCaseWrapper
       useCase={{
+        ...PLAYGROUND_METADATA,
         title: 'Fingerprint Pro Playground',
         description: <p>Analyze your browser with Fingerprint Pro and see all the available signals.</p>,
         doNotMentionResetButton: true,

diff --git a/src/pages/sitemap.xml.ts b/src/pages/sitemap.xml.ts
@@ -0,0 +1,37 @@
+import { HOMEPAGE_CARDS, PRODUCTION_URL } from '../client/components/common/content';
+
+function generateSiteMap() {
+  return `<?xml version="1.0" encoding="UTF-8"?>
+   <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+     <url>
+       <loc>${PRODUCTION_URL}</loc>
+     </url>
+     ${HOMEPAGE_CARDS.map(({ url }) => {
+       return `
+       <url>
+           <loc>${`${PRODUCTION_URL}${url}`}</loc>
+       </url>
+     `;
+     }).join('')}
+   </urlset>
+ `;
+}
+
+function SiteMap() {
+  // getServerSideProps will do the heavy lifting
+}
+
+export async function getServerSideProps({ res }) {
+  const sitemap = generateSiteMap();
+
+  res.setHeader('Content-Type', 'text/xml');
+  // we send the XML to the browser
+  res.write(sitemap);
+  res.end();
+
+  return {
+    props: {},
+  };
+}
+
+export default SiteMap;