如何動態更新離子中的元標記？ 以便它可以在facebook社交分享中工作

Question

在 ionic 項目中，只有一個head部分用於編寫index.html頁面中的所有meta tag 。 例如，為了讓 Facebook 分享完美工作，我們需要給定這個meta tag ：

<meta property="og:title" content="Title">
<meta property="og:description" content="description">
<meta property="og:image" content="Image Url you want to show">
<meta property="og:url" content="http://yourUrl.com">

那么我們如何從其他頁面更新這個元標記呢？ 例如，如果我們轉到news detail頁面，該頁面的meta tag將相應更改。 那么如何在我的 Ionic4 中使用 angular 項目實現這一點呢？

Answer 1

我相信你可以用類似的方式做到這一點：

var link = document.createElement('meta');
  link.setAttribute('property', 'og:url');
  link.content = document.location;
  document.getElementsByTagName('head')[0].appendChild(link);

Answer 2

在我現有的Ionic 4項目中，我想使用Angular Universal但我遇到了很多錯誤。 所以我使用Ionic 5創建了一個新項目。 並將我以前的所有工作轉移到新的Ionic 5 。 我按照以下步驟將Angular Universal添加到我的項目中。 首先，創建一個應用程序並使用這些命令將其更新到最新版本的 Angular。

ionic start myApp blank --type angular
cd myApp
ng update @angular/core @angular/cli
npm install @angular/animations

然后使用此命令為Angular Universal添加Express engine 。

ng add @nguniversal/express-engine

然后你需要使用這個命令安裝@ionic/angular-server模塊。

npm install @ionic/angular-server@dev

為了在本地主機中進行測試，您的服務器端渲染工作正常，您需要使用此命令。

npm run dev:ssr

有關如何為服務器端渲染設置 Angular Universal 的更多詳細信息，您可以查看ionic blog鏈接SSR with Angular Universal And Ionic 。

設置后，angular Universal 需要添加title 、 add或update meta tag 。 您可以按照我下面給出的示例代碼進行操作：

import { Component, OnInit} from '@angular/core';
import { Title, Meta } from '@angular/platform-browser';
@Component({
  selector: 'app-sample',
  templateUrl: './sample.page.html',
  styleUrls: ['./sample.page.scss'],
})
export class SamplePage implements OnInit {
  constructor(private titleService: Title, private meta: Meta) { }

  ngOnInit() {
    this.titleService.setTitle("Your Title");
    this.meta.updateTag({ property: 'og:url', content:'http://yoururl.com'});
    this.meta.updateTag({ property: 'og:title', content:"Your Title" });
    this.meta.updateTag({ property: 'og:image', content: "your image link"});
    this.meta.updateTag({ property: 'og:description', content:  "description"});
  }

}

現在您的社交分享將完美運行。 因為當它不爬行時，它會獲取帶有數據的元標記。 您需要根據要添加的社交分享更新元標記。

Answer 3

我上周使用 Renderton 完成了這項工作，如Jeff Delaney 在這篇文章中所述。 您仍然需要通過這篇文章設置服務器端渲染 (SSR)。 最后，確保沒有任何代碼引用該窗口，這會破壞 SSR 和 Rendetron。

Answer 4

可以使用 ionic 的預構建鈎子在構建后修改 index.html。 在ionic.config.json文件中添加鈎子

{
  "name": "xxxx",
  "integrations": {
    "capacitor": {}
  },
  "type": "vue",
  "id": "xxxxx",
  "hooks": {
     "build:after": "./deploy/after-build.js"
   }
}

然后在您的項目文件夾（頂級）中使用文件after-build.js創建文件夾deploy ， after-build.js包含以下內容：

var fs = require('fs')
module.exports = (ctx) => {
   const index = `${ctx.project.dir}/dist/index.html`;
   fs.readFile(index , 'utf8', (err, html) => {
      const meta = '<meta name="NEW-META" />';
      html = html.replace(/<meta name="OLD-META".*?">/, meta);
      fs.writeFile(index, html, 'utf8', err => err && console.log( err ));
   });
};