Comparison page improvement for seo

src/components/EtlToolsXvsYPage/Comparison/RelatedComparisonLinks/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Link } from 'gatsby';
+import { getComparisonSlug, Vendor } from '../../../../../shared';
+import { container } from './styles.module.less';
+
+interface RelatedComparisonLinksProps {
+    vendors: Partial<Vendor>[];
+    excludeVendorIds: string[];
+    baseVendor: Vendor;
+}
+
+const RelatedComparisonLinks = ({
+    vendors,
+    excludeVendorIds,
+    baseVendor,
+}: RelatedComparisonLinksProps) => {
+    return (
+        <div className={container}>
+            {vendors
+                .filter(
+                    (vendor) =>
+                        vendor.id && !excludeVendorIds.includes(vendor.id)
+                )
+                .map((vendor) =>
+                    vendor.slugKey ? (
+                        <Link
+                            key={`related-comparison-link-${vendor.id}`}
+                            to={`/${getComparisonSlug(baseVendor.slugKey, vendor.slugKey)}`}
+                        >
+                            {baseVendor.name} vs {vendor.name}
+                        </Link>
+                    ) : null
+                )}
+        </div>
+    );
+};
+
+export default RelatedComparisonLinks;

src/components/EtlToolsXvsYPage/Comparison/RelatedComparisonLinks/styles.module.less

@@ -0,0 +1,19 @@
+.container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  margin-top: 20px;
+  row-gap: 8px;
+  column-gap: 24px;
+
+  a {
+    color: var(--blue);
+    font-weight: 500;
+    width: fit-content;
+
+    &:hover {
+      color: var(--blue);
+      text-underline-offset: 4px;
+      text-decoration: underline;
+    }
+  }
+}

src/components/EtlToolsXvsYPage/Comparison/index.tsx

@@ -18,29 +18,49 @@ import Support from './Support';
 import Cost from './Cost';
 import VendorAvatar from './VendorAvatar';
 import IntroductoryDetails from './IntroductoryDetails';
+import RelatedComparisonLinks from './RelatedComparisonLinks';
 
 interface SectionTwoProps {
     xVendor: Vendor;
     yVendor: Vendor;
     estuaryVendor: Vendor;
+    allVendors: Partial<Vendor>[];
 }
 
