[英]How to update the meta tag in ionic dynamically? So that it can work in facebook social sharing
In the ionic project, there is only one head
section where we write all the meta tag
that is in the index.html
page.在 ionic 项目中,只有一个
head
部分用于编写index.html
页面中的所有meta tag
。 For example, to make the Facebook sharing work perfectly we need this meta tag
given bleow:例如,为了让 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">
So how can we update this meta tag from other pages?那么我们如何从其他页面更新这个元标记呢? For example, if we go to a
news detail
page the meta tag
of that page will be changed accordingly.例如,如果我们转到
news detail
页面,该页面的meta tag
将相应更改。 So how can I achieve this in my Ionic4 with angular project?那么如何在我的 Ionic4 中使用 angular 项目实现这一点呢?
I believe that you can do it in a way similar to this:我相信你可以用类似的方式做到这一点:
var link = document.createElement('meta');
link.setAttribute('property', 'og:url');
link.content = document.location;
document.getElementsByTagName('head')[0].appendChild(link);
In my existing Ionic 4
project, I want to use Angular Universal
but I got into so many errors.在我现有的
Ionic 4
项目中,我想使用Angular Universal
但我遇到了很多错误。 So I created a new project using Ionic 5
.所以我使用
Ionic 5
创建了一个新项目。 And move all my previous work to the new Ionic 5
.并将我以前的所有工作转移到新的
Ionic 5
。 I follow these steps to add Angular Universal
to my project.我按照以下步骤将
Angular Universal
添加到我的项目中。 At first, create an app and update it to the latest version of Angular using these commands.首先,创建一个应用程序并使用这些命令将其更新到最新版本的 Angular。
ionic start myApp blank --type angular
cd myApp
ng update @angular/core @angular/cli
npm install @angular/animations
Then add Express engine
for Angular Universal
using this command.然后使用此命令为
Angular Universal
添加Express engine
。
ng add @nguniversal/express-engine
Then you need to install the @ionic/angular-server
module using this command.然后你需要使用这个命令安装
@ionic/angular-server
模块。
npm install @ionic/angular-server@dev
For testing in the localhost, your server-side rendering is working correctly you need to use this command.为了在本地主机中进行测试,您的服务器端渲染工作正常,您需要使用此命令。
npm run dev:ssr
For more detailed information on how to setup Angular Universal for server-side-rendering you can see the ionic blog
link SSR with Angular Universal And Ionic .有关如何为服务器端渲染设置 Angular Universal 的更多详细信息,您可以查看
ionic blog
链接SSR with Angular Universal And Ionic 。
After setting, angular universal you need to add title
, add
, or update
meta tag
.设置后,angular Universal 需要添加
title
、 add
或update
meta tag
。 You can follow my sample code given below:您可以按照我下面给出的示例代码进行操作:
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"});
}
}
Now your social share will work perfectly.现在您的社交分享将完美运行。 Because when it crawls not it will get the metatag with data.
因为当它不爬行时,它会获取带有数据的元标记。 You need to update the meta tag based on the social share you want to add.
您需要根据要添加的社交分享更新元标记。
I got this working last week using Renderton as described in this post by Jeff Delaney.我上周使用 Renderton 完成了这项工作,如Jeff Delaney 在这篇文章中所述。 You'll still need to setup server side rendering (SSR) through this artcle .
您仍然需要通过这篇文章设置服务器端渲染 (SSR)。 Lastly, make sure none of your code references the window, which will break SSR and Rendetron.
最后,确保没有任何代码引用该窗口,这会破坏 SSR 和 Rendetron。
One can use ionic's pre build hooks to modify the index.html after building.可以使用 ionic 的预构建钩子在构建后修改 index.html。 Add hooks in your
ionic.config.json
file在
ionic.config.json
文件中添加钩子
{
"name": "xxxx",
"integrations": {
"capacitor": {}
},
"type": "vue",
"id": "xxxxx",
"hooks": {
"build:after": "./deploy/after-build.js"
}
}
and then in your project folder (top level) create folder deploy
with file after-build.js
with following content:然后在您的项目文件夹(顶级)中使用文件
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 ));
});
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.