Skip to content

Commit 9bac860

Browse files
FrancescoMolinaroFrancescoMolinaro
committed
[DSC-1775] port fixes for open graph metadata
1 parent 4ad390d commit 9bac860

2 files changed

Lines changed: 56 additions & 24 deletions

File tree

‎src/app/core/metadata/metadata.service.ts‎

Lines changed: 44 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ import {
1111
concat as observableConcat,
1212
EMPTY,
1313
Observable,
14-
of as observableOf
14+
of as observableOf,
15+
of
1516
} from 'rxjs';
1617
import { filter, map, mergeMap, switchMap, take } from 'rxjs/operators';
1718

@@ -42,7 +43,7 @@ import { getDownloadableBitstream } from '../shared/bitstream.operators';
4243
import { APP_CONFIG, AppConfig } from '../../../config/app-config.interface';
4344
import { SchemaJsonLDService } from './schema-json-ld/schema-json-ld.service';
4445
import { ITEM } from '../shared/item.resource-type';
45-
import { DOCUMENT, isPlatformServer } from '@angular/common';
46+
import { DOCUMENT, isPlatformBrowser, isPlatformServer } from '@angular/common';
4647
import { Root } from '../data/root.model';
4748
import { environment } from '../../../environments/environment';
4849

@@ -85,6 +86,7 @@ export class MetadataService {
8586

8687
private fallbackImagePath = environment.metaTags.defaultLogo;
8788
private defaultPageDescription = environment.metaTags.defaultDescription;
89+
private origin: string;
8890

8991
constructor(
9092
private router: Router,
@@ -122,6 +124,12 @@ export class MetadataService {
122124
}
123125

124126
private processRouteChange(routeInfo: any): void {
127+
this.rootService.findRoot().pipe(
128+
getFirstCompletedRemoteData(),
129+
filter(data => !!data),
130+
map((rootRD: RemoteData<Root>) => rootRD?.payload?.dspaceUI)
131+
).subscribe(uiOrigin => this.origin = uiOrigin);
132+
125133
this.clearMetaTags();
126134

127135
if (hasValue(routeInfo.data.value.dso) && hasValue(routeInfo.data.value.dso.payload)) {
@@ -174,20 +182,16 @@ export class MetadataService {
174182
private setDSOMetaTags(): void {
175183
const openGraphType = this.getOpenGraphType();
176184

177-
this.setTitleTag();
178-
this.setDescriptionTag();
185+
this.setTitleTags();
186+
this.setDescriptionTags();
179187

180-
this.setOpenGraphTitleTag();
181-
this.setOpenGraphDescriptionTag();
182188
this.setOpenGraphImageTag();
183189
this.setOpenGraphUrlTag();
184190

185191
if (openGraphType) {
186192
this.setOpenGraphTypeTag(openGraphType);
187193
}
188194

189-
this.setTwitterTitleTag();
190-
this.setTwitterDescriptionTag();
191195
this.setTwitterImageTag();
192196
this.setTwitterSummaryCardTag();
193197

@@ -227,21 +231,31 @@ export class MetadataService {
227231
}
228232

229233
/**
230-
* Add <meta name="title" ... > to the <head>
234+
* Add <meta name="title" ... > and
235+
* <meta name="og:title" ... > and
236+
* <meta name="twitter:title" ... > to the <head>
231237
*/
232-
private setTitleTag(title?: string): void {
238+
private setTitleTags(title?: string): void {
233239
const value = title ?? this.dsoNameService.getName(this.currentObject.getValue());
240+
234241
this.addMetaTag('title', value);
242+
this.addMetaTag('og:title', value, true);
243+
this.addMetaTag('twitter:title', value, true);
244+
235245
this.title.setTitle(value);
236246
}
237247

238248
/**
239-
* Add <meta name="description" ... > to the <head>
249+
* Add <meta name="description" ... > and
250+
* <meta name="og:description" ... > and
251+
* <meta name="twitter:description" ... > to the <head>
240252
*/
241-
private setDescriptionTag(description?: string): void {
253+
private setDescriptionTags(description?: string): void {
242254
// TODO: truncate abstract
243255
const value = description ?? this.getMetaTagValue('dc.description.abstract');
244256
this.addMetaTag('description', value);
257+
this.addMetaTag('og:description', value, true);
258+
this.addMetaTag('twitter:description', value, true);
245259
}
246260

247261
/**
@@ -428,7 +442,7 @@ export class MetadataService {
428442
* Add <meta name="og:type" ... > to the <head>
429443
*/
430444
private setOpenGraphTypeTag(type: string): void {
431-
this.addMetaTag('og:type', type);
445+
this.addMetaTag('og:type', type ?? 'website', true);
432446
}
433447

434448
/**
@@ -502,7 +516,7 @@ export class MetadataService {
502516
* @private
503517
*/
504518
private getBitstreamFromThumbnail(item: Item): Observable<Bitstream> {
505-
return item.thumbnail.pipe(
519+
return hasValue(item.thumbnail) ? item.thumbnail.pipe(
506520
getFirstCompletedRemoteData(),
507521
map((thumbnailRD) => {
508522
if (thumbnailRD.hasSucceeded && isNotEmpty(thumbnailRD.payload)) {
@@ -512,7 +526,7 @@ export class MetadataService {
512526
}
513527
}),
514528
getDownloadableBitstream(this.authorizationService)
515-
);
529+
) : of(null);
516530
}
517531

518532
private setPrimaryBitstreamInBundleTag(tag: string): void {
@@ -532,7 +546,8 @@ export class MetadataService {
532546
// Use the found link to set the <meta> tag
533547
this.addMetaTag(
534548
tag,
535-
new URLCombiner(this.hardRedirectService.getCurrentOrigin(), link).toString()
549+
new URLCombiner(this.getUrlOrigin(), link).toString(),
550+
true
536551
);
537552
} else {
538553
this.addFallbackImageToTag(tag);
@@ -672,10 +687,11 @@ export class MetadataService {
672687
return this.currentObject.value.allMetadataValues(keys);
673688
}
674689

675-
private addMetaTag(name: string, content: string): void {
690+
private addMetaTag(name: string, content: string, isProperty = false): void {
676691
if (content) {
677-
const tag = { name, content } as MetaDefinition;
678-
this.meta.addTag(tag);
692+
const tag = isProperty ? {property: name, content} as MetaDefinition
693+
: { name, content } as MetaDefinition;
694+
this.meta.updateTag(tag);
679695
this.storeTag(name);
680696
}
681697
}
@@ -697,7 +713,7 @@ export class MetadataService {
697713
take(1)
698714
).subscribe((tagsInUse: string[]) => {
699715
for (const name of tagsInUse) {
700-
this.meta.removeTag('name=\'' + name + '\'');
716+
this.meta.updateTag({name, content: ''});
701717
}
702718
this.store.dispatch(new ClearMetaTagAction());
703719
});
@@ -706,7 +722,8 @@ export class MetadataService {
706722
private addFallbackImageToTag(tag: string) {
707723
this.addMetaTag(
708724
tag,
709-
new URLCombiner(this.hardRedirectService.getCurrentOrigin(), this.fallbackImagePath).toString()
725+
new URLCombiner(this.getUrlOrigin(), this.fallbackImagePath).toString(),
726+
true
710727
);
711728
}
712729

@@ -746,8 +763,8 @@ export class MetadataService {
746763
const pageUrl = new URLCombiner(this.hardRedirectService.getCurrentOrigin(), this.router.url).toString();
747764
const genericPageOpenGraphType = 'website';
748765

749-
this.setTitleTag(pageDocumentTitle);
750-
this.setDescriptionTag(this.defaultPageDescription);
766+
this.setTitleTags(pageDocumentTitle);
767+
this.setDescriptionTags(this.defaultPageDescription);
751768

752769
this.setOpenGraphTitleTag(pageDocumentTitle);
753770
this.setOpenGraphDescriptionTag(this.defaultPageDescription);
@@ -761,4 +778,8 @@ export class MetadataService {
761778
this.setTwitterImageTag();
762779
this.setTwitterSummaryCardTag();
763780
}
781+
782+
private getUrlOrigin(): string {
783+
return isPlatformBrowser(this.platformId) ? this.hardRedirectService.getCurrentOrigin() : this.origin;
784+
}
764785
}

‎src/index.html‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,23 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html prefix="og: https://ogp.me/ns#">
33

44
<head>
55
<meta charset="UTF-8">
66
<base href="/">
77
<title>DSpace-CRIS</title>
88
<meta name="viewport" content="width=device-width,minimum-scale=1">
99
<meta http-equiv="cache-control" content="no-store">
10+
<meta name="title" content="">
11+
<meta name="description" content="">
12+
<meta property="og:title" content="">
13+
<meta property="og:description" content="">
14+
<meta property="og:image" content="">
15+
<meta property="og:url" content="">
16+
<meta property="og:type" content="">
17+
<meta property="twitter:title" content="">
18+
<meta property="twitter:description" content="">
19+
<meta property="twitter:image" content="">
20+
<meta property="twitter:card" content="">
1021
</head>
1122

1223
<body>

0 commit comments

Comments
 (0)