Extract LD product metadata, and apply it just to product landing pages

httptoolkit · Dec 6, 2023 · 008a390 · 008a390
1 parent 83ffe1b
commit 008a390
Show file tree

Hide file tree

Showing 13 changed files with 74 additions and 35 deletions.
diff --git a/src/components/layout.jsx b/src/components/layout.jsx
@@ -240,41 +240,6 @@ export class Layout extends React.Component {
 
           <link rel="privacy-policy" href="/privacy-policy/" />
           <link rel="terms-of-service" href="/terms-of-service/" />
-
-          <script type="application/ld+json">
-          {JSON.stringify({
-              "@context": "https://schema.org",
-              "@type": "SoftwareApplication",
-              "image": "https://httptoolkit.com/logo-square.png",
-              "screenshot": "https://httptoolkit.com/screenshot.png",
-              "dateModified": siteMetadata.latestSiteUpdate, // Bit hacky - we should really pull this from the GH releases API
-              "video": {
-                "@type": "VideoObject",
-                "name": "HTTP Toolkit",
-                "description": "A short demo of HTTP Toolkit in action",
-                "contentUrl": "https://httptoolkit.com/http-mock-demo.mp4",
-                "thumbnailUrl": "https://httptoolkit.com/http-mock-demo-thumbnail.png",
-                "uploadDate": "2019-09-25T00:00:00Z"
-              },
-              "name": "HTTP Toolkit",
-              "description": "Beautiful & open-source tools to debug, test and develop with HTTP(S)",
-              "softwareVersion": siteMetadata.latestAppVersion,
-              "operatingSystem": [
-                  "Windows",
-                  "Mac",
-                  "Linux",
-                  "Android"
-              ],
-              "url": "https://httptoolkit.com/",
-              "downloadUrl": "https://httptoolkit.com/",
-              "applicationCategory": "DeveloperApplication",
-              "offers": {
-                  "@type": "Offer",
-                  "price": "0",
-                  "priceCurrency": "USD"
-              }
-          })}
-          </script>
         </Helmet>
 
         <Header {...visibilityProps}>

diff --git a/src/components/product-ld-data.jsx b/src/components/product-ld-data.jsx
@@ -0,0 +1,52 @@
+import React from 'react';
+
+import { siteMetadata } from '../../gatsby-config.js';
+
+export const ProductLdData = () => <script type="application/ld+json">{
+    JSON.stringify({
+        "@context": "https://schema.org",
+        "@type": ["SoftwareApplication", "WebApplication", "MobileApplication"],
+        "image": "https://httptoolkit.com/logo-square.png",
+        "screenshot": "https://httptoolkit.com/screenshot.png",
+        "dateModified": siteMetadata.latestSiteUpdate, // Bit hacky - we should really pull this from the GH releases API
+        "video": {
+            "@type": "VideoObject",
+            "name": "HTTP Toolkit",
+            "description": "A short demo of HTTP Toolkit in action",
+            "contentUrl": "https://httptoolkit.com/http-mock-demo.mp4",
+            "thumbnailUrl": "https://httptoolkit.com/http-mock-demo-thumbnail.png",
+            "uploadDate": "2019-09-25T00:00:00Z"
+        },
+        "name": "HTTP Toolkit",
+        "description": "Beautiful & open-source tools to debug, test and develop with HTTP(S)",
+        "softwareVersion": siteMetadata.latestAppVersion,
+        "operatingSystem": [
+            "Windows",
+            "Mac",
+            "Linux",
+            "Android"
+        ],
+        "aggregateRating": {
+            "@type": "AggregateRating",
+            "ratingValue": "5",
+            "reviewCount": "33" // Update as new testimonials are added
+        },
+        "url": "https://httptoolkit.com/",
+        "downloadUrl": [
+            "https://httptoolkit.com/download/win-exe/",
+            "https://httptoolkit.com/download/win-standalone/",
+            "https://httptoolkit.com/download/win-winget/",
+            "https://httptoolkit.com/download/linux-deb/",
+            "https://httptoolkit.com/download/linux-standalone/",
+            "https://httptoolkit.com/download/linux-aur/",
+            "https://httptoolkit.com/download/osx-dmg/",
+            "https://httptoolkit.com/download/osx-homebrew/"
+        ],
+        "applicationCategory": "DeveloperApplication",
+        "offers": {
+            "@type": "Offer",
+            "price": "0",
+            "priceCurrency": "USD"
+        }
+    })
+}</script>;
diff --git a/src/pages/android.jsx b/src/pages/android.jsx
@@ -8,6 +8,7 @@ import { EmailSignupModal } from '../components/email-signup-modal';
 import { StandaloneDownloadCTA } from '../components/cta';
 import { AndroidDemoVideo } from '../components/per-target/android-demo-video';
 import { SectionSpacer } from '../components/section-spacer';
+import { ProductLdData } from '../components/product-ld-data.jsx';
 
 import { TopHeroContainer, Pitch } from '../components/pitch/leading-pitch';
 import { Description } from '../components/pitch/description';
@@ -42,6 +43,7 @@ export default class JSPage extends React.Component {
                 <meta property="og:image" content={siteMetadata.siteUrl + 'screenshot-social.png'} />
                 <meta name="twitter:image" content={siteMetadata.siteUrl + 'screenshot-social.png'} />
                 <meta name="twitter:card" content="summary_large_image" />
+                { ProductLdData() }
             </Helmet>
             <TopHeroContainer>
                 <Pitch target='Android' />

diff --git a/src/pages/charles-alternative.jsx b/src/pages/charles-alternative.jsx
@@ -11,6 +11,7 @@ import { Layout } from '../components/layout';
 import { EmailSignupModal } from '../components/email-signup-modal';
 import { StandaloneDownloadCTA } from '../components/cta';
 import { DemoVideo } from '../components/demo-video';
+import { ProductLdData } from '../components/product-ld-data.jsx';
 
 import { TopHeroContainer } from '../components/pitch/leading-pitch';
 import { FuturePlans } from '../components/pitch/future-plans';
@@ -143,6 +144,7 @@ export default class CharlesAlternativePage extends React.Component {
                 <meta property="og:image" content={siteMetadata.siteUrl + 'screenshot-social.png'} />
                 <meta name="twitter:image" content={siteMetadata.siteUrl + 'screenshot-social.png'} />
                 <meta name="twitter:card" content="summary_large_image" />
+                { ProductLdData() }
             </Helmet>
             <TopHeroContainer>
                 <Heading>

diff --git a/src/pages/chrome-devtools-alternative.jsx b/src/pages/chrome-devtools-alternative.jsx
@@ -11,6 +11,7 @@ import { Layout } from '../components/layout';
 import { EmailSignupModal } from '../components/email-signup-modal';
 import { StandaloneDownloadCTA } from '../components/cta';
 import { DemoVideo } from '../components/demo-video';
+import { ProductLdData } from '../components/product-ld-data.jsx';
 
 import { TopHeroContainer } from '../components/pitch/leading-pitch';
 import { FuturePlans } from '../components/pitch/future-plans';
@@ -143,6 +144,7 @@ export default class CharlesAlternativePage extends React.Component {
                 <meta property="og:image" content={siteMetadata.siteUrl + 'screenshot-social.png'} />
                 <meta name="twitter:image" content={siteMetadata.siteUrl + 'screenshot-social.png'} />
                 <meta name="twitter:card" content="summary_large_image" />
+                { ProductLdData() }
             </Helmet>
             <TopHeroContainer>
                 <Heading>

diff --git a/src/pages/docker.jsx b/src/pages/docker.jsx
@@ -9,6 +9,7 @@ import { EmailSignupModal } from '../components/email-signup-modal';
 import { StandaloneDownloadCTA } from '../components/cta';
 import { DemoVideo } from '../components/demo-video';
 import { SectionSpacer } from '../components/section-spacer';
+import { ProductLdData } from '../components/product-ld-data.jsx';
 
 import { TopHeroContainer, Pitch } from '../components/pitch/leading-pitch';
 import { Description } from '../components/pitch/description';
@@ -98,6 +99,7 @@ export default class DockerPage extends React.Component {
                 <meta property="og:image" content={siteMetadata.siteUrl + 'screenshot-social.png'} />
                 <meta name="twitter:image" content={siteMetadata.siteUrl + 'screenshot-social.png'} />
                 <meta name="twitter:card" content="summary_large_image" />
+                { ProductLdData() }
             </Helmet>
             <TopHeroContainer>
                 <Pitch target='Docker' />

diff --git a/src/pages/electron.jsx b/src/pages/electron.jsx
@@ -8,6 +8,7 @@ import { EmailSignupModal } from '../components/email-signup-modal';
 import { StandaloneDownloadCTA } from '../components/cta';
 import { DemoVideo } from '../components/demo-video';
 import { SectionSpacer } from '../components/section-spacer';
+import { ProductLdData } from '../components/product-ld-data.jsx';
 
 import { TopHeroContainer, Pitch } from '../components/pitch/leading-pitch';
 import { Description } from '../components/pitch/description';
@@ -41,6 +42,7 @@ export default class ElectronPage extends React.Component {
                 <meta property="og:image" content={siteMetadata.siteUrl + 'screenshot-social.png'} />
                 <meta name="twitter:image" content={siteMetadata.siteUrl + 'screenshot-social.png'} />
                 <meta name="twitter:card" content="summary_large_image" />
+                { ProductLdData() }
             </Helmet>
             <TopHeroContainer>
                 <Pitch target='Electron' />

diff --git a/src/pages/fiddler-alternative.jsx b/src/pages/fiddler-alternative.jsx
@@ -11,6 +11,7 @@ import { Layout } from '../components/layout';
 import { EmailSignupModal } from '../components/email-signup-modal';
 import { StandaloneDownloadCTA } from '../components/cta';
 import { DemoVideo } from '../components/demo-video';
+import { ProductLdData } from '../components/product-ld-data.jsx';
 
 import { TopHeroContainer } from '../components/pitch/leading-pitch';
 import { FuturePlans } from '../components/pitch/future-plans';
@@ -143,6 +144,7 @@ export default class FiddlerAlternativePage extends React.Component {
                 <meta property="og:image" content={siteMetadata.siteUrl + 'screenshot-social.png'} />
                 <meta name="twitter:image" content={siteMetadata.siteUrl + 'screenshot-social.png'} />
                 <meta name="twitter:card" content="summary_large_image" />
+                { ProductLdData() }
             </Helmet>
             <TopHeroContainer>
                 <Heading>

diff --git a/src/pages/index.jsx b/src/pages/index.jsx
@@ -7,6 +7,7 @@ import { Layout } from '../components/layout';
 import { EmailSignupModal } from '../components/email-signup-modal';
 import { StandaloneDownloadCTA } from '../components/cta';
 import { DemoVideo } from '../components/demo-video';
+import { ProductLdData } from '../components/product-ld-data.jsx';
 
 import { TopHeroContainer, Pitch } from '../components/pitch/leading-pitch';
 import { Description } from '../components/pitch/description';
@@ -34,6 +35,7 @@ export default class IndexPage extends React.Component {
                 <meta property="og:image" content={siteMetadata.siteUrl + 'screenshot-social.png'} />
                 <meta name="twitter:image" content={siteMetadata.siteUrl + 'screenshot-social.png'} />
                 <meta name="twitter:card" content="summary_large_image" />
+                { ProductLdData() }
             </Helmet>
             <TopHeroContainer>
                 <Pitch />

diff --git a/src/pages/java.jsx b/src/pages/java.jsx
@@ -9,6 +9,7 @@ import { EmailSignupModal } from '../components/email-signup-modal';
 import { StandaloneDownloadCTA } from '../components/cta';
 import { DemoVideo } from '../components/demo-video';
 import { SectionSpacer } from '../components/section-spacer';
+import { ProductLdData } from '../components/product-ld-data.jsx';
 
 import { TopHeroContainer, Pitch } from '../components/pitch/leading-pitch';
 import { Description } from '../components/pitch/description';
@@ -107,6 +108,7 @@ export default class JavaPage extends React.Component {
                 <meta property="og:image" content={siteMetadata.siteUrl + 'screenshot-social.png'} />
                 <meta name="twitter:image" content={siteMetadata.siteUrl + 'screenshot-social.png'} />
                 <meta name="twitter:card" content="summary_large_image" />
+                { ProductLdData() }
             </Helmet>
             <TopHeroContainer>
                 <Pitch target='Java' />

diff --git a/src/pages/javascript.jsx b/src/pages/javascript.jsx
@@ -8,6 +8,7 @@ import { EmailSignupModal } from '../components/email-signup-modal';
 import { StandaloneDownloadCTA } from '../components/cta';
 import { DemoVideo } from '../components/demo-video';
 import { SectionSpacer } from '../components/section-spacer';
+import { ProductLdData } from '../components/product-ld-data.jsx';
 
 import { TopHeroContainer, Pitch } from '../components/pitch/leading-pitch';
 import { Description } from '../components/pitch/description';
@@ -45,6 +46,7 @@ export default class JSPage extends React.Component {
                 <meta property="og:image" content={siteMetadata.siteUrl + 'screenshot-social.png'} />
                 <meta name="twitter:image" content={siteMetadata.siteUrl + 'screenshot-social.png'} />
                 <meta name="twitter:card" content="summary_large_image" />
+                { ProductLdData() }
             </Helmet>
             <TopHeroContainer>
                 <Pitch target='JavaScript' />

diff --git a/src/pages/python.jsx b/src/pages/python.jsx
@@ -8,6 +8,7 @@ import { EmailSignupModal } from '../components/email-signup-modal';
 import { StandaloneDownloadCTA } from '../components/cta';
 import { DemoVideo } from '../components/demo-video';
 import { SectionSpacer } from '../components/section-spacer';
+import { ProductLdData } from '../components/product-ld-data.jsx';
 
 import { TopHeroContainer, Pitch } from '../components/pitch/leading-pitch';
 import { Description } from '../components/pitch/description';
@@ -43,6 +44,7 @@ export default class PythonPage extends React.Component {
                 <meta property="og:image" content={siteMetadata.siteUrl + 'screenshot-social.png'} />
                 <meta name="twitter:image" content={siteMetadata.siteUrl + 'screenshot-social.png'} />
                 <meta name="twitter:card" content="summary_large_image" />
+                { ProductLdData() }
             </Helmet>
             <TopHeroContainer>
                 <Pitch target='Python' />

diff --git a/src/pages/ruby.jsx b/src/pages/ruby.jsx
@@ -8,6 +8,7 @@ import { EmailSignupModal } from '../components/email-signup-modal';
 import { StandaloneDownloadCTA } from '../components/cta';
 import { DemoVideo } from '../components/demo-video';
 import { SectionSpacer } from '../components/section-spacer';
+import { ProductLdData } from '../components/product-ld-data.jsx';
 
 import { TopHeroContainer, Pitch } from '../components/pitch/leading-pitch';
 import { Description } from '../components/pitch/description';
@@ -43,6 +44,7 @@ export default class RubyPage extends React.Component {
                 <meta property="og:image" content={siteMetadata.siteUrl + 'screenshot-social.png'} />
                 <meta name="twitter:image" content={siteMetadata.siteUrl + 'screenshot-social.png'} />
                 <meta name="twitter:card" content="summary_large_image" />
+                { ProductLdData() }
             </Helmet>
             <TopHeroContainer>
                 <Pitch target='Ruby' />