Add Open Graph meta tags

64json · 64json · commit 61bee72dd30e · 2018-12-08T20:42:02.000-05:00
diff --git a/src/frontend/components/App/index.jsx b/src/frontend/components/App/index.jsx
@@ -248,10 +248,11 @@ class App extends React.Component {
 
   render() {
     const { navigatorOpened, workspaceWeights, editorTabIndex } = this.state;
+
     const files = getFiles(this.props.current);
     const titleArray = getTitleArray(this.props.current);
-
     const gistSaved = this.isGistSaved();
+    const title = `${gistSaved ? '' : '(Unsaved) '}${titleArray.join(' - ')}`;
     const description = this.getDescription();
     const file = files[editorTabIndex];
 
@@ -269,8 +270,10 @@ class App extends React.Component {
     return (
       <div className={styles.app}>
         <Helmet>
-          <title>{gistSaved ? '' : '(Unsaved) '}{titleArray.join(' - ')}</title>
+          <title>{title}</title>
           <meta name="description" content={description} />
+          <meta property="og:title" content={title} />
+          <meta property="og:description" content={description} />
         </Helmet>
         <Header className={styles.header} onClickTitleBar={() => this.toggleNavigatorOpened()}
                 navigatorOpened={navigatorOpened} loadScratchPapers={() => this.loadScratchPapers()}
diff --git a/src/frontend/template.html b/src/frontend/template.html
@@ -16,11 +16,13 @@
     <meta http-equiv="x-ua-compatible" content="ie=edge">
     <meta name="viewport" content="width=device-width">
     <meta name="theme-color" content="#393939">
+    <meta property="og:image" content="https://raw.githubusercontent.com/algorithm-visualizer/algorithm-visualizer/master/branding/screenshot.png" />
+    <meta property="og:site_name" content="Algorithm Visualizer" />
     <link rel="shortcut icon" href="/favicon.png" type="image/png">
     <link rel="manifest" href="/manifest.json">
     <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
 </head>
 <body>
 <div id="root" style="height: 100%"></div>
 </body>
-</html>
+</html>
