Open graph for Snack and example wrapper (#103)

Summary: Pull Request resolved: #103 Adding open graph `meta` elements to the Snack and example wrapper pages to render the Snack/example title/name on thumbnail generation Differential Revision: D38482624 fbshipit-source-id: 1c333f87faff3907ccec18de3628503a487eaed0
facebookresearch · Aug 6, 2022 · c7d6d9b · c7d6d9b
1 parent dc64c7b
commit c7d6d9b
Showing 1 changed file with 15 additions and 1 deletion.
diff --git a/website/src/components/ExpoSnackLandingPage.js b/website/src/components/ExpoSnackLandingPage.js
@@ -17,14 +17,28 @@ import RedirectStarterSnack from './RedirectStarterSnack';
 
 export default function ExpoSnackLandingPage({match}) {
   const {expoSnackPath} = match.params;
+  const title = React.useMemo(
+    () => `${expoSnackPath} | PlayTorch Snack`,
+    [expoSnackPath],
+  );
 
   if (expoSnackPath == null || expoSnackPath.length === 0) {
     return <RedirectStarterSnack />;
   }
 
   return (
     <div>
-      <Head title={`${expoSnackPath} | PlayTorch Snack`} />
+      <Head title={title}>
+        <meta property="og:title" content={title} />
+        <meta name="description" content={title} />
+        <meta property="og:description" content={title} />
+        <link
+          rel="search"
+          type="application/opensearchdescription+xml"
+          title={title}
+          href="/opensearch.xml"
+        />
+      </Head>
       <LandingPageHeader
         heroTitle={expoSnackPath}
         nameOfSharedItem="snack"