chore: adds seo meta tags (#7639)

src/v2/Apps/BuyerGuarantee/Components/BuyerGuaranteeMeta.tsx

@@ -0,0 +1,50 @@
+import React from "react"
+import { Meta, Title, Link } from "react-head"
+import { getENV } from "v2/Utils/getENV"
+import { cropped } from "v2/Utils/resized"
+
+export const BuyerGuaranteeMeta: React.FC = () => {
+  const title = "The Artsy Guarantee - Authenticity and Secure Payment"
+  const href = `${getENV("APP_URL")}/buyer-guarantee`
+  const description =
+    " Artsy is the safest place to buy the art you love. Every purchase made exclusively with Artsy’s secure checkout benefits from our full suite of buyer protections."
+  const src = cropped("http://files.artsy.net/buyerGuaranteeHeroImage.jpg", {
+    width: 1600,
+    height: 800,
+  })
+
+  return (
+    <>
+      <Title>{title}</Title>
+      <Meta property="og:title" content={title} />
+
+      {description && (
+        <>
+          <Meta name="description" content={description} />
+          <Meta property="og:description" content={description} />
+          <Meta property="twitter:description" content={description} />
+        </>
+      )}
+
+      {href && (
+        <>
+          <Link rel="canonical" href={href} />
+          <Meta property="og:url" content={href} />
+        </>
+      )}
+
+      {src && (
+        <>
+          <Meta property="twitter:card" content="summary_large_image" />
+          <Meta property="og:image" content={src} />
+        </>
+      )}
+
+      {!src && <Meta property="twitter:card" content="summary" />}
+
+      <Meta property="twitter:site" content="@artsy" />
+      <Meta property="og:type" content="website" />
+      <Meta name="robots" content="noindex, nofollow" />
+    </>
+  )
+}

src/v2/Apps/BuyerGuarantee/Routes/BuyerGuaranteeIndex.tsx

@@ -32,6 +32,7 @@ import { Feature } from "../Components/Feature"
 import { MOBILE_NAV_HEIGHT, NAV_BAR_HEIGHT } from "v2/Components/NavBar"
 import { scrollIntoView } from "v2/Utils/scrollHelpers"
 import { useMatchMedia } from "v2/Utils/Hooks/useMatchMedia"
+import { BuyerGuaranteeMeta } from "../Components/BuyerGuaranteeMeta"
 
 interface BuyerGuaranteeIndexProps {
   headerImage: BuyerGuaranteeIndex_headerImage
@@ -75,6 +76,7 @@ export const BuyerGuaranteeIndex: React.FC<BuyerGuaranteeIndexProps> = ({
     "http://files.artsy.net/moneybackguaranteeartwork.jpg",
     { width: 400, height: 600, convert_to: "jpg" }
   )
+
   const heroImageURL = resize(
     "http://files.artsy.net/buyerGuaranteeHeroImage.jpg",
     { width: 1600, height: 800, convert_to: "jpg" }
@@ -100,6 +102,7 @@ export const BuyerGuaranteeIndex: React.FC<BuyerGuaranteeIndexProps> = ({
 
   return (
     <>
+      <BuyerGuaranteeMeta />
       {heroImageURL && (
         <FullBleedHeader
           {...headerImage?.image?.resized?.srcSet}
@@ -109,7 +112,6 @@ export const BuyerGuaranteeIndex: React.FC<BuyerGuaranteeIndexProps> = ({
             headerImage.imageTitle?.replace(/‘|’/g, "") +
             ". Courtesy of the artist and Kenise Barnes Fine Art. "
           }
-          meta="Artsy is the safest place to buy the art you love. Every purchase made exclusively with our Artsy’s secure checkout benefits from our full suite of buyer protections."
         >
           <Flex
             position="absolute"