Merge pull request #228 from valerymelou/fix/seo

fix: seo meta tags
valerymelou · Jul 15, 2024 · f65ca7d · f65ca7d
2 parents 914d229 + 394ee41
commit f65ca7d
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 30 deletions.
diff --git a/libs/blog/feature-home/src/lib/blog-home.component.ts b/libs/blog/feature-home/src/lib/blog-home.component.ts
@@ -21,18 +21,19 @@ export class BlogHomeComponent implements OnInit {
   articles$!: Observable<Results<Article>>;
 
   ngOnInit(): void {
-    this.metadataService.updateMetadata({
-      title: 'Inside my head | Valery Melou',
-      description:
-        'I talk about Django, Angular... Web Development in general and many other topics. These are just a few of the things in my head.',
-    });
     this.loadArticles();
   }
 
   constructor(
     private articleService: ArticleService,
-    private metadataService: MetadataService,
-  ) {}
+    metadataService: MetadataService,
+  ) {
+    metadataService.updateMetadata({
+      title: 'Inside my head | Valery Melou',
+      description:
+        'I talk about Django, Angular... Web Development in general and many other topics. These are just a few of the things in my head.',
+    });
+  }
 
   loadArticles(): void {
     this.articles$ = this.articleService.get({});

diff --git a/libs/pages/about/src/lib/about.component.ts b/libs/pages/about/src/lib/about.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MetadataService } from '@valerymelou/shared/seo';
 import { LinkComponent } from '@valerymelou/shared/ui';
@@ -9,11 +9,9 @@ import { LinkComponent } from '@valerymelou/shared/ui';
   imports: [CommonModule, LinkComponent],
   templateUrl: './about.component.html',
 })
-export class AboutComponent implements OnInit {
-  constructor(private metadataService: MetadataService) {}
-
-  ngOnInit(): void {
-    this.metadataService.updateMetadata({
+export class AboutComponent {
+  constructor(metadataService: MetadataService) {
+    metadataService.updateMetadata({
       title: 'About myself | Valery Melou',
       description:
         "I'm now specialized into web development. Building RESTfull APIs with Django and Python then, consuming those APIs with Angular and Typescript.",

diff --git a/libs/pages/home/src/lib/home.component.ts b/libs/pages/home/src/lib/home.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ButtonComponent } from '@valerymelou/shared/ui';
 import { MetadataService } from '@valerymelou/shared/seo';
@@ -11,11 +11,9 @@ import { RouterModule } from '@angular/router';
   templateUrl: './home.component.html',
   styles: ':host {display: flex; flex-direction: column; flex: 1;}',
 })
-export class HomeComponent implements OnInit {
-  constructor(private metadataService: MetadataService) {}
-
-  ngOnInit(): void {
-    this.metadataService.updateMetadata({
+export class HomeComponent {
+  constructor(metadataService: MetadataService) {
+    metadataService.updateMetadata({
       title: 'Home of Valery Melou',
       description:
         'I build beautiful, interactive and accessible experiences for web and mobile.',

diff --git a/libs/pages/projects/src/lib/projects.component.ts b/libs/pages/projects/src/lib/projects.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MetadataService } from '@valerymelou/shared/seo';
 
@@ -8,11 +8,9 @@ import { MetadataService } from '@valerymelou/shared/seo';
   imports: [CommonModule],
   templateUrl: './projects.component.html',
 })
-export class ProjectsComponent implements OnInit {
-  constructor(private metadataService: MetadataService) {}
-
-  ngOnInit(): void {
-    this.metadataService.updateMetadata({
+export class ProjectsComponent {
+  constructor(metadataService: MetadataService) {
+    metadataService.updateMetadata({
       title: 'Some of the things I have built | Valery Melou',
       description: 'Here are some of the projects I have worked on.',
     });

diff --git a/libs/shared/seo/src/lib/constants.ts b/libs/shared/seo/src/lib/constants.ts
@@ -6,6 +6,6 @@ export const DEFAULT_METADATA: PageMetadata = {
   description: 'Web developer from Yaounde, Cameroon',
   keywords: ['angular', 'django', 'angular', 'web', 'developer', 'yaounde'],
   type: 'website',
-  image: '/assets/images/logo.png',
+  image: '/assets/images/valerymelou.jpg',
   imageAlt: APP_NAME,
 };
diff --git a/libs/shared/seo/src/lib/metadata.service.ts b/libs/shared/seo/src/lib/metadata.service.ts
@@ -42,24 +42,30 @@ export class MetadataService {
   }
 
   private generateOgMetaDefinitions(metadata: PageMetadata): MetaDefinition[] {
+    const imageUrl = metadata.image.startsWith('http')
+      ? metadata.image
+      : window.location.origin + metadata.image;
     return [
       { name: 'og:url', content: window.location.href },
       { property: 'og:title', content: metadata.title },
       { property: 'og:description', content: metadata.description },
       { property: 'og:type', content: metadata.type },
-      { property: 'og:image', content: metadata.image },
-      { property: 'og:image:secure_url', content: metadata.image },
+      { property: 'og:image', content: imageUrl },
+      { property: 'og:image:secure_url', content: imageUrl },
       { property: 'og:image:alt', content: metadata.imageAlt },
     ];
   }
 
   private generateXMetaDefinitions(metadata: PageMetadata): MetaDefinition[] {
+    const imageUrl = metadata.image.startsWith('http')
+      ? metadata.image
+      : window.location.origin + metadata.image;
     return [
       { name: 'twitter:card', content: 'summary' },
       { name: 'twitter:site', content: '@valerymelou' },
       { name: 'twitter:title', content: metadata.title },
-      { name: 'twitter:description', content: metadata.description },
-      { name: 'twitter:image', content: metadata.image },
+      { name: 'twitter:description', content: imageUrl },
+      { name: 'twitter:image', content: imageUrl },
       { name: 'twitter:image:alt', content: metadata.imageAlt },
     ];
   }