diff --git a/frontend/src/app/bisq/bisq-address/bisq-address.component.ts b/frontend/src/app/bisq/bisq-address/bisq-address.component.ts index 7711c4d3c..1e4f0a178 100644 --- a/frontend/src/app/bisq/bisq-address/bisq-address.component.ts +++ b/frontend/src/app/bisq/bisq-address/bisq-address.component.ts @@ -41,6 +41,7 @@ export class BisqAddressComponent implements OnInit, OnDestroy { document.body.scrollTo(0, 0); this.addressString = params.get('id') || ''; this.seoService.setTitle($localize`:@@bisq-address.component.browser-title:Address: ${this.addressString}:INTERPOLATION:`); + this.seoService.setDescription($localize`:@@meta.description.bisq.address:See current balance, pending transactions, and history of confirmed transactions for BSQ address ${this.addressString}:INTERPOLATION:.`); return this.bisqApiService.getAddress$(this.addressString) .pipe( diff --git a/frontend/src/app/bisq/bisq-block/bisq-block.component.ts b/frontend/src/app/bisq/bisq-block/bisq-block.component.ts index 206a18031..42f62fbc0 100644 --- a/frontend/src/app/bisq/bisq-block/bisq-block.component.ts +++ b/frontend/src/app/bisq/bisq-block/bisq-block.component.ts @@ -88,6 +88,7 @@ export class BisqBlockComponent implements OnInit, OnDestroy { this.isLoading = false; this.blockHeight = block.height; this.seoService.setTitle($localize`:@@bisq-block.component.browser-title:Block ${block.height}:BLOCK_HEIGHT:: ${block.hash}:BLOCK_HASH:`); + this.seoService.setDescription($localize`:@@meta.description.bisq.block:See all BSQ transactions in Bitcoin block ${block.height}:BLOCK_HEIGHT: (block hash ${block.hash}:BLOCK_HASH:).`); this.block = block; }); } diff --git a/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.ts b/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.ts index 8d9ed3c11..7ab742655 100644 --- a/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.ts +++ b/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.ts @@ -36,6 +36,7 @@ export class BisqBlocksComponent implements OnInit { ngOnInit(): void { this.websocketService.want(['blocks']); this.seoService.setTitle($localize`:@@8a7b4bd44c0ac71b2e72de0398b303257f7d2f54:Blocks`); + this.seoService.setDescription($localize`:@@meta.description.bisq.blocks:See a list of recent Bitcoin blocks with BSQ transactions, total BSQ sent per block, and more.`); this.itemsPerPage = Math.max(Math.round(this.contentSpace / this.fiveItemsPxSize) * 5, 10); this.loadingItems = Array(this.itemsPerPage); if (document.body.clientWidth < 670) { diff --git a/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.ts b/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.ts index fe36f1b53..ebcb8a067 100644 --- a/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.ts +++ b/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.ts @@ -29,7 +29,8 @@ export class BisqDashboardComponent implements OnInit { ) { } ngOnInit(): void { - this.seoService.setTitle(`Markets`); + this.seoService.setTitle($localize`:@@meta.title.bisq.markets:Markets`); + this.seoService.setDescription($localize`:@@meta.description.bisq.markets:Explore the full Bitcoin ecosystem with The Mempool Open Projectâ„¢. See Bisq market prices, trading activity, and more.`); this.websocketService.want(['blocks']); this.volumes$ = this.bisqApiService.getAllVolumesDay$() diff --git a/frontend/src/app/bisq/bisq-main-dashboard/bisq-main-dashboard.component.ts b/frontend/src/app/bisq/bisq-main-dashboard/bisq-main-dashboard.component.ts index d1b8480f7..e7e4471c9 100644 --- a/frontend/src/app/bisq/bisq-main-dashboard/bisq-main-dashboard.component.ts +++ b/frontend/src/app/bisq/bisq-main-dashboard/bisq-main-dashboard.component.ts @@ -34,6 +34,7 @@ export class BisqMainDashboardComponent implements OnInit { ngOnInit(): void { this.seoService.resetTitle(); + this.seoService.resetDescription(); this.websocketService.want(['blocks']); this.usdPrice$ = this.stateService.conversions$.asObservable().pipe( diff --git a/frontend/src/app/bisq/bisq-market/bisq-market.component.ts b/frontend/src/app/bisq/bisq-market/bisq-market.component.ts index c9dde4115..f81b4d891 100644 --- a/frontend/src/app/bisq/bisq-market/bisq-market.component.ts +++ b/frontend/src/app/bisq/bisq-market/bisq-market.component.ts @@ -48,7 +48,8 @@ export class BisqMarketComponent implements OnInit, OnDestroy { map(([markets, routeParams]) => { const pair = routeParams.get('pair'); const pairUpperCase = pair.replace('_', '/').toUpperCase(); - this.seoService.setTitle(`Bisq market: ${pairUpperCase}`); + this.seoService.setTitle($localize`:@@meta.title.bisq.market:Bisq market: ${pairUpperCase}`); + this.seoService.setDescription($localize`:@@meta.description.bisq.market:See price history, current buy/sell offers, and latest trades for the ${pairUpperCase} market on Bisq.`); return { pair: pairUpperCase, diff --git a/frontend/src/app/bisq/bisq-stats/bisq-stats.component.ts b/frontend/src/app/bisq/bisq-stats/bisq-stats.component.ts index 5ec5964b4..58819d9cf 100644 --- a/frontend/src/app/bisq/bisq-stats/bisq-stats.component.ts +++ b/frontend/src/app/bisq/bisq-stats/bisq-stats.component.ts @@ -26,6 +26,7 @@ export class BisqStatsComponent implements OnInit { this.websocketService.want(['blocks']); this.seoService.setTitle($localize`:@@2a30a4cdb123a03facc5ab8c5b3e6d8b8dbbc3d4:BSQ statistics`); + this.seoService.setDescription($localize`:@@meta.description.bisq.stats:See high-level stats on the BSQ economy: supply metrics, number of addresses, BSQ price, market cap, and more.`); this.stateService.bsqPrice$ .subscribe((bsqPrice) => { this.price = bsqPrice; diff --git a/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.ts b/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.ts index 4951643c8..1818e105f 100644 --- a/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.ts +++ b/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.ts @@ -48,6 +48,7 @@ export class BisqTransactionComponent implements OnInit, OnDestroy { document.body.scrollTo(0, 0); this.txId = params.get('id') || ''; this.seoService.setTitle($localize`:@@bisq.transaction.browser-title:Transaction: ${this.txId}:INTERPOLATION:`); + this.seoService.setDescription($localize`:@@meta.description.bisq.transaction:See inputs, outputs, transaction type, burnt amount, and more for transaction with txid ${this.txId}:INTERPOLATION:.`); if (history.state.data) { return of(history.state.data); } diff --git a/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.ts b/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.ts index 212030e77..be5455639 100644 --- a/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.ts +++ b/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.ts @@ -79,6 +79,7 @@ export class BisqTransactionsComponent implements OnInit, OnDestroy { ngOnInit(): void { this.websocketService.want(['blocks']); this.seoService.setTitle($localize`:@@add4cd82e3e38a3110fe67b3c7df56e9602644ee:Transactions`); + this.seoService.setDescription($localize`:@@meta.description.bisq.transactions:See recent BSQ transactions: amount, txid, associated Bitcoin block, transaction type, and more.`); this.radioGroupForm = this.formBuilder.group({ txTypes: [this.txTypesDefaultChecked], diff --git a/frontend/src/app/services/seo.service.ts b/frontend/src/app/services/seo.service.ts index 37387e6bf..2584cbaed 100644 --- a/frontend/src/app/services/seo.service.ts +++ b/frontend/src/app/services/seo.service.ts @@ -10,6 +10,7 @@ import { StateService } from './state.service'; export class SeoService { network = ''; baseTitle = 'mempool'; + baseDescription = 'Explore the full Bitcoin ecosystem with The Mempool Open Projectâ„¢.'; constructor( private titleService: Title, @@ -58,6 +59,12 @@ export class SeoService { this.metaService.updateTag({ property: 'og:description', content: newDescription}); } + resetDescription(): void { + this.metaService.updateTag({ name: 'description', content: this.getDescription()}); + this.metaService.updateTag({ name: 'twitter:description', content: this.getDescription()}); + this.metaService.updateTag({ property: 'og:description', content: this.getDescription()}); + } + getTitle(): string { if (this.network === 'testnet') return this.baseTitle + ' - Bitcoin Testnet'; @@ -72,6 +79,15 @@ export class SeoService { return this.baseTitle + ' - ' + (this.network ? this.ucfirst(this.network) : 'Bitcoin') + ' Explorer'; } + getDescription(): string { + if ( (this.network === 'testnet') || (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.'; + if (this.network === 'bisq') + return this.baseDescription + ' See Bisq market prices, trading activity, and more.'; + } + ucfirst(str: string) { return str.charAt(0).toUpperCase() + str.slice(1); }