Merge pull request #5074 from mempool/mononaut/meta-slurper

Preserve site-specific meta title/descriptions/canonical urls
This commit is contained in:
softsimon 2024-05-16 23:19:03 +07:00 committed by GitHub
commit 97817e770f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 17 additions and 17 deletions

View file

@ -5,6 +5,7 @@ import { StateService } from '../../services/state.service';
import { OpenGraphService } from '../../services/opengraph.service';
import { NgbTooltipConfig } from '@ng-bootstrap/ng-bootstrap';
import { ThemeService } from '../../services/theme.service';
import { SeoService } from '../../services/seo.service';
@Component({
selector: 'app-root',
@ -13,12 +14,11 @@ import { ThemeService } from '../../services/theme.service';
providers: [NgbTooltipConfig]
})
export class AppComponent implements OnInit {
link: HTMLElement = document.getElementById('canonical');
constructor(
public router: Router,
private stateService: StateService,
private openGraphService: OpenGraphService,
private seoService: SeoService,
private themeService: ThemeService,
private location: Location,
tooltipConfig: NgbTooltipConfig,
@ -54,11 +54,7 @@ export class AppComponent implements OnInit {
ngOnInit() {
this.router.events.subscribe((val) => {
if (val instanceof NavigationEnd) {
let domain = 'mempool.space';
if (this.stateService.env.BASE_MODULE === 'liquid') {
domain = 'liquid.network';
}
this.link.setAttribute('href', 'https://' + domain + this.location.path());
this.seoService.updateCanonical(this.location.path());
}
});
}

View file

@ -11,8 +11,9 @@ export class SeoService {
network = '';
baseTitle = 'mempool';
baseDescription = 'Explore the full Bitcoin ecosystem® with The Mempool Open Source Project®.';
baseDomain = 'mempool.space';
canonicalLink: HTMLElement = document.getElementById('canonical');
canonicalLink: HTMLLinkElement = document.getElementById('canonical') as HTMLLinkElement;
constructor(
private titleService: Title,
@ -21,6 +22,16 @@ export class SeoService {
private router: Router,
private activatedRoute: ActivatedRoute,
) {
// save original meta tags
this.baseDescription = metaService.getTag('name=\'description\'')?.content || this.baseDescription;
this.baseTitle = titleService.getTitle()?.split(' - ')?.[0] || this.baseTitle;
try {
const canonicalUrl = new URL(this.canonicalLink?.href || '');
this.baseDomain = canonicalUrl?.host;
} catch (e) {
// leave as default
}
this.stateService.networkChanged$.subscribe((network) => this.network = network);
this.router.events.pipe(
filter(event => event instanceof NavigationEnd),
@ -72,11 +83,7 @@ export class SeoService {
}
updateCanonical(path) {
let domain = 'mempool.space';
if (this.stateService.env.BASE_MODULE === 'liquid') {
domain = 'liquid.network';
}
this.canonicalLink.setAttribute('href', 'https://' + domain + path);
this.canonicalLink.setAttribute('href', 'https://' + this.baseDomain + path);
}
getTitle(): string {
@ -94,10 +101,7 @@ export class SeoService {
}
getDescription(): string {
if ( (this.network === 'testnet') || (this.network === 'testnet4') || (this.network === 'signet') || (this.network === '') || (this.network == 'mainnet') )
return this.baseDescription + ' See the real-time status of your transactions, browse network stats, and more.';
if ( (this.network === 'liquid') || (this.network === 'liquidtestnet') )
return this.baseDescription + ' See Liquid transactions & assets, get network info, and more.';
return this.baseDescription;
}
ucfirst(str: string) {