From 394ee411faa8f542e5c5ed7755bf05f39bc860af Mon Sep 17 00:00:00 2001 From: Valery Melou Date: Sun, 14 Jul 2024 22:45:08 +0100 Subject: [PATCH] fix: seo meta tags --- .../feature-home/src/lib/blog-home.component.ts | 15 ++++++++------- libs/pages/about/src/lib/about.component.ts | 10 ++++------ libs/pages/home/src/lib/home.component.ts | 10 ++++------ libs/pages/projects/src/lib/projects.component.ts | 10 ++++------ libs/shared/seo/src/lib/constants.ts | 2 +- libs/shared/seo/src/lib/metadata.service.ts | 14 ++++++++++---- 6 files changed, 31 insertions(+), 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 index eb8f129..6b54303 100644 --- 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>; 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 index 6015023..9002882 100644 --- 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 index 9cb3eb5..8445b4b 100644 --- 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 index d480c05..510965d 100644 --- 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 index de2ee6c..de923ea 100644 --- 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 index c219b10..d39ef43 100644 --- 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 }, ]; }