-const articleBody = {
+const generateVendorRelatedComparisonsObject = (
+    vendorKey: string,
+    vendorName: string
+) => ({
+    id: `${vendorKey}-related-comparisons`,
+    heading: `Related comparisons to ${vendorName}`,
+});
+
+const articleBody = (
+    xVendorName: string,
+    yVendorName: string,
+    estuaryVendorName: string | null
+) => ({
     intro: {
         id: 'intro',
         heading: 'Introduction',
     },
     comparisonMatrix: {
         id: 'comparison-matrix',
-        heading: 'Comparison Matrix',
+        heading: `Comparison Matrix: ${xVendorName} vs ${yVendorName}${estuaryVendorName ? ` vs ${estuaryVendorName}` : ''}`,
     },
     howToChoose: {
         id: 'how-to-choose',
         heading: 'How to choose the best option',
     },
-};
-
-const { intro, comparisonMatrix, howToChoose } = articleBody;
+    xVendorRelatedComparisons: generateVendorRelatedComparisonsObject(
+        'x-vendor',
+        xVendorName
+    ),
+    yVendorRelatedComparisons: generateVendorRelatedComparisonsObject(
+        'y-vendor',
+        yVendorName
+    ),
+});
 
 const tableBodyComponents = [
     UseCases,
@@ -53,11 +73,37 @@ const tableBodyComponents = [
     Cost,
 ];
 
-const Comparison = ({ xVendor, yVendor, estuaryVendor }: SectionTwoProps) => {
+const Comparison = ({
+    xVendor,
+    yVendor,
+    estuaryVendor,
+    allVendors,
+}: SectionTwoProps) => {
     const isThreeVendorComparison = useMemo(() => {
         return ![xVendor.id, yVendor.id].includes(estuaryVendor.id);
     }, [xVendor.id, yVendor.id, estuaryVendor.id]);
 
+    const excludeVendorIds = useMemo(
+        () => [xVendor.id, yVendor.id],
+        [xVendor.id, yVendor.id]
+    );
+
+    const {
+        intro,
+        comparisonMatrix,
+        howToChoose,
+        xVendorRelatedComparisons,
+        yVendorRelatedComparisons,
+    } = useMemo(
+        () =>
+            articleBody(
+                xVendor.name,
+                yVendor.name,
+                isThreeVendorComparison ? estuaryVendor.name : null
+            ),
+        [xVendor.name, yVendor.name, isThreeVendorComparison, estuaryVendor]
+    );
+
     const stickyRef1 = useRef<HTMLTableCellElement>(null);
     const stickyRef2 = useRef<HTMLTableCellElement>(null);
     const stickyRef3 = useRef<HTMLTableCellElement>(null);
@@ -82,19 +128,37 @@ const Comparison = ({ xVendor, yVendor, estuaryVendor }: SectionTwoProps) => {
             ],
         });
 
-        const vendors = [xVendor, yVendor].map(createVendorItem);
+        const comparedVendors = [xVendor, yVendor].map(createVendorItem);
 
         if (isThreeVendorComparison) {
-            vendors.unshift(createVendorItem(estuaryVendor));
+            comparedVendors.unshift(createVendorItem(estuaryVendor));
         }
 
         return [
             { id: intro.id, heading: intro.heading },
             { id: comparisonMatrix.id, heading: comparisonMatrix.heading },
-            ...vendors,
+            ...comparedVendors,
             { id: howToChoose.id, heading: howToChoose.heading },
+            {
+                id: xVendorRelatedComparisons.id,
+                heading: xVendorRelatedComparisons.heading,
+            },
+            {
+                id: yVendorRelatedComparisons.id,
+                heading: yVendorRelatedComparisons.heading,
+            },
         ];
-    }, [xVendor, yVendor, estuaryVendor, isThreeVendorComparison]);
+    }, [
+        xVendor,
+        yVendor,
+        estuaryVendor,
+        isThreeVendorComparison,
+        intro,
+        comparisonMatrix,
+        howToChoose,
+        xVendorRelatedComparisons,
+        yVendorRelatedComparisons,
+    ]);
 
     useEffect(() => {
         const handleScroll = () => {
@@ -256,6 +320,24 @@ const Comparison = ({ xVendor, yVendor, estuaryVendor }: SectionTwoProps) => {
                         needs, and use this information to a good short-term and
                         long-term solution for you.
                     </p>
+
+                    <h2 id={xVendorRelatedComparisons.id}>
+                        {xVendorRelatedComparisons.heading}
+                    </h2>
+                    <RelatedComparisonLinks
+                        vendors={allVendors}
+                        baseVendor={xVendor}
+                        excludeVendorIds={excludeVendorIds}
+                    />
+
+                    <h2 id={yVendorRelatedComparisons.id}>
+                        {yVendorRelatedComparisons.heading}
+                    </h2>
+                    <RelatedComparisonLinks
+                        vendors={allVendors}
+                        baseVendor={yVendor}
+                        excludeVendorIds={excludeVendorIds}
+                    />
                 </div>
             </div>
         </section>

src/templates/etl-tools/index.tsx

@@ -33,6 +33,11 @@ const EtlTools = ({
                 xVendor={xVendor}
                 yVendor={yVendor}
                 estuaryVendor={estuaryVendor}
+                allVendors={vendors.map((vendor) => ({
+                    id: vendor.id,
+                    name: vendor.name,
+                    slugKey: vendor.slugKey,
+                }))}
             />
             <GettingStarted />
         </Layout>