From 2df7ce1985c273ea454d37fbd878127d38a16100 Mon Sep 17 00:00:00 2001
From: Ashley Jelks <arjelks@gmail.com>
Date: Wed, 26 May 2021 16:33:24 -0400
Subject: [PATCH 1/2] chore: adds seo meta tags

---
 .../Components/BuyerGuaranteeMeta.tsx         | 50 +++++++++++++++++++
 .../Routes/BuyerGuaranteeIndex.tsx            |  4 +-
 2 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 src/v2/Apps/BuyerGuarantee/Components/BuyerGuaranteeMeta.tsx

diff --git a/src/v2/Apps/BuyerGuarantee/Components/BuyerGuaranteeMeta.tsx b/src/v2/Apps/BuyerGuarantee/Components/BuyerGuaranteeMeta.tsx
new file mode 100644
index 00000000000..ec264a616ce
--- /dev/null
+++ b/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" />
+    </>
+  )
+}
diff --git a/src/v2/Apps/BuyerGuarantee/Routes/BuyerGuaranteeIndex.tsx b/src/v2/Apps/BuyerGuarantee/Routes/BuyerGuaranteeIndex.tsx
index e7716e36276..b63702ef838 100644
--- a/src/v2/Apps/BuyerGuarantee/Routes/BuyerGuaranteeIndex.tsx
+++ b/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"

From 693f641a6773cdf72c1837e68e754af0126ea5b3 Mon Sep 17 00:00:00 2001
From: Ashley Jelks <arjelks@gmail.com>
Date: Thu, 27 May 2021 11:49:01 -0400
Subject: [PATCH 2/2] fix: trim whitespace from meta description

---
 src/v2/Apps/BuyerGuarantee/Components/BuyerGuaranteeMeta.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/v2/Apps/BuyerGuarantee/Components/BuyerGuaranteeMeta.tsx b/src/v2/Apps/BuyerGuarantee/Components/BuyerGuaranteeMeta.tsx
index ec264a616ce..fe683cfe453 100644
--- a/src/v2/Apps/BuyerGuarantee/Components/BuyerGuaranteeMeta.tsx
+++ b/src/v2/Apps/BuyerGuarantee/Components/BuyerGuaranteeMeta.tsx
@@ -7,7 +7,7 @@ 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."
+    "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,