Update page titles and meta tags

arbisyarifudin · Mar 12, 2024 · e0c7c04 · e0c7c04
1 parent 3fedd75
commit e0c7c04
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 3 deletions.
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -63,10 +63,16 @@ import ContactDialog from '~/components/ContactDialog.vue';
 // import { onClickOutside } from 'vue3-click-away'
 
 useHead({
-    title: 'Arsyaf.dev',
+    title: 'Arbi Syarifudin',
+    titleTemplate (title) {
+        return title ? `${title} - Arsyaf.dev` : 'Arsyaf.dev'
+    },
     meta: [
         { charset: 'utf-8' },
-        { name: 'viewport', content: 'width=device-width, initial-scale=1' }
+        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+        { name: 'description', content: '' },
+        { name: 'author', content: 'Arbi Syarifudin' },
+        { name: 'theme-color', content: '#000000' },
     ],
     htmlAttrs: {
         lang: 'id',

diff --git a/pages/blog/[slug].vue b/pages/blog/[slug].vue
@@ -67,6 +67,30 @@
     </div>
 </template>
 
+<script setup>
+useHead({
+    title: 'The Post Title is Here',
+    meta: [
+        {
+            name: 'description',
+            content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+        },
+        {
+            name: 'og:title',
+            content: 'The Post Title is Here'
+        },
+        {
+            name: 'og:description',
+            content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+        },
+        {
+            name: 'og:image',
+            content: 'https://via.placeholder.com/1280x500'
+        }
+    ]
+})
+</script>
+
 <style lang="scss" scoped>
 .blog-detail {
     background-color: #f9f5f2;

diff --git a/pages/blog/index.vue b/pages/blog/index.vue
@@ -46,6 +46,18 @@
     </div>
 </template>
 
+<script setup>
+useHead({
+    title: 'Blogs',
+    meta: [
+        {
+            name: 'description',
+            content: 'Here are some of the blog posts that Arbi Syarifudin has written.'
+        }
+    ]
+})
+</script>
+
 <style lang="scss" scoped>
 .blog {
     .blog-list {

diff --git a/pages/profile.vue b/pages/profile.vue
@@ -163,6 +163,24 @@
     </div>
 </template>
 
+<script setup>
+
+useHead({
+    title: 'Profile',
+    meta: [
+        {
+            name: 'description',
+            content: 'Arbi Syarifudin is a Full Stack Developer, loves to code and design. He is passionate about combining programming and design to create functional and visually appealing web solutions.'
+        },
+        {
+            name: 'keywords',
+            content: 'Arbi Syarifudin, Full Stack Developer, Web Developer, Software Engineer, Laravel, Vue Js, Nuxt Js, Quasar, React Js, Node Js, Express Js, Codeigniter 4, MySQL, PostgreSQL, MongoDB, RESTful API, Linux, Ubuntu, AWS, Google Cloud, Docker, CI/CD, Git, Github, Gitlab, Postman, Insomnia, VS Code, Figma, Agile Methodology, Unit Testing, Database Designing, UI/UX Design, SEO, Google Analytics, Web Security, Performance Optimization'
+        }
+    ]
+})
+
+</script>
+
 <style lang="scss" scoped>
 .profile {
     padding-top: 20px;

diff --git a/pages/service.vue b/pages/service.vue
@@ -3,7 +3,7 @@
         <div class="container">
             <section class="page-header">
                 <div class="page-title">My Services</div>
-                <p class="page-description">Here are the services I can provide.</p>
+                <p class="page-description">Here are the services that I can provide.</p>
             </section>
 
             <section class="service-list">
@@ -98,6 +98,16 @@
 
 <script setup>
 
+useHead({
+    title: 'Services',
+    meta: [
+        {
+            name: 'description',
+            content: 'Here are the services that Arbi Syarifudin can provide.'
+        }
+    ]
+})
+
 const openContactDialog = () => {
     const contactDialog = new bootstrap.Modal(document.getElementById('contactDialog'), { keyboard: false })
     contactDialog.show()

diff --git a/pages/work/[slug].vue b/pages/work/[slug].vue
@@ -103,6 +103,30 @@
     </div>
 </template>
 
+<script setup>
+useHead({
+    title: 'Project 1',
+    meta: [
+        {
+            name: 'description',
+            content: 'This is a project that Arbi Syarifudin worked on in 2019. It is a web development and design project.'
+        },
+        {
+            name: 'og:title',
+            content: 'Project 1'
+        },
+        {
+            name: 'og:description',
+            content: 'This is a project that Arbi Syarifudin worked on in 2019. It is a web development and design project.'
+        },
+        {
+            name: 'og:image',
+            content: 'https://via.placeholder.com/1280x400'
+        }
+    ]
+})
+</script>
+
 <style lang="scss" scoped>
 .work-detail {
     .page-hero {

diff --git a/pages/work/index.vue b/pages/work/index.vue
@@ -51,6 +51,18 @@
     </div>
 </template>
 
+<script setup>
+useHead({
+    title: 'Works',
+    meta: [
+        {
+            name: 'description',
+            content: 'Here are some of the projects that Arbi Syarifudin has worked on.'
+        }
+    ]
+})
+</script>
+
 <style lang="scss" scoped>
 .work {
     .work-list {