Add meta tags for SEO

shuhanmirza · May 26, 2023 · 44907d7 · 44907d7
1 parent a508d76
commit 44907d7
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 19 deletions.
diff --git a/surelink-vue/src/App.vue b/surelink-vue/src/App.vue
@@ -1,5 +1,11 @@
 <template>
   <div id="app">
+    <meta name="title" content="SureLink - Free Link Shortener" />
+    <meta name="description" content="It is a short link generator tool that helps you generate tinyurls. It provides security from harmful links and makes the urls human friendly" />
+    <meta name="keywords" content="url shortener free, bitly url shortener, google short url, tinyurl generator, url shorten" />
+    <meta property="og:title" content="SureLink - Free Link Shortener" />
+    <meta property="og:description" content="It is a short link generator tool that helps you generate tinyurls. It provides security from harmful links and makes the urls human friendly" />
+    <meta property="og:image" content="https://surel.ink/img/logo.b4c96294.svg" />
     <router-view/>
   </div>
 </template>

diff --git a/surelink-vue/src/components/Navbar.vue b/surelink-vue/src/components/Navbar.vue
@@ -1,38 +1,37 @@
 <template>
-  <nav class="navbar is-transparent" role="navigation" aria-label="main navigation">
-    <div class="navbar-brand columns">
-      <a class="column is-3" href="/">
-        <img src="../../src/assets/images/logo.svg" width="32" height="32"> SureLink
-      </a>
-    </div>
-  </nav>
+    <nav class="navbar is-transparent" role="navigation" aria-label="main navigation">
+        <div class="navbar-brand">
+            <a href="/">
+                <img src="../../src/assets/images/logo.svg" width="32" height="32"> SureLink
+            </a>
+        </div>
+    </nav>
 </template>
 <script>
 export default {
-  name: 'Navbar'
+    name: 'Navbar'
 }
 </script>
 <style>
 .navbar .navbar-brand {
-  text-align: center;
-  display: block;
-  width: 100%;
+    text-align: center;
+    display: block;
+    width: 100%;
 }
 
 nav.navbar {
-  min-height: unset;
-  height: 0;
-  font-family: 'Roboto';
-  padding: 0;
-
+    min-height: unset;
+    height: 0;
+    font-family: 'Roboto';
+    padding: 0;
 }
 
 a {
-  text-decoration: none !important;
+    text-decoration: none !important;
 }
 
-.navbar .navbar-brand>.navbar-item,
+.navbar .navbar-brand > .navbar-item,
 .navbar .navbar-brand {
-  display: inline-block;
+    display: inline-block;
 }
 </style>