Merge pull request #76 from saviomartin/dev

atapas · web-flow · commit ee3cf1603dd2 · 2021-07-03T17:15:39.000+05:30
Feat: Add meta tags
diff --git a/components/core/MetaTags.js b/components/core/MetaTags.js
@@ -0,0 +1,71 @@
+// head
+import Head from "next/head";
+
+const MetaTags = () => {
+  return (
+    <Head>
+      <meta
+        name="apple-mobile-web-app-status-bar-style"
+        content="black-translucent"
+      />
+      <meta name="theme-color" content="#645AD3" />
+
+      <title>TryShape - Create, Export, Share, and Use any Shapes of your choice.</title>
+      <meta
+        name="description"
+        content="TryShape is an opensource platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS."
+      />
+      <meta
+        name="keywords"
+        content="tryshape, tryshape tapas, tyshape github, css, css clip path, shapes, css shapes, github shapes, clippy, clip path shapes, types of shapes, css clip path shape, shape tool, generate css shapes, tyshape easy"
+      />
+      <link rel="canonical" href="https://tryshape.now.sh/" />
+      <link rel="apple-touch-icon" href="/favicon.ico" />
+      <link rel="icon" href="/favicon.ico" />
+
+      {/* Primary Meta Tags */}
+      <meta
+        name="title"
+        content="TryShape - Create, Export, Share, and Use any Shapes of your choice."
+      />
+      <meta
+        name="description"
+        content="TryShape is an opensource platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS."
+      />
+
+      {/* Open Graph / Facebook */}
+      <meta property="og:type" content="website" />
+      <meta property="og:url" content="https://tryshape.now.sh/" />
+      <meta
+        property="og:title"
+        content="TryShape - Create, Export, Share, and Use any Shapes of your choice."
+      />
+      <meta
+        property="og:description"
+        content="TryShape is an opensource platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS."
+      />
+      <meta
+        property="og:image"
+        content="https://tryshape.vercel.app/readme/landing.png"
+      />
+
+      {/* Twitter */}
+      <meta property="twitter:card" content="summary_large_image" />
+      <meta property="twitter:url" content="https://tryshape.now.sh/" />
+      <meta
+        property="twitter:title"
+        content="TryShape - Create, Export, Share, and Use any Shapes of your choice."
+      />
+      <meta
+        property="twitter:description"
+        content="TryShape is an opensource platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS."
+      />
+      <meta
+        property="twitter:image"
+        content="https://tryshape.vercel.app/readme/landing.png"
+      />
+    </Head>
+  );
+};
+
+export default MetaTags;
diff --git a/components/index.js b/components/index.js
@@ -6,6 +6,7 @@ export { default as ExportShape } from "./core/ExportShape";
 export { default as CreateShape } from "./core/CreateShape";
 export { default as CopyShapeSource } from "./core/CopyShapeSource";
 export { default as DeleteShape } from "./core/DeleteShape";
+export { default as MetaTags } from "./core/MetaTags";
 
 // utils
 export { default as Header } from "./utils/Header";
diff --git a/pages/_app.js b/pages/_app.js
@@ -11,7 +11,7 @@ import { Toaster } from "react-hot-toast";
 import { auth } from "../utils/firebase";
 
 // SignIn modal
-import { SignInModal } from '../components';
+import { SignInModal, MetaTags } from '../components';
 
 
 export default function App({ Component, pageProps }) {
@@ -34,8 +34,8 @@ export default function App({ Component, pageProps }) {
   });
 
   return (
-    
     <>
+      <MetaTags />
       <Toaster position="bottom-right" reverseOrder={false} />
       <Component {...pageProps} {...props} />
       <SignInModal open={open} setOpen={setOpen} />
