From 31cc2b8311290759c43d1b5cda4f40b2326c2e87 Mon Sep 17 00:00:00 2001
From: Jason Lengstorf <jason@lengstorf.com>
Date: Fri, 11 Jan 2019 10:11:00 +0100
Subject: [PATCH] fix: product page SEO and captions

- use product info and image for SEO tags on product pages
- fix lorem ipsum text in captions
---
 .../ProductPage/CommunityCaption.js           | 21 +++++++---
 src/templates/ProductPageTemplate.js          | 40 ++++++++++++++++++-
 2 files changed, 54 insertions(+), 7 deletions(-)

diff --git a/src/components/ProductPage/CommunityCaption.js b/src/components/ProductPage/CommunityCaption.js
index 450a9e8c..91b78c22 100644
--- a/src/components/ProductPage/CommunityCaption.js
+++ b/src/components/ProductPage/CommunityCaption.js
@@ -96,6 +96,10 @@ const UserPhotoHint = styled(`div`)`
       display: none;
     }
   }
+
+  a {
+    color: inherit;
+  }
 `;
 
 class CommunityCaption extends Component {
@@ -115,10 +119,12 @@ class CommunityCaption extends Component {
   };
 
   toggleIncentive = e => {
-    e.preventDefault();
-    e.stopPropagation();
+    if (!e.target.href) {
+      e.preventDefault();
+      e.stopPropagation();
 
-    this.setState(state => ({ hintExpanded: !state.hintExpanded }));
+      this.setState(state => ({ hintExpanded: !state.hintExpanded }));
+    }
   };
 
   render() {
@@ -141,11 +147,14 @@ class CommunityCaption extends Component {
           onClick={this.toggleIncentive}
           className={hintExpanded ? 'expanded' : ''}
         >
-          <span>Would you like to see a photo of your pet here?</span>{' '}
+          <span>We want to see your Gatsby swag photos!</span>{' '}
           <strong>Read more...</strong>
           <span>
-            Contrary to popular belief, Lorem Ipsum is not simply random text.
-            It has roots in a piece of classical Latin.
+            Upload your photos to{' '}
+            <a href="https://github.com/gatsbyjs/store.gatsbyjs.org/issues/143">
+              the official photo sharing issue
+            </a>{' '}
+            and it may be featured in the store!
           </span>
         </UserPhotoHint>
         <Toggle onClick={this.toggle}>
diff --git a/src/templates/ProductPageTemplate.js b/src/templates/ProductPageTemplate.js
index c6661070..5a249b97 100644
--- a/src/templates/ProductPageTemplate.js
+++ b/src/templates/ProductPageTemplate.js
@@ -5,12 +5,19 @@ import Helmet from 'react-helmet';
 import InterfaceContext from '../context/InterfaceContext';
 import ProductPage from '../components/ProductPage';
 
+const removeCareInstructions = desc =>
+  desc.split(/Care Instructions/).slice(0, 1);
+
 const ProductPageTemplate = props => {
   const {
+    site,
     shopifyProduct: product,
-    shopifyProduct: { title }
+    shopifyProduct: { title, description: fullDescription, handle }
   } = props.data;
 
+  const description = removeCareInstructions(fullDescription);
+  const image = product.images[0].localFile.childImageSharp.fluid.src;
+
   return (
     <InterfaceContext.Consumer>
       {({
@@ -23,6 +30,29 @@ const ProductPageTemplate = props => {
         <>
           <Helmet>
             <title>{title}</title>
+
+            <meta name="description" content={description} />
+
+            <meta
+              property="og:url"
+              content={`${site.siteMetadata.siteUrl}/product/${handle}`}
+            />
+            <meta property="og:locale" content="en" />
+            <meta property="og:title" content={title} />
+            <meta property="og:site_name" content="Gatsby Swag Store" />
+            <meta property="og:description" content={description} />
+
+            {/* TODO: add the image */}
+            <meta
+              property="og:image"
+              content={`${site.siteMetadata.siteUrl}${image}`}
+            />
+            <meta property="og:image:alt" content={title} />
+            <meta property="og:image:width" content="600" />
+            <meta property="og:image:height" content="600" />
+
+            <meta name="twitter:card" content="summary" />
+            <meta name="twitter:site" content="@gatsbyjs" />
           </Helmet>
           <ProductPage
             product={product}
@@ -42,9 +72,17 @@ export default ProductPageTemplate;
 
 export const query = graphql`
   query($handle: String!) {
+    site {
+      siteMetadata {
+        siteUrl
+        title
+        description
+      }
+    }
     shopifyProduct(handle: { eq: $handle }) {
       id
       title
+      handle
       description
       productType
       variants {