如何动态更新离子中的元标记？这样它就可以在 facebook 社交分享中工作

Question

在离子项目中，只有一个 head 部分我们写了 index.html 页中的所有 meta tag。例如，为了使 Facebook 共享完美运行，我们需要这个 meta tag 给定的 bleow：

<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 with 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 通用的更多详细信息，您可以查看 ionic blog link SSR with Angular Universal And Ionic.

设置后，angular通用需要添加title、add或updatemeta 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 as described in this post by Jeff Delaney. You'll still need to setup server side rendering (SSR) through this artcle 完成了这项工作。最后，确保您的代码 none 引用了 window，这将破坏 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"
   }
}

然后在您的项目文件夹（顶层）中创建文件夹 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 ));
   });
};

如何动态更新离子中的元标记？这样它就可以在 facebook 社交分享中工作

How to update the meta tag in ionic dynamically? So that it can work in facebook social sharing

meta-tags

ionic-framework

ionic4