diff --git a/client/src/app/view/about/about.component.ts b/client/src/app/view/about/about.component.ts
index 3c2bba3..93471ee 100644
--- a/client/src/app/view/about/about.component.ts
+++ b/client/src/app/view/about/about.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import {VersionService} from "../../service/version.service";
+import {Meta,Title} from "@angular/platform-browser";
 
 @Component({
   selector: 'app-about',
@@ -9,12 +10,19 @@ import {VersionService} from "../../service/version.service";
 export class AboutComponent implements OnInit {
 
   constructor(
-    private versionService:VersionService
+    private versionService:VersionService,
+    private titleService:Title,
+    private metaService:Meta
   ) { }
 
   commit:any;
   Version:string;
   ngOnInit() {
+    this.titleService.setTitle('About Us - Starry Sea Volunteers Association');
+    this.metaService.updateTag({content:'/assets/icons/starrysea-512x512.png'}, "property='og:image'");
+    this.metaService.updateTag({content: 'About Us - Starry Sea Volunteers Association'}, "property='og:title'");
+    this.metaService.updateTag({content: 'About Starry Sea Volunteers Association'}, "property='og:description'");
+    this.metaService.updateTag({content: 'About Starry Sea Volunteers Association'}, "name='description'");
     this.versionService.getLatestCommit()
       .subscribe(data=>{
         if(data.json().success){
diff --git a/client/src/app/view/activity-detail/activity-detail.component.ts b/client/src/app/view/activity-detail/activity-detail.component.ts
index 6143f99..a8000da 100644
--- a/client/src/app/view/activity-detail/activity-detail.component.ts
+++ b/client/src/app/view/activity-detail/activity-detail.component.ts
@@ -3,6 +3,7 @@ import {ActivityService} from "../../service/activity.service";
 import {ActivatedRoute, Router} from "@angular/router";
 import {FundingService} from "../../service/funding.service";
 import {environment} from "../../../environments/environment";
+import {Meta, Title} from "@angular/platform-browser";
 
 @Component({
   selector: 'app-activity-detail',
@@ -16,6 +17,8 @@ export class ActivityDetailComponent implements OnInit {
     private fundingService:FundingService,
     private route:ActivatedRoute,
     private router:Router,
+    private metaService:Meta,
+    private titleService:Title
   ) { }
 
   activityId:string;
@@ -30,6 +33,11 @@ export class ActivityDetailComponent implements OnInit {
         if(data.json().success){
           this.activityData = data.json().response;
           this.content = data.json().response.content.replace(/\n/g, "<br/>");
+          this.titleService.setTitle(data.json().response.name+' - Starry Sea Volunteers Association');
+          this.metaService.updateTag({content: environment.apiBase+'/static/activity/'+data.json().response.cover}, "property='og:image'");
+          this.metaService.updateTag({content: data.json().response.name+' - Starry Sea Volunteers Association'}, "property='og:title'");
+          this.metaService.updateTag({content: data.json().response.summary}, "property='og:description'");
+          this.metaService.updateTag({content: data.json().response.summary}, "name='description'");
           this.fundingService.fetchFundingList(this.activityId)
             .subscribe(funding=>{
               this.fundArr = funding.json().response.record;
diff --git a/client/src/app/view/activity/activity.component.ts b/client/src/app/view/activity/activity.component.ts
index 3798500..9c22639 100644
--- a/client/src/app/view/activity/activity.component.ts
+++ b/client/src/app/view/activity/activity.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import {ActivityService} from "../../service/activity.service";
 import {environment} from "../../../environments/environment";
+import {Meta, Title} from "@angular/platform-browser";
 
 @Component({
   selector: 'app-activity',
@@ -10,12 +11,19 @@ import {environment} from "../../../environments/environment";
 export class ActivityComponent implements OnInit {
 
   constructor(
-    private activityService:ActivityService
+    private activityService:ActivityService,
+    private metaService:Meta,
+    private titleService:Title
   ) { }
 
   activityArr:Array<any>;
   apiBase:string = environment.apiBase;
   ngOnInit() {
+    this.titleService.setTitle('Activities - Starry Sea Volunteers Association');
+    this.metaService.updateTag({content:'/assets/icons/starrysea-512x512.png'}, "property='og:image'");
+    this.metaService.updateTag({content: 'Activities - Starry Sea Volunteers Association'}, "property='og:title'");
+    this.metaService.updateTag({content: 'All Activities from Starry Sea'}, "property='og:description'");
+    this.metaService.updateTag({content: 'All Activities from Starry Sea'}, "name='description'");
     this.activityService.fetchActivityList(1,99)
       .subscribe(data=>{
         this.activityArr = data.json().response
diff --git a/client/src/app/view/home/home.component.ts b/client/src/app/view/home/home.component.ts
index 33fd770..0350277 100644
--- a/client/src/app/view/home/home.component.ts
+++ b/client/src/app/view/home/home.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import {Meta, Title} from "@angular/platform-browser";
 
 @Component({
   selector: 'app-home',
@@ -7,9 +8,17 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HomeComponent implements OnInit {
 
-  constructor() { }
+  constructor(
+    private titleService:Title,
+    private metaService:Meta
+  ) { }
 
   ngOnInit() {
+    this.titleService.setTitle('Starry Sea Volunteers Association');
+    this.metaService.updateTag({content:'/assets/icons/starrysea-512x512.png'}, "property='og:image'");
+    this.metaService.updateTag({content: 'Starry Sea Volunteers Association'}, "property='og:title'");
+    this.metaService.updateTag({content: ''}, "property='og:description'");
+    this.metaService.updateTag({content: 'We Are Starry Sea Volunteers Association'}, "name='description'");
   }
 
 }
diff --git a/client/src/app/view/qa/qa.component.ts b/client/src/app/view/qa/qa.component.ts
index ee31ab3..78f7265 100644
--- a/client/src/app/view/qa/qa.component.ts
+++ b/client/src/app/view/qa/qa.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import {QaService} from "../../service/qa.service";
+import {Meta, Title} from "@angular/platform-browser";
 declare var swal:any;
 @Component({
   selector: 'app-qa',
@@ -9,7 +10,9 @@ declare var swal:any;
 export class QaComponent implements OnInit {
 
   constructor(
-    private qaService:QaService
+    private qaService:QaService,
+    private titleService:Title,
+    private metaService:Meta
   ) { }
 
   QaList:Array<any>;
@@ -19,6 +22,11 @@ export class QaComponent implements OnInit {
       .subscribe(data=>{
         this.QaList = data.json().response;
       })
+    this.titleService.setTitle('Question & Answer - Starry Sea Volunteers Association');
+    this.metaService.updateTag({content:'/assets/icons/starrysea-512x512.png'}, "property='og:image'");
+    this.metaService.updateTag({content: 'Question & Answer - Starry Sea Volunteers Association'}, "property='og:title'");
+    this.metaService.updateTag({content: 'Question & Answer from Starry Sea'}, "property='og:description'");
+    this.metaService.updateTag({content: 'Question & Answer from Starry Sea'}, "name='description'");
   }
 
   askQuestion() {
diff --git a/client/src/app/view/work-detail/work-detail.component.ts b/client/src/app/view/work-detail/work-detail.component.ts
index 2594aae..f42968b 100644
--- a/client/src/app/view/work-detail/work-detail.component.ts
+++ b/client/src/app/view/work-detail/work-detail.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import {WorkService} from "../../service/work.service";
 import {ActivatedRoute, Router} from "@angular/router";
 import {environment} from "../../../environments/environment";
+import {Meta, Title} from "@angular/platform-browser";
 
 @Component({
   selector: 'app-work-detail',
@@ -13,7 +14,9 @@ export class WorkDetailComponent implements OnInit {
   constructor(
     private workService:WorkService,
     private route:ActivatedRoute,
-    private router:Router
+    private router:Router,
+    private titleService:Title,
+    private metaService:Meta
   ) { }
 
   workId:string;
@@ -26,6 +29,11 @@ export class WorkDetailComponent implements OnInit {
       .subscribe(data=>{
         if(data.json().success){
           this.workData = data.json().response;
+          this.titleService.setTitle(data.json().response.name+' - Starry Sea Volunteers Association');
+          this.metaService.updateTag({content: environment.apiBase+'/static/work/'+data.json().response.file.cover}, "property='og:image'");
+          this.metaService.updateTag({content: data.json().response.name+' - Starry Sea Volunteers Association'}, "property='og:title'");
+          this.metaService.updateTag({content: data.json().response.summary}, "property='og:description'");
+          this.metaService.updateTag({content: data.json().response.summary}, "name='description'");
         }else{
           this.router.navigate(['/','404'])
         }
diff --git a/client/src/app/view/work/work.component.html b/client/src/app/view/work/work.component.html
index 61861ab..9d6e045 100644
--- a/client/src/app/view/work/work.component.html
+++ b/client/src/app/view/work/work.component.html
@@ -1,6 +1,6 @@
 <div class="container">
   <div class="title">
-    <h2 class="h1">Works Galley</h2>
+    <h2 class="h1">Works Gallery</h2>
   </div>
   <div class="work" *ngIf="workArr">
     <div class="col-sm-12" *ngFor="let work of workArr">
@@ -18,4 +18,3 @@ <h2 class="h1">Works Galley</h2>
     </div>
   </div>
 </div>
-<router-outlet></router-outlet>
diff --git a/client/src/app/view/work/work.component.ts b/client/src/app/view/work/work.component.ts
index f9449b7..8d921de 100644
--- a/client/src/app/view/work/work.component.ts
+++ b/client/src/app/view/work/work.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import {WorkService} from "../../service/work.service";
 import {environment} from "../../../environments/environment";
+import {Meta, Title} from "@angular/platform-browser";
 
 @Component({
   selector: 'app-work',
@@ -10,13 +11,20 @@ import {environment} from "../../../environments/environment";
 export class WorkComponent implements OnInit {
 
   constructor(
-    private workService:WorkService
+    private workService:WorkService,
+    private titleService:Title,
+    private metaService:Meta
   ) { }
 
   workArr: Array<any>;
   apiBase: string = environment.apiBase;
 
   ngOnInit() {
+    this.titleService.setTitle('Works Gallery - Starry Sea Volunteers Association');
+    this.metaService.updateTag({content:'/assets/icons/starrysea-512x512.png'}, "property='og:image'");
+    this.metaService.updateTag({content: 'Work Gallery - Starry Sea Volunteers Association'}, "property='og:title'");
+    this.metaService.updateTag({content: 'We Are Starry Sea Volunteers Association'}, "property='og:description'");
+    this.metaService.updateTag({content: 'We Are Starry Sea Volunteers Association'}, "name='description'");
     this.workService.fetchWorkList(1,10)
       .subscribe(data=>{
         this.workArr = data.json().response
diff --git a/client/src/index.html b/client/src/index.html
index db0aa47..b011bca 100644
--- a/client/src/index.html
+++ b/client/src/index.html
@@ -11,7 +11,6 @@
   <meta name="keywords" content="Starrysea,星之海,星之海志愿者公会,Starry Sea,Starry Sea Volunteers Association">
   <meta property="og:title" content="Starry Sea International"/>
   <meta property="og:type" content="website" />
-  <meta property="og:url" content="https://starrysea.org" />
   <meta property="og:image" content="/assets/icons/starrysea-512x512.png" />
   <meta property="og:description" content="We Are Starry Sea Volunteers Association" />
   <meta property="og:site_name" content="Starry Sea Volunteers Association"/>