如何动态更新离子中的元标记？ 以便它可以在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 ));
   });
};