Fix og link

premieroctet · Feb 12, 2020 · c27340a · c27340a
1 parent 7e72726
commit c27340a
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 55 deletions.
diff --git a/public/index.html b/public/index.html
@@ -2,49 +2,63 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Visual editor for Chakra UI " />
-    <link
-      rel="apple-touch-icon"
-      sizes="180x180"
-      href="%PUBLIC_URL%/apple-touch-icon.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="32x32"
-      href="%PUBLIC_URL%/favicon-32x32.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="16x16"
-      href="%PUBLIC_URL%/favicon-16x16.png"
-    />
-    <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="manifest" href="/site.webmanifest" />
     <meta name="msapplication-TileColor" content="#da532c" />
     <meta name="theme-color" content="#ffffff" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
     <title>OpenChakra</title>
     <meta name="description" content="React JSX visual editor for Chakra UI" />
+    <meta
+      name="image"
+      content="https://openchakra.app/images/og-graph-color.png"
+    />
+
+    <!-- OpenGraph tags -->
+    <meta property="og:url" content="https://openchakra.app" />
+    <meta property="og:site_name" content="OpenChakra" />
+    <meta property="og:type" content="website" />
     <meta property="og:title" content="OpenChakra" />
     <meta
       property="og:description"
-      content="React JSX visual editor for Chakra UI"
+      content="OpenChakra is a visual editor for React based on Chakra UI"
     />
-    <meta property="og:type" content="website" />
-    <meta property="og:url" content="%PUBLIC_URL%" />
     <meta
-      property="og:image:url"
-      content="%PUBLIC_URL%/images/og-graph-color.png"
+      property="og:image"
+      name="twitter:image"
+      content="https://openchakra.app/images/og-graph-color.png"
+    />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="600" />
+
+    <!-- Twitter Card tags -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="OpenChakra" />
+    <meta
+      name="twitter:description"
+      content="OpenChakra is a visual editor for React based on Chakra UI"
     />
-    <meta property="og:image:url:width" content="1200" />
-    <meta property="og:image:url:height" content="600" />
     <meta
       name="twitter:image"
-      content="%PUBLIC_URL%/images/og-graph-color.png"
+      content="https://openchakra.app/images/og-graph-color.png"
+    />
+
+    <meta property="og:title" content="OpenChakra" />
+    <meta
+      property="og:description"
+      content="OpenChakra is a visual editor for React based on Chakra UI"
+    />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://openchakra.app" />
+    <meta
+      property="og:image:url"
+      content="https://openchakra.app/images/og-graph-color.png"
     />
   </head>
   <body>

diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -1,6 +1,6 @@
 {
-  "name": "",
-  "short_name": "",
+  "name": "OpenChakra",
+  "short_name": "React JSX visual editor for Chakra UI",
   "icons": [
     {
       "src": "/android-chrome-192x192.png",