Update all OG meta

Author: Salma Alam-Naylor

apps/fretonator-web/src/app/common/meta/meta.service.spec.ts

@@ -15,6 +15,21 @@ describe('MetaService', () => {
     expect(metaService).toBeTruthy();
   });
 
+  it('should return the base title', () => {
+    const result = metaService.getBaseTitle();
+    expect(result).toBe('Fretonator - the ultimate interactive free guitar theory tool');
+  })
+
+  it('should return a generic end description', () => {
+    const result = metaService.getGenericEndDescription();
+    expect(result).toBe('Choose a starting note, pick a mode, check out the fretboard and have a jam!')
+  })
+
+  it('should return a home page url from given parameters', () => {
+    const result = metaService.generateHomePageUrl('c', 'natural', 'lydian');
+    expect(result).toBe('https://www.fretonator.com/c/natural/lydian');
+  })
+
   it('should call the fret map service for the title and return the correct string', () => {
     const result = metaService.generateHomePageTitle('c', 'natural', 'lydian');
     expect(result).toBe('Fretonator - the ultimate interactive free guitar theory tool | C Lydian');

apps/fretonator-web/src/app/common/meta/meta.service.ts

@@ -15,7 +15,13 @@ export class MetaService {
 
   getGenericEndDescription = (): string => {
     return 'Choose a starting note, pick a mode, check out the fretboard and have a jam!';
-  }
+  };
+
+  generateHomePageUrl = (note,
+                         noteExtenderString,
+                         mode): string => {
+    return 'https://www.fretonator.com/' + note + '/' + noteExtenderString + '/' + mode;
+  };
 
   generateHomePageTitle = (note,
                            noteExtenderString,

apps/fretonator-web/src/app/pages/about/about-index/about-index.component.ts

@@ -7,14 +7,38 @@ import { Meta, Title } from '@angular/platform-browser';
   styleUrls: ['./about-index.component.scss']
 })
 export class AboutIndexComponent implements OnInit {
+  pageDescription = 'Thanks for checking out the Fretonator! I’m a qualified music teacher that (somehow) ended up working as a lead software engineer (it’s a long story), and I built this for my husband.';
+  pageTitle = 'About the Fretonator - the ultimate interactive free guitar theory tool';
+  pageUrl = 'https://www.fretonator.com/about'
+
   constructor(private title: Title, private meta: Meta) {
   }
 
   ngOnInit(): void {
-    this.title.setTitle('About the Fretonator - the ultimate interactive free guitar theory tool');
+    this.title.setTitle(this.pageTitle);
     this.meta.updateTag({
       name: 'description',
-      content: "Thanks for checking out the Fretonator! I’m a qualified music teacher that (somehow) ended up working as a lead software engineer (it’s a long story), and I built this for my husband."
+      content: this.pageDescription
+    });
+
+    this.meta.updateTag({
+      property: 'og:url',
+      content: this.pageUrl
+    });
+
+    this.meta.updateTag({
+      name: 'twitter:description',
+      content: this.pageDescription
+    });
+
+    this.meta.updateTag({
+      property: 'og:description',
+      content: this.pageDescription
+    });
+
+    this.meta.updateTag({
+      property: 'og:title',
+      content: this.pageTitle
     });
   }
 }

apps/fretonator-web/src/app/pages/home/home-index/home-index.component.ts

@@ -21,7 +21,7 @@ export class HomeIndexComponent implements OnInit {
   modeSelectorObjects = ModeSelectorObjects;
   octave = Octave;
   showHowTo;
-  
+
   constructor(
     private title: Title,
     private meta: Meta,
@@ -35,7 +35,7 @@ export class HomeIndexComponent implements OnInit {
   ngOnInit(): void {
     this.activatedRoute.params.subscribe(() => this.onRouteChange());
     this.setHomePageTitle();
-    this.setHomePageMetaDescription();
+    this.setHomePageMeta();
 
     const _showHowTo = this.localStorage.getItem('showHowTo');
     switch (_showHowTo) {
@@ -70,7 +70,7 @@ export class HomeIndexComponent implements OnInit {
     }
 
     this.setHomePageTitle();
-    this.setHomePageMetaDescription();
+    this.setHomePageMeta();
   }
 
   toggleHowTo() {
@@ -84,10 +84,30 @@ export class HomeIndexComponent implements OnInit {
     );
   }
 
-  setHomePageMetaDescription() {
+  setHomePageMeta() {
     this.meta.updateTag({
       name: 'description',
       content: this.metaService.generateHomePageMetaDescription(this.note, this.noteExtenderString, this.mode)
     });
+    
+    this.meta.updateTag({
+      name: 'twitter:description',
+      content: this.metaService.generateHomePageMetaDescription(this.note, this.noteExtenderString, this.mode)
+    });
+
+    this.meta.updateTag({
+      property: 'og:description',
+      content: this.metaService.generateHomePageMetaDescription(this.note, this.noteExtenderString, this.mode)
+    });
+
+    this.meta.updateTag({
+      property: 'og:title',
+      content: this.metaService.generateHomePageTitle(this.note, this.noteExtenderString, this.mode)
+    });
+
+    this.meta.updateTag({
+      property: 'og:url',
+      content: this.metaService.generateHomePageUrl(this.note, this.noteExtenderString, this.mode)
+    });
   }
 }

apps/fretonator-web/src/index.html

@@ -2,9 +2,10 @@
 <html lang="en">
 <head>
   <meta charset="utf-8"/>
-  <title>Fretonator</title>
-  <base href="/"/>
   <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <base href="/"/>
+  <title>Fretonator - the ultimate interactive free guitar theory tool</title>
+  <meta name="description" content="Choose a starting note, pick a mode, check out the fretboard and have a jam!">
   <meta property="og:type" content="website">
   <meta property="og:title" content="Fretonator - the ultimate free guitar theory tool"/>
   <meta property="og:description"
@@ -26,7 +27,6 @@
   <link rel="manifest" href="manifest.webmanifest">
   <meta name="theme-color" content="#1a1a1a">
 
-
   <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-167450036-1"></script>
   <script>
     window.dataLayer = window.dataLayer || [];